Skip to content

Latest commit

 

History

History
638 lines (328 loc) · 26.1 KB

README.md

File metadata and controls

638 lines (328 loc) · 26.1 KB
Raw

Section 4 - Theme & Style

⚠️This section builds on top of another section. If you did not complete the previous section, please select “Section 3 – Geo Maps, Thresholds and Variances” from the “Public/TechEd” folder and click Copy To your directory. You will then be able to edit this story to complete the following exercise.

ℹ️Objective: Style and theme a dashboard for easier readability and a better look and feel.

Estimated Time: 25 mins

Exercise Description: You have created an analytics dashboard with visualizations that show variances and thresholds, you added interaction for our viewers, but before you share the dashboard with your colleagues at BestRun, you need to make sure your dashboard is not only insightful but also looks visually appealing.

Key Features:

  • Learn about the styling panel and how to format your visualizations
  • Learn how to simplify your visualisations by hiding unnecessary information
  • Learn how to add an image or a logo to your dashboard
  • Use Device Preview to preview your analytical content across various devices and screen sizes (i.e. Laptop, Tablet, Phone)

⚠️Disclaimer When completing exercises, some data values in the screenshots may not match what you see on your screen. This is because the dynamic time filters that were applied at the time the screenshots were taken is different from the current system date.

ℹ️Exercise check! Does your dashboard look like this screenshot?

In this section we will cover theme and styling options in SAP Analytics Cloud to tweak your story into a professional dashboard.

4-1

🚩Story creators can quickly change styling options for an entire story in the story preferences. This enables users to quickly apply corporate themes and sync their styling across different dashboards. We will first apply color and table preferences in this menu.

  1. Click File

  2. Click Edit Story

  3. Click Preferences

4-2

ℹ️Welcome to Story Preferences!

In story preferences, story creators can choose to set standard theme and styling options for their entire story. This enables the business user with ease in quickly styling their entire story. Creators can choose to apply story preference changes to all pages, lanes, and tiles or only to newly created pages, lanes, and tiles.

4-3

  1. Click Charts/Geo

🚩Let us apply a custom color palette to our story that is based on our corporate colors

  1. Expand Standard Color Palettes

  2. Click Create New Palette

4-4

  1. Expand Number of Swatches

  2. Change Number of Swatches to six

4-5

ℹ️SAP Analytics Cloud offers a variety of color entry options to maximize your ability to stylize your story.

  1. Change each swatch's hexcode.

Swatch 1: f4f4f4

Swatch 2: ccccce

Swatch 3: 8c8a8a

Swatch 4: fc5411

Swatch 5: fc7928

Swatch 6: f9c43e

4-6

⚠️Quality Check! Do your swatches look like these colors after changing the hexcodes?

  1. Click Create

4-7

🚩We want to apply this color palette to everything on our story, so we change the option to All.

  1. Click All pages, lanes, and titles

4-8

  1. Scroll untill Default Styling Template is Visible

🚩We can choose different styling templates for our charts and tables based on dashboard needs. In this instance, we want our tables to appear in report-styling.

  1. Expand Default Styling Template

  2. Click Report Styling

4-9

ℹ️In the previous section we manually changed the format of thresholds for an individual chart. In story preferences we can choose to sync apply this format across our entire story.

  1. Expand Default Threshold Style

  2. Click Color Values

  3. Click OK

4-10

  1. Click Apply

4-11

⚠️Quality Check! Does your story look like this after Styling Preference changes? Next let’s change the overall view of our story.

4-12

🚩We want to remove the empty header in our top lane and create a summary lane with KPIs for our story that stands out.

  1. Right Click the Title field in our Top Lane

  2. Click Remove

4-rr

  1. Click and Drag the Numeric Point Chart to the Right

  2. Drop the Numeric Point Chart Here

4-rr2

  1. Click and Drag the Numeric Point Chart to the Right

  2. Drop the Numeric Point Chart Here

4-rr3

  1. Click and Drag the Numeric Point Chart to the Right

  2. Drop the Numeric Point Chart Here

4-rr4

ℹ️We have created some space on the left of our top lane for corporate branding covered later in this section. Let’s edit the charts on our dashboard to declutter the view.

4-17

🚩We can also easily customize the backgrounds of each lane to section our dashboard into logical segments. Let’s accent our top lane to highlight the KPIs.

  1. Click the Top Lane with the Numeric Point Charts

  2. Click Designer to Open the Styling Point Charts

4-18

  1. Click Styling Panel (in case not already selected)

  2. Click the Paint Bucket for Lane Styling Options

4-r1

  1. Choose Black Color

4-r2

🚩We can also change the background of the left lane to separate the input controls from visualizations.

  1. Click Left Lane

4-20

🚩Instead of using a solid color, we can apply a custom gradient to our story.

  1. Expand Lane Background Color

  2. Click Gradient

