How to create multiple unique <sn-record-picker> objects within an ng-repeat?

[jeremy_wirth]

I am trying to create multiple <sn-record-picker> objects using an ng-repeat, however it seems that the typical way to uniquely track certain fields within your ng-repeat using ng-model and the $index to specify which object inside the array you are ng-repeat'ing through is not supported.

You are just left with the 'field' attribute, which is a JavaScript object consisting of "displayValue", "value" and "name".

Source: https://community.servicenow.com/community?id=community_blog&sys_id=54bde6a9dbd0dbc01dcaf3231f96193f

I have no trouble using the <sn-record-picker> as a standalone object, because that field object can be set to a controller in the client script as shown in the link above. My troubles arise when I need to access a certain <sn-record-picker> object uniquely created in the ng-repeat. The requirement is that as many Contacts as the User needs can be created, and are stored inside an array called c.data.alternate_contacts. The <sn-record-picker> simply references the 'sys_user' table and I would like to return the sys_id in the 'value' attribute of the record picker object.

HTML Template:

<div class="row" ng-repeat="item in data.alternate_contacts track by $index">
    <div class="col-md-4 p4p-form--block">
    <label>Contact Name<font color="#ff0000">*</font></label>
    <sn-record-picker multiple="false" class="treas-record-picker" field="c.contact_name" table="'sys_user'" display-        field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="150" ></sn-record-picker>
    </div>
</div>

The issue with using the controller Client Script provided in the link above:

$scope.location = {

      displayValue: c.data.loc.name,

      value: c.data.loc.sys_id,

      name: 'location'

};

$scope.$on("field.change", function(evt, parms) {

      if (parms.field.name == 'location')

              c.data.setLocation = parms.newValue;

      c.server.update().then(function(response) {        

              spUtil.update($scope);

      })

});

Is that this only tracks one specific <sn-record-picker> object where the field is known (field='location'), however I need to come up with a way to be able to reference multiple unique <sn-record-picker> objects with unique field values and track the value stored in each one within the array of objects being stored in the ng-repeat data array.

So my question is, can this be done using the field attribute of <sn-record-picker>? Or if there is a more feasible option, I am open to any and all suggestions. 

[Ravi T]

Hi

Hope the below thread will help you

https://community.servicenow.com/community?id=community_question&sys_id=7c1157e9dbdcdbc01dcaf3231f961932

Regards

Ravindra

[rahulpandey]

Hi, I am wondering, what if you introduce a new key inside location object let's say fieldname, and dynamically assigne a value to it. It would be interesting to see, parms.field.fieldname.

[jeremy_wirth]

I will try this, perhaps I can do the same thing you suggested within the 'name' value in the location object and use that as the unique identifier.

[Jon Barnes · Accepted solution]

you will need to provide some separation in your data model, so I would do something like this where each field is stored directly in that array. let me know if this gets you the idea you need to make this work. If not, please post your entire widget and I should be able to help you sort it out.

c.data.alternate_contacts = [];

c.addContact = function() {
  c.data.alernate_contacts.push({
    value: '',
    displayValue: '',
    name: 'contact'
  });
};

Your html would change slightly to look like this:

<div class="row" ng-repeat="item in data.alternate_contacts track by $index">
  <div class="col-md-4 p4p-form--block">
    <label>Contact Name<font color="#ff0000">*</font></label>
    <sn-record-picker multiple="false" class="treas-record-picker" field="item" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="150" ></sn-record-picker>
  </div>
</div>