Challenge
Authoring a new Constellation application
Authoring a new Constellation application
10 Tasks
1 hr 10 mins
Scenario
Learn the importance of the Data Model-first approach for Constellation applications. Configure UIs with top-level and embedded data fields. Discover the Full-Page View.
Loan Market (LMKT) is a long-standing Pega client that has delivered some applications using traditional, section-based UI architecture to production. Loan Market is looking to evolve their delivery of Pega applications to embrace the latest features and delivery techniques, including:
- Constellation UI for new workflows
- App Studio
- Modular Reuse
- Pega GenAI Blueprint™
Loan Market has already implemented some modules that are used in their current applications. These modules contain features that future workflows can use.
Loan Market's next initiative is a Loan Marketplace. This initiative is an offering for customers of Loan Market to provide the information needed to apply for finance in one stop. The application then suggests relevant products from lenders in Loan Market's finance network.
In just a few hours, a Discovery team collaborated with Loan Market stakeholders to map out the workflow and data needs of Loan Marketplace's primary workflow: the Customer Intake. The team captured the outcome in a Blueprint. Another member of the delivery team has imported the Blueprint into your challenge system and made some data design revisions.
Loan Market wants to embrace implementing this new workflow using Constellation.
You successfully recommend implementing Loan Marketplace using Constellation UI to set it up for current and future success with Pega Platform™.
The following table provides the credentials you need to complete the challenge:
| Role | User name | Password |
|---|---|---|
| Application author | AppCreator@LMKT | pega123! |
Detailed Tasks
1 Refine the Customer Intake Data Model
- In your challenge instance, click Launch Pega Infinity, and then enter the following credentials:
- In the User name field, enter AppCreator@LMKT.
- In the Password field, enter pega123!.
- In App Studio, use the Branch development preferences to create a new Branch called Authoring.
- Configure the settings in the Branch development preferences dialog box to target Rulesets in the Loan Marketplace Application Layer for new or changed Rules.
Caution: After submitting your new branch name, the Branch development preferences dialog box might turn off preferences. If so, perform the following steps:
- Turn Branch development back on, and then click Submit.
- After closing the dialog box, confirm that there is a green indicator on the Toggle branch development icon.
- If there is no green indicator, click the Toggle branch development icon again, toggle the switch off and on, and then click Submit.
- Open the Data Model of the Customer Intake Case Type.
- Add the following choices to the Loan Purpose field:
- House
- Vehicle
- In the upper-right corner of the Data Model tab, click Primary Fields.
- Add the following fields:
- Case ID
- Credit Score
- Label
- Loan Purpose
- Requested Amount
- Work Status
- Urgency
Tip: When selecting additional fields to add, experiment with the search box to search for and select fields of interest. After you select a set of fields, click Add. - Drag and drop the fields so that they are shown in the following order:
- Case ID
- Label
- Urgency
- Loan Purpose
- Requested Amount
- Credit Score
- Work Status
2 Prepare the Applicant data object
The Loan Marketplace application uses existing Data Models available from Pega Platform. Your colleague who imported the Blueprint changed the directed inheritance of the Applicant data object to PegaData-Contact. Future Loan Market applications can also adopt this strategy.
- Add a new Employment Status field to the Applicant data object with the following characteristics:
- In the Type list, select Picklist.
- Add the following choices:
- Full-time
- Part-time
- Self-employed
- Unemployed
- Expand Advanced, and then in the Additional info section, experiment with entering some content over multiple lines, including some bold text or bullet points.
Consider also uploading an image. The following figure shows an example:
- Use what you have learned so far to configure Primary Fields for the Applicant data object to include the following fields in the following order:
- First name
- Last name
- Date of birth
- Employment Status
- Phone Number
- Primary email
- LinkedIn URL
3 Configure the Capture Loan Purpose Step
Business outcome
Capture the purpose and amount for which the customer wants to secure the loan.
Data Model
- Loan Purpose: Picklist
- Requested Amount: Currency
View configuration
- Open the Customer Intake Case Type.
- Click the Capture Loan Purpose Step.
- In the Step configuration pane on the right, in the Instructions for User text box, enter your choice of text, and then click Configure view.
Tip: One significance of configuring Primary Fields for a Case Type is that the first Step in the workflow shows these fields by default.
- Remove the Primary Fields View from this Create View.
- Add the Loan Purpose field from the field list of the Case Type in its place:
- Use the search box that is provided to find and select the field.
- Confirm that the real-time preview on the left suggests that a drop-down control is a good default because the Field Type is Picklist.
- Configure the Loan Purpose field.
- Click the Display as list to observe what Constellation suggests for a Picklist field.
- Select Radio Buttons.
- Confirm that when you select Radio Buttons, an additional option to select Horizontal Display is displayed, and then select the checkbox.
As you continue through the challenge, observe how Constellation adapts the configuration options based on the current Field Type.
- Add the Requested Amount field to this View, and then explore its configuration options.
Notice how the configuration options:- Adapt appropriately to capture a Currency field compared to the previous Picklist field.
- Provide more relevant outcomes when capturing currency data than plain decimal data.
- Clear the Allow Decimals checkbox.
- Select the Show ISO Code checkbox.
- In the Helper Text field, enter How much do you want to borrow (to the nearest 1,000)?
- Save the field configuration, and then on the View configuration, click Submit.
- Click Save.
- Adding step instructions for a workflow step.
- The first time you use Configure View for a workflow step.
Always use Configure View in the Case Lifecycle to create the first version of a View for the workflow Step. The system creates and preconfigures the associated Flow Action for the step at this time.
After creating the Flow Action and View for a workflow Step, you can use the UX tab of the Case Type to make changes only to the View. This technique reduces the number of Rules that your Branch touches when you implement workflow View improvements
4 Configure the Capture Applicant Details Step
Business outcome
Capture the key information about the person who is applying for this loan.
Data Model
- Applicant: Embedded Data, single record, Applicant data object
View Configuration
- In the Customer Intake Case Type, configure the View for the Capture Applicant Details Step.
- In the Instructions list, select Override Case Step Instructions.
Similar to the Additional Info configuration you performed earlier for the Employment Status field, experiment with the rich-text authoring available in the Instruction Text field.
To achieve the business outcome, Rules encapsulated in a data object best capture or show key information about an instance of that data object, which is related to a Case Type. This includes user interface Rules. Including an Embedded Data field for a single applicant on the Case Type Data Model makes this straightforward in Constellation.Caution: From this point on, avoid using the search box to filter the fields. Scroll through the Field list to find the fields you need to select. If a list of Views to select does not show the View requested by these instructions, then log out and log in again. - Add a field to the View, find the Applicant field, and then click the arrow on the right.
- Expand Views.
- Select the Create checkbox for the View that is already defined on the Applicant data object.
- Click Add to embed the Create View for the application to the View for the Case Type Step.
If authoring for a similar outcome using traditional UI, you update the page context to .Applicant, and then reference a Create UI Rule that applies to Data-Applicant.
However, the outcome you just achieved is fulfilled completely from App Studio and is also more intuitive for a wider audience of developers to learn and perform.
- Submit the View configuration.
- Save the Case Type, which is required because you have implemented the first View for the Capture Applicant Details Step.
5 Run the Customer Intake Case for the first time
The Save and run action also saves the Case Type Rule even without changes or if the only changes are to View configurations that auto-save when authored on the UX tab. This makes merge conflicts more likely.
Use this challenge to practice saving the Case only after you implement workflow changes and previewing in App Studio any time you need to run a Case from its already-saved state, which reflects the actual user experience.
- In the header of App Studio, click Preview to use the Constellation user portal, which was automatically generated when importing the Blueprint.
- Create a new Customer Intake Case, proceed through the first four steps, and finally click the Advance this Case button.
Observe the following details for the following Steps:Step name Details Capture Loan Purpose - Step-level instructions are shown.
- The Loan Purpose is captured using radio buttons.
- The Requested Amount shows the USD currency code. Values show a currency separator when relevant during data entry.
- The helper text is displayed under the appropriate data capture field to guide user input.
Capture Applicant Details - Rich-text instructions configured in the View override any step-level instructions.
- The Date of Birth provides a date-picker.
- The Employment Status has an info icon.
- Clicking Employment Status shows the detailed field guidance you configured in Additional Info.
- There are no constraints or validations when entering:
- Phone Number
- Primary Email
- LinkedIn URL
- The Primary Email is validated on submission.
Full Case View (after Advance this Case) - The summary panel in the upper left shows the Case Type's Primary Fields either in the heading, subheading, highlighted fields, or summary fields.
- The Details tab is the default tab that is active.
- The Details tab shows a Details view in the center of the Full Case View, which also defaults to the Case Type's Primary Fields.
- The Currency field in Primary Fields shows Currency-specific formatting.
- Click Exit Preview to return to authoring mode.
Key learning: Primary Fields
Where are the default places that use Primary Fields?
- The default view of the first step in a Case Type.
- The default content of the Create view for a data object.
- The default content of the Details view for a Case Type.
Primary Fields do not capture field-specific UI configuration. A field associated with Primary Fields is displayed in the UI through the default behavior of its Field Type. For example:
- Employment Status (Picklist) is displayed as a drop-down list on the Capture Applicant Details Step.
- Requested Amount (Currency) is displayed with decimal places when shown read-only in the Full Case View.
6 Configure the Full Page View
Configure the Full Page View for the Customer Intake Case Type:
- In App Studio, open the Customer Intake Case Type, and then click the UX tab.
The Full Page View is active by default on the right of the UX editor. - Update the field-level configuration of the Full Page View:
- Set the heading by clicking Applicant > Last Name.
Ensure that the field uses the same last name that you selected when configuring Primary Fields for the applicant. - Drag Loan Purpose to the Highlighted Fields section.
- Drag Work Status to the Summary section.
- Drag Create Operator and Update Operator to the bottom of the Summary section.
Tip: Create Operator and Update Operator are widgets, not fields. Look for other places where you can use widgets in the View configuration. - Set the heading by clicking Applicant > Last Name.
- Add a new Applicant tab, and then drag it under Details.
- Click Applicant to open the tab configuration, and then use what you have learned previously to switch focus to the Applicant field of the Case and display its Details View in Region A of the one-column template.
- Click Back to return to the Full Page View.
- Scroll through the Full Page View configuration to familiarize yourself with its other features, including:
- Utilities widgets
- Options to show or hide common fixtures
- Pega GenAI Coach
- Click Preview, and then find the Case you created earlier in the Tasks list on the home page of the user.
- Open the Case, and then confirm that your newly configured Full Page View is displayed.
The following figure shows the default Full Page View: The following figure shows the author-configured Full Page View:
- On the Full Page View of your Case, click the new Applicant tab to observe the applicant details captured in the Validation Step of the workflow.
- Users expect a standardized layout of phone number data and to interact with it.
- Users also expect email addresses and URLs to be clickable.
The Applicant data object inherited these fields from PegaData-Contact, a Pega class that is likely consistent with data classes used by your current traditional UI implementations. If their fields do not use current Pega Platform Field Types, they might also suffer from these outcomes.
Consider evolving your existing data classes to use modern Field Types, which Constellation is ready to use. Alternatively, you might define new data objects that exclusively use modern Field Types for new workflows going forward.
7 Add modern data fields
Case Types and Data Objects that use the modern Field Types available in Pega Platform are the main influence on the UI configuration of a Constellation application.
- In App Studio, add the following new fields to the Applicant data object:
New field name Field Type Observations Email Address (new) Email Notice how App Studio can suggest a useful field type based on the field name. Phone Number (new) Phone Always double-check any field type suggestion. The default suggestion here is Integer. Social Link URL None Tip: If your Data Model has many fields inherited from another layer, then try filtering the field list by Application Layer, as shown in the following figure: - Replace the Primary Fields for the applicant to use the modern fields created in step 1 in place of the fields inherited from PegaData-Contact.
- Create a new Case, and then complete the steps until the Full Page View is displayed.
- Confirm that the default editable behavior of a phone field is to:
- Prompt separately for the country code.
- Apply user-friendly formatting during entry.
- Only numeric values are accepted.
- Confirm that the default read-only behavior of the Phone, Email, and URL fields is to mark up the value of the fields as an actionable link.
The Field Type determines the nature of the default markup.
- Prompt separately for the country code.
In the Self-discovering and troubleshooting challenge, you discover what provides the list of Country Codes and how to configure them.
8 Prepare the Embedded Data Model
The third and fourth steps in the first stage of the Customer Intake Case Type capture the Applicant's financial details and employment history. Creating the Data Model in advance ensures that:
- You remain focused on the business outcome.
- You accelerate the process of authoring the UI of your Case Type in Constellation.
The Data Objects configured in this task are deliberately imported from a Blueprint with no fields so that the implementation team remains in control of the low-level Data Model.
- Add the fields shown in the following table to complete the definition of the Income and Expense data objects, the Financial Information data object, and the Employment data object:
Data Object Field name Field Type Additional configurations Income Type Picklist - Display as a search box.
- Add the following choices:
Employment
Investment
Benefit
Other
Income Description Text (single line) None Income Amount Currency None Expense Type Picklist - Display as a search box.
- Add the following choices:
Housing
Debt Repayment
Transportation
Living
Other
Expense Description Text (single line) None Expense Amount Currency None Financial Information Income Lines Embedded Data - Income data object
- List of records
Financial Information Expense Lines Embedded Data - Expense data object
- List of records
Financial Information Total Income Currency - In the Advanced section, configure a calculation: Sum of Income Lines > Amount.
If you do not see any options for Sum of, then check that Income Lines was defined as a List of Records.
Financial Information Total Expenses Currency - In the Advanced section, configure a calculation: Expense Lines > Amount.
If you do not see any options for Sum of, then check that Expense Lines was defined as a List of Records.
Financial Information Net Income Currency - In the Advanced section, configure an expression:
.TotalIncome - .TotalExpenses.
Employment Company Name Text (single line) None Employment Address Address None Employment Years with Employer Integer None Note: As you were authoring the Net Income calculation, did you notice how App Studio named the property Rules you created earlier (.TotalIncome and .TotalExpenses) according to Pega best practice naming conventions?
Did you also notice that you just configured three declare expressions without leaving App Studio?As you might have seen in an earlier task, you can configure and encapsulate Views on data objects so that they are available to select when those data objects are included in Case Type Views.
- In App Studio, open the Employment data object, and then click the UX tab.
- In the right pane, click the Other Views tab on the right, and then create a new form named Employment Details.
- Click the Employment Details form to author it.
- Next to the View label, hover over the Info icon, and then observe the following about this View Rule:
- Name
- Ruleset (or, in this case, the Branch Ruleset)
- Applies to class
Tip: App Studio makes intelligent decisions on the name, class, and Ruleset for each Rule it creates, including Constellation View Rules. It uses the business-friendly name that you enter in App Studio, the context of where you are creating the Rule, and your Branch development preferences. - Configure the View:
Field for View Field Type
that influences View configurationConfiguration options Company Name Text (single line) - Use default settings.
Years with Employer Integer - In the Display as list, select Slider.
Note the other Display as list options for Integer fields. - In the Minimum value field, enter 0.
- In the Maximum value field, enter 5.
- In the Default value field, enter 0.
- In the Helper text field, enter Choose "5" when 5 or more years.
Address Address - Use default settings.
- Refine the Years with Employer field on this View:
- In the Field label list, select Custom.
- In the Custom field label list, select Source from Library.
- In the drop-down list that is displayed, select Create New.
- In the New Custom Field Label dialog box, configure the details:
- In the Name field, enter Years with Employer.
Use spaces to keep this name business-friendly. - In the Text box, enter Years with.
- Use the Insert Field widget to select the Company Name field
- In the Name field, enter Years with Employer.
The following figure shows the completed View:
9 Configure the Capture Financial Information Step
Business outcome
Capture the financial information about the person who is applying for this loan.
Data Model
- In the Customer Intake Case Type, click the Data Model tab.
- Add the following field:
- In the Field Name field, enter Finances.
- In the Type list, select Embedded Data.
- In the Data object list, select Financial Information.
- In the Options section, select Single record.
The Income Lines, Expense Lines, and Currency fields created in the earlier Prepare the Embedded Data Model task also become part of the Data Model of the Case Type because they compose the Financial Information data object.
View configuration
In addition to encapsulating Views on a data object, you can add Views to data objects during Case Type UI authoring.
- Click the Capture Financial Information Step, and then configure its View.
- Using what you have learned previously, review the Views that are available for the Finances field:
Note: The View for the Financial Information data object that is needed for this Case Step does not exist yet.
- Click Create New View.
- In the Name field, enter Income and Expenses.
- In the list of templates, select Default form.
- Add fields in the following order:
- Income lines
- Total income
- Expense lines
- Total expenses
- Net income
Tip: Use the template Default Form if the View will capture editable data in a workflow Step. App Studio preselects Default Form because you requested the new View while configuring a form Step View. - At the top of the Income and Expenses View, confirm that the Finances field that the new View applies to uses Embedded Data - Single Record - Financial Information.
The configuration options for a View bound to an Embedded Data/single-record field are very similar to that of a Case Step. - Using what you have learned previously, confirm the Rule name, class, and Ruleset details for this new View Rule.
Tip: The new View Rule has been correctly encapsulated in the Financial Information data class, even though you completed the task by authoring a Case Step.
If you stay in App Studio, prepare your Case Data Model, and configure Case Type Steps by selecting the fields for the intended business outcome, App Studio creates intelligently named Rules in the correct Class and Ruleset.
You can have confidence that other team members will achieve the same outcome when using App Studio. - Click the Income lines item that is bound to an Embedded Data Field Type to configure an inner View that captures and displays a set of income records.
Tip: Because the Income lines field uses Embedded Data (list of records), different View configuration options are shown in the following figures:Caution: In the next step, some of the columns you must add might be unavailable for selection.
Submit your View, save your workflow, log off, log on, and then return to configure the Income lines View. - Configure the Income lines View:
- In the Display as list, select Table.
- In the Add and edit records within list, select Table rows.
- In the Columns section, delete Primary fields.
- In the Columns section, add the following fields:
- Type
- Description
- Amount
- In the Column to take up remaining width list, select Description.
- Familiarize yourself with the conditional logic options in the Conditions and Record-level Conditions sections, but retain the default values.
- Click Back to return to the Income and Expenses View that embeds the current View.
- In the Income and Expenses View, repeat step 9 for the Expense lines item.
- Leave the default field configuration for the Currency fields, then submit the Income and Expenses View.
- Save the Case workflow because you have configured the first View for a workflow Step.
Tip: Clicking Submit in the View configuration closes the View configuration editor for all Views in your current stack, even if the View you submit is not the top-most View. You do not lose any changes. You can click Back to return to the View that occupies the View that you are currently authoring.
- Optional: Configure your application so that the Net income field is displayed under the Requested amount field on the Full Page View of the Customer Intake Case.
Note: Net income is significant data for the underwriters.Tip: The search box in the field selector can help you find fields that are nested in the data objects that your Case Type embeds or references, as shown in the following figure:
10 Configure the Capture Employment History step
Business outcome
Capture the employment history of the person who is applying for this loan. Capturing each item of employment history is complex.
Data Model
Use what you have learned previously to add an Employment History field, which is a list of Embedded Data records of type Employment.
View configuration
- Configure the View for the Capture Employment History step (Step 4 in the Capture Details stage).
- Add the Employment history field to the view and click into the configuration of this Embedded Data item.
Similar to the Income lines field, Employment history is an Embedded Data (list of records) Field Type. The same UI configuration options are shown.- In the Display as list, select Table.
- In the Add and edit records within list, select Modal.
- In the View for add and edit modal list, select Employment Details.
- Instead of Primary Fields, in the Columns section, click Add, and then add the following columns:
- Company Name
In the Field label field, enter Company. - Years with Employer
In the Field label, enter Years. - Address > City
- Address > Country
- Company Name
- In the Column to take up remaining width list, select Company Name.
- Submit the View configuration.
- Save the Case workflow.
Want to help us improve this content?