Skip to main content

Adding dynamic functionality to a button


3 Tasks

10 mins

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


After a request for roadside assistance is approved, a service provider is dispatched to the location provided by the customer. To perform this task, customer service representatives (CSRs) request the ability to verify and modify the service address when selecting the service provider.

Add a button to the Select service provider view so that the CSR can verify the service address submitted by the customer.

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 Add a button to the Select service provider view

  1. In the navigation pane of App Studio, click Case types > Assistance Request.
  2. Click Save and run to create a new Assistance Request case.
  3. Advance the case to the Identify location step, and then enter an address in the Street, City, and State fields.
    Note: The Address field is populated when you progress to the Identify vehicle step. 
    New Assistance Request Identify location step
  4. Advance the case to the Select service provider step, entering information in all required fields.
  5. In the header of App Studio, click Design to enter the design mode.
  6. Under the Select service provider label, hover over the map section, and then click Edit this section to open the Select service provider configuration pane on the right.
  7. In the configuration pane, click the Add icon to select a UI element.
    Select service provider section config pane
  8. In the Controls section, hover over Button, and then click the Add to view icon to add the new UI element to the bottom of the region. 
    button add to view
    Note: Scroll down to see the button under the Service provider table.
  9. Close the Add pane.

2 Configure the Modify service address button

  1. In the configuration pane, hover over the Button label and click the Edit this "Button" icon to open the Button configuration pane.
  2. On the General tab, in the Text field, enter Modify service address.
  3. Click Add action sets to define the action sets for the button.
    Modify service address button add action sets
  4. Click Create an action set.
  5. In the Action set 1 section, click Add an event to select an event for the button.
  6. In the Mouse events section, click Click.
    Add a click event
  7. In the Action set 1 section, click Add an action > All actions to display all the available actions. 
  8. In the Launch section, click Local action.
    Add an action Local action
  9. In the Local Action field, enter or select IdentifyLocation.
  10. In the Target list, select Modal Dialog.
    Action set local action Identify location modal dialogue
  11. Click Add another action set.
  12. In the Action set 2 section, click Add an event.
  13. In the Mouse events section, click Hover.
    Tip: As a best practice, the Hover mouse event should be disabled on a mobile device.
  14. Click Add an action > All actions.
  15. In the Display section, click Show smart info.
  16. Select the Display header check box.
  17. In the Header Source drop down, select Plain text.
  18. In the Plain Text field, enter Current service address.
  19. In the Section field, enter or select ServiceAddress.
  20. Click OK to complete the action set configuration.
  21. In the Button configuration pane, click Apply to save changes to the button.
  22. Close the Button configuration pane.
  23. Drag and drop the Modify service address button above the Address Map.
  24. Click Design to toggle out of design mode.

3 Confirm your work (section not graded)

  1. In the Select service provider view, hover over the Modify service address button.
  2. Verify the Street, City, and State display the values you entered in the Identify location view.
    hover on Modify service address button
  3. Click the Modify service address button to modify the current address.
  4. Change the address in the Identify location modal dialog box.
    Identify location modal dialogue box
  5. Click Submit.
  6. Verify the changes to the address by hovering on Modify service address. The Service provider list updates to display a list of providers near the current address.

Available in the following mission:

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