Automatically Updating the UI to Reflect Clipboard Changes

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

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:

Create a layout containing the fields that you want to display, in this case, Student Information.

Click to open the Layout panel.

In the Layout panel, click beside Visible When.

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:

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.

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.

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.)

These declare expressions take into account the student's home state and the state of the selected college.

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.

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.

Have a question? Get answers now.

About Pegasystems

Pegasystems is the leader in cloud software for customer engagement and operational excellence. If you’ve driven a car, used a credit card, called a company for service, opened an account, flown on a plane, submitted a claim, or performed countless other everyday tasks, chances are you’ve interacted with Pega. For the past 30 years, our technology – CRM, digital process automation, robotics, AI, and more – has empowered the world’s leading companies to achieve breakthrough results.