Workspace Client Script

Jayshree Jhawar
Tera Contributor

I have a requirement to enable Workspace Client script for below script used in UI action.

 

UI Action Script - 

function select_type(){
//var sysId = gel('sys_uniqueValue').value;
var sysId = g_form.getUniqueValue();
var table = g_form.getTableName();
var Email_dialog=new GlideDialogWindow('sn_hr_core_Quick Email Message HR');
Email_dialog.setTitle('Email Communication');
Email_dialog.setPreference('param_sys_id',sysId);
Email_dialog.setPreference('param_table_name',table);
Email_dialog.setSize(600,600);
Email_dialog.render();
}

 

 

UI Page Script

HTML - 

<!-- <?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:evaluate var="jvar_sysid" expression="RP.getWindowProperties().get('param_sys_id')" />
<input type="hidden" id="sysId" value="${jvar_sysid}"></input>
<g:evaluate var="jvar_tablename" expression="RP.getWindowProperties().get('param_table_name')"/>
<input type="hidden" id="tableName" value="${jvar_tablename}"></input>

<g:evaluate var="jvar_templates" object="true" jelly="true">
var templates=[];
var gr = new GlideRecord("u_quick_messages");
gr.orderBy('u_quick_messages_templates');
//gr.addQuery("u_table_name", "${jvar_tablename}");
gr.addQuery('u_table_name','sn_hr_core_case');
gr.query();
while(gr.next()){
templates=gr.u_quick_messages_templates.getDisplayValue().split(",");
}

templates.sort();
</g:evaluate>

<div class='form-inline'>
<div class="row row col-sm-8 col-md-offset-2">
$[SP]<label>Choose Language</label>

</div>
<div class="row row col-sm-8 col-md-offset-2">
<select id="email_lenguage">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="br">Portuguese</option>
<option value="it">Italian</option>
<option value="pl">Polish</option>
<option value="em">English-EMEA</option>

</select>
</div>

<div class="row row col-sm-8 col-md-offset-2">
<span class="glyphicon glyphicon-envelope"></span>$[SP]<label>Choose Template</label>
</div>
<div class='form-group row col-sm-8 col-md-offset-2'>
<select class="form-control col-sm-4" id="email_com" >
<option value="None" selected="selected">None</option>
<j:forEach var="jvar_value" items="${jvar_templates}" >
<j:choose>
<j:when test="${jvar_value.startsWith(' es-')}">
<j:set var="jvar_label" value="${jvar_value.substring(4,jvar_value.length())}"/>
<option class="en" value="${jvar_value}">${jvar_value.substring(4,jvar_value.length())}</option>

</j:when>
<j:when test="${jvar_value.startsWith(' br-')}">
<j:set var="jvar_label" value="${jvar_value.substring(4,jvar_value.length())}"/>
<option class="br" value="${jvar_value}">${jvar_value.substring(4,jvar_value.length())}</option>

</j:when>
<j:when test="${jvar_value.startsWith(' it-')}">
<j:set var="jvar_label" value="${jvar_value.substring(4,jvar_value.length())}"/>
<option class="it" value="${jvar_value}">${jvar_value.substring(4,jvar_value.length())}</option>

</j:when>
<j:when test="${jvar_value.startsWith(' em-')}">
<j:set var="jvar_label" value="${jvar_value.substring(4,jvar_value.length())}"/>
<option class="em" value="${jvar_value}">${jvar_value.substring(4,jvar_value.length())}</option>

</j:when>
<j:when test="${jvar_value.startsWith(' pl-')}">
<j:set var="jvar_label" value="${jvar_value.substring(4,jvar_value.length())}"/>
<option class="pl" value="${jvar_value}">${jvar_value.substring(4,jvar_value.length())}</option>

</j:when>
<j:otherwise>
<option class="es" value="${jvar_value}">${jvar_value}</option></j:otherwise>
</j:choose>
</j:forEach>

</select>
</div>

<p><br />
<br>
</br>
<br>
</br>
<br />
</p>
<p> <br />
<br>
</br>
<br />
</p>
<br />


<button class="btn btn-primary pull-right "  id="submit" onclick='getTemplate();'>Submit</button>

</div>
</j:jelly>

 

 

CLIENT SCRIPT - 

addLoadEvent(defaultload);

