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

[rajeshvadde]

Below is my form — the Requestor Name is a reference to sys_user and Contact Email is read-only:

Below is my codes

<!-- Requestor Name -->
<div class="form-group requestor-field-container">
<label class="field-label">{{::data.formModel._fields.submitter.label}}</label>
<sn-record-picker
field="data.formModel._fields.submitter"
table="'sys_user'"
display-field="'name'"
value-field="'sys_id'"
search-fields="'name,email,user_name'"
default-query="'active=true^nameISNOTEMPTY'"
page-size="20"
placeholder="Search Requestor Name"
ng-class="(formSubmitted && !data.formModel._fields.submitter.mandatory_filled()) ? 'field-invalid' : ''">
</sn-record-picker>
</div>

<!-- Contact Email -->
<div class="form-group u_contact-email-field-container">
<label class="field-label">{{::data.formModel._fields.u_contact_email.label}}</label>
<input type="text"
class="form-control"
ng-model="data.formModel._fields.u_contact_email.stagedValue"
readonly/>
</div>

client script

// Inside widget controller
$scope.$on('field.change', function(evt, parms) {
if (parms.field.name === 'submitter') {
var selectedSysId = parms.newValue;

if (!selectedSysId) {
$scope.data.formModel._fields.u_contact_email.stagedValue = '';
return;
}

$scope.server.update({
action: 'getUserEmail',
userSysId: selectedSysId
}).then(function(response) {
$scope.data.formModel._fields.u_contact_email.stagedValue =
response.data.contactEmail || '';
});
}
});
server script
// Inside widget server script
if (input && input.action === 'getUserEmail') {
data.contactEmail = '';
if (input.userSysId) {
var userGR = new GlideRecord('sys_user');
if (userGR.get(input.userSysId)) {
data.contactEmail = userGR.getValue('email') || '';
}
}
return;
}

My expectation:

Select Requestor Name → Contact Email auto-fills with that user’s email.
I tried in multiple ways i can populate for current logged in user but when i select other users it not populating.