Tejas Adhalrao
Kilo Sage

Hi Community,

In one of my recent ServiceNow implementations, I worked on enhancing the My Approvals experience in Service Portal.

This time, I wanted to take it a step further and share the implementation behind the widget, including the code and the complete Approval Widget XML.

The main goal was to make the approval experience more useful for approvers while keeping the interaction on a single page.

 

Key Enhancements

The customized widget includes:

  • Approve / Reject individual approvals
  • Reject with a mandatory reason
  • Send Back for More Information
  • Bulk Approve / Bulk Reject
  • RITM Request Details
  • Support for direct and delegated approvals
  • Customized UI aligned with the portal theme

 

Implementation Highlights

The widget primarily works with the sysapproval_approver table.

For individual actions, the selected approval sys_id and action are passed from the client controller to the server script, where the approval state and comments are updated.

 

Approval Widget : 

approval list.png

 

Reject with Reason

Instead of rejecting an approval immediately, a modal is displayed to capture a mandatory rejection reason.

The reason is then stored in the approval comments and also added to the associated task/request, giving the requester visibility into why the approval was rejected.

reject reson.png

 

Send Back for More Information

When you click Send Back for More Information, the record is sent back to the requester, and a popup appears to capture the clarification or details needed. The entered message is added to the Additional Comments, and the state changes to “Roll Back” so the requester can review and respond.

send back.png

 

Bulk Actions

Checkboxes allow approvers to select multiple records. The selected sys_ids are then sent to the server for bulk processing.

For bulk rejection, a common rejection reason can be entered through the popup and applied to the selected approvals.

 

bulk action.png

 

Direct & Delegated Approvals

The widget retrieves pending approvals assigned directly to the logged-in user as well as approvals available through approval delegation.

I also added duplicate handling so that the same approval isn't displayed multiple times when combining the two result sets.

 

RITM Request Details

For catalog requests, the widget retrieves the submitted variables using GlobalServiceCatalogUtil and displays them through the OOTB sc-variable-summarizer widget.

This allows approvers to understand the request details without having to navigate away from the approval page.

 

request detials.png

 

 

UI Customization

Along with the backend functionality, I also customized the widget UI with:

  • Checkbox-based record selection
  • Bulk action buttons
  • Individual Approve/Reject actions
  • Popup-based interactions
  • Customized table and panel styling
  • Visual action buttons for a cleaner user experience

The idea was to keep the interface simple while putting the most commonly required approval actions directly in front of the approver.

 

Attached Widget XML

 

I've also attached the complete Approval Widget XML with this post.

If you'd like to try it yourself, you can import the attached XML into your ServiceNow instance as a Service Portal widget and test the functionality.

Please review the implementation and adjust it according to your instance, ServiceNow version, security requirements, and business logic before using it in a production environment.

I hope this helps anyone working on a similar My Approvals customization.

I'd love to hear your feedback, suggestions, or improvements—especially around performance, security, and OOTB best practices.

 

 

If you found this post helpful, please mark it as helpful so it can reach and benefit other Community members as well.

Thanks for reading, and I’d love to hear your feedback or suggestions!

 

 

 

1 Comment