How to add placeholder to text-field in servicenow service portal?

[rsadhula]

I need to add placeholder to text field in catalog item under service portal on page load, I tried in catalog client script with jquery and angular/document but no success, And found that it's not supported any other alternate soln ?

**Catalog Client Script:**

      function onLoad() {

              var elm = angular.element(element.getElementsByClassName("form-control"));

              //when I use angular I get this error:

> js_includes_sp.jsx?v=08-28-2017_0947&lp=Mon_Aug_28_11_44_06_PDT_2017&c=2_42:63808 (g_env) [SCRIPT:EXEC] Error while running Client Script "Placeholder

> Script": TypeError: Cannot read property 'element' of null.

        jQuery("#sp_formfield_IO:5cdafd764f02030007b03fb28110c70b").attr("placeholder","hello world");

            // if I use jquery or $jq I get below error

> (g_env) [SCRIPT:EXEC] Error while running Client Script "Placeholder

> Script": TypeError: jQuery is not a function

      }

**This is how html gets generated in servicenow:**

      <span ng-switch-default="true" class="ng-scope">

      <!-- ngIf: !field.max_length || 256 > field.max_length -->

      <input ng-model="field.stagedValue" ng-change="stagedValueChange()"

      maxlength="" autocomplete="off" name="IO:5cdafd764f02030007b03fb28110c70b"

      id="sp_formfield_IO:5cdafd764f02030007b03fb28110c70b" data-type="string"

      placeholder="" ng-if="!field.max_length || 256 > field.max_length"

      class="form-control ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-

      valid-maxlength" ng-model-options="{allowInvalid: true}" ng-

      disabled="field.isReadonly()" aria-invalid="false"><!-- end ngIf:

      !field.max_length || 256 > field.max_length --><!-- ngIf: field.max_length

      >= 256 --></span>

[![enter image description here][1]][1]

  [1]: https://i.stack.imgur.com/as3nJ.png

[Aakash Shah4]

Hi Rakesh,

Jakarta release has OOB support for placeholder text. Please refer "Example text" field in the dictionary of the field and add your placeholder text

Alternatively check these.

I guess these links might help

Support for HTML 5 placeholder attribute

Great UX Trick: HTML Placeholders

How to add the HTML5 placeholder attribute to a Service Catalog Item variable

Place holder text

[Radha K · Accepted solution]

Hi Aakash, 

I was able to get the placeholder text from the UI script and OnLoad client script. But this works only on new records. When I open any existing record, it does not show up on the journal fields, do you know why?

And can you also tell me where do I add the script, to put a custom color instead of default grey color?

[SrinadhA]

i got solution for that,

function onLoad() {

    var field = g_form.getElement("u_name");

    if (field) {

        field.setAttribute('placeholder', 'Enter your name');

        field.style.color = 'red';

        }

}

use this for setting place holder in our fields

[SrinadhA]

use this for getting place holder

function onLoad() {

    var field = g_form.getElement("u_name");

    if (field) {

        field.setAttribute('placeholder', 'Enter your name');

        field.style.color = 'red';

        }

}

it wil works every time ,when inserting and updating also.