How to call UI Page from Workspace Client Script

[kshitij11]

I have a requirement to enable the workspace client script for below script used in one of the UI Action"show Interaction Content":

 Script:

function doShowInteraction(){
console.log("doShowInteraction calling");
var sys_id = g_form.getUniqueValue();
console.log("doShowInteraction sys_id:" + sys_id);

var gdw = new GlideDialogWindow("x_sofin_cti_connec_IXNWebApp");
gdw.setTitle("Genesys Interaction Content");
gdw.setSize(1000,600);
gdw.setPreference("sysparm_id", sys_id);
gdw.setPreference("sysparm_type", "interaction");

gdw.render();
}

UI Page(IXNWebApp):

<?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 applicationUrl = gs.getProperty('x_sofin_cti_connec.applicationUrl');
var sysparm_id = RP.getParameterValue("sysparm_id");
var sysparm_type = RP.getParameterValue("sysparm_type");
var gr = new GlideRecord(sysparm_type);
gr.addQuery('sys_id', sysparm_id);
gr.query();
</g:evaluate>

<j:if test="${gr.next()}">
<j:set var="jvar_inc" value="${gr.contact_type}" />
<iframe src="${applicationUrl}id=${gr.x_sofin_cti_connec_interaction_id}" style='border:0px; width:100%;height:600px'></iframe>
</j:if>

</j:jelly>

Workspace Client script

Please help me the worskpace client script as few functions used in above script like GlideDialogWindow are not supported and I dont know how to use g_modal for calling the above UI Page.

Requirement is to make the UI Action"show Interaction Content" work in Agent workspace, its working perfectly fine in normal view

[Maik Skoddow]

Hi @kshitij 

the Agent Workspace represents a completly new technology which is not compatible with the legacy UI Pages based on Jelly syntax.

