Placeholder text in field editor/table

Craig RosenbaumCraig Rosenbaum ✭✭✭✭
edited September 12, 2019 in Questions
Is it possible to put custom placeholder text in a field editor field or a table? I messed around with CSS but couldn't figure it out.

Comments

  • Rob HatchRob Hatch 💎💎💎
    edited September 1, 2016
    A few ideas: 

    1. Default value for the field in salesforce setup. 
    2. Add a condition to the model for the field you want  - for a new record this will prepopulate the value from the condition. 
    This text will be a default value,  rather than a placeholder,  but it may be sufficient. 




  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited September 12, 2019
    Thanks for the suggestions.

    I'm not really looking for a default value. More of an inline help like the placeholder text on the search boxes on tables. I found some javascript to add that, but would need an id field for the <input> tag and did not see where I could add one. Do you know of any way to add placeholder text?
  • edited September 12, 2019
    Thanks for the distraction!

    <skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
          <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account">
             <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="BillingCity"/>
                <field id="BillingCountry"/>
                <field id="BillingState"/>
                <field id="BillingStreet"/>
                <field id="BillingPostalCode"/>
             </fields>
             <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
             </conditions>
             <actions/>
          </model>
       </models>
       <components>
          <pagetitle model="Account">
             <maintitle>
                <template>{{Name}}</template>
             </maintitle>
             <subtitle>
                <template>{{Model.label}}</template>
             </subtitle>
             <actions>
                <action type="delete"/>
                <action type="clone"/>
                <action type="share"/>
                <action type="savecancel" window="self"/>
             </actions>
          </pagetitle>
          <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="edit" buttonposition="" layout="">
             <columns>
                <column width="50%">
                   <sections>
                      <section title="Basics">
                         <fields>
                            <field id="Name" valuehalign="" type=""/>
                         </fields>
                      </section>
                      <section title="Billing Details" collapsible="no">
                         <fields>
                            <field id="BillingStreet" valuehalign="" type="" cssclass="needPlaceholder" snippet=""/>
                            <field id="BillingCity" valuehalign="" type="" snippet="" cssclass="needPlaceholder"/>
                            <field id="BillingState" valuehalign="" type="" snippet="" cssclass="needPlaceholder"/>
                            <field id="BillingPostalCode" valuehalign="" type="" snippet="" cssclass="needPlaceholder"/>
                            <field id="BillingCountry" valuehalign="" type="" snippet="" cssclass="needPlaceholder"/>
                         </fields>
                      </section>
                   </sections>
                </column>
                <column width="50%">
                   <sections>
                      <section title="System Info">
                         <fields>
                            <field id="CreatedDate" valuehalign="" type="" readonly="true"/>
                         </fields>
                      </section>
                   </sections>
                </column>
             </columns>
          </basicfieldeditor>
       </components>
       <resources>
          <labels/>
          <css/>
          <javascript>
             <jsitem location="inline" name="addPlaceholder" cachelocation="false" url="">(function(skuid){
    var $ = skuid.$;
    $(document.body).one('pageload',function(){
            $('.needPlaceholder .nx-field input, .nx-field textarea').each(function(i, item){
                var placeholder = $(item).parent().parent().find('.nx-basicfieldeditor-item-label').text();
                item.setAttribute("placeholder", "Enter " + (placeholder ? placeholder : "value"));
            });
    });
    })(skuid);</jsitem>
          </javascript>
       </resources>
    </skuidpage>
  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited November 12, 2015
    That's awesome for a field editor! Any magic for a table?
  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited November 12, 2015
    Actually never mind,  got it working with a table. I had my JS set to In-Line (Snippet).

    Thank you very much, this is awesome.
  • Rob HatchRob Hatch 💎💎💎
    edited September 1, 2016
    Thanks Irvin..  Your moments of distraction are pure genius.. 
  • edited April 2, 2017

    I am looking for a way to tell the user what format we would like the data in. 
    ex: (xxx-xxx-xxxx) before they type the actual value.  Would this code provide what I need. 
    Could you provide a screen shot of the resulting UI and the javascript properties panel.  Thanks

  • Craig RosenbaumCraig Rosenbaum ✭✭✭✭
    edited April 3, 2017
    Courtney,

    I've had good luck using jQuery extensions for phone number masking. I load that extension as a static resource on the page and use a snippet as a custom renderer on the phone number field.

    image

    Snippet:
    var field = arguments[0],     value = arguments[1];  skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);   if (field.mode == 'edit'){  //setup before functions var typingTimer;                //timer identifier var doneTypingInterval = 10;  //time in ms, 5 second for example var $input = skuid.$("input", field.element);  //on keyup, start the countdown $input.on('keyup', function () {   clearTimeout(typingTimer);   typingTimer = setTimeout(doneTyping, doneTypingInterval); });  //on keydown, clear the countdown  $input.on('keydown', function () {   clearTimeout(typingTimer); });  //user is "finished typing," do something function doneTyping () {   //do something  skuid.$("input", field.element).inputmask("(999) 999-9999",{ "placeholder": '_' });   }  } else {    skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);  }
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!