Service Portal: Auto-populate email field based on selected user in sn-record-picker requestor name

[rajeshvadde]

Question

Hi Team,

I’m working on a Service Portal widget and need help auto-populating an email field based on the selected user in an sn-record-picker.

Current setup

I have an sn-record-picker configured on the sys_user table for Requestor Name.

On page load, it defaults to the logged-in user.

The field is editable, so users can search and select any other user.

I’m using:

display-field="name"

display-fields="email"

search-fields="name,email"

Requirement

When a user is selected (or changed) in the record picker:

The selected user’s email should automatically populate into a separate field called Contact Email.

If the requestor is changed, the email should update accordingly.

Question

What is the best-practice approach in Service Portal to:

Detect the selected value change in sn-record-picker

Fetch the selected user’s email from sys_user

Populate it into another field (Contact Email)?

Should this be handled using:

$scope.$watch on the picker value?

A server call from the widget?

Or is there a recommended alternative approach?

Any examples or guidance would be appreciated.

Thanks in advance!

[Ankur Bawiskar]

@rajeshvadde 

check these links

Reference Fields with the snRecordPicker Directive 

Need help with script to pass value from <sn-record-picker> field on custom widget HTML to the serve... 

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[adityahubli]

Hello @rajeshvadde ,

You just need to create one script include and called it in client script when record picker value changes. 

I Attached some screenshots please refer that. This is working in my PDI.

Script include : 

var getEmailAddress = Class.create();

getEmailAddress.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    getEmail: function() {

        var email = '';

        var sysId = this.getParameter('sysparm_id');

        var gr = new GlideRecord('sys_user');

        if (gr.get(sysId)) {

            email = gr.email.toString();

        }

        return email;

    },

    type: 'getEmailAddress'

});

Client script in widget :

api.controller=function($scope) {

  /* widget controller */

  var c = this;

$scope.user="";

$scope.email=''

$scope.user = {

    displayValue: c.data.user.name || '',  // Set the display value as the user's name or empty string

    value: c.data.user.sys_id || '',        // Set the sys_id as the value or empty string

    name: 'user'

};

  $scope.onUserChange = function () {

var ga=new GlideAjax('getEmailAddress');

ga.addParam('sysparm_name','getEmail');

ga.addParam('sysparm_id',$scope.user.value.toString());

ga.getXML(callback)

function callback(response)

{

var res=response.responseXML.documentElement.getAttribute('answer');

$scope.email=res;

}}

$scope.onUserChange ();

};

HTML :

<div>
<!-- your widget template -->
<sn-record-picker field="user" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-field="'name'" ng-change="onUserChange()">
</sn-record-picker>
{{user}}
{{email}}
</div>

If this helps you then mark it as helpful and accept as solution.

Regards,

Aditya,

Technical Consultant