Placeholder text in field editor/table

  • 1
  • Question
  • Updated 2 years ago
  • Answered
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.
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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. 
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
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?
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
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>
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
That's awesome for a field editor! Any magic for a table?
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
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.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Irvin..  Your moments of distraction are pure genius.. 
Photo of Courtney McGuire

Courtney McGuire

  • 152 Points 100 badge 2x thumb
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
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
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.



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); 
}