4-21

  1. Click Gradients to expand

  2. Click Create New Gradient

4-22

🚩In the gradient creation menu, users can apply specific colors on the gradient range or add additional swatches within the gradient.

  1. Click on first swatch

  2. Click hex to ccccce

4-23

  1. Click on second swatch

  2. Click hex to f2f2f2

  3. Click Create

4-24

🚩Now our story has lanes that are clearly differentiated into logical segments. Utilizing background is a great way to enhance your dashboard for clarity. We can notice that the color of our KPIs do not stand out against the dark background. Let’s change the font color so they are accented appropriately.

  1. Click on Gross Margin Numeric Point Chart

4-25

  1. Expand Font Colors

  2. Select the White Swatch

4-26

  1. Click on Sales Revenue numeric point chart

4-27

  1. Expand Font Colors

  2. Select the White Swatch

4-28

  1. Click on Avg Sales Revenue numeric point chart

4-29

  1. Expand Font Colors

  2. Select the White Swatch

4-30

  1. Resize your numeric point charts so they are smaller.

4-rr5

🚩In responsive pages, the story is divided into cells that are used to format the placement and size of all elements on the story. This enables the story view to be easily converted for viewing on a variety of device formats, including mobile. Users can choose to change the size and spacing between cells.

4-32

⚠️Quality Check! Is your top lane more compact

ℹ️We will also now resize the other charts in our story. It is recommended to leave white space in between charts for better visual clarity.

4-33

🚩After some resizing and moving charts, our story looks like this! There are still some details we can polish in our charts.

4-34

🚩Currently our KPIs are showing granular information. For better readability, we should reduce the number of significant digits. Let us format these numbers in our dashboard.

  1. Click on Gross Margin numeric point chart

4-35

  1. Click Designer to Open the Builder Panel (in case if not already open)

  2. Switch to Styling Panel (in case not already open)

4-36

  1. Scroll to the Bottom of the Styling Panel to Number Format

🚩It is recommended to use auto-formatted scale for numbers in your dashboard as SAC will automatically adjust the scale based on the context of your data. You can also use scale formatting to change the way scale is being displayed

  1. Expand Scale

  2. Click Auto-formatted

4-37

⚠️Quality check! Does your gross margin numeric point chart look like this after formatting changes?

4-38

  1. Click the Sales Revnue numeric point chart

4-rr6

  1. Scroll to the Bottom of the Styling Panel to Number Format

  2. Expand Scale

  3. Click Auto-formatted

4-40

  1. Click the Avg Sales Revnue numeric point chart

4-rr7

  1. Scroll to the Bottom of the Styling Panel to Number Format

  2. Expand Scale

  3. Click Auto-formatted

4-42

🚩Now that we have formatted our KPIs, we can hide any redundant information in our charts.

4-43

  1. Hold Shift and Left Click the Three

Numeric Point Charts

4-44

🚩We can choose to hide a variety of different details on our charts so only the important elements are visible. Let’s hide the chart title and subtitle for now.

  1. Click More Actions

  2. Click Show/Hide

  3. Deselect Chart Title

  4. Deselect Subtitle

4-45

⚠️Quality check! Do your numeric point charts look like this screenshot?

4-46

ℹ️Let us now improve the number formatting for our other charts to improve the readability for our story viewers. First, change the formatting for our time series chart.

  1. Click Gross Margin per Order Date for Actual Chart

4-47

  1. Click Designer to Open the Builder Panel (in case if not already open)

  2. Switch to Styling Panel (in case not already open)

4-48

  1. Scroll to the Bottom of the Styling Panel to Number Format

  2. Expand Scale

  3. Click Auto-formatted

4-49

🚩Next, change the formatting on our bar chart for sales manager metrics.

  1. Click Gross Margin per Sales Manager Chart

4-50

  1. Scroll to the Bottom of the Styling Panel to Number Format

  2. Expand Scale

  3. Click Auto-formatted

4-51

🚩You can also change the decimal places in the Styling Panel

  1. Click Expand

4-52

  1. Select 0 decimal places

4-53

🚩We will now look at editing our Geo Map visualization to fit the styling of the rest of our story.

  1. Click the Geo Map

4-54

  1. Switch to Builder Panel

  2. Click OK to move out of Builder Layer 1

4-55

🚩Depending on the geo visualization layer and your data, there are a variety of different basemap types that can be applied to your geo map to best represent your data. We will choose a darker layout.

  1. Expand Basemap Options

  2. Click Transparent Dark Gray

4-56

⚠️Quality check! Our geo map should look like this screenshot after the basemap change.

4-57

🚩Let us theme the choropleth layer data to be colored with a more accurate gradient.

  1. Click Edit Layer

4-58

