Shadow text for servicenow forms

tkrishna29
Giga Guru

Hi,

How can I add shadow text for ServiceNow forms? I dont see any option to add it in the Studio - Forms.

I'm looking for something like this (In the text filed - "Optional - Enter Phone No").

find_real_file.png

Any workaround or help is highly appreciated Thank you.

find_real_file.png

1 ACCEPTED SOLUTION

By default, ServiceNow blocks updating DOM objects in scoped applications.


You need to add below system property and set it to false.


glide.script.block.client.globals


screenshot-troweermdev.service-now.com 2017-04-13 23-21-00.png



and use below function to set placeholder text in on load script.


u_addPlaceholderAttribute('field_name', 'YYYY-MM-DD');


function u_addPlaceholderAttribute(variableName, hint) {


  var fieldName;


  try{


  if(variableName.indexOf('phone') >= 0)


  {


  fieldName = g_form.getControl(variableName).name.toString();


  fieldName = 'disp_'+fieldName;


  }


  else{


  fieldName = g_form.getControl(variableName).name.toString();


  }


       


      if (Prototype.Browser.IE) {  


          fieldName.placeholder = hint;  


      } else {  


          $(fieldName).writeAttribute('placeholder', hint);  


      }  


  } catch(err) {}  


}


View solution in original post

16 REPLIES 16

Community Alums
Not applicable

This would be a default value. Not sure how you'd get the text to be slightly grayed out.


shloke04
Kilo Patron

Hi,



You can refer the below thread for the same functionality implemented :



Support for HTML 5 placeholder attribute



Hope this helps.Mark the answer as correct/helpful based on impact.



Regards,


Shloke


Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

I tried with the below code using the reference with no success.


I used OnLoad client script for the code.


find_real_file.png


additional_info is a field on the form of type string. I tried of type html as well. But no luck!


find_real_file.png


jim.coyne - Greatly appreciate if you can help. Thank you.



Regards,


Krishna


What version of ServiceNow are you running?   And what OS/browser?   I know older versions of Firefox used to cause issues if the function was called before being declared which could be happening here.



Are you sure the field name is "additional_info"?



I just tried it in Istanbul for a new field I created on the Incident form and it works fine in Chrome and Firefox on macOS Sierra:


find_real_file.png



You should add the function as a UI Script so it is callable in other scripts without having to maintain multiple copies of the same code.   If not, you can simplify your onLoad script to this:



function onLoad() {


  var hint = "Enter a short description of the problem";


  try{


      var fieldName = g_form.getControl("additional_info").name.toString();


      if (Prototype.Browser.IE) {


          fieldName.placeholder = hint;


      } else {


          $(fieldName).writeAttribute('placeholder', hint);


      }


  } catch(err) {}


}