Skip to main content

Challenge

Customizing a view at run time

Scenario

GoGoRoad stakeholders want the Enter customer information view and Identify Location view to be streamlined to display the relevant information with proper validations. To achieve this request, change the coverage information of Enter customer information view to a two-column layout and add the ZIP code property to the Identify Location view with required validations.

The following table provides the credentials you need to complete the challenge.

Role User name Password
Application Developer author@gogoroad pega123!
Note: Your practice environment may support the completion of multiple challenges. As a result, the configuration shown in the challenge walkthrough may not match your environment exactly.

Challenge Walkthrough

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Detailed Tasks

1 Add a property to a data type

  1. In the navigation pane of App Studio, click Data. 
  2. In the Data objects and integrations landing page, click Service address to open the Service address data object.
    data_objects_integrations_landing_page
  3. Click Add field to add a new field to the Service address data object.
  4. In the Field name field, enter Zip.
  5. In the Type list, select Text (single line).  
  6. Click Advanced to expand the options
  7. In the Max length field, enter 5.
    zip3
  8. Click Submit and save the changes. 

2 Change the template to a two-column layout

  1. In the navigation pane of App Studio, click Case types > Assistance Request to open the Assistance Request case type.
  2. Click Save and run to create a case instance.
  3. Advance past the Create view.
  4. In the Enter customer information view, toggle the Design mode.
    designmode
  5. Hover over the Enrollment information section, and then click Edit this section to open the Enrollment information pane.
    design mode
  6. In the Enrollment information pane, to the right of Template, click Change to change the template.
    asdf
  7. In the Select a template window, click 2 Column.
  8. In the Enrollment information pane, hover over Coverage level, and then click and drag the item to Column B.
    Move drop down to a different column
  9. Click Close to close the Enrollment information pane.
  10. Toggle the Design mode.

3 Configure the control settings

  1. Click Continue to advance the case to the Identify location step.
  2. Toggle the Design mode.
  3. Hover over the Service address section, and then click Edit this section.
  4. In the pane on the right, click Add.
    dfsf
  5. In the Fields section, hover over the Zip field and click Add to view.
    zipcode
  6. Click Close to return to the previous pane.
    close
  7. In the pane on the right, hover over Zip, and then click Edit this "Text input"
    sss
  8. Clear the Use property default check box.
  9. In the Label value field, enter Zip code.
  10. In the Placeholder list, select Other.
  11. In the field under the Placeholder list, enter 12345 as the placeholder value.
  12. In the Required list, select Always.
    actual zip settings
  13. Click the Presentation tab.
  14. In the Editable Settings section, in the Min characters field, enter 5.
  15. Repeat step 14 for Max characters field.
  16. In the Editable Format section, in the Type list, select Number.
  17. In the Text alignment list, select Left.
  18. Clear the Display value using read-only formatting check box. 
    zip10
  19. Click Apply to save your changes.
  20. Click Close to return to the previous pane.
  21. Click Close to close the section pane.
  22. Toggle Design mode.

Confirm your work

  1. From the multi-step navigation menu, click Enter customer information to return to the previous step.
  2. In the Account ID list, select an enrolled customer and confirm that the Coverage level is displayed in the second column.
    enter_customer_information
  3. Click Continue to navigate to the Identify location step.
  4. In the Identify location view, verify that you can enter only numbers in the Zip code field.
  5. In the Zip code field, enter a value with more than 5 digits and click Continue.
  6. Confirm that you receive an error message when the Zip code length is greater than 5 characters.
    zip_code
  7. In the Zip code field, enter a value with less than 5 digits and click Continue.
  8. Confirm that you receive an error message when the Zip code length is less than 5 characters.
  9. In the Zip code field, enter 5 digits and click Continue.
  10. Confirm that the case advances to the Identify vehicle step.


Available in the following missions:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

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

Pega Academy 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