Hi
I want to add a attachment next to a field in a form, similar to what is shown in the attached image . How can I achieve this ?
Thank you
Hello, what do you want to achieve by this? Out-of-box button 'Manage attachments' doesn't meet your requirements?
To add button next to a field, you can use UI Macro:
- First create a new UI macro
- Open table Macros [sys_ui_macro] and create a new record
- Name a macro as you want and copy below code to XML field:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<a onclick="saveAttachment(g_form.getTableName(), g_form.getUniqueValue())" title="Add attachment" class="icon ref-button icon-paperclip btn btn-default"></a>
</j:jelly>
- Now go to a form with a field you want to add a button to.
- Right-click on a field label and select 'Configure Dictionary'
- Add a new attribute into field Attributes ref_contributions=<ui macro name> (in my example it is ref_contributions=add_attachment)
Note: Be aware to which dictionary entry you are adding the attribute. Maybe you will need to create a dictionary entry override to exact table so you don't add a button to the parent table (e.g. in case of Incident table you might be adding macro to parent Task table by mistake).
Result:
To remove border around icon, just remove "btn-default" class from UI macro code.
UI macro uses the same function saveAttachment() as the OOB 'Manage attachments' button.
You always adding an attachment to the current record.
If my answer helped you, please mark it as correct and helpful, thank you 👍
Martin
Hello @1_DipikaD
Unfortunately you can't add a UI macro next to multiline text field (type string, max length is higher than 255 characters).
Official ServiceNow Documentation: Altering tables and fields using dictionary attributes
Look for 'ref_contributions' and 'field_decorations', both do the same thing.
I suggest to add a field message with onLoad Client Script:
g_form.showFieldMsg('justification','You can add an attachment via paperclip button on top of the form.','info');
Documentation: g_form.showFieldMsg()
Other workaround is create onLoad Client Script and add a button with DOM manipulation. I have done that once in the past for Platform UI. I can't guarantee functionality in a workspace though.
- Create new Client Script for Change Request table [change_request]
- Type: onLoad
- Isolate script: unchecked (maybe you will need to add this field to the form first)
Paste this code into Script field:
function onLoad() {
var table = g_form.tableName;
var field = 'justification';
var btnTitle = 'Add attachment';
var btnIcon = 'icon-paperclip';
var onClickFn = 'saveAttachment(\'' + g_form.getTableName() + '\',\'' + g_form.getUniqueValue() + '\')';
// Define an HTML button
var buttonHTML = '<a id="add-attachment" onclick="' + onClickFn + '" title="' + btnTitle + '" class="icon ref-button ' + btnIcon + ' btn btn-default" data-original-title="' + btnTitle + '"></a>';
// Find a div with the field (Platform UI)
var fieldElement = document.querySelector('#element\\.' + table + '\\.' + field);
if (fieldElement) {
// Find a div to add a button to
var addonDiv = fieldElement.querySelector('.form-field-addons');
if (addonDiv) {
// Insert button into div
addonDiv.innerHTML += buttonHTML;
}
}
}
Warning: DOM manipulation is a bad practice and should be used only as a last resort.
If my answer helped you, please mark it as correct and helpful, thank you 👍
Martin
