Creating a Dialog Window

RunMyProcess allows users to include the jQuery libraries in their projects, in order to ease the client side development and to improve the user experience. One of the benefits provided by the use of jQuery is the possibility to add a RunMyProcess component into a modal window.

How can I use it?

1. Create the component that you want to deploy inside the window. This component could be any widget but we recommend using a custom widget or a splitted widget. We also recommend that you make the widget invisible at the start and turn it visible using the Javascript method setVisible to improve the user experience. Otherwise, the component will briefly appear as a component of the interface before turning into the dialog window.

2. Set an ID to the component.

3. Include the jQuery libraries to the web interface.

   • jQuery 3.4.1
   • jQuery UI 1.10.1 (or later versions)

4. Configure the dialog window in a Javascript widget following the example below.

Configuration instructions:

var id = "id_MyComponent";
//id_MyComponent is the ID of the element that we want to deploy in the window
var windowComp = $('[id="'+id+'"]').dialog({ 
                                            autoOpen: false, 
                                            modal: true, 
                                            stack: false,  
                                            width:450,
                                            title: 'Title to display'
                                            });
id_MyComponent.setVisible(true);
$(windowComp).dialog('open');

To close the window, use the following instruction

$(windowComp).dialog('close');

See the jQuery dialog windows documentation for more information.