Highlight fields that are required and empty

  • 1
  • Question
  • Updated 2 months ago
  • In Progress
I'd like to indicate that a field is required only if the field is null.  So - the field label would be red until someone starts typing in it, and then it would be formatted to look like the non-required field labels.  Any suggestions about how I might accomplish this?
Photo of Elissa Bradley

Elissa Bradley

  • 1,744 Points 1k badge 2x thumb

Posted 2 months ago

  • 1
Photo of Elissa Bradley

Elissa Bradley

  • 1,744 Points 1k badge 2x thumb
Here's what I've tried - a Custom Renderer snippet on the fields that I want to require.  I've successfully applied the CSS class to the fields, but the snippet isn't doing anything.  



var $ = skuid.$;
var field = arguments[0], 
value = skuid.utils.decodeHTML(arguments[1]);
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field, value);
    
    if (field.mode == 'edit' && value === null) { 
    field.element.addClass("requiredCSS"); 
    }


CSS class: 

.requiredCSS .nx-basicfieldeditor-item-label {
   color: red;
}
Photo of Bill McCullough

Bill McCullough, Champion

  • 13,128 Points 10k badge 2x thumb
Elissa,

Try this page in your org.  It is a V1 page.  It combines a Formula field along with a snippet to rerender the field editor.  You replace the label with some 'merge syntax' that shows/hides the red label based on whether the field is empty.  You would need 1 Formula field per field that you want to detect if it is empty.  Run the snippet for each field change.

Here is the label:

{{#FirstNameEmpty}}<font color="red">First Name</font>{{/FirstNameEmpty}}{{^FirstNameEmpty}}First Name{{/FirstNameEmpty}}

Here is the formula field:

IF(ISBLANK({{FirstName}}),true,false)

Here is the sample page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
    <models>
<model id="Contact" limit="1" query="false" createrowifnonefound="true" datasource="salesforce" sobject="Contact">
    <fields>
        <field id="RecordTypeId"/>
        <field id="FirstName"/>
        <field id="LastName"/>
        <field id="FirstNameEmpty" uionly="true" displaytype="FORMULA" label="FirstNameEmpty" ogdisplaytype="TEXT" readonly="true" returntype="BOOLEAN">
            <formula>IF(ISBLANK({{FirstName}}),true,false)</formula>
        </field>
    </fields>
    <conditions/>
    <actions>
        <action>
            <actions>
                <action type="custom" snippet="rerenderFieldEditor"/>
            </actions>
            <events>
                <event>row.updated</event>
            </events>
            <fields>
                <field>FirstName</field>
            </fields>
        </action>
    </actions>
</model>
</models>
    <components>
<pagetitle model="Contact" uniqueid="sk-3_l9-169">
    <maintitle>
        <template>{{Name}}</template>
    </maintitle>
    <subtitle>
        <template>{{Model.label}}</template>
    </subtitle>
    <actions>
        <action type="savecancel" label="New Button" uniqueid="sk-3_lA-177">
            <savehotkeys>
                <hotkey modifiers="ctrl" key="s"/>
            </savehotkeys>
        </action>
    </actions>
</pagetitle>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Contact" uniqueid="sk-3_l5-139" mode="edit">
    <columns>
        <column width="50%" uniqueid="sk-3_l5-135">
            <sections>
                <section title="Section A" uniqueid="sk-3_l5-136" collapsible="no">
                    <fields>
                        <field uniqueid="sk-3_l5-141" id="FirstName">
                            <label>{{#FirstNameEmpty}}&lt;font color="red"&gt;First Name&lt;/font&gt;{{/FirstNameEmpty}}{{^FirstNameEmpty}}First Name{{/FirstNameEmpty}}</label>
                        </field>
                        <field uniqueid="sk-3_l5-142" id="LastName"/>
                    </fields>
                </section>
            </sections>
        </column>
        <column width="50%" uniqueid="sk-3_l5-137">
            <sections>
                <section title="Section B" uniqueid="sk-3_l5-138">
                    <fields/>
                </section>
            </sections>
        </column>
    </columns>
</basicfieldeditor>
</components>
    <resources>
        <labels/>
        <javascript>
<jsitem location="inlinesnippet" name="rerenderFieldEditor" cachelocation="false">var params = arguments[0],
    $ = skuid.$;
skuid.$C('sk-3_l5-139').render();</jsitem>
</javascript>
        <css/>
        <actionsequences uniqueid="sk-3_l2-107"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Thanks,

Bill



(Edited)