Configurable Popup Messages with GlideModalv3

Funny story. I'm demonstrating the features of a recent release to the executive over the group we've

delivered to. As we're going through the forms and procedures, we click a UI Action button and a confirmation pops up. We've used the simple 'confirm' pop up which looked like the one below.

Obviously the instance name was different, but he was incredulous. "That's terrible! We can do better than that, can't we?!"

"Of course we can", I assured him. The trick is knowing what we need to confirm. After gathering some additional requirements around the process we decided to use GlideModal v3. We put together the content of an email that would be sent with a button to confirm.

confirm is simple and functional, but not at all customizable. GlideModal allows us to set the title bar, customize button labels and actions for each selection.

In the client side of our UI Action we instantiate an instance of the GlideModal with 3 parameters.

1	var dialog = new GlideModal('message_confirm_modal', false, 600);

Parameters:

String name of the UI Page that we will be using to form the message box
Boolean (true/false) determination of the read only characteristic of the box
1. If set to false, you'll see an X to close the box, if true, the X won't be there
Pixel width of the modal box

With the setTitle() method, we can pass a string for the title of the box.

1	dialog.setTitle(new GwtMessage().getMessage('Message Confirmation'));

We can send one or many parameters to the UI Page for use in processing and providing data to the user using the setPreference() method. For example:

1 2 3 4 5 6 7	dialog.setPreference("sysparm_intro", gmIntro); dialog.setPreference("sysparm_subject", gmSubject); dialog.setPreference("sysparm_body", gmBody); dialog.setPreference("sysparm_body2", gmBody2); dialog.setPreference("sysparm_body3", gmBody3); dialog.setPreference("sysparm_recipients", gmRecipients); dialog.setPreference("sysparm_ciList", gmCIList);

Once we've given all we got, we use the render() method to actually kick off the UI page display.

1	dialog.render();

In our UI Page, we use the HTML field to process and display our content. We start with setting our variables for use inside the Jelly with the syntax:

Once we've captured our variables from the UI Action, we can use them in our HTML to display them. Using the ${variable_name} syntax, we can easily insert the value inline.

Note that for our buttons, we use familiar HTML button syntax that calls the name of the client script function to use for the button click.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31	<?xml version="1.0" encoding="utf-8" ?> <!-- --> <!-- --> ${jvar_msg_intro} Subject: ${jvar_msg_subject} Body: ${jvar_msg_body} ${jvar_msg_body2} ${jvar_msg_body3} Recipients: ${jvar_msg_recipients} CI List: ${jvar_msg_ciList} <!-- /g:evaluate --> <!-- /g:ui_form --> /j:jelly

The Client Script section allows us to have processing for the buttons. Each button gets it's own function that is called from the HTML section. More advanced actions my include data capture in form fields.

For our onOK() function, we want to ensure the UI action completes any server side code. We use the gsftSubmit() function calling the UI Action unique Action Name. It must be unique. If you have multiple actions with the same name, which one it calls will be unpredictable.

GlideModal.get().destroy() is the simple way to cancel the action, without leaving or updating the form.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19	function onOK() { gsftSubmit(null, g_form.getFormElement(), 'message_confirmation'); } function onCancel() { closeGlideModal(); } function closeGlideModal() { try { GlideModal.get().destroy(); } catch(err){ var x = document.getElementById('global.message_confirm_modal'); if (x) { x.click(); } } }

All of this leads to a tidy little window with everything you wanted, including a pretty title.

For clean copies of the example code, check out my GitHub links below.

UI Action (GitHub)

UI Page (GitHub)

GlideModal API Reference

If you're looking for more help on Jelly (for UI Pages, UI Macros, etc), I found Chuck Tomasi's 3-part TechNow video series on Jelly super helpful when I first dove in. Links here:

Video 1

Video 2

Video 3