<script custom-tag="" type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"How to add a custom 'Add Attachment' button to a Service Catalog Item","image":"http://support.servicenow.com/29f1d2661baf6010cafa53d8624bcb43.iix","author":{"name":"ServiceNow Support","url":"http://support.servicenow.com/now"},"keywords":"ServiceNow, NowSupport public Knowledge Base articles, Support and Troubleshooting,KB0529497,","wordcount":"218","publisher":"ServiceNow","url":"https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0529497","datePublished":"2013-09-21","dateCreated":"2013-09-19","dateModified":"2022-08-24","description":"<h2>How to add a custom 'Add Attachment' button to a Service Catalog Item</h2><br/><div style=\"overflow-x:auto\"><article><div ><h3 >Issue </h3><section><p>When submitting a Service Request, the reques","articleBody":"<h2>How to add a custom 'Add Attachment' button to a Service Catalog Item</h2><br/><div style=\"overflow-x:auto\"><article><div ><h3 >Issue </h3><section><p>When submitting a Service Request, the requester can add attachments using the icon located on the form header. That icon is not always very noticeable. Customers sometimes ask for an [Add Attachment] button to be placed within the Service Catalog to make adding attachments easier for the requester.</p></section></div><div ><h3 >Resolution</h3><section><p>Create a UI page using the following steps:</p>\r\n<ol style=\"margin-left: 10px; list-style-position: inside;\"><li>Navigate to <strong>System UI > UI Page</strong>.</li><li>Click <strong>New</strong>.</li><li>Provide a <strong>Name</strong> such as <strong>Add_Attachment_UI</strong>.</li><li>In <strong>Category</strong>, select <strong>General</strong>.</li><li>In the <strong>HTML</strong> section, copy the paste the following HTML (note that you can change the label of the button by changing the highlighted section):\r\n<pre><?xml version="1.0" encoding="utf-8" ?><br /><j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"><br /><button type="button" onclick="saveCatAttachment(gel('sysparm_item_guid').value, 'sc_cart_item')"><span style=\"background-color: #ffff00;\">Add Attachment</span></button><br /></j:jelly></pre>\r\n</li></ol>\r\n<div>Add a UI page variable using the following steps:</div>\r\n<ol style=\"margin-left: 10px; list-style-position: inside;\"><li>From your Catalog Item, add a New Variable.</li><li>In <strong>Type</strong>, select <strong>UI Page</strong>.</li><li>In <strong>UI Page</strong>, select <strong>Add_Attachment_UI</strong> (from the process above).</li><li>Set the rest of the fields as you normally would. </li></ol>\r\n<p> </p></section></div><div ><h3 >Related Links</h3><section><p>The following button appears below on your Catalog Item:</p>\r\n<div>\r\n<p><img style=\"border: 1px solid black; align: bottom;\" src=\"/Screen%20Shot%202013-09-19%20at%206.00.33%20PM.pngx\" width=\"125\" height=\"36\" align=\"bottom\" border=\"1\" /></p>\r\n<p> </p>\r\n<p>When you click the button, the standard Attachment Browser is displayed:</p>\r\n<p><img title=\"\" src=\"/Screen%20Shot%202013-09-19%20at%206.00.59%20PM.pngx\" alt=\"\" align=\"bottom\" border=\"\" hspace=\"\" vspace=\"\" /></p>\r\n<p>The rest of the features are standard, base system functionality.</p>\r\n<p> </p>\r\n</div></section></div></article></div>"}</script>