Add a custom button on Catalog item,

[pathumharsh]

I’m trying to add a custom button on a Service Catalog Item and would like some guidance on the best approach.

I need to place a custom button on the Catalog Item form that will perform a specific action when clicked, 
Example : Add a button called "Read Me", and redirect to an URL when click the button

[Ankur Bawiskar · Accepted solution]

@pathumharsh 

You will have to use variable of type Custom and link a widget to it

That widget HTML will have a HTML button and you can then handle the URL logic

Something like this

1) widget

HTML:

<div class="form-group">
  <button type="button"
          class="btn btn-primary"
          ng-click="c.readMe()">
    Read Me
  </button>
</div>

Client Controller:

api.controller = function() {
    /* widget controller */
    var c = this;

    // Target URL you want to redirect to
    c.readMeUrl = 'https://www.google.com';

    // Action on button click
    c.readMe = function() {
        // Redirect current window to the URL
        window.open(c.readMeUrl, '_blank'); // opens in new tab
        // or use:
        // window.location.href = c.readMeUrl;  // opens in same tab
    };
};

2) add this to variable of type custom

Output

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[SohamTipnis]

Hi @pathumharsh,

You can achieve this, but for catalog items, it’s better not to rely on UI actions, especially if the item is used in Service Portal.

A simple and clean approach is to add the button as part of the form using a catalog variable and handle the click via a catalog client script.

Here’s how you can explain/implement it:

• Create a variable on the Catalog Item (Label or Macro type)
• Add a small HTML button in that variable (e.g., “Read Me”)
• Then use an onLoad catalog client script to define a function that opens your URL using window.open()

This way, when the user clicks the button, it redirects to the required URL in a new tab.

This approach works reliably in Service Portal and keeps things simple without fighting platform limitations.

If you're working in the native UI, a UI action can also be used, but it’s generally not preferred for catalog items and may not behave consistently across views.

In short:
Use Catalog Variable + Client Script for a stable and recommended solution.

You can refer to the below documents; I used them to answer you:

https://www.servicenow.com/docs/r/application-development/app-engine-studio/add-standard-catalog-ite...

https://www.servicenow.com/docs/r/servicenow-platform/service-catalog/t_AssignItemToAddlCatalogsCate...

https://www.servicenow.com/docs/r/employee-service-management/employee-experience-foundation/disable...

Let me know if this helps!!!!😉

If you find my answer useful, please mark it as helpful and correct. ‌‌‌‌‌‌‌‌‌‌‌😊

Regards,
Soham Tipnis
ServiceNow Developer ||  Technical Consultant
LinkedIn: www.linkedin.com/in/sohamtipnis10

[pathumharsh]

Thank you so much @SohamTipnis 

[Ankur Bawiskar · Accepted solution]

@pathumharsh 

You will have to use variable of type Custom and link a widget to it

That widget HTML will have a HTML button and you can then handle the URL logic

Something like this

1) widget

HTML:

<div class="form-group">
  <button type="button"
          class="btn btn-primary"
          ng-click="c.readMe()">
    Read Me
  </button>
</div>

Client Controller:

api.controller = function() {
    /* widget controller */
    var c = this;

    // Target URL you want to redirect to
    c.readMeUrl = 'https://www.google.com';

    // Action on button click
    c.readMe = function() {
        // Redirect current window to the URL
        window.open(c.readMeUrl, '_blank'); // opens in new tab
        // or use:
        // window.location.href = c.readMeUrl;  // opens in same tab
    };
};

2) add this to variable of type custom

Output

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[pathumharsh]

Thank you so much @Ankur Bawiskar