How can I make the Modal window appear on a form with a UI action?

senon · ‎09-20-2021

Hello, experts!
I'm trying my first attempt at UI action.

It's to pop up a modal after pressing the UI action button to show a specific form view.

The goal is that when the user presses the UI action to transition the status, only the required fields will be shown and after letting the user fill them in, the status will transition.

I have found that the GlideModal/GlideModalForm APIs are effective in achieving the above goal, but the basic part is not working for me.

The following script is what I wrote on my UI action. First, I wrote a minimal script to show the modal.
resolveModalView=This is the view that will show the fields that need to be filled in when setting the status to "resolved".

var d = new GlideModalForm('resolveModalView','table_name');
d.render();

How can I achieve my goal?
I'm looking at the following API description, but I'm not quite understanding it.

https://developer.servicenow.com/dev.do#!/reference/api/quebec/client/c_GlideModalFormV3API?navFilte...

I would like to be able to show a modal like the "Start Fix" UI action in issue management.

Best regard.

senon

Ankur Bawiskar · ‎09-21-2021

@senon

so you want to show record in the modal window?

Do this

var tableName = 'your table name here';
var sysID = ''; // sys_id of the record you want to show

//Create and open the dialog form
var dialog = new GlideDialogForm('My Table Record', tableName);
dialog.setSysID(sysID); //Pass in sys_id to edit existing record, 
dialog.addParm('sysparm_view', 'resolveModalView'); //Specify a form view
dialog.render();

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader

View solution in original post

-O- · ‎09-22-2021

If I understand the requirement correctly what you would want to have a look at is UI Script ProblemModalUIHelpers installed with the newer Problem Management process.

It contains logic that shows a form in a "special" view (that you can define, of course) in an <iframe/> in a dialog. But you will have to modify it and adapt it to your table, cause the "original" is pretty hard-coded to work with Problems and Problem Tasks. Also that piece of code can be the king of any class about how not to write code/solution. On how to use it, have a look any UI Action that has the term ProblemModalUIHelpers in its code. You will also need to create a Script Include that will be called by your UI Script to do the update once the mandatory fields are filled in. Though don't expect anything to happen magically, the read-only fields to include in the dialog are not automatically deduced, you will need to adjust views to include the required read-only fields for each state.