T
his post shows how you can easily create an attachment UI action for any form. The attachment capability is part of all forms in ServiceNow and is accessed via a paperclip icon in the top-right corner of the form. In some cases this icon may not be prominent enough for your end users. The simplest solution in that case is to set up a UI action button or link that performs the same function.
For this solution we’ll leverage the existing ‘saveAttachment’ function. This function requires a table name and a record sys_id value. The ‘getTableName’ and ‘getUniqueValue‘ client-side functions will help to identify those values. You can add this capability by creating a UI action that looks like this…
‘Save Attachment’ UI Action
Name: Save Attachment
Table: Any table of your choice (Probably Task)
Form Button: True
Client: True
Onclick:
Name: Save Attachment
Table: Any table of your choice (Probably Task)
Form Button: True
Client: True
Onclick:
saveAttachment(g_form.getTableName(), g_form.getUniqueValue());
Great idea Mark, and simple in its execution. We had the same issue in our instance. The option we decided to pursue is to replace the stock icon with one that’s easier to see. Just upload a new 16×16 pixel. GIF image named ‘images/icons/attachment.gif’ to the image library. The new icon will be used in preference to the default icon.
Great point. That’s definitely something to keep in mind whenever you’re working with any system image. The real challenge is finding an image that’s 16×16 pixels that you can actually see :). Here’s a post I wrote on the method you described.
I should have guessed that you’d have addressed that issue already 😉
Hi Mark, how would you do this for a catalog item? The paper clip is on the top right of the item form when the ESS users orders it. However that is not very prominent at all. The link points to: saveCatAttachment(gel(‘sysparm_item_guid’).value, ‘sc_cart_item’). But I can not get a UI action up there, right? I notices that in the checkout screen under “sepcial instructions” there is a nice text next to this item but I do not know how to utilize that to make the item form look similar… Any idea?
Hi Christian – I’ve done things on the checkout screen a couple of ways. One is to modify the associated ui_macro, the other is to create a ui_script that essentially does a getElementById on some existing element, then insert a new element in there, i.e. an attachment icon image and set the onClick action to whatever… saveCatAttachment() in this case. The trick with the former approach is dealing with Jelly and modifying an out of the box file, whereas the trick with the latter approach is finding an element you can reference by ID. In some cases, I had to iterate through elements when the page loads, find the 5th for example and set the ID of that element so I could then do a getElementById on it and manipulate it. The jelly approach is cleaner, but would prevent this macro from being updated by Service Now in the future, so in that sense, the UI Script is less intrusive but will be a bit slower so you need to be careful when writing your scripts to iterate through the page elements.
In the example below, I used Firebug or equivalent to look at the elements and find which one I needed to modify – in this case a table, finds the 2nd table, adds an ID tag to it, then using that ID I set display to none to hide it. For what you’re trying to do, rather than hiding, you could insert a new element for the attachment button and have it call the attachment function you need.
//adds an ID to the checkout details table, then sets to hidden
//we could possibly add some arguments to hide only certain fields here
var tables = document.getElementsByTagName('table');
var count = 0;
var tableArr = [];
for(var i=0;i!=tables.length;i++){
if(tables.item(i).getAttribute('className') == 'wide' || tables.item(i).getAttribute('class') == 'wide' ){
count++;
if(count==2){
tables.item(i).setAttribute('id','checkoutDetails');
}
}
}
gel('checkoutDetails').style.display = 'none';
}
Chris
Hi Chris,
thanks for sharing. I was talking about individual items, not the checkout. But I will go ahead today and try if any of thise works for this. I’ll keep things posted here.
CT 🙂
Hi Chris, just to update: I ttok the Jelly route and it works well. The scripting approach just doesn’t feel robust enough to me. I know the downsides. Thanks for the good input. CT 🙂
Do you care to share your code as to how you modified the ui macro to add the “Attachment” button to the item. This is exactly what I need to do.
Thank you for the help!
Jason
My query relates to attachments, hence adding it to this thread.
We’ve noticed that in our Berlin upgrade we now have a dropdown list of attachments as well as attachments showing across the top of the banner frame. My issue is that before the upgrade we could have a large number of attachments showing in the banner but now we’re limited to a maximum of 6. I can’t see any documentation on this new feature in ServiceNow Community and also can’t find any documentation on configurations that can be made to this. Eg I’m keen to remove all these banner attachments and have them only show in the dropdown rather than have a limited number appear.
Christian,
I am trying to do exactly what you mentioned above. No success .I am missing some piece i was able to put a button on the item.Its not saving the atttachment once you submit the request .can you please share your code.
Thanks
Monika
Hi. I achieved this by creating a UI Page like this:
HTML:
<b>Attach files</b>
</a>
You can change the ‘sc_cart_item’ to be any table but be sure create a new UI Page for each one.
I found this method to be great because you can make the image and text as big as you like.