Using Zen Components - InterSystems Documentation

Modal Groups– An optional width value of '236'For argument details, see “The show Method” in this chapter.2. Somewhere within the you must give the user a mechanism to invoke the modalGroupDynamic method todisplay the modal group. The following example provides a button:3. For testing purposes, you may provide the with a field in which to echo the data from the popup:No data entered yet. The page XData Contents block now looks like this.No data entered yet. 4. You must give the user a mechanism to close the popup. Additionally, if your popup invited the user to enter values,you will want to retrieve and use these values. The following client-side method in the page class does this:ClientMethod btnClick() [ Language = javascript ]{// get values from controlsvar col = zen('myCol');var radio = zen('myRadio');}// write user values into HTML componentzenSetProp('mgHtml','content','User entered: ' +col.getValue() + ' ' + radio.getValue());// hide the modal groupzenPage.endModal();This method:• Executes when the user clicks Save in the popup. This works because step 1 identified this method as the onclickevent handler for the Save button in the modal group.• Finds the color picker and radio set controls by calling the JavaScript utility function zen() with their id values.• Finds the component on the and sets the content property of the component by calling theJavaScript utility function zenSetProp() with the id value. The new content concatenates a literalstring with the color picker and radio set values, acquired using getValue().• Calls the page’s endModal() method to close the popup.The user may interact with this sample page as follows:1. The user initially sees:2. Clicking the button on this page invokes the modalGroupDynamic method. This causes a window to pop up in frontof the main page. The contents of the popup are the child components that modalGroupDynamic added. The popuptitle is the first argument that modalGroupDynamic passed to the show method.Using Zen Components 225