question Workspace Client Script UI action in Developer forum

Workspace Client Script UI action

Rashim Walia — Fri, 24 Mar 2023 19:01:30 GMT

Hi,

I am trying to fetch all the fields from the current form in "data" and pass it on to the UI page. Currently, we are doing this in UI Macro that is further calling UI Page.

Need your guidance how to write this functionality in Workspace client Script UI action. Appreciate your help, Thanks!!

var datatemp={};
for(var x = 0; x != g_form.elements.length; x++)
{
//getting all fields in the form
datatemp[g_form.elements[x].fieldName]=g_form.getValue(g_form.elements[x].fieldName);
console.log(g_form.elements[x].fieldName+':'+datatemp[g_form.elements[x].fieldName]);
}
var data="'"+JSON.stringify(datatemp)+"'";

var dialog = new GlideDialogWindow("Search Data");
dialog.setTitle("Search Data"); //Set the dialog title
dialog.setPreference("data",data);
dialog.render();

Re: Workspace Client Script UI action

Punit S — Fri, 24 Mar 2023 20:17:39 GMT

Hi Rashim,

To achieve the same functionality in a Workspace client script UI action, you can use the following code:

var datatemp = {}; var formFields = g_form.getEditableFields(); for (var i = 0; i < formFields.length; i++) { // Getting all editable fields in the form datatemp[formFields[i]] = g_form.getValue(formFields[i]); console.log(formFields[i] + ":" + datatemp[formFields[i]]); } var data = JSON.stringify(datatemp); var url = '<your UI Page URL>'; var dialog = new GlideModal(url); dialog.setTitle('Search Data'); dialog.setPreference('data', data); dialog.render();

This code first retrieves all the editable fields in the form using g_form.getEditableFields(). It then loops through each field and retrieves the value using g_form.getValue(). The field name and value are stored in the datatemp object. After that, the datatemp object is converted to a JSON string and passed to the UI page through the setPreference() method. Finally, a GlideModal is used instead of GlideDialogWindow to open the UI page. This is because GlideDialogWindow is deprecated and GlideModal is the recommended method for opening UI pages in ServiceNow. Make sure to replace <your UI Page URL> with the actual URL of your UI page. Please mark my answer correct/helpful in case it adds value and moves you a step closer to your desired ServiceNow solution goal. Thanks, Punit

Re: Workspace Client Script UI action

Rashim Walia — Fri, 24 Mar 2023 20:41:38 GMT

Thanks alot Punit for the quick response !!

I have tried GlideModal(url) but it is not working.

I have used it as below:

var url = '/ui_page.do?sys_id=47dc71c3deuyueueyuyeib';
var dialog = new GlideModal(url);
dialog.setTitle('Search Data');
dialog.setPreference('data', data);
dialog.render();

Thanks in advance !!

Re: Workspace Client Script UI action

Punit S — Fri, 24 Mar 2023 20:49:42 GMT

Try below instead if that works

var table = 'table_name'; // replace with your table name var sysId = '47dc71c3deuyueueyuyeib'; // replace with your record's sys_id var view = 'form'; // replace with the view you want to display (e.g. form, list, etc.) var gm = new GlideModalForm(table, sysId, view); gm.setTitle('Search Data'); gm.render();

Re: Workspace Client Script UI action

Rashim Walia — Fri, 24 Mar 2023 20:56:47 GMT

Actually we are trying to send data to the UI Page. We can not use the table name in this. I have tried the below code, its showing the window but data is not getting passed. Not sure, if we are not passing data in the URL correctly. Please check this one if you can. Appreciate your help !!

g_modal.showFrame({

title: 'Search Data',
url: '/ui_page.do?sys_id=47dc71c3db7af3806yuytyutu19fb?data=' + data,
size: 'lg'
});

Re: Workspace Client Script UI action

Punit S — Fri, 24 Mar 2023 21:26:39 GMT

Here's another way to do it.

Create a UI page and add the following code to it:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My UI Page</title> <script> function passData() { var data = { "field1": "value1", "field2": "value2" }; var url = "/nav_to.do?uri=incident.do?sys_id=-1&sysparm_query="; var encodedData = encodeURIComponent(JSON.stringify(data)); url += encodedData; window.location.href = url; } </script> </head> <body> <h1>My UI Page</h1> <button onclick="passData()">Pass Data</button> </body> </html>

This code defines a function passdata( ) that creates a data object and encodes it as a URL parameter. When the user clicks the "Pass Data" button, the function sets the current URL to the URL of a new incident form with the encoded data added as a parameter.

Create a UI action that opens the UI page you just created:

(function() { var url = '/sys_ui_page.do?sys_id=<UI_PAGE_SYS_ID>'; action.setRedirectURL(url); })();

Replace <UI_PAGE_SYS_ID>with the sys ID of the UI page you created in step 1.

When the user clicks the UI action, the UI page will open, and the "Pass Data" button will be visible. When the user clicks the "Pass Data" button, they will be redirected to a new incident form with the data encoded as a parameter in the URL. You can retrieve this data in the new form using a script like this:

var urlParams = new URLSearchParams(window.location.search); var encodedData = urlParams.get('sysparm_query'); var data = JSON.parse(decodeURIComponent(encodedData));

Please mark my answer correct/helpful in case it adds value and moves you a step closer to your desired ServiceNow  solution goal. 

Thanks,
Punit

Re: Workspace Client Script UI action

Rashim Walia — Fri, 24 Mar 2023 21:33:19 GMT

Actually we already have an existing UI Page that is consuming "data" from the existing Macro. But Macros don't work for the Agent workspace thats why we have created a UI action.

We simply need to pass the "Data" component that has string of all the fields already in the UI action. I guess we just need the correct way of passing the "data" component in the URL.

Below method for the passing the "data" component is not working. Do you know any way to get it passed:

g_modal.showFrame({

title: 'Search Data',
url: '/ui_page.do?sys_id=47dc71c3db7af3806yuytyutu19fb?data=' + data,
size: 'lg'
});

Re: Workspace Client Script UI action

Punit S — Fri, 24 Mar 2023 21:44:07 GMT

To pass data from a UI action to a UI page in ServiceNow, you can use the urlParm() function to encode the data and include it as a URL parameter. Here's an example of how you can modify the g_modal.showFrame() code to pass the "data" component as a URL parameter: g_modal.showFrame({ title: 'Search Data', url: '/ui_page.do?sys_id=47dc71c3db7af3806yuytyutu19fb&' + urlParm({ data: data }), size: 'lg' });

Please mark my answer correct/helpful in case it adds value and moves you a step closer to your desired ServiceNow  solution goal. 

Thanks,
Punit

Re: Workspace Client Script UI action

Rashim Walia — Fri, 24 Mar 2023 22:47:29 GMT

Thanks Punit !!

Could you please help ow to declare urlParm function as I am getting below error while running the example you have mentioned: