How to Customize SAC UI Themes: A Basic Guide

[Hyun_Lee]

Make Your SAP Analytics Cloud Truly Yours! This easy-to-follow guide will walk you through UI-theming basics, with a focus on the canvas page layout. By following these steps, you'll be able to create a unique look and feel for your SAC stories.

You can download the starting story file and sample data from our GitHub page, but it's not required. Use your own data if you prefer – this lesson focuses on only the designer features. Link to GitHub 1 and GitHub 2.

If you want to import the starting story file and sample data, visit SAP help page.

Here are some of the things you'll learn in this post:

• Create Canvas Layout
• Create Theme
• Set your global settings in your theme Custom CSS
• Packaging up the theme and CSS codes
• Adjust layout with grid

Create a Canvas Layout

1. Select the Canvas option for your new story layout.
   
   
   
2. Select Optimized Design Experience
   
   
   
3. Give your file a name and save it to your desired file location.
   
   
   
4. Activate your left view panel by clicking on the toggle icon. You will be able to quickly insert widgets and view your outline tree layout structure.
   
5. Activate your right view panel. Then make sure the Canvas size is set to, Snap to Grid, Snap to Object, Dynamic, and Center Aligned.
   
   
   Tip: These settings are not saved by default, so you'll need to configure them for each new page creation. To save time, simply duplicate existing pages instead of starting fresh they'll retain these settings for the new page.

6. Drag a Panel widget from the Container Widget assets. This Panel widget will act as a card container that will hold all your content.

   
   Tip: Before adding an element to the panel, resize your panel to be larger than the element you'll add. This ensures you can easily adjust all corners of the element for a perfect fit.

7. Start designing your dashboard by dragging panels onto the canvas. Place your content within these panels to create a header, chart, and table. Here's the layout with no style defined. The pink lines represent the panels being used as containers to hold the elements.
   
   

   
   Tip: Panels can be nested like the filter elements you see above.

 

Create Theme

1. Time to create a custom theme! In the topbar menu, go to Format and select "Create theme…”.
   
   
   
2. Under the Theme Preference popup, we will set our global theme style.
   Enable Theme CSS: This will allow custom styling later.
   Name your Global Default Class: Choose a descriptive name.
   Set Background Color: I used hex value of #E3EBEF.
   Layout: Since you're using Canvas layout, you can ignore Responsive Pages.
   Optional: Customize Popups, Thresholds, Number Format, and Currency if needed.
   
   
   
3. Here's how to name and save your new theme:
   Click "Save As".
   Give it a unique name and choose a folder for easy access to apply to other Stories then click OK.
   

4. In the Format menu, click the Theme icon. Your newly created theme should be visible and selected in the dropdown. Going forth, don’t forget to save your story file.

   
   
   
5. Let's see how your layout looks on front-end:
   • Find the "View" dropdown menu.
   • Choose "Current Tab" for the frontend view. 
   

6. Click "Edit" to resume editing.

   
   
   

Set your global settings in your theme

1. Select your theme preference from the theme icon (located in the Format menu or top bar) to style the global settings for the Widgets.
   
   
   
2. Set the font to your liking for all the text elements. In my example, I am using 72-Web font.
   

3. Let's add some style to our Panels!
   • Background Color: Set the default background to white.
   • Remove the Border: Under "All Borders," change the "Border Color" to "None."
   • Rounded Corners: Adjust the "Border Radius" to 14px for a rounder look.
   • Disable Scrollbars: Turn horizontal and vertical scrollbars "Off" in the "Default Panel Style" settings.
   • Preview Your Changes: Click "Save" and check out your updated panel on the frontend! 

   
   
   
4. The front-end should resemble this example.
   

Custom CSS

1. Now let's add some custom CSS to make it pop! Activate by clicking on the CSS icon.
   

2. In the Dropdown, select "Panel" to add a custom style to the element that we placed in the layout.

   

3. Customizing Your Panel Container widget with CSS:
   • Important: Custom CSS you add here takes precedence, overriding other styles!
   • The "Widget CSS Class" description lists the styling properties you can apply (for reference only, not editing).
   • Style your panel: We will target the SAC defined class "sap-custom-panel-widget" in the CSS.
   • Observe all the properties in the description you are allowed to style like background-color, border, border-top, etc.
   