The only way is developing that page in the Now Experience Framework (see https://developer.servicenow.com/dev.do#!/guides/quebec/now-platform/now-experience-guide/now-experi...)

Kind regards
Maik

[Maik Skoddow]

Hi @kshitij 

Did my reply answer your question?

If so, please mark the appropriate response as "correct" so that the question will appear as resolved for other users who may have a similar question in the future.

If not, please tell me what you are still missing!

Many thanks & kind regards
Maik

[kshitij · Accepted solution]

Try this solution:

function onClick(g_form) {

var sys_id = g_form.getUniqueValue();

g_modal.showFrame({title: 'Interaction Content', url: 'x_sofin_cti_connec_IXNWebApp?sysparm_id=' + sys_id + '&sysparm_type=interaction', size:'fw'});

}

[Nishant16]

hi Kshitij

can you please help me on how can i show the ui page on the agent workspace. Currently its working on Native UI to mark attachments as internal and vice versa. Same functionality i need on the workspace.

UI Page: 

HTML

<?xml version="1.0" encoding="UTF-8"?>
<j:jelly trim="false" xmlns:g="glide" xmlns:g2="null" xmlns:j="jelly:core"
	xmlns:j2="null">

	<j:set var="jvar_target_sys_id" value="${JS:RP.getWindowProperties().get('target_sys_id')}" />
	<j:set var="jvar_target_table" value="${JS:RP.getWindowProperties().get('target_table')}" />
    <j:set var="jvar_attachment_disabled" value="${RP.getWindowProperties().get('attachment_disabled')}" />
    <j:set var="jvar_sc_override" value="${RP.getWindowProperties().get('sc_override')}" />
	<j:set var="jvar_show_link" value="true" />
	<j:if test="${gs.getProperty('glide.ui.disable_attachment_view') == 'true'}">
		<j:set var="jvar_show_link" value="false" />
	</j:if>
	<input type="hidden" id="ni.show_attachment_view" name="ni.show_attachment_view"
		value="${jvar_show_link}" />
	<j:set var="jvar_show_link_popup" value="true" />
	<j:if test="${gs.getProperty('glide.ui.attachment_popup')=='false'}">
		<j:set var="jvar_show_link_popup" value="false" />
	</j:if>

	<style>
		
		tr {
    height: 30px;
}
		
	</style>
	


	<span style="font-size:14px;">Use the internal link to restrict a file visibility only to agents.</span>
	<input type="hidden" id="ni.show_attachment_popup" name="ni.show_attachment_popup"
		value="${jvar_show_link_popup}" />

	<table width="100%" style="table-layout:fixed;">
		<tbody>
		
			<tr>
				<td>
				
						<input name="sysparm_nostack" type="hidden" value="yes" />
						<input name="sysparm_this_url" id="sysparm_this_url" type="hidden"
							value="" />
					
					<table width="100%" style="table-layout:fixed;">
							<TR >
								<TD style="white-space:nowrap;">
									<div id="current_attachments" style="display:block">
										<div style="margin-top:4px;">
											<div id="attachment_dialog_list">
													<table width="100%" style="table-layout:fixed;">
														<tbody id="attachment_table_body">

															<g2:attachment_list_by_availability sys_id="${jvar_target_sys_id}"
																table="${jvar_target_table}" available="true">
																<g2:for_each_record file_variable="sys_attachment"
																	var="attachment">
																	<TR>
																		<TD colspan="2" style="white-space:nowrap;">
																		
																			<input name="Name" type="hidden" value="false" />
																			<input type="hidden" id="$[sys_attachment.sys_id]" class="attachment_sys_id" />
																			<g2:attachment_entry_custom />
							
																		
																		</TD>
																	</TR>
																</g2:for_each_record>
															</g2:attachment_list_by_availability>
														
											
														</tbody>
													
														
											
													</table>
											</div>
											
										</div>
									</div>
								</TD>
							</TR>
						</table>
				
					
					
				
				</td>
			</tr>
		</tbody>
	</table>
	
</j:jelly>

Client Script:

function markInternal(attachId) {
	gel('progressicon_'+attachId).style.display='inline';
    var gInternal = new GlideAjax('InternalAttachments');
    gInternal.addParam('sysparm_name', 'markInternal');
    gInternal.addParam('sysparm_attachId', attachId);
    gInternal.getXMLAnswer(showInternalIcon);




}

/**
 * This showcase internal flag icon and remove internal link.
 * This also hides the internl button/link.
 * @param value
 */

function showInternalIcon(response) {	
    var iconSpan = 'internalFlag_' + response;
    var internalLink = 'internal_view_' + response;
	var removeInternalLink ='removeInternal_view_'+response;
    var iconClass = document.getElementsByClassName(iconSpan);

    for (i = 0; i < iconClass.length; i++) {
        iconClass[i].style.display = "inline";
    }

	var removeInternalClass = document.getElementsByClassName(removeInternalLink);

    for (y = 0; y < removeInternalClass.length; y++) {
        removeInternalClass[y].style.display = "inline";
    }
	
    var internalClass = document.getElementsByClassName(internalLink);

    for (n = 0; n < internalClass.length; n++) {
        internalClass[n].style.display = "none";
    }

	gel('progressicon_'+response).style.display='none';


}


function removeInternal(attachId) {
	gel('progressicon_'+attachId).style.display='inline';
    var gInternal = new GlideAjax('InternalAttachments');
    gInternal.addParam('sysparm_name', 'removeInternal');
    gInternal.addParam('sysparm_attachId', attachId);
    gInternal.getXMLAnswer(hideInternalIcon);




}

/**
 * This showcase internal flag icon and remove internal link.
 * This also hides the internl button/link.
 * @param value
 */

function hideInternalIcon(response) {	

    var iconSpan = 'internalFlag_' + response;
    var internalLink = 'internal_view_' + response;
	var removeInternalLink ='removeInternal_view_'+response;
    var iconClass = document.getElementsByClassName(iconSpan);

    for (i = 0; i < iconClass.length; i++) {
        iconClass[i].style.display = "none";
    }

	var removeInternalClass = document.getElementsByClassName(removeInternalLink);

    for (y = 0; y < removeInternalClass.length; y++) {
        removeInternalClass[y].style.display = "none";
    }
	
    var internalClass = document.getElementsByClassName(internalLink);

    for (n = 0; n < internalClass.length; n++) {
        internalClass[n].style.display = "inline";
    }

	gel('progressicon_'+response).style.display='none';


}

Workspace UI action: