Custom Query - how to use attribute icons

[weblike]

Hi all,

Does anyone knows how to display only the attribute's icon in a custom Query?

I have attribute "Actions" as Plain Text with this options "New record", "Modification"

New record has icon -> fa fa-plus-circle
Modification has icon -> fa fa-pencil

In normal query we can choose to display only the icon, but in custom query how can I accomplish this?

the code is this:

Code: Select all

 <div class="row" style="border-bottom: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5; padding:5px">
          <div style="width: 94px;float: left;overflow: hidden;">
              <div style="width: 50px;height: 50px;float: left;overflow: hidden;margin: 0 10px 5px 0; border-radius: 50%;">
                 {Actions}
              </div> 
          </div>
         <div style=" margin-left: 94px; margin-top:-10px">
         <h5>{WhoChangedSC} <small>&nbsp;{Date}</small> </h5>
              {Changes}
         </div>
    </div>

thx,

[ORS61]

Also I want to know, if there is a simple solution. I'm achieving this by adding two extra attributes to the AppLog BO.

Attributes:
IconColor
IconFontAwasome

Business Rules:
IconCalculation IF NEW
If AppLog.Action='New' Then
AppLog.IconFontAwasome='fa fa-plus'
AppLog.IconColor='#256117'

Icon Calculation IF EDIT
If AppLog.Action='Edit' Then
AppLog.IconFontAwasome='fa fa-pencil'
AppLog.IconColor='#564208'

Icon Calculation IF DELETE
If AppLog.Action='Delete' Then
AppLog.IconFontAwasome='fa fa-trash'
AppLog.IconColor='#EC1010'

Then using attributes in Custom query like below;

Code: Select all

<a class="list-group-item oos-default" style="padding-top: 10px; padding-bottom: 10px;">
<h4 class="list-group-item-grid-heading-small" style="display:inline-block; line-height: 22px;  width:220px">
<i style="color:{IconColor}; font-size:20px; vertical-align: bottom; margin-right:5px;" class="{IconFontAwasome}"></i>&nbsp;&nbsp;
<b>Date: </b>{TimeStamp} <br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Action By: </b>{sc_UserFullName}
</h4>
<h4 class="list-group-item-grid-small-nomargin" 
style="line-height: 22px; display:inline-block; font-size: 15px; margin-left: 32px;">
<b>{Action}</b> - {ActionObject}<br />
{Summary}
</h4>
</a>

Not an ideal way but works. Waiting experts to provide a better solution on this.

[hpl123]

I do something similar to what ORS61 does, I do populate HTML code instead though in the attribute and then reference to an external image file via the HTML code (I needed more icons than the Font-Awesome ones).

Nice share ORS61 by the way, thanks.

[weblike]

Yes, thx a lot for sharing this....very helpful...

[mrbdrm]

i use this in my custom query:

Code: Select all

# if(data["Gender"] == 'male') { #
<div class="k-block k-shadow" style=" border-right:solid lightblue 5px;">
		  {Name}
</div>
# } #
# if(data["Gender"] == 'female') { #
<div class="k-block k-shadow" style=" border-right:solid lightpink 5px;">
		  {Name}
</div>
# } #

[weblike]

i use this in my custom query:

Code: Select all

# if(data["Gender"] == 'male') { #
<div class="k-block k-shadow" style=" border-right:solid lightblue 5px;">
		  {Name}
</div>
# } #
# if(data["Gender"] == 'female') { #
<div class="k-block k-shadow" style=" border-right:solid lightpink 5px;">
		  {Name}
</div>
# } #

You put this in Advanced Scripts...correct?

[mrbdrm]

i use this in my custom query:

Code: Select all

# if(data["Gender"] == 'male') { #
<div class="k-block k-shadow" style=" border-right:solid lightblue 5px;">
		  {Name}
</div>
# } #
# if(data["Gender"] == 'female') { #
<div class="k-block k-shadow" style=" border-right:solid lightpink 5px;">
		  {Name}
</div>
# } #

You put this in Advanced Scripts...correct?

No
add it with the rest of your custom query code

[weblike]

Well this is very very helpful, didn't knew that we can put such a code there...

Thx a lot....

I owe you guys a 6 beer pack/ each

[ORS61]

You are welcome. But, thanks to mrbdrm. Now I can use conditions in custom queries like html cells.

[BenHayat]

i use this in my custom query:

Code: Select all

# if(data["Gender"] == 'male') { #
<div class="k-block k-shadow" style=" border-right:solid lightblue 5px;">
		  {Name}
</div>
# } #
# if(data["Gender"] == 'female') { #
<div class="k-block k-shadow" style=" border-right:solid lightpink 5px;">
		  {Name}
</div>
# } #

You put this in Advanced Scripts...correct?

Where did you get this syntax from?

[hpl123]

Nice Mrbdrm

[BLOMASKY]

Hummm, I have not used a custom query yet. Wonder if I am missing out on some additional flexibility. It seems like this would be most useful if someone (vlad?) created a video about the features and uses of a custom query.


Bruce

[BenHayat]

10+ for a video on the benefits of custom Query.

[aware_support]

Custom queries are very powerful.

The video will be done. In the meantime you can look up Kendo UI documentation on templates:
http://docs.telerik.com/kendo-ui/framew ... s/overview

Kendo UI templates are what Aware IM uses in custom queries. The syntax is the same as described above with one addition - when referring to data you can refer to attributes of a business object that the query queries on using curly brackets without using object name:
{FirstName}

[BenHayat]

Custom queries are very powerful.

The video will be done. In the meantime you can look up Kendo UI documentation on templates:
http://docs.telerik.com/kendo-ui/framew ... s/overview

Kendo UI templates are what Aware IM uses in custom queries. The syntax is the same as described above with one addition - when referring to data you can refer to attributes of a business object that the query queries on using curly brackets without using object name:
{FirstName}

THANK YOU!