How do I auto-populate drop down using sn-record-picker?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-18-2022 06:46 AM
Issue:
I am currently building a contact form widget. I managed to get my dropdown for the Requestor field working and mapping to my intake table. The command field on my contact form is (u_command) it's a choice list field type. The Sub-command field is referenced from a table with over 700 values. (u_sub_command). I cannot get the command and sub-command dropdowns to auto populate. I am fairly new to ServiceNow. Any help would be greatly appreciated.
HTML code:
<div class="widmarg contact-margin">
<h3 class="txtstyle">
Submit a Request
</h3>
</div>
<div class="container">
<p class="subText">Submit a request for more information and a member of our team will reach out to you soon!<p>
<!--- <form name="contactUs" novalidate> --->
<!--- <div class="form-actions"> -->
<div class="col-md-12" id="top-container">
<div class="col-md-12 mb-3">
<label for="subject">Subject</label>
<textarea type="text" class="form-control" name="subject" ng-model="c.data.subject" rows="" maxlength=""></textarea>
</div>
<div class="col-md-6 mb-3">
<div>
<label for ="commands"><span class=""></span>Command</label>
<sn-record-picker field="c.data.command" table="'u_ecma_intake'" display-field="'command'" default-query="'active=true'" value-field="'sys_id'" search-fields="'name'" page-size="100" placeholder="Select..."></sn-record-picker>
<span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="sub_command"><span class="fa fa-asterisk mandatory"></span>Sub-Command</label>
<sn-record-picker field="c.data.sub_command" table="'u_ecma_intake'" display-field="'sub_command'" default-query="''" value-field="'name'" search-fields="'displayValue'" page-size="100" placeholder="Select..."></sn-record-picker>
<span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
</div>
</div>
<div class="row col-sm-12">
<div class="col-md-12">
<label for="requestor_name"><span class="fa fa-asterisk mandatory"></span>Requestor</label>
<sn-record-picker field="c.data.requestor_name" table="'sys_user'" display-field="'name'" default-query="'active=true'" value-field="'sys_id'" search-fields="'name'" page-size="100" placeholder="Select..."></sn-record-picker>
<span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
</div>
</div>
<div class="row col-sm-12">
<div class="col-md-6 mb-3">
<label for="email"><span class="fa fa-asterisk mandatory"></span>Email</label>
<input type="email" class="form-control" name="email" ng-model="c.data.email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required>
<span class="help-block" ng-show="needHelp.email.$invalid && !needHelp.email.$pristine">Please enter email</span>
</div>
<div class="col-md-6 mb-3">
<label for="organizationName"><span class="fa fa-asterisk mandatory"></span>Organization Name</label>
<input type="text" class="form-control" name="name" ng-model="c.data.organizationName" required>
<span class="help-block" ng-show="needHelp.name.$invalid && !needHelp.name.$pristine">Required</span>
</div>
</div>
<div class="row col-sm-12">
<div class="col-md-12 mb-3">
<label for="comments">Comment</label>
<textarea type="text" class="form-control" name="comments" ng-model="c.data.comments" rows="3" maxlength="300"></textarea>
</div>
</div>
<div class="submit-button">
<p style="text-align: left; margin-bottom: 30px; margin-top: 17px;"><button class="btn bdr_rad" style="background-color: #f1bb1b;" type="submit" ng-click="c.submitData();" ng-disabled = "needHelp.$invalid"> Submit </button></p>
</div>
<!--- </div> -->
<!--- </form> --->
Client Script:
function($scope, $location, spUtil) {
/* widget controller */
var c = this;
c.submitData = function(){
c.data.action = "addData";
//Check Log to make sure data is stored in client
$scope.requestor_name = {
displayValue: c.getDisplayValue('requestor_name'),
value: c.data.sys_id,
name: 'requestor_name'
}
$scope.sub_command = {
displayValue: c.getDisplayValue('u_sub_command'),
value: c.data.sys_id,
name:'sub_command'
};
c.server.update().then(function(){
//reset callback function so it doesn't repeat
c.data.action = undefined;
c.data.subject = "";
c.data.email = "";
c.data.organizationName = "";
c.data.comments = ""
spUtil.addInfoMessage("Your request has been submitted")
alert("Your request has been successfully submitted");
$location.url("/ecma");
});
};
}

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
01-18-2022 06:54 AM
try like this
The Directive:
1
|
<sn-record-picker field="location" table="'cmn_location'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>
|
It supports the following properties:
Property | Description |
---|---|
field | a JavaScript object consisting of “displayValue”, “value” and “name” |
table | the table to pull records from |
default-query | the query to apply to the table |
display-field (or display-fields) | the display field |
value-field | the value field (usually sys_id) |
search-fields | the fields to search |
page-size | number of records to display in dropdown |
To use the snRecordPicker you will also need to create the “field” object in your controller as well as listen for the “field.change” event.
The Controller:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$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);
})
});
|