How to add a custom attachment button in a catalog item

[Arundhati]

Hello Everyone,

Can someone please help me to create a custom button on a specific catalog item as the UI page is not supported in the recent version of ServiceNow

[BhavaniYamsani]

Hi @Arundhati ,
We can do this with supported client-side APIs—no UI Pages needed.

Below are two solid implementations depending on where users submit the item:

• Service Portal / Next Experience (Catalog UI) — Recommended, simplest

• Classic UI16 form — if your users order from the platform UI

---

1) HTML Variable Button + Catalog Client Script

Works in Service Portal and Next Experience Catalog.

1) Add an HTML variable to the Catalog Item

• Catalog Item → Variables → New
• Type: HTML
• Question: Custom Actions (or similar)
• Default value (HTML):

HTML

<div class="m-t m-b">

<button id="u_add_attach_btn" class="btn btn-primary">

Add attachment

</button>

</div>

Uses out‑of‑the‑box Bootstrap styling so it blends in.

2) Add a Catalog Client Script (UI type: All, Type: onLoad)

This binds the click to open the native attachment dialog:

JavaScript

function onLoad() {

function wireButton() {

var btn = document.getElementById('u_add_attach_btn');

if (!btn) { setTimeout(wireButton, 150); return; } // SP renders async

btn.addEventListener('click', function (e) {

e.preventDefault();

// Safety: check attachments are enabled on this item

if (typeof g_form.attachmentsEnabled === 'function' && !g_form.attachmentsEnabled()) {

g_form.addErrorMessage('Attachments are disabled for this item.');

return;

}

// Opens the standard attachment dialog bound to this request/cart context

if (typeof g_form.addAttachment === 'function') {

g_form.addAttachment();

} else {

g_form.addErrorMessage('Attachment dialog is not available in this context.');

}

});

}

wireButton();

}

``

//Sample code snippet i am giving here, please modify as per the requirement

Add another Catalog Client Script (Type: onSubmit) to enforce attachments:

JavaScript

function onSubmit() {

// Require at least one attachment

if (typeof g_form.getAttachments === 'function' && g_form.getAttachments() < 1) {

g_form.addErrorMessage('Please add at least one attachment before submitting.');

return false; // block submit

}

return true;

}

Notes

• Keep Attachments enabled on the item (Catalog item form → Attachment: ✔).
• If you want to hide the default paperclip only in Service Portal, add a small CSS theme rule:
  JavaScript

  .sp-attachments, .sp-attachment { display: none !important; }

  Show more lines
  (Scope to the item or page so you don’t hide it globally.

---

✅ Option B: Classic Platform UI (UI16) users

If some users open the catalog item in the classic UI, the same HTML variable works. The click handler stays the same because g_form.addAttachment() is supported in UI16 catalog as well.

If you prefer a Macro with Label variable instead of HTML:

1. Create a UI Macro (e.g., u_add_attachment_btn😞

XML

<j:jelly xmlns:j="jelly:core" xmlns:g="glide">

<button id="u_add_attach_btn" class="btn btn-primary">Add attachment</button>

</j:jelly>

Show more lines

1. Add a Macro with label variable and point it to that macro.
2. Use the same onLoad client script to bind the click and call g_form.addAttachment().

---

Common Tips:

• Attachment disabled: If the Catalog Item has attachments disabled, your custom button will show the error above. Keep it enabled and hide the default UI if you need a custom entry point.
• Service Portal rendering: Bind handlers after the DOM is available (the setTimeout retry above handles that).
• Validation: Use g_form.getAttachments() during onSubmit to make attachments required.
• Limiting file types/sizes: You can’t fully enforce on the client; rely on System Properties and ACLs/Validators. You can display guidance messages or do server-side validation (Flow/Scripted validation) and return an error message.
  
  Please mark as helpful, if you learn something from this

Thanks
Yamsani Bhavani
Developer - SN SecOps, Custom Applications, UI Builder, Service Portal

[Tanushree Maiti]

Hi @Arundhati 

There are several ways to do it.

But first recommendation is to implement it by UI macro as per Servicenow  KB article KB0791202 :

 'Add Attachment' button on catalog that works on both request catalog item form and RITM form. 

You can create a variable with type custom there you get options to include macro

Also you can refer : https://www.servicenow.com/community/servicenow-ai-platform-blog/create-a-custom-attachment-button-f...

[Ankur Bawiskar]

@Arundhati 

yes UI page/UI macros are not supported on Portal Side.

Why not use Attachment type variable so that user can upload file?

Why to use other customization?

Types of service catalog variables 

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

[GlideFather]

Hi @Arundhati,

there is a variable type Attachment or there's a section in the bottom of the page (if enabled for such an item).

You can add this variable to your catalog item(s) and even make it visible/hidden/mandatory under conditions stated in catalog ui policy if needed:

Or every single catalog item has this option to hide attachment section under the Portal settings, this will be displayed always or never, no conditions available. If you want to have it only sometimes then hide it from here and use the method above.

 

When Hide Attachment is false, then you will see this: 

Why would you need any custom button? This is already working for you with no efforts..