How to configure multi select in Pega ?

 What is Multi-select list control in Pega?

Multi-Select list control is added to user form so the users can select multiple values from the drop-down. These lists save time and ensure accuracy by supplying a list of valid values for an input field. 

Sources for a Multi-Select list control:

  • Data page.
  • Clipboard page.
  • Report definition.

How to configure multi-select in Pega?

Pega has provided OOTB control to configure the Multi-select list for a dropdown. pxMultiSelect is the OOTB control. 
We need to have a PageList or Page group property to have the values selected from the drop-down.
We need to provide the source to the Multi-select list control so that control will display the results in a drop-down where users can select one after another.

Adding and configuring a multi-select list control.

Scenario: In a Service Request application, the user wants to raise a Service Request for multiple issues at a time by selecting them in a "Request type" dropdown.

multiselect list control pega

We can achieve this by adding Multi-select list control in section and providing a source to the control.

Multiselect list control in pega

Create a PageList/group property to hold the selected values.

PageList property for Multi select

Define a source for the Multi-select list control:

Source for multi select in pega

At runtime, below is the screenshot, where the user can select multiple values from the drop-down. Users can click on the "X" icon on each oval to deselect it.

Mutiselect list control in UI

See below clipboard structure for multi-select control, whatever is selected from the drop-down will be added into a Page list property.
clipboard for Multiselect pagelist

Search results configuration:
We will see how to configure search results, from the below screenshot we have 3 options.
1.Show value.
2. Set value.
3. Use for search.
search config multi select

1. Show value:

From the below screenshot First row (Type) is mandatory. However, Description and Department fields are optional and we can add more properties from the source. 
A show check box is selected for Description, not for Department. 

At runtime, the user can not see the Department when clicking on the drop-down or searching the options, and the user can only see the Issue Type and Issue Description as shown below.

2. Set value.

Whatever we select from the drop-down, those values will be set onto the clipboard PageList property.
From the below screenshot, the Set value check box is selected for the Description field and has given Property. Whenever you select the "Set value" checkbox, need to provide the corresponding property in the Property field as it is mandatory.
set value multiselect list control
clipboard for setvalue multiselect

 3. Use for search.
To search the options from the list. We need to select the check box for the properties where we can search the options from the list at runtime. From the below screenshot; the "Search" check box is selected for Type and Description, which means we can only search the options with type or description and we can not search the options with the department name.use for search in multi select list control

Some questions or issues while implementing Multi-select list control:

1. Drop-down is allowing to select one option at a time, need to click on the drop-down arrow multiple times to select multiple values.
We can observe this issue when we configure a multi-select list control, where the user has to click on the drop-down arrow multiple times to select multiple values. Drop-down is not sticky until we select desired values.
Solution: We need to remove the on-click action from the actions tab (if have any) so that drop-down will not be dis-appeared for each selection.

multiselect in UI sticky drop down

2.  Restrict free form text entry.

With the Multi-select list control, user can type own text and make it as an option even though that option is not there in the drop-down (source) like below:

From the above screenshot, we can see that the user has entered free text and made them as options. Pega helps and multi-select options are not there but the user has entered as free text. Whatever input we are trying to type and use in the control other than the existing options from the list, will be considered while running the case but, it will not be saved to the database.
Below is the clipboard structure for free text options selected by the user.

clipboard for free text

However, we can restrict this free form entry of the text by the user in the control itself.
In the Presentation tab of the control, clear the check box "Allow free-form input".

Allow free-form input
If we clear the check box, the user can not make a free text into an option at runtime.

Allow free-form input unchecked

1 comment:

  1. Thank you. This is so much helpful.