Skip to main content

Setting a visibility condition for form content

Archived

1 Task

5 mins

Visible to: All users
Beginner Pega Platform 8.6 User Experience English
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded. Click here to continue your progress in the latest version.

Scenario

The GoGoRoad application allows customers to enter the service address by entering information in fields or selecting the location from a map. To customize the user experience by channel, the UI consultant has requested the following functionality: Users on a non-mobile device use the fields to enter the service address. Users on a mobile device select the location from a map. Configure the Identify location form to hide the redundant content depending on the device that is in use.

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

Detailed Tasks

1 Set visibility conditions on the Identify location step

  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 run a new case instance.
  3. Advance the case to the Identify location step.
  4. In the header of App Studio, click Design to enter the design mode.
  5. Hover over the Service address section, and then click the Edit this section icon.
  6. In the configuration pane on the right, verify that the section with the Street, City, and State fields is open.
  7. Click Settings to open the configuration pane for that section.
    default Service address section configuration pane
    1. On the General tab, in the Visibility list, select Condition (when rule)
    2. In the Condition for visibility field, enter or select pyIsNotMobile.
    3. In the Caption area, select None.
      Visibility condition pyIsNotMobile
    4. At the top of the section configuration pane, click Apply to set the configurations on the section.
    5. Close the section configuration pane.
  8. In the configuration pane, in the Default list, select Identify location to open the configuration pane for the Identify location section.
    callout-default
  9. In the Identify location configuration pane, hover over Location Field (Optional), and then click the Edit this "Section" icon.
    section-edit
  10. Click Settings to open the configuration pane for that section.
    1. On the General tab, in the Visibility list, select Condition (when rule)
    2. In the Condition for visibility field, enter or select pyIsMobile.
      visibility condition pyIsMobile
    3. Click Apply to set the visibility configuration.
  11. Click Design to exit the design mode.

Confirm your work

In the Identify location step, verify that the Address field and the map are hidden.

Identify location step with hidden map and Address field
Note: If you were to set up the GoGoRoad application on a mobile device, you can verify that the Address field and the map are displayed. Mobile device setup is out of scope for this challenge.


Available in the following missions:

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