Create a custom attachment button for your service catalog

[kim_purcell]

When you are submitting a service request, you can add attachments using the icon located on the form header. But, if you want to enhance the form with a customized Add Attachment button, there's a simple way to create this to make the functionality that much easier.

You'll just need to create a UI page with some basic scripting. The script will actually include the button and fires when the button is clicked. You'll also need to add a UI page variable to your catalog item to reference the UI page.

How to add a customized attachment button in your service catalog:

First, create the UI page:

1. Go to System UI > UI Pages.
2. Click New.
3. Create a name such as Add_Attachment_UI.
4. In the Category field, select General.
5. In the HTML field, copy the script from below. Label the button whatever makes sense for your catalog page (see bold text below):
   
   

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<button type="button" onclick="saveCatAttachment(gel('sysparm_item_guid').value, 'sc_cart_item')">Add Attachment</button>

</j:jelly>

6. Click Submit.

Then, add a UI page variable:

1. From your catalog item, add a New Variable.
2. In the Type field, select UI Page.
3. In Type Specifications, enter Add_Attachment_UI in the UI page field.
4. Set the rest of the fields as normal.
   
   
   

You'll now be able to view your button on your catalog item:

And when you click it, your standard attachment browser will automatically display:

Having Service Catalog UI issues? See:

Redirecting the Back to Catalog button

Get the Continue Shopping button working in your Service Catalog