Hi Community,
wanted to share a widget I created that creates a simple record producer. The original purpose for this widget was for a custom "WalkUp Kiosk" Service Portal that a client needed. This provides a very simple UX for the user to enter their name and their issue. The ticket is created and assigned to the designated group...and the user is then told their place in the queue, then redirected to the portal home screen. Other uses for this could be to enable users to create a ticket from any page in the portal without having to find and fill out a full catalog item. The goal of this post is just to share the widget configuration, and there a likely improvements that could be made to the script...there are lots of possible variations (for example: maybe you don't need the queue count part), play around with this and see what works for you!
The widget looks like this:
After submitting the popup modal looks like this:
Here's the script:
HTML:
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-default m-b" ng-click="c.click()">
Refresh
</button>
<div>
<!-- User Reference field-->
<div class="form-group">
<label>Search for your name:</label>
<sn-record-picker field="data.user"
table="'sys_user'"
display-field="'name'"
value-field="'sys_id'" search-fields="'user_name,name'"
page-size="100">
</sn-record-picker>
</div>
<!--Description String field-->
<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="Enter your information above and click here to Submit">
<!--popup modal-->
<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Put whatever text you want here</h4>
</div>
<div class="panel-body wrapper-xl">
Thank you {{c.data.name}}, a ticket has been created on your behalf.<p>
<b><font size='4'>You are number {{c.data.count}} in the queue.</font size></b><p>
You will now be redirected to the Service Portal Home page.
</div>
</div>
</div>
</script>
<!--end popup modal-->
</div>
</div>
</div>
Client script:
function($scope, $rootScope, spUtil, $window, $uibModal) {
var c = this;
c.data.user = {value:'',displayValue:''};
//Triggered by the "Refresh" button
c.click = function(){
c.data.user.displayValue='';
c.data.user.value='';
c.data.short_description = '';
}
//Triggered by the "Submit" button
c.addItem = function(){
var user = c.data.user.value;
var desc = c.data.short_description;
//Give alert if both fields are not entered
if(user == '' || user == 'undefined' || user == 'null' || desc == 'null' || desc == '' || desc == 'undefined'){
alert('Please enter your name and a description of your issue before submitting.');
return;
}
//this calls the server script
c.server.update().then(function(response){
//popup modal
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
//Redirect user after submit
setTimeout(myFunction, 9000);
function myFunction(){
$window.location.href = 'https://dev58504.service-now.com/sp';//enter redirect URL
}
})
}
}
Server Script:
(function() {
if(!input)
return;
input.requested_by = gs.userID();
//Look how many tickets are ahead in the queue with whatever query you want
data.count = 0;//sets data object as integer
var gaIncCount = new GlideAggregate('incident');
gaIncCount.addQuery('active','true');
gaIncCount.addQuery('assignment_group','sys_id of the assignment group goes here');
gaIncCount.addQuery('contact_type','walk-in');
gaIncCount.addAggregate('COUNT');
gaIncCount.query();
var count = 0;
if(gaIncCount.next()){
count = gaIncCount.getAggregate('COUNT');
var one = 1;
var queueNumber = +count +one;
data.count = queueNumber;//passes value to HTML script
}
//Look up user's name for the popup
var userName = input.user.value;
data.name = '';//sets data object as string
var userGR = new GlideRecord('sys_user');
userGR.addQuery('sys_id',userName);
userGR.query();
var name = '';
if(userGR.next()){
name = userGR.first_name;
var firstName = name;
data.name = name.toString();//passes value to HTML script
}
//create new record and assign values to fields; you can set whatever fields on the INC you want
var newGr = new GlideRecord('incident');
newGr.initialize();
newGr.short_description = input.short_description;
newGr.caller_id = input.requested_by;
newGr.u_affected_user = input.user.value
newGr.assignment_group = 'your assignment group sys_id goes here';
newGr.contact_type = 'walk-in';
newGr.insert()
})();
Sorry, I even confuse myself, sometimes. I gave up on matching to a specific user and was leaving it the tech to match user by name and contact info provided (or contact them for more info). To that end, I want to collect string fields for name and email and dump them into the (long) description field.
So short description would be the explanation of the issue and description would hold a name and contact. I seem to have gotten that mostly working, except that something in my script seems to turning the entry of the name to "undefined"
In this dummy submission, below, the entry of "undefined" in description was submitted as my name on the Widget
