Display icon in a template field using a snippet

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:

{{LDC__r.Name}}
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?


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>&amp;lt;div class="nx-pagetitle-maintitle"&amp;gt;&amp;lt;span id="commodIcon"&amp;gt;&amp;lt;/span&amp;gt;{{Name}}&amp;lt;/div&amp;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