How to add UI macro pop-up to catalog variable?
This feature is available OOB for reference fields and is documented.
Example:
“Show related Incidents” icon on Incident Caller field.
It is achieved by just adding following attribute in dictionary entry of the field.
ref_contributions=ui_macro_name
However, there is no quick way to achieve a similar requirement on catalog variables of type “Reference”.
Well the good news is we can achieve this easily just with a catalog client script and you don't even need a custom UI macro.
All you need to do is
- Add an icon against the variable on the form (by manipulating the DOM).
- On click of icon it should just load list screen in a pop-up window (by using GlideDialogWindow()).
Here is the sample client script.
Requirement: To load related assets to the user (in the reference catalog variable).
function onLoad() {
//Type appropriate comment here, and begin script below
var varName = 'employee'; // name of the catalog variable after which you need the icon.
var form = typeof g_sc_form != "undefined" ? g_sc_form : g_form; // this statement is needed when working with catalog forms.
try{
//Add the icon decoration to the reference field
//If not reference variable, remove 'lookup.' below
var varEl = 'lookup.' + form.getControl(varName).id;
$(varEl).insert({
after: '<span><a name="user_assets" id="user_assets" class="btn btn-default sc-ref-spacer icon-keyboard sn-tooltip-basic" title="" data-original-title="User Assets"></a></span>'
});
//Add the 'onclick' event
$('user_assets').observe('click', showRelatedAssets);
}catch(e){}
}
function showRelatedAssets() {
var user_sysid = g_form.getValue("employee"); // get the value of the catalog variable.
var w = new GlideDialogWindow('show_list'); // "show_list" is OOB UI page
w.setTitle('Related assets');
w.setPreference('table', 'cmdb_ci_list'); // specify the table to list records
w.setPreference('sysparm_view', 'default');
w.setPreference('sysparm_query', 'assigned_to' + '=' + user_sysid); // add filter conditions
w.render();
}
NOTE:
- Uncheck "isolate script" field on client script form. (As by default direct DOM access disabled.)
- g_form.getControl(varName) do not work on sc_req_item or sc_task forms.
You need use g_sc_form (this not documented please refer KB0547171)
References
https://servicenowguru.com/system-ui/ui-macros/add-macro-non-reference-field/
https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB0547171
Mark this helpful if you like it someday.
Bookmark it for future reference.
Help me to improve this article with your thoughts.
Thank you,
Afsar Sheikh
