Enhance UX SC Catalog Item widget submit button

Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

Hi there,

While working on the Service Portal, I noticed that the Submit button on the SC Catalog Item widget acts a bit confusing. Confusing as:

1) First it's clickable with label "Submit"
2) On click it turns not clickable with label "Submit" plus next to the button a text "Submitting..."
3) And once submitted the button is not clickable with label... "Submit"?!

The out-of-the-box UX

We could do better! To enhance the UX, I digged into the Widget code and altered it slightly.

First, the enhanced UX

Note: Tested with Catalog Item and Record Producers that have Request Method "Submit", and the SC Catalog Item instance options having Auto redirect after submission turned off

So what do we need to change to the SC Catalog Item widget to achieve this?

1) Clone the SC Catalog Item widget and tie the cloned widget to the Service Catalog (sc_cat_item) page.
2) Modify the Body HTML template, Server script, and Client controller:

Body HTML template
--- Replace all {{::submitButtonMsg}} with {{submitButtonMsg}}
--- Remove all <span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>

Server script
--- Within the var m = data.msgs = {}; section (line 92), add m.submittingMsg = gs.getMessage('Submitting...');, and add m.submittedMsg = gs.getMessage('Submitted');

Client controller
--- Within function getOne() (line 419), add $scope.submitButtonMsg = $scope.m.submittingMsg; (for example on line 420)

--- In the same function, within add $scope.submitButtonMsg = $scope.m.submittedMsg; (in my case line 507, which is within the else of if ($scope.data.is_wishlist_item) and within if (c.options.auto_redirect == 'false'))

---

And that's it actually. Hope you like it. If any questions or remarks, let me know!

Kind regards,

Mark Roethof

ServiceNow Technical Consultant @ Paphos Group
---

LinkedIn