Skip to main content
LinkedIn
Copied!

Table of Contents

Configuring cascading drop-down lists

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.
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_LoanProducts data page takes a Mortgage type parameter.
  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.

    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.

    Click Mortgage type List Mortgage type .
  7. In the Identifier field list, select the field by which you want to sort the items in the drop-down list.

    Select Category ID.
  8. In the Display field list, select the field whose content you want to display in the drop-down list.

    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.

    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 product List 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.

    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.

    Select Product ID.
  13. In the Display field list, select the field whose content you want to display in the drop-down list.

    Select Product name.
  14. Click Submit.

Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us