How to get started with GlideModalV3/GlideModalFormV3

[Community Alums]

Hi community,
I never created a custom dialog window before, and I would like to know better how it basically looks like. As far as I understood, the most current ways of generating a pop up form is either GlideModalV3 or GlideModalFormV3 because it doesn't even require creating a UI Page before (?). 

Can anyone provide me with some documentation and/or example, so I can understand better how it works?

My example scenario would be:

- In sn_customerservice_case, there are two hidden fields: One Duration type field, and one Timestamp field.
- A user can click on a UI Action button, which opens a dialog pop-up
- In that pop-up, the user can switch between "Duration" and "Target Date", which gives the option to either fill out a Timestamp field (with Calendar controls), or a Duration type field.
- On Submit, the Duration field in the Case behind is filled out accordingly, and the inputs are written into the Case fields.

So basically, I just want to provide some kind of wizard that takes the fields from the regular form into a floating modal window.

I want to use methods that are working both in classic UI and Agent Workspace.

Best regards

[Frank Tate]

I know this is a little old, but I wanted to share.

The following is about the simplest way I've found to use GlideModal in a UI Action with no UI Page needed. It is based on this great howto Sam Lindsay at jds.net.au.

function confirmDialog(){
	var gm = new GlideModal('confirm');
	//Sets the dialog title
	gm.setTitle('Confirmation'); 
	//Set up valid custom HTML to be displayed
	gm.renderWithContent('\
            <div style="padding:15px"><p>Confirm?</p>\
                <div style="padding:5px;float:right">\
                    <button style="padding:5px;margin-right:10px" \
                        onclick="window.takeAction(this.innerHTML)" \
                        class="btn btn-default">No</button>\
                    <button style="padding:5px" \
                        onclick="window.takeAction(this.innerHTML)" \
                        class="btn btn-primary">Yes</button>\
                </div> \
            </div>'); 

	//We'll use the windows object to ensure our code is accessible from the modal dialog
	window.takeAction = function(thisButton){
 
		//Close the glide modal dialog window when either button is pressed.
		gm.destroy();

		//perform the appropriate action on the client.
		if(thisButton=='Yes'){
			alert("You pressed 'Yes'");
		} else if(thisButton=='No') {
            alert("You pressed 'No'");
        }
	};
	return false;//prevents the form from submitting when the dialog first loads
}

That's the entire UI Action, where I've set confirmDialog() as the onClick function. Whatever you need to do can be done within the window.takeAction() function implementation. In there, you have access to all of the normal objects like g_form, etc., so you can set any values you want to.

This simple example is similar to the JavaScript confirm() function, but in a GlideModal dialog that can have custom HTML.

Frank

[ciacob2]

window is null.

[tlock]

For anyone trying this solution, it still works, but anywhere "window" is referenced in the code, it will need to be updated to "top.window".

[CJB]

What version are you on? I'm on Washington DC and using "top.window" breaks the UI action.