Create custom action buttons in Service Portal

A common feature request for Service Portal is to be able to add custom buttons to the sc_request or ticket page similar to the way you could add UI actions to a form. This functionality is not available out-of-box, but here is a quick example on how you could create a custom widget to display some buttons to mimic the UI Actions on a form.

In this example, we will create a “Resolve Incident” button to place on the incident “ticket” page.

HTML:

<div class="panel-heading">Actions</div>

<button type="button" class="btn btn-primary btn-block" ng-click="c.uiAction('resolve')">Resolve Incident</button>

<button type="button" class="btn btn-default btn-block" ng-click="c.uiAction('cancel')">Cancel</button>

</div>

Client Script:

function() {

var c = this;

c.uiAction = function(action) {

c.data.action = action;

c.server.update().then(function() {

c.data.action = undefined;

})

}

Server Script:

(function() {

// Get table & sys_id

data.table = input.table || $sp.getParameter("table");

data.sys_id = input.sys_id || $sp.getParameter("sys_id");

// Valid GlideRecord

gr = new GlideRecord(data.table);

if (!gr.isValid())

return;

// Valid sys_id

if (!gr.get(data.sys_id))

return;

if (input && input.action) {

var action = input.action;

// If Incident table

if (data.table == 'incident') {

if (action == 'resolve') {

// Resolve Incident

gr.setValue('incident_state', 6);

gr.setValue('state', 6);

gr.setValue('resolved_by', gs.getUserID());

gr.update();

}

if (action == 'cancel') {

// Do something else

}

})();

The resulting widget should look something like this:

This is far from the complete solution, but will hopefully provide a good example to work off of.

59 comments

Brendan Halliday says:
December 5, 2016 at 11:50 pm
Hi Nathan,
Thanks for this – it has helped a lot.
Regarding the if action = resolved code block, what is the best way to address having a pop up box to confirm that you want to resolve the incident?
I have tried the following, however I get an error when clicking the button
// If Incident table
if (data.table == ‘incident’) {
if (action == ‘resolve’) {
if(confirm(“Are you sure you want to Resolve this Incident?”)){
// Resolve Incident
gr.setValue(‘incident_state’, 6);
gr.setValue(‘state’, 6);
gr.setValue(‘resolved_by’, gs.getUserID());
gr.update();
}
//If cancel abort
return false;
}
The Error I receive is: Server JavaScript error “confirm” is not defined.
Looking at that error – would I need to define confirm in the client script? If so – I am not too sure what to add?
Cheers Nathan, just stumbled upon the blog and really liking it.
Cheers,
Brendan
Reply
1. Nathan Firth says:
  March 20, 2017 at 5:09 pm
  Hi Brendan, that’s because “confirm” is a client side method that is run in the browser so it’s not possible to execute from server script.
  Reply
2. Ethan says:
  April 10, 2018 at 12:46 pm
  Brendan,
  Add something like this to your Client Script
  function() {
  var c = this;
  c.uiAction = function(action) {
  if(action == ‘cancel’){
  var r = confirm(“Are you sure you want to cancel this request?”);
  if(r == false){
  return;
  }
  }
  c.data.action = action;
  c.server.update().then(function() {
  c.data.action = undefined;
  })
  }
  }
  Reply
Saranya S babu says:
December 6, 2016 at 9:36 am
Awesome post,thanks
Reply
Nathan Firth says:
December 8, 2016 at 10:15 pm
Yes, must be client side:
c.uiAction = function(action) {
if(!confirm(“Are you sure?”)) return;
c.data.action = action;
c.server.update().then(function() {
c.data.action = undefined;
})
}
Reply
1. Brendan Halliday says:
  December 8, 2016 at 11:35 pm
  Thanks Nathan, that worked 🙂
  Reply
Jeff Salisbury says:
December 29, 2016 at 9:21 pm
Thanks Nathan – this worked like a champ!
Is there an easy way to make the buttons a specific color? As is the top button gets the same color as the top heading of the other widgets on the page. I’m sure it is just using the default style, but I don’t know where or how to override that.
Reply
1. Nathan Firth says:
  December 29, 2016 at 10:42 pm
  Hi Jeff,
  The button colors is getting the color from the “btn-primary” Bootstrap class which gets compiled based on the CSS variables you have defined. You can always change out the class for one of the other color classes (e.g. btn-success, btn-info) or create a custom class and style it in the CSS field on the widget. If you need help, shoot me an email and I can show you an example.
  Reply
Martin Robinson says:
December 30, 2016 at 5:25 pm
Hi Nathan, thanks for the post, very handy indeed.
I wanted to ask you what the difference is between using server.update() and server.get()? So for example, your code block in the controller would be something like:
c.uiAction = function(action) {
c.server.get({
action: action
}).then(function(response) {
/…… /
});
};
I’m trying to find any information on the difference, thanks again.
Reply
1. Rahamathullah M R says:
  March 20, 2017 at 11:59 am
  Hi Nathan,
  I just replicated the code in my portal .
  The server update is not getting done i.e, the particular incident is not getting resolved , even though gs.info is getting logged in log statement.
  if(data.table == ‘incident’){
  if(action ==’resolve’){
  gs.info(‘inside resolve’ +action);
  //gr.setValue(‘incident_state’,6);
  gr.setValue(‘state’,6);
  Not able to understand what is the mistake i am doing
  Reply
Mithun says:
January 5, 2017 at 12:06 pm
Hi Nathan,
Thanks for this – it’s great!
I’m just wondering if there’s any way I can get it to only show if the state isn’t resolved or closed etc?
Also, it would be great if it could update the Work Notes or Additional comments that the user has resolved it!
Thanks
Mithun
Reply
1. Nathan Firth says:
  January 6, 2017 at 12:08 am
  This is just to be an example and up to you to finish. You can use ng-if on the button to hide when state not resolved. You can also easily add to the worknotes from the server script.
  Reply
2. Troy says:
  February 2, 2017 at 4:16 pm
  Hi Mithun,
  I used the code above to create a ‘Reopen Incident’ button and have it show only if the state is resolved. I added ng-if=”data.showButton” to the HTML template.
  In the Server Script…
  if(data.table == ‘incident’ && gr.state == 6){
  data.showButton = true;
  } else {
  data.showButton = false;
  }
  Seems to be working well.
  Reply
  1. Allen says:
    January 23, 2018 at 9:41 pm
    Hi, can you post the code you used for this? I’m trying to do the same thing and made some edits, but I’m still having a bit of trouble.
    Reply
  2. Carl Fransen says:
    July 25, 2018 at 2:41 am
    Hi Troy,
    Thanks for your code it works well in my implementation – just a note that might be handy, I worked with one of our web developers and he shortened this down to a single line which works really well, figured I’d share:
    data.showButton = gr.state == 6;
    Cheers
    Carl.
    Reply
Ankit says:
January 31, 2017 at 7:16 am
I have a requirement to create close button . i used ng-hide to hide button when state closed but when i reload the form “Close” button again appearing . plz suggest a way if state is closed button is not visible
Reply
1. Nathan Firth says:
  January 31, 2017 at 6:56 pm
  That just means the expression in your ng-hide is not returning true. Double check the values and make sure they are correct and of the correct type. For example, sometimes what you think is a Boolean could be a String. But without seeing your code I cannot comment further.
  Reply
  1. ankit gupta says:
    February 10, 2017 at 7:07 am
    https://community.servicenow.com/message/1079189#1079189
    here is my code in last you can check it and let me know any mistake or wrong code
    Reply
2. Soraya Vally says:
  July 11, 2018 at 12:09 pm
  Hi Ankit,
  Did you figure this out? I have the same issue when reloading the form the button re-appears.
  Reply
DGP says:
January 31, 2017 at 6:44 pm
Hi Nathan,
I want a button which should send comments to the back end table. For example an approval widget I have created a comment text box and send button. When user wants any additional info user will add information in the comment field and hit on send button. then comments should passed to the approval form. Can you please help me on this.
Thanks,
DGP
Reply
1. Nathan Firth says:
  January 31, 2017 at 6:49 pm
  The concepts in this tutorial would work just the same for this use case… create a button, capture the info and send to the server using server.update, and then use GlideRecord to insert the data to the appropriate table.
  Reply
Troy says:
February 2, 2017 at 4:21 pm
Hi Nathan,
Thanks for code! Works slick. I created a ‘Reopen Incident’ button and was able to hide it if the inc state isn’t resolved. However, I need to require comments if they try to reopen the incident. I can’t seem figure out the code to look at the comments box and stop the reopening if there isn’t a comment.
I’ve discovered g_form doesn’t work like it does on the ‘Reopen Incident’ in the incident form in the native view. Any help would be appreciated! Thanks.
Reply
1. Mike Kaufman says:
  May 12, 2017 at 5:58 pm
  I expanded upon Nathan’s ideas and added a modal window for resolve comments and a few improvements.
  http://www.servicenowelite.com/blog/2017/5/12/service-portal-resolve-incident-button
  Thanks Nathan, this site helped me out a lot.
  Reply
  1. Nathan Firth says:
    May 12, 2017 at 8:46 pm
    Thanks Mike,
    That’s a great addition. Thanks for sharing!
    Reply
  2. Srivani says:
    July 18, 2019 at 4:07 am
    Hello Mike,
    I’m trying to use the widget code that is in the following link, http://www.servicenowelite.com/blog/2017/5/12/service-portal-resolve-incident-button, but is not working.
    It doesn’t show the Widget at all when using the first line and the Client Controller script is giving error “It should contain a javascript function” when saving the same exact code.
    Can anyone please advise?
    Reply
2. Urmilla says:
  June 22, 2018 at 9:52 pm
  Hi Troy,
  This is exactly what I intend to do.
  Can you let me know how you implemented hiding the button when state is not resolved, I am new to Service Portal and hence I am asking this noob question
  Thanks,
  Urmilla
  Reply
James Jurden says:
March 27, 2017 at 1:03 pm
How do you add that button to the form?
Reply
1. Nathan Firth says:
  March 28, 2017 at 12:50 am
  Just drag it to the page using the designer.
  Reply
Karan Sharma says:
July 25, 2017 at 10:06 pm
What if I have a form widget and a custom button widget on same page. If I change any value to the form and click on button, it updates the form.
What I m trying to achieve is to redirect on button click as well as save the form. As you know action.setRedirectURL() does not work with Service Portal, so I achieved it by changing some part of your code. But I am still trying to figure out how to update the form.
Any views?
Reply
1. Nathan Firth says:
  July 25, 2017 at 10:33 pm
  You could update the form widget to submit upon an event, and then trigger the event from your button widget.
  See here: https://serviceportal.io/using-events-communicate-widgets/
  Reply
  1. Karan Sharma says:
    July 26, 2017 at 2:00 pm
    Hi Nathan,
    Thanks for the reply.
    Is there any way I can call the out of the box event in form widget to update the record? I see below set of code which updates the form onclick of UI Action.
    $scope.$on(“spModel.uiActionComplete”, function(evt, response) {
    var sysID = (response.isInsert) ? response.sys_id : $scope.data.sys_id;
    loadForm($scope.data.table, sysID).then(constructResponseHandler(response));
    });
    My button widget has a glide object of the same table and record as the form, but when I try to pass it, it is still not updating the form. If I don’t pass any response it gives me a console error.
    $rootScope.$broadcast(“spModel.uiActionComplete”, c.data.gr);
    c.data.gr has the glide object from server script.
    data.table = input.table || $sp.getParameter(“table”);
    data.sys_id = input.sys_id || $sp.getParameter(“sys_id”);
    data.id = input.id || $sp.getParameter(“id”);
    // Valid GlideRecord
    var gr = new GlideRecord(data.table);
    if (!gr.isValid())
    return;
    // Valid sys_id
    if (!gr.get(data.sys_id))
    return;
    data.gr = gr;
    I also tried by getting the “g_form” broadcast from form widget to button widget and resend it back as the response. Still no luck.
    Thanks
    Karan
    Reply
    1. Karan Sharma says:
      August 7, 2017 at 9:27 pm
      Hi Nathan,
      Hope this will show what I was trying to achieve, thanks for help buddy!!
      https://community.servicenow.com/thread/277347
      Thanks
      Karan
      Reply
Janani says:
September 26, 2017 at 11:05 am
HI All,
How to add a button as”modify Approver?”(should refer to User table) in the catalog item form . Once added approver it should get reflected in the respect form.
THanks
Reply
Ryan Woodburn says:
January 18, 2018 at 4:38 pm
Hi Nathan
I have my html set to show / hide certain buttons:
<button ng-if="data.state!=130 && data.state!=3"
However, once I click the resolve button, the incident will resolve, my comments added etc, but the resolve button does not disappear until I refresh my browser..
Any ideas?
Thanks
Reply
Renuka says:
January 25, 2018 at 11:32 am
can we make a field mandatory while using the Resolve Button
Reply
Hitesh says:
June 12, 2018 at 3:01 pm
How to hide custom button based RITM state. I want to hide button if the ritm is approved.
Reply
Hitesh says:
June 12, 2018 at 3:04 pm
if the stage is waiting for approval, button should be visible
Reply
Soraya Vally says:
June 28, 2018 at 7:40 am
I created a button for cancel on the service portal using this site thank you it was so useful! I now tried to created a request approval button on the service portal which works exactly as i need it to, however the button visibilty should only show when on the change_request ticket form and seems to be coming up on incident as well, so i think I’m missing something because its not reading my visibility code. Also when i click request approval the button is not disappearing?
Reply
Carl Fransen says:
July 23, 2018 at 11:35 pm
Thanks for posting this – really useful.
I’m trying to add a button to update a field in the HR Module (table=sn_hr_core_case) but when I reload my page where I have added the widget I receive a bunch of read errors at the top whic are:
-Server Javascript error Cannot read property “table” from undefined
-Line number 4
-Script source code logged to browser console
-failing widget: ‘Opus Reapproval’ (sys_id of my widget)
Not sure why this isn’t working – is it because I’m in the ‘HR Service Portal’ scope?
Reply
1. Carl Fransen says:
  July 25, 2018 at 2:38 am
  I have this working now – I made it more HR Case specific as opposed to a generic ‘table’ property.
  Reply
Carl Fransen says:
July 25, 2018 at 2:45 am
Hi,
Worked with one of our internal web developers and he shortened the section int he server script, lines 16 to 32:
if (input && input.action) {
var action = input.action;
// If Incident table
if (data.table == ‘incident’) {
if (action == ‘resolve’) {
// Resolve Incident
gr.setValue(‘incident_state’, 6);
gr.setValue(‘state’, 6);
gr.setValue(‘resolved_by’, gs.getUserID());
gr.update();
}
if (action == ‘cancel’) {
// Do something else
}
}
}
The new code looks like this:
switch (input && input.action) {
case ‘resolve’:
gr.setValue(‘incident_state’, 6);
gr.update();
break;
// case ‘cancel’:
//do something else – keep adding case sections for more buttons…
}
Quite a lot shorter, hope this helps someone.
Cheers
Carl.
Reply
Richard says:
August 31, 2018 at 4:11 pm
Nathan this is great! how would i make it greyed out once clicked?
Reply
1. Sanjay says:
  September 10, 2018 at 3:10 pm
  You can use the ng-disabled=”shouldBeDisabled” directive in the button and decide when to make it true or false in you client controller
  Reply
Arnab says:
September 14, 2018 at 2:32 pm
Very Simple, Robust, understandable and opens up the mind to more complex use cases on buttons in portal.
Thanks a lot
Reply
Russ Hart says:
September 20, 2018 at 1:45 pm
Great article Nathan – many thanks.
Can you give any advice regarding either re-sizing the button text according to size of the button, or preferably wrapping the button text if the button is too narrow to accommodate the text (at present the text will extend outside the button if the button width is too small).
thanks again
Reply
MANNAM PRAVEEN KUMAR says:
May 16, 2020 at 9:31 am
I want code hmtl and server and client script for creating registration form can anyone help me. Do it plz
Reply
Denise says:
July 16, 2020 at 1:30 pm
so what is the final code for HTML, Client Controller, and Server Script. Not sure I can follow all the chats. Can someone just add the final code for all? I am only looking to add a Reopen Incident button.
Reply
1. Nathan Firth says:
  July 16, 2020 at 5:13 pm
  Simply take the code from the post and change lines 24-26 to open the incident instead of resolving it.
  Reply
sarath says:
August 31, 2020 at 1:10 pm
Hello ,
I need the update button in the service portal for the incident table.
When i click the update button then all the data inthe form form should update in the service portal.
Can u please help for html,css, client,server code on widget.
Reply
Mani says:
September 25, 2020 at 12:31 pm
I am creating one button in my widget once user can click that button I need to update selected incident record comments
Reply
Sai says:
April 9, 2021 at 6:26 pm
I have to get Accept and reject buttons when incident was resolved. Can you please help
Reply
Gautam says:
May 5, 2021 at 2:36 pm
Hello All,
I have implemented the code in my MSP Instance for one of our customer.But no luck,The code is not working as expected.Even when I click on Resolve Button its not working nor its resolving the Incident.
Can anyone help me out here.
Thanks
Reply
Juhi jha says:
April 26, 2022 at 6:02 am
I want to make additional comments mandatory whenever user clicks resolve incident button
Reply
Markus Kraus says:
April 30, 2022 at 10:52 am
This does allow setMandatory, but its a great way to do small client side stuff. I have found a way however to enable client side scripting on all ui actions, this also works without modifying the OOTB form widget. The method is described in the Article:
https://community.servicenow.com/community?id=community_article&sys_id=b1588f6fdbcf011439445ac2ca961922
Reply
Sabarika says:
August 25, 2022 at 11:27 am
Hi,
How to use the ui action in widge in portal
Thanks
Reply
Chandukumar says:
September 17, 2022 at 2:01 pm
how to create save and cancel buttons when changes are made in popup on serviceportal
Reply
saipriya says:
November 2, 2022 at 3:16 pm
Hi,
Can I know how to create a custom button to create a new incident on portal ?
Reply
Rana says:
July 10, 2023 at 1:57 pm
Hi,
Can we copy a existing RITM from portal to create new and user should be able to modify and submit new RITM from Portal page.
Reply
Ravi says:
July 13, 2023 at 12:47 pm
Hi Nathan,
I have one requirement , create “copy” button , on-click copies entire form and redirect to duplicate form along with the which we have filled values in variables on record producer form in service portal. Could you please help me on this
These action should works before submit the form. Post creation of other form user would submit the both forms individually if required
Reply

Create custom action buttons in Service Portal

59 comments

Leave a Reply Cancel reply

Subscribe to get notified when I post a new article or tutorial

Nathan Firth

About ServicePortal.io

Search