How to make reference field readonly in <sn-record-picker>

[amaradiswamy]

Hi All,

I am creating a referenced field by using <sn-record-picker> directive in service portal. And, it will default to some value

Now, i want to make this field readonly. Is there any way to disable editing of this field?

Regards

Swamy

[Chuck Tomasi]

You can put an id or class tag on it (with a name) and use CSS something like this:

.className:-moz-read-only { /* For Firefox */

      background-color: yellow;

}

.className:read-only {

      background-color: yellow;

}

[amaradiswamy]

Hi Tomasi,

Thanks for your reply !!

I want to make the field readonly so user can't edit the field.

Regards

Swamy

[Chuck Tomasi]

That will do it. I got it from here.

CSS3 :read-only Selector

[amaradiswamy]

The styles will work when field is readonly.

But, my query is to how to make this field readonly

Widget script:

<div class="flex-grow flex-row items-center">

          <label style="padding-right:10px;">Approver</label>

          <div class="rp">

              <sn-record-picker field="c.ed_user" table="'sys_user'"

                                                  display-field="'name'" value-field="'sys_id'"

                                                  display-fields="'user_name'" search-fields="'user_name,name'" page-size="300"

                                                  options="{cache: true, allowClear: false}"></sn-record-picker>

          </div>

        </div>

Client

function($scope,$location, spUtil, amb, $http,$timeout,$uibModal) {

  /* widget controller */

  var c = this;

  c.ed_user = {

  displayValue: c.data.useraname,

  value: c.data.usersys_id,

  name: 'user'

  }

}

Server

(function() {

  /* populate the 'data' object */

  /* e.g., data.table = $sp.getValue('table'); */

  data.table =$sp.getParameter('table');

  data.usersys_id = gs.getUserID();

  data.useraname = gs.getUser().getDisplayName();

})();