How to automatically refresh a section after a user updates a field in another section
Summary
In some work forms, when a user changes a property value in one section, it is desirable to update the values of fields in other sections. The update typically occurs when a user clicks a checkbox or radio button, selects a value from a prompt, or enters text. The example in this article describes how to configure a work form so that —
When a user selects a manager name from a Dynamic Select drop-down list in the top section....
...a new section named Manager Information appears, and displays the manager's information in read-only format.
If the user later selects a different manager name, the system similarly refreshes the Manager Information section with updated values.
The configuration uses the Client Event Editor, which sets up a JavaScript event in the user's browser. When the event occurs, the browser communicates with the Process Commander server using AJAX techniques. The server computes the updated fields and returns them to the browser to refresh the display.
In V6.2, you can refresh any section as follows:
– Using pxButton, pxIcon, or pxLink controls. See How to refresh any section on a user form using a click-action control.
– Specifying a Refresh When condition in an included section without having to use the Client Event Editor. See the Refresh on Change example at > User Interface > UI Gallery.
Suggested Approach
Do the following:
- Open the harness rule containing the sections. In this example, the ManagerDynamicSelect section contains the controlling field — the Dynamic Select control (using the property value .ManagerData.ID). The ManagerDynamicSelectInfo section contains the controlled fields — Title, Office, and Phone read-only text boxes. Both sections are at the same level within the NewHeader section as shown here:
- In the ManagerDynamicSelect section, select the cell containing the Manager Dynamic Select control.
- Open the .ManagerData.ID Cell Properties panel by clicking the magnifying glass icon .
- In the panel, click the magnifying glass icon next to the Behavior field. This opens the Client Event Editor.
- In the Editor, select
On Change
in the Event field andApply Conditions
in the Action field. - Click Save to close the Editor. The panel looks like this:
- Close the panel.
- Open the the ManagerDynamicSelectInfo Section Include Properties panel by clicking the magnifying glass icon ().
- Enter
.ManagerData.ID
in the Refresh When field. The section refreshes when the property changes. - Enter
.ManagerData.ID!="
in the Visible When field. The section appears when the property is not empty. - Select the Run on Client checkbox.
The panel should look like this:
- Close the panel and save the harness.
- Test the harness to verify the expected behavior.