Need help with script to pass value from <sn-record-picker> field on custom widget HTML to the server script to be used in a GlideRecord

[patricklatella]

hi all,

I'm building a widget to act as a very simple custom record producer.  My form only has 2 fields on it, one of which is a reference field to the [sys_user] table.  The form creates a new record on the [incident] table with a custom "u_affected_user" field which I want to populate with the reference field from my custom form.  But I cannot figure out how to get the value of the reference field to the server script to use in the GlideRecord that is creating the new record.  When I click "Submit" button it creates the record, and the "short_description" field populates fine, but the anyone see what I'm missing?

Here are the scripts:

HTML

<div class="panel panel-default">
<div class="panel-heading">
<div class="form-group">

<!-- Affected user : Reference field: THIS ONE IS NOT PASSING THE VALUE THE SERVER SCRIPT-->
<div class="form-group">
<label>Search for your name:</label>
<sn-record-picker field="c.affected_user" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>
</div>

<div class="form-group">
<label>Description</label>
<input class="form-control" ng-model="c.data.short_description">
</div>

<!--The Submit button-->
<div class="form-group">
<input class="btn btn-primary btn-block" ng-click="c.addItem()" type="submit" value="Submit">
</div>
</div>
</div>

CLIENT SCRIPT

function($scope, spUtil) {

var c = this;
c.addItem = function(){

c.server.update().then(function(response){
spUtil.update($scope);
c.data = {};
$scope.c.affected_user.value = '';
}) }
}

SERVER SCRIPT

(function() {
if(!input)
return;

input.requested_by = gs.userID();//THIS IS TO SET THE [caller_id] FIELD TO THE LOGGED IN USER

var gr = new GlideRecord('incident');
gr.initialize();
gr.short_description = input.short_description;
gr.caller_id = input.requested_by;
gr.u_affected_user = input.affected_user;//THIS IS WHAT IS NOT WORKING
gr.insert()

})();

[Ashutosh Munot1]

Hi,

You can adjust your CSS for this element and make is wide no issues.

If you send full code i can help u.

Thanks,
Ashutosh

[patricklatella]

Hi Ashutosh,

here's my HTML and CSS and CLIENT SCRIPT for the widget.  I'd like to make the 2 fields you see in the HTML mandatory...but keep the width of the "Search for your name" field full width of widget. (for now you see "location" throughout the script, this is the "user" field, I built this from another prototype I had and have not changed that yet).

HTML:

<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-default m-b" ng-click="c.click()">
Refresh
</button>
<h4 class="panel-title">Search for your name:</h4>
<sn-record-picker field="location" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'user_name,name'" page-size="100" ></sn-record-picker>
</div>
<table width="100%" ng-if="data.show_widget == 'yes'">
<tr ng-repeat="incident in data.incidents | orderBy:orderField:orderReverse | filter:searchText ">
<td ng-class="getPriorityClass(incident)"><a uib-tooltip="{{incident.short_description}}" ng-href="/tech_hub?sys_id={{incident.sys_id}}&view=sp&id=techhub_ticket_form&table=incident">{{incident.number}}</a>
</td>
<td ng-class="getPriorityClass(incident)">{{incident.short_description}}
</td>
</tr>
</table>

CSS

table, th, td {
border: 1px solid black;
padding: 5px;
}

.panel-title {
margin-bottom: 10px;
}

.panel {
position: relative;
}

.panel-heading i {
cursor: pointer;
position: absolute;
padding: 10px;
top: 0px;
right: 0px;
cursor: pointer;
}

.disabled-filter {
color: #A0A0A0;
}

.list-group-item.ng-enter {
transition: all 1s;
-webkit-transition: all 1s;

background-color: #c0dcfa;
}

.list-group-item.ng-enter-active {
background-color: #fff;
}

.hide-x-overflow {
overflow-x: hidden;
}

.translated-html > p {
margin: 0px;
padding: 0px;
}

IMG {
max-width: 100%;
max-height: 240px;
}

IMG.img-sm {
max-height: 40px;
max-width: 40px;
}

.filter-box {
margin-top: 10px;
}

.panel-footer {
.number-shown-label {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
display: inline-block;
}

a {
color: inherit;
}
}

CLIENT SCRIPT

function($scope, spUtil) {

var c = this;

c.click = function(){
$scope.location.displayValue='';
$scope.location.value='';
c.data.show_widget = "no";
}

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

$scope.$on("field.change", function(evt, parms) {
c.data.show_widget = 'yes';
if (parms.field.name == 'location')
c.data.setLocation = parms.newValue;
c.server.update().then(function(response) {
spUtil.update($scope);
})
});
}

[mkader]

@patricklatella - Can you please share your full working solution? I need to do something very similar. 

[patricklatella]

Hi @mkader , I just posted an article with the script for this.

Please see https://community.servicenow.com/community?id=community_article&sys_id=a7284b05dbb1d0d0190dfb2439961...

[Khanna Ji]

@patricklatella - Were you able to achieve the mandatory part? On form load and as well as based on some field value?

Also is it possible to display multiple fields like ac_ref_columns attribute in this?