Search and select pattern with reusable views

[PraneethPurighalla]

Account Search Reusable View

Problem Statement

A financial services application has a requirement for the users to be able to search and select different kinds of entities such as accounts and contacts from different case type contexts. The selected entity/entities could be related to different fields in the case data model hierarchy. For example, one or more accounts are associated with each Authority case, (top-level embedded field directly under pyWorkPage), whereas for a Payment case that has a list of drawdowns, there are one or more accounts associated with each drawdown. Hence, there is a desire for a consistent user experience when it comes to “search and select account(s)”.

Note: Account is just an example, the search can be against any data object.

Desired End State

Authority Case (one case associated with one or more accounts)

Payment Case (one case associated with one or more Drawdowns, each Drawdown associated with one account)

Solution

The objective is to provide a set of reusable views – one for selecting a single account and another for selecting one or more accounts – that can be embedded in any form view at any level in a case type.

Steps to set up the reusable views

1. Create a wrapper Account Search data object.
2. Add two Data Reference fields, one called Account (single record) and the other called Account List (multiple records). These two fields refer to the Account data object which could be sourced locally or from an external SoR. Under the advanced configuration of the Data Reference Field, you may configure the field to copy the reference data to the case.

3. From UX → Other Views, create two reusable Form views called Account Search Single Select View and Account Search Multi Select View.

4. Click Account Search Single Select View to configure the view. In the Account Search Single Select View, under fields, add the field Account.

5. Click Account to configure the field settings, select Mode as Single-select, Display as Search and select. Under “search for” categories, add Account category.

6. Click Account category to define the search parameters. Under Data page, select the data page that returns the list of accounts. Under Search groups, add Account Number search group. Click the + icon next to Search group to add Account Number text field as a search parameter. Under Columns, add the columns that need to be displayed in the search results.

7. Likewise, in the Account Search Multi Select View, add the field Account List and configure mode as Multi-select and display as Search and select.

Steps to use the reusable views in the context of Payment case type

1. Within the Payment case type, there is an embedded Drawdown List.

2. An account is associated with each Drawdown. Add an embedded field called Account Search in the Drawdown data object. This field refers to the Account Search data object.

3. From the UX tab of Drawdown data object, click Other Views → Edit to add the Account Search field.

4. Click the Account Search field to drill down into the field settings and add Account Search Single Select View to add a single account under each Drawdown. To associate multiple accounts under each Drawdown, add Account Seach Multi Select View.

5. On the Workflow tab of Payment case type, select the step where we will be adding Drawdown List and click Configure User Action.

6. Add Drawdown List under fields. Click Drawdown List to drill down into the field settings. Configure Mode as Editable, Display as Table, Add/edit records in.. Modal, Use View or Action as Action, User Action as Edit.

Runtime behavior

1. Create a Payment case. Click Add Drawdown to launch the modal dialog.

2. The reusable single-select search view along with other fields of Drawdown object is displayed. Enter an account number and click Search.

3. Select a record and click Submit. The drawdown gets added to the list.

4. Open the case in Dev Studio and check the clipboard.

5. Like mentioned in step 4 above, to add a list of accounts under each Drawdown, select Account Search Multi Select View associated with the Account Search field in the Edit view of Drawdown object.

References:

• https://docs.pega.com/bundle/platform/page/platform/data-integration/journey-fields/journey-search-and-replace-fields.html
• https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-views.html

Constellation 101 Series

Enjoyed this article? See more similar articles in Constellation 101 series.

[MarcCheong]

Thanks for sharing your knowledge @PraneethPurighalla! I’ve added this to our Constellation 101 series so it can be found with other useful Constellation knowledge shares.