Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Configuring cascading drop-down lists

Updated on October 21, 2022
Applicable to Cosmos React applications

Reduce the time that is needed to complete a form by creating a group of drop-down lists that take cues from each other, and adjust the available options depending on choices that the user makes in the interface.

For example, in a mortgage application you can configure two cascading drop-down lists: for the mortgage type, and for the product type. First, the user selects New mortgage as the type of mortgage. In response to the first selection, the product type drop-down list displays only new mortgage products, and hides other types of mortgage loans.
Before you begin: Prepare your data environment:
  • Create the data objects MortgageType and LoanProducts, which hold mortgage types and loan products. For more information, see Creating a data object.
  • Ensure that the D_LoanProductsList data page takes a Mortgage type parameter. For more information, see Data pages and parameters.
  • Ensure that the Mortgage type parameter in the D_LoanProductsList data page is not required.
  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.
  2. On the Data model tab, click Add field.
  3. In the Configure field dialog box, in the Field name field, enter the name of the first drop-down list.
    For example: Enter: Mortgage type.
  4. In the Type list, select Picklist.
  5. In the Display as list, select Drop-down list.
  6. In the Picklist options list, select Data page, and then, in the empty field to the left, select the list from which you want to source the data.
    For example: Click Mortgage typeList Mortgage type.
  7. In the Identifier field list, select the field by which you want to sort the items in the drop-down list.
    For example: Select Category ID.
  8. In the Display field list, select the field whose content you want to display in the drop-down list.
    For example: Select Full category name.
  9. Click Submit & add another.
  10. In the new dialog box, configure the second drop-down list by performing 3 through 6.
    For example: Perform the following actions:
    1. In the Field name field, enter Loan product.
    2. In the Type list, select Picklist.
    3. In the Display as list, select Drop-down list.
    4. In the Picklist options list, select Data page, and then in the empty field, click Loan productList Loan products.
  11. In the Data page parameters node, in the Type field, select Another field, and then in the empty field below, select the name of the list that you defined in step 3.
    For example: Select Mortgage type.
  12. In the Identifier field list, select the field by which you want to sort the items in the drop-down list.
    For example: Select Product ID.
  13. In the Display field list, select the field whose content you want to display in the drop-down list.
    For example: Select Product name.
  14. Click Submit.
What to do next: Add the fields to your UI. For more information, see Configuring forms.

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us