Skip to main content

Applying a style to a UI element

Archived

2 Tasks

5 mins

Visible to: All users
Beginner Pega Platform 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.

Scenario

The UI team at GoGoRoads has asked you to style drop-down controls to simplify the drop-down list's appearance.

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

Role Operator ID Password
Application Developer author@gogoroad pega123!

Challenge Walkthrough

Detailed Tasks

1 Modify the style of the drop-down list on the Create view

  1. In App Studio, create an Assistance Request case instance.
  2. On the Create view, click the Edit icon to edit the view.
  3. In the view, or in the properties pane on the right, hover over the Service type field and click the Edit this field icon.
    Pencil icon shown when hovering over a control
  4. In the properties pane on the right, in the General tab, clear the Use property default check box. 
  5. Clear the text in the Label value field.
  6. In the Placeholder field, enter "Select the service type".
    General tab when editing a control
  7. Click the Presentation tab.
  8. In the Control format field, enter or select Transparent.
  9. In the Specify size area, click Auto.
    Presentation tab when editing a control

2 Confirm your work

  1. In the header of the pane, click Apply to apply the presentation changes.
  2. Close the pane to return to the run-time view of the Create view.
    Verification of style change on drop down control


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