How to add a attachment next to a field in a form ?

[1_DipikaD]

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

[Martin Friedel · Accepted solution]

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

[Martin Friedel · Accepted solution]

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

[1_DipikaD]

Hi @Martin Friedel 

I tried UI macros and dictionary changes on change table justification field as you mentioned but couldn't get expected result . Could you please take a look if i have made any mistake ?

Thank you

[Martin Friedel · Accepted solution]

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.

1. 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

[1_DipikaD]

Hi @Martin Friedel 

tried this keeping isolate script box unchecked  but did not get the expected result . 

function onLoad() {

   //Type appropriate comment here, and begin script below

 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;

        }

    }

}  

}