🚩Let’s create a custom gradient for the choropleth colors that matches the corporate colors we chose for our story.

  1. Click Expand on Avg Delivery Time

  2. Click Expand Palette

  3. Click Add New Gradient

4-59

  1. Click the first swatch

  2. Change the hex to ccccce

4-60

  1. Click the second swatch

  2. Change the hex to fc7928

  3. Click Create

4-61

⚠️Quality Check! Does your Geo Map look like this screenshot?

4-62

🚩Next, we will look at formatting text and titles on our story. Let us first rename our input controls by double-clicking on their name.

  1. Rename New Measure Input Control to Measure by double clicking on the heading

  2. Rename New Dimension Input Control to Dimension by double clicking on the heading

4-63

🚩We can add a dynamic text title for our lane of charts so other analysts viewing our story can quickly understand the context of our visualizations. Let us add a title for the chart section that dynamically represents the data presented.

  1. Rename Click to Enter Title... to Overview for

4-64

🚩We can now create a dynamic text field that updates with input control selection.

  1. Right Click Insider the Header to Open the Context Menu

  2. Click Dymanic Text

4-65

ℹ️Welcome to Dynamic Text!

Dynamic text can be created in your story and are automatically updated based on the selected filters or input controls specified in this menu. This means that your story dashboard will automatically update with headers and titles suited to the context of your data.

🚩Let us create a dynamic text based on the region filter we have applied on the page.

4-66

  1. Click Dimension

  2. Expand ANA260_ORDER_FINANCE

  3. Click Region

  4. Click Create

4-67

🚩You have just created your first Dynamic Text. This text field will automatically update with the Page Filters applied on Region.

4-68

  1. Add Regions at the End of the Header

4-69

ℹ️Let’s add a corporate logo to finalize the look of our dashboard!

  1. Click the Top Lane with the Numeric Point Chart

4-70

ℹ️In order to upload the corporate logo to SAP Analytics Cloud, we need to first download it from the GitHub page for this workshop under teched2021-ANA260

  1. Click Excercises

4-71

  1. Click Resources

4-step109

  1. Click logo.png

4-step110

  1. Click Download to download the file

4-step111

  1. Click Insert

  2. Click Image

4-74

🚩We want to upload a company logo from local files to our story. For best performance, it is recommended to use vector images.

  1. Click Upload in the Builder Panel

4-75

  1. Select logo.png from your downloaded files

4-76

  1. Click logo.png

4-77

  1. Resize the Image as Tall as the Numeric Point Charts

4-78

Our page looks great with all the styling changes we have made. We should now rename the page in our story accordingly

4-79

  1. Click Expand on Page 1

  2. Click Rename

4-80

  1. Rename the story page Overview

  2. Click Rename

4-81

🚩Now that we have stylized our story, users can choose to preview their responsive page in a variety of device formats. We know that our executives will be consuming this dashboard on multiple devices. Thus, we want to make sure the dashboard looks great when displayed on mobile.

4-82

  1. Click Format

  2. Click Device Preview

4-83

ℹ️Welcome to Device Preview!

From the preview screen, you can change the device or size to see how your page looks. In some cases, tiles resize and flow to fit smaller resolution screens when space becomes limited.

4-84

  1. Click Expand Device

  2. Click iOS

4-85

🚩We can that the numeric point charts on iOS are larger than necessary. Let’s fix the size in the Designer panel.

  1. Click the numeric point chart

4-86

  1. Click Designer

🚩We can change the font scaling for individual charts. All changes will only be reflected in the specified device format and do not change the original story.

  1. Change the Font Scale from 100% to 86%

4-87

⚠️Quality check! Has your numeric point chart become downscaled to better fit the mobile view?

4-88

  1. Click the second numeric point chart

4-89

  1. Change the Font Scale from 100% to 86%

4-90

🚩We have now customized the scaling of our story for a specific platform (Small iOS Phones). Does your story look like this screenshot in Device Preview?

4-91

  1. Click Device Preview to leave this view

4-92

🚩Story creators can also easily swap to view mode on the top right. This enables the user to see what viewer behavior is like on the story page with input controls and Explorer view.

  1. Click View Mode

4-93

⚠️Quality Check! Does your dashboard look like this screenshot after theme and styling?

⚠️Please save your story by pressing Ctrl + S on your keyboard!

4-94

ℹ️You have now completed Theme and Style section! In this section, we have learned how to apply overall style changes in story preferences, hide and show chart features, change lane and font colors, auto format numbers, apply visual changes to geo maps, create dynamic text in our story, add external images, and edit the scaling of our story on different device formats.

4-95



Summary

You have completed the entire Theme and Style section!

You are now able to:

  • Use the styling panel
  • Simplify your visualisations by hiding unnecessary information
  • Add an image or a logo to your dashboard
  • Use Device Preview to preview your analytical content across various devices and screen sizes (i.e. Laptop, Tablet, Phone)