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:

 <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;

<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:

# 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

mrbdrm wrote

i use this in my custom query:

# 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

weblike wrote

mrbdrm wrote

i use this in my custom query:

# 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

weblike wrote

mrbdrm wrote

i use this in my custom query:

# 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/framework/templates/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

aware_support wrote
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/framework/templates/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!