How to show Special Handling Notes when changing the Account field on the CSM Configurable Workspace

[Dhanakoddi2]

Hi Team,

I have requirement to show the Special Handling Notes configured for the selected "Account" when we are changing the Account field with the same OOB format.

I have copied the OOB script and modified as per my requirement. It is working now in the Platform UI/Native UI. Here I need to show the same in CSM Configurable Workspace UI, but I am unable to achieve it.

I have used a GlideModal in the client script which is working fine in Platform UI but for CSM Workspace it is not working.

Could anyone know the solution for this please help me on this. Thanks in Advance.

Below are the scripts I have written to this requirement.

Client Script : 

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
if (isLoading || newValue === '') {
return;
}

var tableName = 'customer_account';
var id = newValue;

var gm = new GlideModal('special_handling_notes_onchange');
gm.setTitle(getMessage('Special Handling Notes'));
gm.setWidth("$[width]");
gm.setPreference("tableName", 'customer_account');
gm.setPreference("id", g_form.getValue('account'));
gm.setPreference("focusTrap", true);

var ga = new GlideAjax('Special_Handling_Notes_Popup_on_Case');
ga.addParam('sysparm_name', 'ReturnNotesSI');
ga.addParam('sysparm_table', tableName);
ga.addParam('sysparm_id', id);
ga.getXML(Callback);

function Callback(response) {
var answer = response.responseXML.documentElement.getAttribute('AnswerNotes');
if (answer != '') {
gm.render();
}
}
}

Script Include : 

var Special_Handling_Notes_Popup_on_Case = Class.create();
Special_Handling_Notes_Popup_on_Case.prototype = Object.extendsObject(AbstractAjaxProcessor, {

ReturnNotes: function(tableName, id) {

var notes = [];

//For Conditional Type Special Handling Notes

var con = new GlideRecord('sn_shn_notes');
con.addEncodedQuery('type=2');
con.query();
while (con.next()) {
var table = con.getValue('table_name');
var condition = con.getValue('conditions');
if (table == tableName) {
var gr = new GlideRecord(tableName);
gr.addEncodedQuery(con.getValue('conditions'));
gr.query();
while (gr.next()) {
if (gr.sys_id == id) {
notes.push(con.getValue('sys_id'));
}
}
}

}

//For Standard Type Special Handling Notes

var get_notes = new GlideRecord('sn_shn_notes');
get_notes.addQuery('related_record', id.toString());
get_notes.addQuery('table_name', tableName.toString());
get_notes.query();
while (get_notes.next()) {
notes.push(get_notes.getValue('sys_id'));
}

return notes;
},

ReturnNotesSI: function() {

var notes = [];

/********* For Conditional Type Special Handling Notes ************/

var tableName = this.getParameter('sysparm_table');
var id = this.getParameter('sysparm_id');

var con = new GlideRecord('sn_shn_notes');
con.addEncodedQuery('type=2');
con.query();
while (con.next()) {
var table = con.getValue('table_name');
var condition = con.getValue('conditions');
if (table == tableName) {
var gr = new GlideRecord(tableName);
gr.addEncodedQuery(con.getValue('conditions'));
gr.query();
while (gr.next()) {
if (gr.sys_id == id) {
notes.push(con.getValue('sys_id'));
}
}
}

}

/********* For Standard Type Special Handling Notes ************/

var get_notes = new GlideRecord('sn_shn_notes');
get_notes.addQuery('related_record', id.toString());
get_notes.addQuery('table_name', tableName.toString());
get_notes.query();
while (get_notes.next()) {
notes.push(get_notes.getValue('sys_id'));
}
this.getRootElement().setAttribute('AnswerNotes', notes);

},

type: 'Special_Handling_Notes_Popup_on_Case'
});

UI Page : 

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:requires name="styles/notecard.css" />
<g:requires name="styles/heisenberg/heisenberg_all.css" includes="true" />
<g:evaluate jelly="true" var="jvar_table" expression="RP.getWindowProperties().get('tableName')" />
<g:evaluate jelly="true" var="jvar_id" expression="RP.getWindowProperties().get('id')" />

