Master ServiceNow Client Scripting: How to Call UI Pages from Client Scripts

In this blog post, we will discuss what a UI Page is and the two main methods for calling them from client scripts: the GlideModal API and the GlideDialog API. We will also compare and contrast these two methods so that you can decide which one is best suited for your specific use case.

What is a UI Page in ServiceNow?

A UI Page in ServiceNow is essentially a server-side script that generates HTML that can be rendered on a web page. It is a powerful tool for creating custom user interfaces and workflows within the ServiceNow platform. UI Pages can be used to display forms, tables, reports, and other UI elements. They can also be used to process user input and perform server-side actions.

Two Methods for Calling UI Pages from Client Scripts

There are two main methods for calling UI pages from client scripts in ServiceNow: the GlideModal API and the GlideDialog API.

GlideModal API The GlideModal API is a simple and efficient way to call UI pages from client scripts in ServiceNow. This API allows you to display a modal dialog box that contains a UI page. The user can interact with the UI page and enter data as needed. Once the user submits the data, the dialog box is closed, and the data is passed back to the client script.

To call a UI page using the GlideModal API, you can use the following code snippet:

var modal = new GlideModal('UI_PAGE_NAME'); modal.setTitle('Modal Title'); modal.setWidth(500); modal.render(); In this code snippet, 'UI_PAGE_NAME' is the name of the UI page that you want to display in the modal dialog box. The setTitle() method allows you to set the title of the dialog box, and the setWidth() method allows you to set the width of the dialog box in pixels.

GlideDialogWindow API The GlideDialogWindow API is another way to call UI pages from client scripts in ServiceNow. This API allows you to display a dialog box that contains a UI page. The user can interact with the UI page and enter data as needed. Once the user submits the data, the dialog box is closed, and the data is passed back to the client script.

To call a UI page using the GlideDialog API, you can use the following code snippet:

var dialog = new GlideDialogWindow('UI_PAGE_NAME'); dialog.setTitle('Dialog Title'); dialog.setWidth(500); dialog.render(); In this code snippet, 'UI_PAGE_NAME' is the name of the UI page that you want to display in the dialog box. The setTitle() method allows you to set the title of the dialog box, and the setWidth() method allows you to set the width of the dialog box in pixels.

GlideModal vs GlideDialog API

Both the GlideModal and GlideDialog APIs are useful for calling UI pages from client scripts in ServiceNow. However, there are some key differences between these two methods.

The GlideModal API is generally faster and more lightweight than the GlideDialog API. This is because the modal dialog box is created as a child of the current page, rather than as a separate window. This can be beneficial if you need to display a UI page quickly and without interrupting the user's workflow.

The GlideDialog API, on the other hand, allows for more customization and flexibility. You can set the width and height of the dialog box, and you can choose whether to display the dialog box as a modal or non-modal window. This can be beneficial if you need to display a UI page that requires a lot of user input or if you need to provide more detailed instructions or feedback to the ... https://www.youtube.com/watch?v=zDXn5tSUmcQ