Service portal sn-record-picker to display dynamic display-field and dispaly-fields

[Aj38]

We have a custom widget where you can add delegations on the service portal. Once it's created we have an ability to modify it by clicking on the line item which open the child widget functionality is working as it should however when you click to modify the widget it is displaying the sys_id not the display value of the delegate and if I was to change the dispaly-fields attribute to dispaly-field it is working fine but then when a delegate is searched you may run into troubles if users share the same first name and last name. 

I was looking for a solution to this please. 
 here is the html 

<tr>
            <td>
              <div class="row form-group">
                <label class="field-label" title="">
                  <span class="field-decorations">
                    <span class="fa fa-asterisk mandatory ng-scope" ng-class="{'mandatory-filled': c.delegate_filled()}" style="padding-right: .25em"></span></span>
                  <span style="padding-right: .25em" class="ng-binding" title="">Delegate</span>
                </label>
                <sn-record-picker id="delegate" ng-change="c.onDelegate()" field="delegateUser" table="'sys_user'" default-query="'active=true'" display-fields="'name,email'" value-field="'sys_id'" search-fields="'name'" page-size="100"></sn-record-picker>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="row form-group">
                <label class="field-label" title="">
                  <span class="field-decorations">
                    <span class="fa fa-asterisk mandatory ng-scope" ng-class="{'mandatory-filled': c.delegate_filled()}" style="padding-right: .25em"></span></span>
                  <span style="padding-right: .25em" class="ng-binding" title="">Delegate2</span>
                </label>
                <sn-record-picker id="delegate" ng-change="c.onDelegate()" field="delegateUser" table="'sys_user'" default-query="'active=true'" display-field="'name'" value-field="'sys_id'" search-fields="'name,email'" page-size="100"></sn-record-picker>
              </div>
            </td>
          </tr>

[siva krishna M2 · Accepted solution]

Hello @Aj38 ,

Please try below code for delegate sn-record-picker

<sn-record-picker id="delegate" ng-change="c.onDelegate()" field="delegateUser" table="'sys_user'" default-query="'active=true'" display-field="'name'" display-fields="'name,email'" value-field="'sys_id'" search-fields="'name'" page-size="100"></sn-record-picker>

if it  helps kindly click on like icon and mark it as accepted solution

[Aj38]

Awesome thank you!

[siva krishna M2]

Hello @Aj38 ,

Thank you!! If my reply helps please click on like icon.