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

  • 1
  • Question
  • Updated 9 months ago
  • In Progress
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)

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

var tableCell = field.element;
//var tableCellDiv = $('<div>').addClass('ui-silk').appendTo(tableCell);
var tableCellDiv = $('<div>').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');
}
</code>

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'...
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
  • like a turnip

Posted 9 months ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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:  <span class="sk-icon sk-icon-error"  style="float: right;"></span>

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}} <span class="sk-icon sk-icon-add"  style="float: right;"></span>{{/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: 
<span class="sk-icon {{UIOnlyField}}"  style="float: right;"></span>

Lots of options... No Code.  No Kidding... 
  
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Jerry,

Here is a sample that I used in one of my pages.  I used a <div> tag instead of a <span> 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
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
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.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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.

<svg viewBox="0 0 24 24"><use xlink:href="/resource/skuid__IconsSVG/font-awesome/font-awesome.min.svg#balance-scale"></use></svg>

Thanks,

Bill
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
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.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Contact">
    <models>
        <model id="Contact" limit="5" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Contact">
            <fields>
                <field id="Name"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Contact" uniqueid="sk-2NB277-199">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="savecancel" uniqueid="sk-2NB276-197"/>
            </actions>
        </pagetitle>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="5" createrecords="true" model="Contact" mode="read" allowcolumnreordering="true" uniqueid="sk-2NB27U-209">
            <fields>
                <field id="Name" hideable="true" uniqueid="fi-2NBBYa-290"/>
                <field type="COMBO" hideable="true" uniqueid="fi-2NBCHv-306" allowhtml="true">
                    <label>Template Field</label>
                    <template>&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;</template>
                </field>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
        </skootable>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
        <actionsequences uniqueid="sk-2NB56x-254"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>