Promotic
WikipediaLinkedInYoutubeTwitterFacebook

How to work with modal windows

This chapter describes the creation and usage of modal windows in the PROMOTIC system.

Modal window is a window that blocks access and control of all other application windows while open so the user can interact only with this window. After the modal window is closed the control is returned back to the window from which the modal window was opened.
The modal window is usually used for data entry (editing). The user is entering the entries and before the proces is completed the user is prevented from "leaving the window".
While the modal window is open, access the rest of the application is blocked, therefore it is necessary to think well before using such window. It is recommended to use such window only for simple data entry so it is not open for a long time.

How to create modal window

Asuming there is a graphic panel (PmaPanel object), that contains one edit object PmgWCombo, PmgWCheck and PmgWEdit and two control buttons PmgButton (OK and Cancel).

1) In the onPanelStartEnd event of the PmgRoot object it is possible to read the Arguments property and display it in the editing Pmg objects:
JavaScriptVBScriptSelect and copy to clipboard

var aArg = pMe.Arguments;
pMe.Items("/WCombo").SelectedIndex = aArg.GetItem(0);
pMe.Items("/WCheck").Value = aArg.GetItem(1);
pMe.Items("/WEdit").Value = aArg.GetItem(2);


2) In the onButtonUp event of the OK button close the window with "ok" flag.
JavaScriptVBScriptSelect and copy to clipboard

pMe.Root.Close("ok");


3) In the onButtonUp event of the Cancel button close the window with no flag.
JavaScriptVBScriptSelect and copy to clipboard

pMe.Root.Close("");


4) In the onPanelStopEnd event of the PmgRoot object by means of the ReturnValue property we send back the value read from the editing Pmg objects.
JavaScriptVBScriptSelect and copy to clipboard

if (pEvent.Reason == "ok")
{
var aVal = Pm.CreatePmArray().Create(3);
var v1 = pMe.Items("/WCombo").SelectedIndex;
var v2 = pMe.Items("/WCheck").Value;
var v3 = pMe.Items("/WEdit").Value;

aVal.SetItem( v1, 0);
aVal.SetItem( v2 = v2 ? -1 : 0, 1);
aVal.SetItem( v3, 2);

pMe.ReturnValue = aVal;
}


How to open modal window and process the entered values once it is closed

Asuming there is a button (PmgButton object) in the parent panel that opens the modal window. The example below describes the recommended way of passing and receiving values from modal window.
- by the Pm.CreateView method sets the PmViewCreator object
- into the Arguments property set the input value of the modal window.
- into the onClose property set the name of the function that is called on window closing.

Then the modal window is opened. Once it is closed, the returned value is processed in the "onClose" function.

Script in the onButtonUp event of the button:
JavaScriptSelect and copy to clipboard

function onClose( ev)
{
if ( ev.CloseReason == "ok")
{
var val0 = arr.GetItem(0);
var val1 = arr.GetItem(1);
var val2 = arr.GetItem(2);
Pm.Debug("val0=" + val0 + ", val1=" + val1 + ", val2=" + val2);
}
}

var arr = Pm.CreatePmArray().Array1(2, -1, "Promotic");

var oCreator = Pm.CreateView(pMe.PmPanel, "/PanelModal", "", "target:_blank;dependent:1;pos:100,100;size:panel;modal:1;");
oCreator.View.Arguments = arr;
oCreator.View.onClose = onClose;
oCreator.Open();


Note
Obsolete and therefore not recommended approach of modal window opening by the OpenViewModal method. If this method is used then the modal window is opened synchronously and therefore the script waits until the window is closed by the user. If the window is enabled for the Web, then problems may occure since some Web browsers do not support such approach (Chrome, Opera).

History:
Pm8.03.06: Created
PROMOTIC 9.0.16 SCADA system documentation - MICROSYS, spol. s r.o.

Send page remarkContact responsible person
Navigation:
 
 
- Modal window
 
 
- SVG
© MICROSYS, spol. s r. o.Tavičská 845/21 703 00 Ostrava-Vítkovice