Summary

In PRPC 6.3, the user interface is even more responsive to changes in property values. The UI can update whenever a property value changes — regardless of whether that change is the result of a user interaction, or a server side update triggered by a declare expression, a data transform or an activity.

Every interaction between the client and the server now automatically checks for updates to the values of properties displayed in the UI and reflects those changes. There is no special configuration required for this behavior. Any time there is a post from the client to the server, server side changes are automatically updated on the client.

Client Expressions (Visible When, Refresh When, Disabled Conditions), grid and control actions, and buttons, icons, and links use up-to-date property values. Links, buttons, and icons can now display information and navigate to targets based on user interaction after the UI is rendered. For example, you can change the Link target, after the UI is rendered, by changing the property value that is bound to the link as its target. When the value of the property changes, the link is automatically updated to reflect that change.

This article demonstrates how many of these features are used to create a dynamic and intuitive user interface that guides users through the college loan application process.

Suggested Approach

Using a college loan application as an example, this article demonstrates how you can:

• Progressively display additional fields — based on a user selection
• Refresh a link — based on a user selection
• Refresh the UI — based on server-side calculations

Progressively display additional fields, based on a user selection

This sample college loan application displays additional fields based on user selections. For example, the loan application initially asks whether the applicant is a student or a parent/sponsor of a student. Based on the applicant's response, it collects information about the applicant, and in the case in which the applicant is a parent/sponsor, it also collects information about the sponsored student. The UI progressively displays only the information that needs to be collected, based on choices that the applicant makes.

When the applicant selects the radio button I am the parent or sponsor responsible for the loan, an additional layout requesting Student Information appears.

To display additional fields based on a user selection:

1. Create a layout containing the fields that you want to display, in this case, Student Information.
   
2. Click to open the Layout panel.
   
3. In the Layout panel, click beside Visible When.
   
4. Define a Visible When condition and then click OK. In this case, the Visible When condition indicates that the Student Information layout appear only when the applicant is the parent/sponsor of the student (.ApplicantRelationship= 2):
   
   
   
   
   The Layout panel appears as follows:
   
5. Save the rule. When the value of the .ApplicantRelationship property changes, the UI is updated. If the value is 2, indicating parent/sponsor, then additional fields appear. 

back to top

Refreshing a link, based on user selection

Buttons, icons and links use up-to-date property values; they are not tied to generation-time values. You can update actions on buttons, links or icons based on the current property values. For example, when a loan applicant selects a college, the Visit Website link automatically updates with the URL of the selected college.

The loan application requires the applicant to select a college from an overlay, filtered as the applicant types. See How to allow users to pick a value from a list in an overlay pop-up for details on configuring an overlay.

When the applicant selects a college name, the Visit Website link automatically updates with the URL of the selected college.

To configure a link to refresh based on the value of a property:

1. Add a link to the layout.
   
2. Click beside the link control to open the Cell Properties panel.
   
3. In the Cell Properties panel, click  to configure the control.
   
4. In the Behaviors area, click and add the following Click event:
   
5. Select the Use Alternate Domain checkbox, specify the Alternate Domain URL, and click OK. In this case, the URL for the web site of the selected college is stored as a property, .SCWebsite.
   
   
   The Behaviors area appears as shown:
   
6. Click OK and save the rule.
   
   Since PRPC uses up-to-date property values, and the URL is bound to the .SelectedCollege, the Visit Website link automatically updates when the user selects or changes the college name. 

back to top

Refreshing the UI, based on server-side calculations

The user interface reflects the current property values — even when a change in value is the result of a calculation that occurs on the server.

There is no special configuration required for this behavior. Any time there is a post from the client to the server, server side changes are automatically updated on the client.

For example, when the user selects a college, a layout displaying the in-state, out-of-state, and total four-year tuition for the selected college appears. This layout, configured with a Visible When condition, appears only when the user has selected a college; that is when .SelectedCollege exists.

Declare expressions calculate the tuition rates on the server and automatically display those values in the UI. (Declare Expressions define automatic computations of property values based on expressions. See Declarative Expressions for more information and a video tutorial.)

To configure a declare expression and automatically refresh the UI:

1. Create declare expressions to calculate the in-state and out-of-state tuition amounts.
   
2. These declare expressions take into account the student's home state and the state of the selected college.
   
   
   
3. To calculate the four year tuition amount, create a decision table. You can then configure a declare expression to display the result of the decision table calculation. In this case, the FouryearCost decision table determines if the .SelectedCollege.LocationState is equal to the .State specified in the student's address. If these are equivalent, then the value of .SelectedCollege.InStateTuition * 4 is returned. Otherwise, .Selected College.OutOfStateTuition * 4 is returned.
   
   
4. Configure a declare expression that sets the value of the Total Tuition (4-years) equal to the result of the FouryearCost decision table.
   
   
   When this declare expression changes the clipboard, that change is automatically reflected in the user interface. For example, if the student's home state is set to Michigan, and the student selects a college in Michigan, then the following tuition amounts automatically display:
   
   Note that the Total Tuition (4-years) reflects the value of .SelectedCollege.InStateTuition * 4.
   
   When student's home state changes to a state other than Michigan, the Total Tuition (4-years) is recalculated and the value of .Selected College.OutOfStateTuition * 4 automatically displays:
   
   Every interaction between the client and the server now automatically checks for updates to the values of properties displayed in the UI and reflects those changes. 

back to top

In PRPC 6.3, the user interface can refresh whenever a property value changes — whether that change is the result of user interaction, or a server side update.

Additional Information

Declaratives, Decisions and Validation Overview
About Declarative Expression rules