Display icon in a template field using a snippet

edited October 26, 2017 in Questions
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?

Comments

  • Bill McCulloughBill McCullough 💎💎
    edited October 26, 2017
    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
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!