<g:evaluate jelly="true">
var tableName = jelly.jvar_table;
var id = jelly.jvar_id;
var gr;
var current_num;
var total_msg;
var messages = [];
var page_aria_msg = "";
var note_pref;
if(id) {
var cc = new GlideRecord(tableName);
if(cc.get(id)) {
note_pref = gs.getProperty("sn_shn.note_preferences");
max_num_alerts = gs.getProperty("sn_shn.max_num_alerts");
messages = new global.Special_Handling_Notes_Popup_on_Case().ReturnNotes(tableName,id);
if(messages){
var msg = messages.toString();
var msg_arr = msg.split(',');
gr = new GlideRecord('sn_shn_notes');
gr.addQuery('sys_id','IN',msg_arr);
if(gs.getProperty("glide.sys.domain.use_record_domain_for_processes") == 'true')
gr.addDomainQuery(cc);
gr.orderBy('priority');
gr.setLimit(max_num_alerts);
gr.query();
total_msg = gr.getRowCount();
current_num = total_msg;
}
}
}
switch (total_msg) {
case 0:
page_aria_msg = gs.getMessage('Special Handling Notes. There are no messages.');
break;
case 1:
page_aria_msg = gs.getMessage('Special Handling Notes. There is one message.');
break;
default:
page_aria_msg = gs.getMessage('Special Handling Notes. There are {0} messages.', total_msg);
}
</g:evaluate>
<g:evaluate var="jvar_dismiss_message" object="true" jelly="true">
var message = gs.getMessage("Dismiss");
message;
</g:evaluate>

<script language="javascript">
addAfterPageLoadedEvent(function(){
jQuery('#shn').focus();
});
function shi_clicked(clicked_id, table, id){
changeSHNCount();
if("${note_pref}" != null ${AMP}${AMP} "${note_pref}" == "true") {
markAlertSeen(clicked_id, table, id);
}
jQuery("#"+clicked_id).slideUp( "slow" ).fadeOut();
}
</script>
<div class="shn-popup" id="shn">
<span class="sr-only">${page_aria_msg}</span>
<div id="msg-num"><span id="num_msg">${current_num}</span>$[SP]of$[SP] <span id="total_msg">${total_msg}</span>$[SP] ${gs.getMessage("messages")}</div><g:no_escape>${jvar_msg2}</g:no_escape>
<div class="notecard col-sm-12">
<j:while test="${gr.next()}">
<j:if test="${gr.priority == 1}"><j:set var="sysparm_priority" value="#F95050" /></j:if>
<j:if test="${gr.priority == 2}"><j:set var="sysparm_priority" value="#FC8A3D" /></j:if>
<j:if test="${gr.priority == 3}"><j:set var="sysparm_priority" value="#71E279" /></j:if>
<j:if test="${gr.priority == 4}"><j:set var="sysparm_priority" value="#2E9DD6" /></j:if>

<div id = "${gr.sys_id}" aria-label="${gr.getDisplayValue('priority')} ${gr.getDisplayValue('short_description')} ${gr.getDisplayValue('message')}">
<table id="shn-table_${gr.sys_id}" class="notecardTable" style="border-left-color: ${sysparm_priority};">
<tr><td id="shn-message_${gr.sys_id}" class= "tableHeader shnMessage">${gr.getDisplayValue('short_description')}</td></tr>
<tr>
<td colspan="7" id="shn-details_${gr.sys_id}" class="selector shnDetails">
<j2:whitespace trim="false">
<g:no_escape>${gr.getDisplayValue("message")}</g:no_escape>
</j2:whitespace>
</td>
<td class="shnDismiss">
<button id = "shn-dismiss_${gr.sys_id}" class="btn btn-default shnDismissBtn" onClick="shi_clicked('${gr.sys_id}','${jvar_table}','${jvar_id}');" aria-describedby="${gr.sys_id}">${jvar_dismiss_message}</button>
</td>
</tr>
</table>
</div>
</j:while>
</div>
</div>
</j:jelly>

[JagjeetSingh]

Hi,

As your action is client side, you have to write the script for workspace separately to render your UI Page in workspace.

Below is the link that you can use to get more information about this. @Ashley has written some very informative articles on this.

https://www.servicenow.com/community/next-experience-articles/how-to-use-ui-actions-in-workspaces/ta...

[Dhanakoddi2]

Hi Jagjeet,

That link I have gone through already but unable to pass the parameters to the script include which is calling from that UI page. based on that parameter only the Special Handling Notes will pop-up.

Thanks!