4. Add drop shadows to your panel cards:
   • Create a Custom Class: Give your panel element a descriptive name, like ".card". Name can be anything.
   • Add the CSS: Use the following code to create the drop shadow effect.
   • The Code: 
   .card .sap-custom-panel-widget {
        box-shadow: 0px 2px 4px 0px rgba(34,54,73,0.20), 0px 0px 2px 0px rgba(34,54,73,0.20);
   }
   Important: Pink highlighted class name above can be anything but for the blue highlighted part cannot be changed.

5. To apply the class name to Your Panel widgets: Activate the right-side panel. Find the CSS Class Name field and type "card" (without the period) in the field. Now, see the magic happen! The drop shadow effect should appear around your panels instantly. Don't forget to save your file CMD/CTRL+S.Reviewing text widget:
   Click the CSS button, then open the "Account Input Control" Dropdown and choose the "Text" section to adjust properties.

6. Styling Headings and sub-headings:

   The available text widget classes are "sap-custom-text-widget" and/or "sap-custom-text". We'll work with the " sap-custom-text" class in this example.

   
   The code:
   .heading .sap-custom-text {
       font-size: 20px;
       font-weight: 800;
   }
   .sub-heading .sap-custom-text {
       font-size: 16px;
       font-weight: 800;
   }
   
   
7. Apply the custom classes to the layout Main headings: 
   Type "heading" (without the period) then press enter. And for the subheadings, type "sub-heading" (without the period) then press enter. Your custom styles should now be applied!
   

8. Things are looking pretty good! Let's apply style to the headings for the charts and tables now. By selecting the element you want to customize, the styling panel will help you identify the corresponding CSS attribute.
   

   
   
9. With this knowledge, you can target accordingly in the CSS edit panel to style. This technique works for identifying class attributes of other layout elements too, like tables, input controls, and more.
   
   
   
10. Styling your Chart: Scroll through the available Chart CSS attributes (highlighted in green) to discover styling possibilities.
    Create a class for the chart: I named my class ".chart". We'll work with " sap-custom-chart-title" (main title), ".sap-custom-chart-subtitle" (subtitle), and ".sap-custom-chart-category-axis-title" (axis title). See below how I used my custom CSS class to precisely target the three elements I want to style.
    Code:
    .chart .sap-custom-chart-title {
        font-size: 16px; font-weight: 800;
    }
    .chart .sap-custom-chart-subtitle {
        font-size: 14px;
        font-weight: 400;
    }
    .chart .sap-custom-chart-category-axis-title {
        font-size: 14px; font-weight: 400;
    }
    

11. Apply the “.chart” class to the elements in the layout. And click "View" to see your design on the frontend. We're getting close to finish!

    
    
    
12. Styling the input controls in the filter bar and the table’s titles
    
    
    
13. Review Input Control and Table Styling:
    Open the CSS panel. Use the dropdown menu to select "Input Control" to see available styling options. 
    
    
    
14. Select "Table" to explore those styling options. 
    
    
    
15. Here's how I styled my input labels and table titles.
    Input Controls: I used the ".sap-custom-input-control-main-label" class for styling with a custom class name of " input-label".
    Table: I targeted the ".sap-custom-table-title" class with a custom class name of "table-title".
    See my code below:
    .input-label .sap-custom-input-control-main-label {
        font-size: 14px;
        font-weight: 800;
    }
    .table-title .sap-custom-table-title {
        font-size: 16px;
        font-weight: 800;
    }
    
    We are finished with the custom CSS!

Packaging up the theme and CSS codes

1. Let's embed that CSS code into your theme. Access your theme settings: Click the edit button.
   
   
2. Package your theme and CSS:
   Click the "Reload Story CSS" link. This will embed your custom CSS into the theme.
   Important: You can't edit CSS directly within the theme settings however, to make any CSS changes, always use the dedicated CSS editor for future edits, and then click "Reload Story" in your theme settings to ensure your updates are packaged for distribution.
   Finalize: Click "Save" to apply your updates.
   
   
   

Adjust layout with grid

1. Time for the Finishing Touch!
   Activate the Grid: Open the design panel and select "Show Grid". This will help you align elements perfectly.
   
2. Fine-tune Your Layout: Use the grid to make any final adjustments for pixel-perfect placement and check the front-end to see the result.
   

 

Conclusion

I hope you found these theming basics useful! If you have any questions along the way, don't hesitate to ask any questions relevant to this lesson below. I'm here to help. Wishing you all the best in your SAC theming journey!

Helpful Links:
SAC help page to import package: Downloading and Uploading Files with the Content Network 
Help Portal Doc: SAP Analytics Cloud
Useful CSS basics link: https://www.w3schools.com/css/default.asp