Skip to Content

Applies to:

SAP BusinessObjects Design Studio 1.1 and SAP BusinessObjects Business Intelligence Platform (4.0 SP5 or higher and 4.1). For more information, visit the SAP BusinessObjects Design Studio homepage.

Summary

This article describes how to use CSS style editor to modify styles of individual components as well as process of defining common style to set of components across different Analysis apps using CSS Class and custom CSS file. The content in this is intended for beginners in design studio space and developers for those who would wish to change the styling of their existing analysis apps created using design studio 1.0.


Author: Mallikarjuna Chary Narayandas


Created on: June 08, 2013

Author Bio

The author has worked on several SAP BusinessObjects projects and has experience on using all the SAPBusinessObjects Business Intelligence platform tools. Author has experience on working with SAPBusinessObjects mobile including designing and accessing BusinessObjects content (Webi Reports, Crystal Reports, Dashboards, Analysis and Information Spaces) through IPAD / IPhone / Android.

Introduction

This article describes how to use CSS style editor to modify styles of individual components as well as process of defining common style to set of components across different Analysis apps using CSS Class and custom CSS file. The content in this is intended for beginners in design studio space and developers for those who would wish to change the styling of their existing analysis apps that were created using design studio 1.0.

CSS Styling Properties


Design Studio offers different properties related to CSS styles based on the level such as application level, component level etc. Following sections give the details of these properties and their usage.

Application:


Custom CSS is the property available in application properties for the design studio apps and this property lets developers choose any custom CSS file to be used for the styling of the analysis application or dashboard. Refer to below sections to read the steps to use this property.

Note: CSS style sheets work properly in design studio only if they are in applicable and appropriate format.

Component:


Custom Class and CSS Style are the properties available at component level within display properties and these properties let developers define the styling of components such as font size,  background etc., for each individual component that has these properties applicable. Custom Class can be assigned to a group of components at a time to perform quick styling by selecting them using Shift>Select. Refer to below sections to read the steps to use these properties.


Modify CSS styling of Analysis Application


Developers can now change the look and feel of analysis application and it’s components by changing the existing CSS Style of the components using CSS style editor or by defining standard CSS style across a set of components or for a set of applications using CSS class. Developers can define CSS classes in a custom CSS file with the required CSS styling and re-use it across numerous analysis apps designed using Designed studio


Steps to change CSS Style of Individual components using CSS Style Editor


    1. Select a component that you want to change the styling for such as Text or Panel component.
    2. Go to properties on right side and Click on CSS Style to open the CSS Style editor
    3. Type the code in below format to change the styling of text of the component.

Ex:  font-size: 18px; weight: bold; font-style: italic; color: blue;

CSS STyle Editor.jpg

Steps to change CSS Class of Multiple components using CSS Style Editor


    1. Use Shift>Select  to choose multiple similar components(Ex: Panels) that you want to update the CSS Class to ensure you get common styling for the set of panels selected.
    2. Go to properties on right side and Choose the CSS Class available.

          Ex: CSS Class “myPanel” from “Analysis_template.css” file.

     Steps to assign CSS file to Custom CSS property of applications


          Developer need to ensure that they have the CSS file in the root folder of the application by navigating to the Application folder using File>Open               Repository Folder option


    1. Select the “Application name” on the left side in the layout panel
    2. Go to properties on right side and click on Custom CSS option and select the CSS file from the listed files.

               

               CSS file Analysis Template.jpg

CSS methods for Scripting


Developers can use the methods getCSSClass and setCSSClass within the scripts to read the CSS Class or to assign CSS Class to different set of components respectively.


Limitations


One of the current limitations is that only CSS attributes (font size, color, weight, style and text decoration) are supported for Text and Panel components. There are many new features planned for future releases of design studio, so I can confidently say SAP would make Design Studio as first choice and best product for all analysis and dashboards requirements on BW and HANA sources.

References

SAP BusinessObjects Design Studio

Space: SAP BusinessObjects Design Studio | SCN

For more information, visit  SAP BusinessObjects Design Studio References

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply