Table of Contents

Article

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.
Additional fields display based on user selection

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.
    Student Information layout
  2. Click magnifying glass to open the Layout panel.
    Layout
  3. In the Layout panel, click magnifying glass beside Visible When.
    Layout panel
  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):
    Visible When expression

    Prompt values

    The Layout panel appears as follows:
    completed Layout panel
  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.

Select college from list

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

Selected college web site

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

  1. Add a link to the layout.
    Add Link to layout
  2. Click magnifying glass beside the link control to open the Cell Properties panel.
    Cell Properties panel
  3. In the Cell Properties panel, click magnifying glass to configure the control.
    Configure control
  4. In the Behaviors area, click Add Row and add the following Click event:
    Select Launch > Open URL in Window
  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.
    Alternate Domain URL

    The Behaviors area appears as shown:
    Behaviors area
  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.)
Tuition for selected college

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.
    New Declare Expression
  2. These declare expressions take into account the student's home state and the state of the selected college.
    In-state tuition Declare Expression

    Out-of-state tuition Declare Expression
  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.

    Four year cost Decision Table
  4. Configure a declare expression that sets the value of the Total Tuition (4-years) equal to the result of the FouryearCost decision table.
    Total 4-year tuition Declare Expression

    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:
    In-state tuition calculations
    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:
    Out-of-state tuition calculations
    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
Declarative Expressions

Published August 15, 2012 — Updated September 24, 2012

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.