Hi, 

This discussion post is meant to provide an overview of available patterns in Constellation. It doesnt promise completeness; if you know of other patterns, please add those in the comments. 

In Constellation the data model is crucial as the fields that you add on a view denote the configuration options that are available. These help you to configure the business outcomes using the build-in patterns. Its important to understand when to use what field type.

In Constellation you don't add actions sets to buttons, links, etc; the approach forward is to use out-of-the-box patterns. For more information, see Goodbye to action sets.

Field groups

Group individual fields in clusters to present related data together. Field groups help you organize your fields under a single header, and provide you with tools to add instructions or temporarily hide the fields in collapsible sections. For example, in a car loan application, you can use a field group to gather data on the car, such as its make and model, as well as price or mileage. https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-field-groups.html 

Address

When using address details in your UI, there are 3 options. 

1. create an Address by leveraging a field with field type Address. When using the address field on the view then it provides a region-specific address format. The UI displays the Country field as a drop-down list. Depending on that selection, the UI displays a set of country-specific fields.
2. create a field of type Location. This allows your users to indicate geographic points more conveniently by providing the option to type an address in a location field. For example, a ride-sharing application might use the location field to help users set a pickup point. A location field consists of a text box in which the user can enter the address of a place, and might include a map. https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-location-fields.html
3. create a data object for Address and add the appropriate fields required to capture the details.

Select items from a list

When you want the user to select from a predefined list of options then a Picklist field type is the best option; a Picklist field captures a single choice from a list of valid options. You can choose from:

• Radio buttons
• Simple drop down
• Search with drop down

When you have a dynamic list or a more complex list of options, then the use of a data reference is the best option. This also allows to select multiple instances where the pick list only supports one. Data references can also show more than just a single field when selecting one or more records. 

Fields associated with data objects or other cases

For using data objects, case information and user references its important to choose the right field type.

For Data Objects there are 3 options:

1. Embedded data - the data captured for these fields are stored in Pega as part of the case data. Use this type when the data captured is:
   • uniquely a part of the current case
   • not looked up by other instances of this case type
   • not looked up by other case types
2. Data Reference - this stores the instance's unique identifier; when reference data is needed Pega looks up the data using the configured data page. It is possible to also keep a copy of the referenced data in the case. Use when
   • the data that the case needs is already in a system of record
   • may be modified separate from the current case workflow
3. Query - similar to Data reference in that it looks up data that exists in another SOR. The purpose is to connect the case data model to readonly data supplied by a Data Page that returns instances of the data object.     When you get data from a SoR with ID’s to other SoR data in it you can use the “Query” pattern to show and use data from that refenced data object. The ID that you get can be used in the Query pattern to get the right data out of the SoR based upon that ID.      

   This pattern is used if we can decide design time how to find the data that you want to query, so the query can be made without an end-user telling what data to use. Use the context data from the case at run-time to find the needed data. Common Query use cases are:

   • All instances of a data object

   • Results of data pages with no parameters 

     • Here, the case does not influence the result set

   • Results of data pages with non-key parameters
     • Data captured elsewhere in the case workflow can be wired into the data page parameters
     • Data available through the Query field becomes contextual to the case

Editable table

When you need to have a list of items (data instances) and you want inline editing in the table, then you can achieve this by adding a field on your case of type embedded that uses a data object and is set as list of records. By adding it to your view, it provides the option to select Table as display option and select table row editing. See more here: https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-fields-associated-with-data-objects.html#ui-const-configuring-embedded-data-fields-tsk

Modal to add/edit complex data instance

Similar to the editable table when you want to add or edit data instances in a list and inline editing is not an option. Then the suggested way by Pega is to select the Modal option for editing as opposed to table row editing. Then you can select what view to use in the modal for the add and the edit. See more here: https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-fields-associated-with-data-objects.html#ui-const-configuring-embedded-data-fields-tsk

Search & select 

When you need the OOTB search & select pattern so you are able to search using search fields, have the results shown in a table allowing you to select the appropriate item and have a search and clear button created by Constellation the way forward is to add a field on your case that is of type Data reference, single item and references a data object. By adding the field on your view, the configuration options allow you to select a table as the display mode. When selecting Table, it provides the options to search and define the search fields. See more here: https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-fields-associated-with-data-objects.html#ui-const-configuring-a-reference-field-tsk

Autocomplete to find an instance of a data list

Similar to the search and select pattern when you want to select an item from a list. Use the same field of type data reference on the case and on adding to the view use the autocomplete option on the display options. You then can select the detail view that constellation uses to show the details of the selected instance. See more here: https://docs.pega.com/bundle/platform/page/platform/user-experience/configuring-fields-associated-with-data-objects.html#ui-const-configuring-a-reference-field-tsk

Refresh on change of field

In traditional UI a refresh on change of a value of a field can be added through action sets. As Constellation fully implements the Center-out business architecture, there is no option to add business logic within the views. Therefore there is an option on the flow action (Form refresh settings) to define what fields it needs to listen to and you can define a data transform that then gets run. https://docs.pega.com/bundle/platform/page/platform/case-management/defining-run-time-presentation-flow-action.html

Repeating dynamic layout and Table(grid) layouts

In Constellation architecture the list Views are used and they rely on a list data source. You can configure list Views in cases as tables, galleries, or timelines, though data objects do not support the timeline format. Use App Studio to configure list Views. 

For more information, see Configuring list Views.

Instructions

Paragraph rules were generally used for instruction text on forms, field groups, and fields. This should now be configured at the View level. Use App Studio to configure instruction text at the form, field group, and field level.

For more information, see Configuring forms and Configuring field groups.

Bulk Actions

In Section-based architecture, bulk actions required you to build custom actions and activities. The Constellation architecture produces the same outcome through list View configuration – in this case, enabling bulk actions through a checkbox. Configure the list View to use bulk actions.

For more information, see Configuring list Views.

Blending Constellation and traditional UI

The following docs page provides input on how to use Constellation in existing applications

https://docs.pega.com/bundle/platform/page/platform/user-experience/blending-traditional-constellation-uis.html

In the Pega Academy mission there is a good module about extending Constellation that includes blending: https://academy.pega.com/module/extending-constellation-ui-options/v1

Make sure to do the challenge: https://academy.pega.com/challenge/blending-traditional-ui-and-constellation/v1

For a more in-depth overview, watch the recording and see the Q&A of the CLSA Community webinar about integrating Constellation with existing apps: https://community.pega.com/event/clsa-community-integrating-constellation-your-existing-apps-infinity-23