🇨🇦 SAP Analytics Cloud – How to enhance Numeric Point widgets through CSS

Hey everyone!

Have you ever tried to apply conditional formatting to a Numeric Point widget, only to find out that it affects the entire widget instead of just the primary value? Trust me, I’ve been there countless times myself.

I embarked on a quest to find a solution, delving into the depths of SAP’s CSS documentation. And guess what? I discovered some valuable info that can save you from the same problem.

This following CSS class allows you to control the exact value we’re trying to change:

.sap-custom-number-chart-secondary-values:
* Description: CSS class for number chart secondary values;
* Properties: font-family, font-size, color, font-style, font-weight, text-decoration;
* Descendants: N/A;
* Pseudos: N/A;

Now, let’s explore more how the CSS class mentioned above can be applied to the Numeric Point widget. To provide a clearer picture, let’s identify the primary and secondary values on the widget itself:

Primary and secondary values in a numeric widget

The primary goal of this blog post is to demonstrate how you can overwrite conditional formatting colors in the secondary value, ensuring that only the primary value responds to the conditional formatting rules.

Example

Here’s what we’re aiming to achieve:

End goal of the tutorial

Step 1: To get started, create a new story in your canvas. Begin by adding a Chart element to your canvas. Once added, we can modify its format to suit our needs. In this case, we’ll change the chart format to “Numeric Point.”

Step 2: Now that we have our chart in place, it’s time to populate it with data. Add one account to the primary value and another to the secondary value. Additionally, include a measure (and a version if you’re not working with measures restricted on the version).

Step 3: We can now create color thresholds (Conditional formatting) against the account on the secondary value. This will allow us to visually highlight important points, which is the comparison of actuals vs budget.

Step 4: If we want to take it a step further and personalize its appearance, we can edit the CSS style. To do so, follow the steps below:

  • Click on the paintbrush icon located under Global Settings. This will open up the CSS page.

  • Copy the following code snippet:
.chart .sap-custom-number-chart-secondary-values {
    color: #58595b;
}
  • Paste the code into the CSS Class Name field. Remember to set chart as the widget to receive the formatting.

Step 5: To ensure that our CSS customization is applied to the chart, we need to add the chart class to the CSS Class Name field in the Styling panel. Here’s an example of how to do it:

  1. With the widget selected.
  2. Locate the CSS Class Name field in the Styling panel.
  3. Enter “chart” as the CSS class name and hit enter.

Step 6: You can now save your story and switch to view mode to see how the new styling has been applied.

The other formatting you see on this widget is simply cosmetic changes such as borders and font size to make it look more presentable.

I hope you found this example helpful. If you have any questions or suggestions, please leave a comment below.

Thanks for reading, and see you next time!

Jorge Rocha

Ver este artigo em Português Brasileiro

One thought to “🇨🇦 SAP Analytics Cloud – How to enhance Numeric Point widgets through CSS”

Comments are closed.