Cascading style sheets(CSS) in Design Studio
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.
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
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.
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.
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.
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
- Select a component that you want to change the styling for such as Text or Panel component.
- Go to properties on right side and Click on CSS Style to open the CSS Style editor
- 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;
Steps to change CSS Class of Multiple components using CSS Style Editor
- 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.
- 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
- Select the “Application name” on the left side in the layout panel
- Go to properties on right side and click on Custom CSS option and select the CSS file from the listed files.
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.
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.
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