2023 Week 44 | Reusable Components, Designer and Themes

Introduction

This week we will be expanding on a previous post by Preena in week 34.  If you did not already complete the wk 34 lesson, you will want to create the Design Style Guide Templated App in your dev org.  This prebuilt app offers valuable insights to best design principles and UX features.  Of course you can build Apps with your own flare but this is a foundation for good design.

We will explore using containers to organize components, add a dashboard theme that represents your organization, and add reusable components. 

Requirements

  1. Create the Design Style Guide Template App – explore the design principles like how to build easily readable dashboards.
  2. Create a new dashboard and name it “WoW wk 44”
  3. Set a theme for the dashboard and add a default widget style
    1. Background should match your company branding color
    2. Border color gray – I like to do this to see the components as I move them around but if I later want to remove them all, update the themed widget style
    3. Border width = 3
  4. Create a new Component
    1. Add a Container widget
    2. Add an image or logo to the top left of the container
    3. Add a text box and enter “This is my reusable component in a container”
    4. Save and name it “Header”
  5. Edit the WoW wk 44 dashboard
    1. Add the Header component to your dashboard
    2. Add another container, link your company home page and a text intro
    3. Notice you can easily reorganize the containers while keeping the components inside in place

  • You can put any widget inside of a container, except another container.
  • Reusable components have many benefits, one being if you have a metric or widget that is used often across many apps or dashboards, it is much easier to update 1 component and have it reflect across all vs manually modifying each one. 
  • App and dashboard themes help to shortcut the design across widgets as you build.  Additionally they can help bring continuity across your orgs assets. 

Dataset

This week doesn’t use any data – it uses a Template. If this is your first challenge, you can sign up for a dev org here: https://trailhead.salesforce.com/promo/orgs/analytics-de

Share

After you finish your workout, share a screenshot of your solutions or interesting insights on Twitter or LinkedIn using the hashtags #WOW2023 and #CRMA and tag @genetis@PreenzJ and @LaGMills(Or you can use this handy link to do that)

Also make sure to fill out the Submission Tracker to track your progress and help us judge the difficulty of our challenges.

Solution

Coming later…
Scroll to Top