Need some help with a field renderer example for displaying an icon as table data

Questions
,
1

I am attempting to show an icon as table data when a record meets certain criteria. I found the documentation here:
https://docs.skuid.com/v10.0.4/en/skuid/javascript/snippets/table-custom-field.html
and the code shared under ‘display an icon’ works. how do I make this work with a font awesome icon though?

Here is the code I have (including the working provided example)

var field = arguments[0], value = arguments[1], $ = skuid.$;

var tableCell = field.element;
//var tableCellDiv = $(‘

’).addClass(‘ui-silk’).appendTo(tableCell);
var tableCellDiv = $(‘
’).addClass(‘fa’).appendTo(tableCell);

if(value === true){
//tableCellDiv.addClass(‘sk-icon-refresh’);
tableCellDiv.addClass(‘sk-webicon-font-awesome:refresh’);
console.log(‘value was true’);
} else {
//tableCellDiv.removeClass(‘ui-silk’);
tableCellDiv.removeClass(‘fa’);
}

The commented out lines are the working example for the silk refresh icon. I tried inspecting the element in a different part of the page to find out what class I’d need for tableCellDiv in the declaration, but didn’t find anything useful. looking to replace ‘fa’ which is not the correct class. I also tried ‘sk-webicon’ and ‘sk-webicon-font-awesome’…

2

I think there is a more straightforward way of doing this. You can add a template to the table and show the icon by calling its class name in a span. Something like this:

Then you can add conditional a conditional wrapper so that it only shows when a certain value is true. Here is the syntax that will show the icon only when “FieldValue” is truthy.

{{#FieldValue}}{{countId}} {{/FieldValue}}

If you want to get more complicated with your evaluation, add a UI Only formula field that results in a Boolean. “If Ammount > 100, True, False.”

And finally if you want to get really complicated build a Case statement in the UI Only formula field. The result of each case should be the icon name. “sk-icon-add, sk-icon-error…” Then merge that UI Only formula field in your template code like this:

Lots of options… No Code. No Kidding…

3

Ok, going off of your example I have this:

{{#Autopublishing }}{{/Autopublishing}}

Autopublishing is a formula field that evaluates to a true of false, it’s the field that is presented on the table in what I shared earlier.

If I put text after the first {{#Autopublishing}} it shows that when it should, but it isn’t showing the contents of the span though.

4

You do have a space after AutoPublishing in your first example (with the span).  That would gum things up. 

I also think the class code should be  class=“sk-icon fa-refresh”     

I generally get the icon displaying all the time before I work on the conditional display.  

5

Having sk-icon in there causes it to give me the green checkbox instead of the refresh icon regardless of whether ‘fa-refresh’ is included or not.
{{#Autopublishing}}{{/Autopublishing}}

omitting the sk-icon gives me an image, but it’s not the icon I expect


the row starts with the font awesome icon I want, the skuid example is the green one, the next thing is what that template gives me

6

Jerry,

Here is a sample that I used in one of my pages. I used a

tag instead of a tag and I was more specific in the class.

{{^IsFrozen}}<div class="nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible sk-icon-save" role="button" tabindex="0" title="{{{Name}}} can access the portal"></div>{{/IsFrozen}}
{{#IsFrozen}}<div class="nx-skootable-buttonicon sk-icon inline nx-skootable-buttonicon-visible ui-silk-lock" role="button" tabindex="0" title="{{{Name}}} has no access"></div>{{/IsFrozen}}

Thanks,

Bill
7

Bill, thanks for the suggestion. I’m still missing something though. Both what you provided and what Rob provided work. I get an icon. What I need though is not a silk or standard icon, but the one from the font awesome icon set.

8

Jerry,

Try adding a row action and pick the icon you want to display in the Template field. Preview the page then ‘right-click’ on the icon and inspect the element. It looks like the way you reference some of the other icon sets is different.

This HTML will show the ‘scales of justice’. The sizing is off, however.

Thanks,

Bill

9

is the resource you have listed one you had to include? I’m not getting anything when put what you have in a template field.

10

Jerry,

I was able to add the HTML into a template field on table. I am using Skuid 11.1.1 with the default theme on the page. Here is a sample page.

Thanks,

Bill

{{Model.labelPlural}} Home Template Field &lt;svg viewBox="0 0 24 24"&gt;&lt;use xlink:href="/resource/skuid__IconsSVG/font-awesome/font-awesome.min.svg#balance-scale"&gt;&lt;/use&gt;&lt;/svg&gt;
1 Like