Skip to main content

Challenge

Configuring the Cosmos Home page

5 Tasks

30 mins

Visible to all users
Beginner Pega Platform 8.5 User Experience English

Scenario

The MyTown311 design team wants you to customize the curated Home page. Use App Studio and advanced features of Dev Studio to: 

  1. Create a new design template with a two-column layout with a 70/30 split.
  2. Move the welcome widget and worklist to the left column and move Pulse to the right column.
  3. Configure the out-of-the-box (OOTB) welcome widget with a custom cityscape background image.
  4. Configure the worklist to allow for viewing team assignments.
  5. Configure the worklist to render in tabular format.
New home page with different layout

For comparison, the following image shows the default Cosmos home page that you will replace.

The default Cosmos home page

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

Role User name Password
Application Developer author@mytown cosmos123!

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 Reverse the order of the widgets

The new design uses the same widgets but renders them in opposite columns. Begin by moving them to the opposite columns.

  1. In to App Studio, click Preview application to navigate to the Home page.
  2. In the header of App Studio, click Design to enter Design mode.
  3. Hover over the main page and click Edit to begin moving the widgets in the HomeMain pane.
    Edit the home page content
  4. In the HomeMain pane, under region A, click the drag handle to drag the Wrapper around Pega Pulse section to region B.
  5. Under region B, drag the WelcomeBanner, HomeWorklist, and Items I follow sections to region A.
    Use drag and drop to move sections to the opposite column
  6. In the header of App Studio, click Design to exit Design mode.
  7. Verify the Home page now looks like the following image.
    Home page with widgets in opposite columns

2 Create a new design template for 70/30 layout

  1. In the header of App Studio, click Design to enter Design mode.
  2. Hover over any editable region and click the Edit icon to reveal the contextual pane on the right.
  3. In the drop-down menu, select HomeMain.
  4. Click More options > Open in Dev Studio to open the HomeMain section rule in Dev Studio.
    HomeMain-section-rule
  5. In the HomeMain section rule, click Home UI template to open the HomeUITemplate section rule from the Theme-Cosmos:02-01-01 ruleset.
    homeUI-template
  6. In the section rule, click Save As to create a copy of the design template section rule into the application ruleset.
    homeui-template-save-as
  7. In the Label field, enter MyTown Home UI template.
  8. Click Create and open.
    mytown-ui-template
  9. In the MyTownHomeUITemplate section rule, select the Dynamic Layout (Inline) section.
  10. Click View properties to open the Dynamic layout properties dialog box.
    dynamic-layout-inline-view-properties
  11. In the Dynamic layout properties dialog box, on the Presentation tab, in the Content CSS class field, replace flex-col-40-60 with flex-col-70-30,and replace home-ui-template with mytown-home-ui-template.
    Changing the content css class field to flex-col-70-30
  12. Save your changes.
  13. In the header of Dev Studio, click Dev Studio > App Studio to return to App Studio.
    Use menu to return to App Studio
  14. In App Studio, navigate to the Home page.
  15. In the header of App Studio, click Design to enable Design mode.
  16. Hover over any editable region and click the Edit icon to reveal the contextual pane on the right.
    Hover over any editable region and click the pencil icon
  17. In the drop-down select HomeMain to edit the section.
    select-home-main
  18. In the HomeMain pane, click Change to change to the new MyTown Home UI template.
    Click the change button to switch templates
  19. In the Select a template dialog box, select MyTown Home UI template.
    Selecting the the new template in the dialog
  20. Close the right pane and exit Design mode.
  21. Verify the home page reflects your changes as shown in the following image.
    New home page with different layout

3 Customize the Welcome widget with custom background image

The background image is defined in a Binary file rule named WelcomeWidgetBackground. Cosmos uses this rule as the background for the widget.

  1. In Dev Studio, use the Search field to locate and open the MyTownWelcomeWidgetBackground svg binary file rule.
    Binary file rule for MyTown welcome widget
  2. In the upper right, click the drop-down next to the Save button.
  3. Select Save As to rename the record configuration.
    Save as button
  4. In the Label field, enter WelcomeWidgetBackground to update the Identifier.
  5. In the upper right, click Create and open.
    Save the binary file with a different label and identifier
  6. In the header of Dev Studio, click Dev Studio > App Studio to return to App Studio.
  7. In the navigation pane of the Home page, click the Home icon to refresh the home page.
  8. Verify that the welcome widget now displays a cityscape as the background image.
    Welcome widget with cityscape background image

4 Render worklist in tabular format and enable viewing team assignments

  1. In to App Studio navigate to the Home page.
  2. Enter Design mode.
  3. Hover over any editable section and click Edit section to open the contextual pane on the right.   
  4. In the contextual pane on the right, expand HomeMain to begin editing.
    Editing the HomeMain section
  5. To the right of HomeWorklist, click Edit.
    Click the pencil icon to edit home work list
  6. In the HomeWorklist section, click Settings.
    Click the settings button while editing HomeWorklist
  7. Select the Show team assignments check box.
  8. Select the Display as table check box.
  9. Verify that Preserve Parameter state on section refresh check box is selected.
    Enabling options on the HomeWorklist section
  10. Click Apply.
  11. Exit Design mode.
  12. Verify that the final Home page looks like the following image.
    Final home page with customizations

5 Customize the welcome widget text

  1. In App Studio navigate to the Home page.
  2. Enter Design mode.
  3. Hover over the Welcome widget, and then click Edit to open the contextual pane on the right.
  4. In the contextual pane on the right, in the Welcome text region, hover over the first Text control, and then click Edit to edit the text.
    Click the pencil icon to edit the text control
  5. In the Value constant field, enter We're glad you're here. Use this app to create service requests.
    Replace the text with any text you choose
  6. Click Apply to see your changes. 
  7. Click the Close icon to dismiss the Text edit pane.
  8. In the Welcome text region, click the More icon, and then select Delete to remove the second Text input.
    Delete the second text input
  9. In the Action area region, hover over the Discover Cosmos, and then select Edit.
    Click the pencil icon to edit the button
  10. In the Text field, enter or select Visit town website
  11. Click Apply to view the changes.
    Updating the button text
  12. Verify that your changes are displayed in the welcome widget.
    The final customized welcome widget


Available in the following mission:

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