ServiceNow portal sn-record-picker - what is loc

[litchick10]

Super basic question but I need some help

I'm trying to add a sn-record-picker to a portal widget.  I was reviewing the sn-record-picker documentation and I'm hoping someone can help me out when adding a record picker you are advised to add the code below to the client controller.  what is the loc? is it part of spUtils or is it a variable that was declared but not specified in the instructions?

$scope.location = {
 displayValue: c.data.loc.name,
 value: c.data.loc.sys_id,//what is loc?
 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);
 })
});

what I really want to do is just set the value to the chosen sys id from the sys_user table

[Josh Virelli]

Hey there.

In this example, "loc" is just a key in the data object. You can name it whatever you'd, like but you need to define it in the server script. This will set the record picker to blank on load, you can put a preset value in here if you wanted. This is where we storing the value and displayValue of the record picked.

data.loc = {
'name': '',
'sys_id':''
}

Then it looks like c.data.setLocation is being set when a new Location is chosen. When c.server.update() happens, that's when the c.data object is passed to the Server Script as "input". Not sure your familiarity with Portal/Widgets, but this is the main way you communicate from the client and tell the server to do something!

Use the following If Statement if you want something to happen immediately when they choose a new location, otherwise its not needed.

if(input && input.setLocation){
//Do something with the new setLocation
//setLocation should be an object with a 'value' and 'displayValue' if I'm not mistaken
//i.e. setLocation = {
// 'value': SYS_ID_OF_LOCATION,
// 'displayValue': NAME_OF_LOCATION
// }
}

If you want to use this for the user table, then you need to update the parameters in the HTML Directive, here I changed table to be "'sys_user'":

<sn-record-picker field="location" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>

I've added some more context to the properties found on that documentation page.

Property	Description	Josh's hint
field	a JavaScript object consisting of “displayValue”, “value” and “name”	this is $scope.location in the example
table	the table to pull records from	-
default-query	the query to apply to the table	Make sure it's an encoded query
display-field (or display-fields)	the display field	Which values that will show for each record when searching
value-field	the value field (usually sys_id)	will be stored in the field object, should almost always be the sys_id as its the best unique identifier
search-fields	the fields to search	-
page-size	number of records to display in the dropdown

Let me know if that helps or solves your questions. Please mark my answer as helpful or correct if it does! Thanks,

Josh

[Josh Virelli · Accepted solution]

Oh god, the above reply got horribly formatted lol. So if all you're trying to do is create a Record Picker that looks at the Sys User table, and stores the value, then I think it should be as simple as this:

HTML

<sn-record-picker field="user" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>

CLIENT SCRIPT

$scope.user = {
 displayValue: c.data.user.name,
 value: c.data.user.sys_id,
 name: 'user'
};
 
$scope.$on("field.change", function(evt, parms) {
 if (parms.field.name == 'user'){
 c.data.setUser = parms.newValue;
}
 
//Only do an update here if you need something to happen immediately on the Server side
//Otherwise whenever you do the next c.server.update(), you'll have input.setUser available to you
//It would make sense to wait if you are building a form you want to submit at the end for example.
 c.server.update().then(function(response) {
 spUtil.update($scope);
 })
});

SERVER SCRIPT

data.user = {
'name': '',
'sys_id':''
}

/* If you want it to default to the logged in user, you could do this:
data.user = {
'name', gs.getUserDisplayName(),
'sys_id', gs.getUserID()
}
*/

Hopefully that makes more sense! 😄 Let me know if you still have questions.

Please mark my answer as helpful or correct if this worked for you!

Thanks,

Josh

[litchick10]

Field is named u_opened_for and my form no longer renders when I add the

$scope.user = {
displayValue: c.data.u_opened_for.name,
value: c.data.u_opened_for.sys_id,
name: 'user'
};

I'm currently using an existing widget and it uses the  formModel to add fields

$scope.data.formModel = {
        _fields: {

   user: {
     label: $scope.data.messages.formLabels.u_opened_for,
     name: $scope.data.messages.formLabels.u_opened_for,
     stagedValue: ($scope.data.ideaInfo && $scope.data.ideaInfo.u_opened_for) || '',
     value: '',
     displayValue: '',
     type: 'reference',
     mandatory: true,
     mandatory_filled: function () {
     return !!($scope.data.formModel._fields.u_opened_for.value);
     },
     isMandatory: function () {
     return true;
     },
    },

Any idea on how to make this work where the form will still render?

[litchick10]

OMG, so silly

Need to add

$scope.lob = {
displayValue: $scope.data.lob_name,
value: $scope.data.lob_sys_id,
name: 'lob'
};

in addition to the formModel then it worked great. 

 u_opened_for: {
     label: $scope.data.messages.formLabels.u_opened_for,
     name: $scope.data.messages.formLabels.u_opened_for,
     stagedValue: ($scope.data.ideaInfo && $scope.data.ideaInfo.u_opened_for) || '',
     value: '',
     displayValue: '',
     type: 'reference',
     mandatory: true,
     mandatory_filled: function () {
     return !!($scope.data.formModel._fields.u_opened_for.value);
     },
     isMandatory: function () {
     return true;
     },
    },