Summary

As an application developer, you have designed a section on a harness with a button that opens a pop-up window. The pop-up window allows users to edit information and close the pop-up. When clicked, the Close button in the pop-up window should close the pop-up and refresh the parent screen at the context where the pop-up window opened. To achieve this synchronized button and window behavior for your application, follow the Suggested Approach. It explains how to create a function to manage the timing of the pop-up window closure and the refresh of the parent window.

Suggested Approach

To design a pop-up window with a Close button that closes the pop-up and refreshes the parent window where the pop-up opened, complete the following steps:

1. Create a property, for example, myHiddenProp, on the parent window to be refreshed. This can be a standard property of type Text.

   

2. Make the property hidden: In the Cell Properties, on the Advanced tab, specify the Inline Styledisplay:none;.
   
   
3. Specify the ONCHANGE event of this property to be Refresh this Section.
   
   
4. Save the UserWorkForm HTML Fragment rule into an open RuleSet version and add the HTML Source script shown below.

   The functions in the script are invoked when users click the Close button in the pop-up window to close the current window and refresh the parent.

   <script>

   CloseWindow = function(){
window,close ();
}

   RefreshParentAndCloseWindow = function(){
var ParentObject = window.opener;
ParentObject.document.getElementByID(“myHiddenProp”).fireEvent(‘onchange’);
setTimeOut(CloseWindow,5000);
}
</script>

   The CloseWindow() function closes the current window (the pop-up) after the specified time interval.
   The RefreshParentAndCloseWindow() function gets the parent object and fires the ONCHANGE event on myHiddenProp property that refreshes the section.

5. To open the pop-up window, specify the Behavior of the pxButton control that will open the pop-up window as shown in the following screens:
   1. For Event, select Click.
   2. For Action, select Harness.
   3. For Target, select Pop-up Window.
   4. For Class, specify the class.
   5. For Harness, specify PopupHarness.
   6. For Read Only, select No.
   7. Specify the pop-up window dimensions, Window Width and Window Height.
      
      
      
6. To call the function specified in Step 4, the UserWorkForm, RefreshParentAndCloseWindow(), specify the Behavior of the pxButton control that will close the pop-up window and refresh the parent window as shown in the following screens:
   1. For Event, select Click.
   2. For Action, select Run Script.
   3. For Function Name, specify RefreshParentAndCloseWindow.
      
      
      
7. To test this design at runtime, complete the following steps in the runtime application, as illustrated by the example of this procedure:
   1. Click the button that you designed to open the pop-up window. In the open pop-up, edit the information as appropriate to your application.
      
      
   2. Click the button you designed to close the pop-up window and refresh the parent screen.
      
      

   3. Close the composite portal and reopen it.

      Verify that the section with the embedded controls to open and close pop-up windows displays the latest information, the edits you made in Step 7a.

Additional Information

User Interface

Using the pxButton control rule