Objective: Want to create a simple like and dislike service portal which can be accessible to the public use without having to log in.
For a basic understanding of the service portal. Service portal videos by ServiceNow Adda(youtube) are very helpful.
And this video by TechnoMonk is helpful in understanding how the blocks in a widget work together.
Service Portal Overview
As the image above suggests we will be creating the service portal in the following order portal>page>widget.
1. Creating the portal Service Portal>Portals> <Click New>. This can be done in the Service Portal Configuration as well. And the demo_page_1 is the page we will be creating next. And rest are the default pages in the ServiceNow Personal Instance.
2. Creating the Page(demo page 1). Path Service Portal>Pages> <Click New>. Filled in the details as mentioned in the image below.
3. Creating the Widget. For this using the Service Portal Configuration will make things easy. Path Service Portal Configuration>Widget Editor>Click "Create a New Widget".
4. Building the widget
HTML
<div id="spoti">
<img id="img1" ng-click='!isClickAble||up()' src="thumbs-up-image.jpg" width="219" height="236"/>
<img id="img2" ng-click='!isClickAble||down()' src="thumbs-down-image.jpg" width="216" height="236"/>
</div>
<div ng-repeat='n in data.userInfo'>
<p ng-model='n.mobile'>Likes so Far {{c.data.userInfo[0].desc}}</p>
<p ng-model='n.phone'>Dislikes so Far {{c.data.userInfo[0].shor}}</p>
</div>
- thumps-up-image.jpg and thumps-down-image.jpg are the images uploaded to the ServiceNow instance. Path System UI> Images.
CSS
#spoti{
display:flex;
justify-content:space-evenly;
}
p{
padding-top:1rem;
}
img{
padding:1rem;
}
#img1:hover{
animation: oclick 2s ease-in-out forwards;
}
@keyframes oclick {
0%{
transform: scale(1.05) rotate(10deg);
}
100%{
transform: scale(1);
}
}
#img2:hover{
animation: oclick 2s ease-in-out forwards;
}
@keyframes oclick {
0%{
transform: scale(1.05) rotate(-10deg);
}
100%{
transform: scale(1);
}
}
Client Script
api.controller=function($scope) {
/* widget controller */
var c = this;
$scope.isClickAble=true;
$scope.down=function(){
c.data.userInfo[0].mobile=parseInt(c.data.userInfo[0].mobile)+1;
$scope.isClickAble=false;
c.server.update().then(function(){
});
}
$scope.up=function(){
c.data.userInfo[0].phone=parseInt(c.data.userInfo[0].phone)+1;
$scope.isClickAble=false;
c.server.update().then(function(){
});
}
if(c.data.userInfo[0].name){
alert("Welcome "+c.data.userInfo[0].name);
}
else{
alert("Welcome Guest User");
}
if($scope==false){
alert("not clickable anymore");
}
};
Server Script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.userInfo=[];
var userr=new GlideRecord('sys_user');
userr.addQuery('sys_id','6816f79cc0a8016401c5a33be04be441');// use sys_id of a user in your instance
userr.query()
while(userr.next()){
data.userInfo.push({
'name':gs.getUserDisplayName(),
'phone':userr.phone.toString(),//phone=description
'mobile':parseInt(userr.mobile_phone)//mobile_phone=short_description
}
);
}
if(input){
var incr=new GlideRecord('sys_user');
incr.addQuery('sys_id','6816f79cc0a8016401c5a33be04be441'); // use sys_id of a user in your instance
incr.query();
while(incr.next()){
incr.phone=input.userInfo[0].phone;
incr.mobile_phone=input.userInfo[0].mobile;
incr.update();
data.userInfo=[{
'name':gs.getUserDisplayName(),
'phone':incr.phone.toString(),
'mobile':incr.mobile_phone.toString()
}];
}
}
})();
With everything is done the Service portal is supposed to look this way
The above code in the Server Script will retrieve the current value of the Business phone and mobile phone fields in the record that matches the sys_id. I am using the sys_user table because the sys_user table content is accessible even when you are not logged in. Tried the incident table instead of sys_user it is not working as expected(Let me know in the comment section if you have a better way to store the content that can be accessed without logging in).
Via Client Script, the variable values will be transferred to the front end(HTML). Onclick of either thump up or thumps down the related variable increment by one unit. And these variables will be transferred to the Server Side from Client Side by using "c.server.update().then(function()". And on the Server Script, these variables will be set to the Business phone and mobile phone fields in the sys_user table.
Service Portal link: https://dev144888.service-now.com/demo
The above link will only work when I have been logged in or it will show that the instance is hibernating.
If you find this helpful, Hit Like.
#Service Portal
#Serviceportal Widgets
#portal
#pages