function defaultload() {

var lang = $j('#email_lenguage').val();

if (lang == "en") {
$j('.en').hide();
$j('.es').show();
$j('.br').hide();
$j('.em').hide();
$j('.it').hide();
$j('.pl').hide();
} else if (lang == "br") {
$j('.br').show();
$j('.es').hide();
$j('.en').hide();
$j('.it').hide();
$j('.em').hide();
$j('.pl').hide();
} else if (lang == "it") {
$j('.it').show();
$j('.em').hide();
$j('.es').hide();
$j('.en').hide();
$j('.br').hide();
$j('.pl').hide();
} else if (lang == "em") {
$j('.em').show();
$j('.es').hide();
$j('.en').hide();
$j('.br').hide();
$j('.pl').hide();
$j('.it').hide();
} else if (lang == "pl") {
$j('.pl').show();
$j('.es').hide();
$j('.en').hide();
$j('.it').hide();
$j('.em').hide();
$j('.br').hide();
} else {
$j('.br').hide();
$j('.es').hide();
$j('.en').show();
$j('.it').hide();
$j('.em').hide();
$j('.pl').hide();
}

}

$j('#email_lenguage').change(function() {
var lang = $j('#email_lenguage').val();
if (lang == "en") {
$j('.en').hide();
$j('.es').show();
$j('.br').hide();
$j('.it').hide();
$j('.em').hide();
$j('.pl').hide();
} else if (lang == "br") {
$j('.br').show();
$j('.es').hide();
$j('.en').hide();
$j('.it').hide();
$j('.em').hide();
$j('.pl').hide();
} else if (lang == "it") {
$j('.it').show();
$j('.em').hide();
$j('.es').hide();
$j('.en').hide();
$j('.br').hide();
$j('.pl').hide();
} else if (lang == "pl") {
$j('.pl').show();
$j('.es').hide();
$j('.en').hide();
$j('.it').hide();
$j('.em').hide();
$j('.br').hide();
} else if (lang == "em") {
$j('.em').show();
$j('.es').hide();
$j('.en').hide();
$j('.br').hide();
$j('.pl').hide();
$j('.it').hide();
} else {
$j('.br').hide();
$j('.es').hide();
$j('.en').show();
$j('.it').hide();
$j('.em').hide();
$j('.pl').hide();
}
// $j("#email_com option").each(function()
//{
// console.warn($j(this).val()); // here you should hide spanish
//});
});

function getTemplate() {
var communication = gel('email_com').value;
//var communication = g_form.getValue('email_com');
if (communication.substring(0, 1) == ' ') {
communication = communication.substring(1, communication.length);
}
//var sysId=gel('sysId').value;
//var tableName=gel('tableName').value;
var sysId = g_form.getUniqueValue();
var tableName = g_form.getTableName();
var EmailParms;
//if(tableName=="hr_case"){
// var lenguage=gel('email_lenguage').value;
// if(lenguage!='en'){
// communication= lenguage+'-'+ communication;
// }
EmailParms = 'email_client.do?';
EmailParms += 'sysparm_table=' + tableName + '&';
EmailParms += 'sysparm_sys_id=' + sysId + '&';
EmailParms += 'sysparm_target=' + tableName + '&';
EmailParms += 'sys_target=sn_hr_core_case' + '&';
EmailParms += 'sys_uniqueValue=' + sysId + '&';
EmailParms += 'sys_row=0&';
EmailParms += 'sysparm_encoded_record=&';
EmailParms += 'sysparm_stack=no&';
EmailParms += 'sn_hr_core_case.u_quick_email_event=' + communication.toString();
window.open('./' + EmailParms, 'Email', 'toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,width=600,height=600');
GlideDialogWindow.get().destroy();
//}
}

 

 

 

I have tried below script - 

 

function onClick(g_form) {

var sys_id = g_form.getUniqueValue();
var table = g_form.getTableName();

 

g_modal.showFrame({title: 'Email Communication', url: 'sn_hr_core_Quick Email Message HR.do?sysparm_id=' + sys_id + '&sysparm_tablename='+table + '&sysparm_type=interaction', size:'fw'});

}

 

With this script dailog box is opening but Submit button is not working. When clicking on submit button nothing is happening.

 

Please suggest.

 

1 REPLY 1

Alex Coope - SN
ServiceNow Employee
ServiceNow Employee

@Jayshree Jhawar,

Ok, so there is a lot to unpack there. The first being that these scripts have a lot of hard-coded strings and logic which is not good practice. Meaning, that the technical debt to maintain is very high and difficult to adjust without adjusting the script (e.g. all of those IF loops for specific language checks are not good),

- These scripts also don't look like they would be very performant due to the amount of client-side logic.

 

The second is that Workspace doesn't work with these types of scripts (e.g. the HTML of the "UI Page" is Jelly which is a language only used for UI pages),

 

My suggestion would be to understand what the intended purpose of this custom functionality was, then look to build it from scratch (according to best practices) in the intended Workspace via UIB - assuming the Workspace you would be working on has the necessary data / field / process dependencies you need,


Many thanks,
Kind regards 

--------------------------------------------------------------------
Director of Globalization Deployment, Internationalization