Display icon in a template field using a snippet

  • 1
  • Problem
  • Updated 2 years ago
  • Solved
I am trying to display an icon in the template field base on what account it is. 
In the template field I have the following html:
<div class="nx-pagetitle-maintitle"><span id="commodIcon" class="ui-icon sk-icon sk-navigation-item-icon inline"></span> {{LDC__r.Name}} </div>
Then an inline-snippet :
var params = arguments[0],
$ = skuid.$;
var uaCommod = skuid.model.getModel('UtilityAccount').getFirstRow().Commodity__r.Name;
if(uaCommod === 'Electricity'){

When I load my page, it will show the right icon for a second and then it gets switched to a triangle with exclamation point in the middle. Does anyone has any ideas about what the problem maybe?

Photo of William Zhong

William Zhong

  • 70 Points

Posted 2 years ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 13,612 Points 10k badge 2x thumb

Maybe change your code to run on page load (i.e. 'Inline' vs. 'Inline - snippet')?  Here is a sample page that is working.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Account">
        <model id="Account" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" type="">
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="Type"/>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
        <pagetitle model="Account" uniqueid="sk-1Of2_P-84">
                <action type="savecancel" window="self" uniqueid="sk-1Of2_O-83"/>
        <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-1Of2_e-95">
                <column width="100%">
                        <section title="Basics" collapsible="no">
                                <field id="Name" uniqueid="sk-1Of2_W-90"/>
                                <field uniqueid="sk-1Of64C-123" id="Type" valuehalign="" type=""/>
                                <field uniqueid="sk-1OfFwv-155" type="COMBO" valuehalign="" editmodebehavior="autopopup" allowhtml="true">
                                    <label>Template Field</label>
                                    <template>&lt;div class="nx-pagetitle-maintitle"&gt;&lt;span id="commodIcon"&gt;&lt;/span&gt;{{Name}}&lt;/div&gt;</template>
            <jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
        var mod = skuid.model.map().Account;
        var uaCommod = mod.data[0].Type;
        if(uaCommod === 'Customer - Direct'){
            $('#commodIcon').addClass('ui-button-icon-primary ui-icon sk-icon-campaign sk-icon inline');
            $('#commodIcon').addClass('ui-button-icon-primary ui-icon sk-icon-prices sk-icon inline');
        <styleitem type="background" bgtype="none"/>