Highlight fields that are required and empty

  • 1
  • Question
  • Updated 1 year 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

  • 2,434 Points 2k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Elissa Bradley

Elissa Bradley

  • 2,434 Points 2k 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) { 

CSS class: 

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

Bill McCullough, Champion

  • 13,822 Points 10k badge 2x thumb

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:


Here is the sample page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<model id="Contact" limit="1" query="false" createrowifnonefound="true" datasource="salesforce" sobject="Contact">
        <field id="RecordTypeId"/>
        <field id="FirstName"/>
        <field id="LastName"/>
        <field id="FirstNameEmpty" uionly="true" displaytype="FORMULA" label="FirstNameEmpty" ogdisplaytype="TEXT" readonly="true" returntype="BOOLEAN">
                <action type="custom" snippet="rerenderFieldEditor"/>
<pagetitle model="Contact" uniqueid="sk-3_l9-169">
        <action type="savecancel" label="New Button" uniqueid="sk-3_lA-177">
                <hotkey modifiers="ctrl" key="s"/>
<basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Contact" uniqueid="sk-3_l5-139" mode="edit">
        <column width="50%" uniqueid="sk-3_l5-135">
                <section title="Section A" uniqueid="sk-3_l5-136" collapsible="no">
                        <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 uniqueid="sk-3_l5-142" id="LastName"/>
        <column width="50%" uniqueid="sk-3_l5-137">
                <section title="Section B" uniqueid="sk-3_l5-138">
<jsitem location="inlinesnippet" name="rerenderFieldEditor" cachelocation="false">var params = arguments[0],
    $ = skuid.$;
        <actionsequences uniqueid="sk-3_l2-107"/>
        <styleitem type="background" bgtype="none"/>