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 · Accepted solution]

@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! 🙏

[Ankur Bawiskar]

@Arundhati 

Hope you are doing good.

Did my reply answer your question?

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