Display icon in a template field using a snippet

  • 1
  • Problem
  • Updated 1 year 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'){
    $('#commodIcon').addClass('fa-lightbulb-o');
}else{
    $('#commodIcon').addClass('fa-fire');
}

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 1 year ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

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

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">
    <models>
        <model id="Account" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="Type"/>
            </fields>
            <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-1Of2_P-84">
            <maintitle>
                <template>{{Name}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.label}}</template>
            </subtitle>
            <actions>
                <action type="savecancel" window="self" uniqueid="sk-1Of2_O-83"/>
            </actions>
        </pagetitle>
        <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-1Of2_e-95">
            <columns>
                <column width="100%">
                    <sections>
                        <section title="Basics" collapsible="no">
                            <fields>
                                <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>
                                </field>
                            </fields>
                        </section>
                    </sections>
                </column>
            </columns>
        </basicfieldeditor>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript>
            <jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
        var mod = skuid.model.map().Account;
        var uaCommod = mod.data[0].Type;
        console.log(uaCommod);
        if(uaCommod === 'Customer - Direct'){
            $('#commodIcon').addClass('ui-button-icon-primary ui-icon sk-icon-campaign sk-icon inline');
        }else{
            $('#commodIcon').addClass('ui-button-icon-primary ui-icon sk-icon-prices sk-icon inline');
        }
});
})(skuid);</jsitem>
        </javascript>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Thanks,

Bill