Adding attachment button to service catalog request

[Jan-Z]

I have created a service catalog item which requires documents to be attached to the request before the request can be submitted. The team working with this request does not like the paperclip icon and they would like a "button" but in the middle of the service catalog item below an already created label. They want the "button" because they feel it will be more visible to end users submitting requests.

To accomplish this I created a variable macro with label and used the macro add_attachment. This looks correct and provide the look the end users want BUT
it does not work. Upon testing I can add attachments using this button and the attachments appear at the top of the request as attachments under manage attachments. BUT upon submission the attachments disappear. When I look at the submitted request there are no attachments, when I look at the SC item there are no attachments.

Does anyone know how to add an attachments 'BUTTON" to an SC request? Or to fix the issue I am having using the macro with label? Any help would be appreciated. Thanks.

[JonathanJacob · Accepted solution]

1. Create UI Macro
1a. In the "Type Filter Text" search for UI Macro
1b. Create New:
1c. Paste the following code:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<b>Use the paperclip</b>
<a onclick="saveCatAttachment(gel('sysparm_item_guid').value, 'sc_cart_item')">
<img title="Attachments..." height="16" src="images/icons/attachment.gifx" border="0" width="16"/></a>
<b>to attach items to this request.</b>
</j:jelly>

2. Add a Variable to your Catalog Item.
3. Type-- UI Macro
4. Choose your newly created macro in step 1.
5. It should show up on your form (see attachment) it is clickable and functions just as the OOB paperclip icon on the top right of forms.
6. If you want change two attributes in the code above
6a. Change the icon by uploading an icon or choosing one from the image browser (src="images/icons/attachment.gifx" or src="images/pdf.gifx")
6b. Change the size of the icon (height="16" or height="25")

Try out your UI macro.

[Dan Alexander1]

Had to login to say this was super helpful for me as well, thanks!!

[Bharath Padaki]

HI jonathan,

This works great. However, I'm using the macro on a record producer. Once submitted I need to display the variable editor on the target record. How do I hide this macro on the target record variable editor? In my case, it is the HR case form.

[Bharath Padaki]

Ignore that. I figured it out!

[Zolliboppp]

Hi Bharath,

How did you figure this out to work on record producer and attach the file to the target record? I have treid in this script to rename 'sc_cart_item' to 'incident' - but I think it did not work for me. What did you do to get it working?

<a id="header_attachment_list_link" href='#' class="attachment" onclick="saveCatAttachment(gel('sysparm_cart_edit').value, 'incident'); return false;">  

                                                                        <img title="Attachments..." src="images/icons/attachment.gifx" height="16" border="0" width="16" /> $[sp]  

                        ${gs.getMessage('Manage Attachments')} (<span class="attachmentNumber"></span>):