The latest release of SAP BusinessObjects Design Studio - 1.6 has a number of exciting new features and enhancements that makes it much easier to develop a dashboard application.
Although the tool has a whole new set of features and improvisation to offer, there was one improvisation which I thought was very notable. Every SAP BusinessObjects Design Studio developer would know the difficulty in uploading the updated CSS file and deleting the old ones every time he/she makes a change to the CSS code. There were days when I would delete the wrong CSS files and I’ve felt it would be great to have an option edit CSS directly in the client tool itself. And guess what? We now have a really cool enhancement with custom CSS.
How was it before SAP BusinessObjects Design Studio 1.6 ?
CSS stands for Cascading Style Sheets which describes how every HTML elements are to be displayed in the screen. Every component in SAP BusinessObjects Design Studio has its own CSS.
External Style sheet which is written by the application developer is called Custom CSS.
When it comes to creating an analysis application in SAP BusinessObjects Design Studio, or any dashboard for that matter, it is very important to concentrate on the look and feel of the dashboard application. In order to make the dashboard aesthetically enhanced, an application developer has to spend a good amount of time in writing the CSS for the application.
In this process of developing an application for every trail / change in the UI, the developer has to undergo the following steps:
- Open the CSS file
- Make the changes that are required
- Save the file again
- From SAP BusinessObjects Design Studio client tool, upload the CSS file to the platform (BusinessObjects Platform or HANA Platform).
- Delete the previous versions of the CSS file already uploaded.
This process is not very tedious but is really time consuming. Now with the release of SAP BusinessObjects Design Studio 1.6, we have got a new way to edit the CSS and save it in the application on the fly.
What’s New with Custom CSS?
In order to demonstrate this improvised feature, I have created a simple application using the Blank template available in SAP UI5 templates and added a textbox component to the application.
Screenshot: “new application window in SAP BusinessObjects DesignStudio 1.6”
To provide better UI for the components, we need to create a CSS file for this application. Click on the Custom CSS option in the application properties. This opens an “Open CSS” window.
Till the previous version of SAP BusinessObjects Design Studio, we had to only upload the CSS files from the local system to the desired file repository in the platform. Now in SAP BusinessObjects Design Studio 1.6, we can directly create a new CSS file in the platform by clicking the add Custom CSS icon in the “Open CSS” window.
Screenshot: “Open CSS window in SAP BusinessObjects DesignStudio 1.6 and 1.5”
Screenshot: “Add CSS file in SAP BusinessObjects DesignStudio 1.6 directly to the platform without uploading from local system”
The uploaded CSS file can now be editedin two ways:
1. Clicking the icon in the header pane
SAP BusinessObjects DesignStudio 1.6 provides a shortcut icon in the header pane to edit the CSS file uploaded. To do this, you can click on the “Edit Custom CSS” icon (as shown in the picture below).
Screenshot: “Edit Custom CSS option from shortcut icon in SAP BusinessObjects DesignStudio 1.6”
2. By clicking on edit option in the Custom CSS selection in the Application properties.
A new view/tab opens next to your analysis application where you can edit the CSS code.
Here I have declared a class “.textbox” and have provided various styles for the component.
Screenshot: “Edit Custom CSS window with CSS for textbox component in SAP BusinessObjects DesignStudio 1.6”
The CSS editor view provides various pre-set options of various CSS properties which are listed in the properties pane. These options are grouped into various categories such as Aural, Box model, Colors and Backgrounds, Fonts, Generated Content/List , Paged Media , Tables, Text , User Interface and Visual.
Screenshot: “CSS properties grouped into various categories in SAP BusinessObjects DesignStudio 1.6”
These properties are displayed as two columns - property and value. With this option, you can just enter the values across the respective properties and generate the Custom CSS file as per the requirement. This feature saves lot of time spent for the syntax and typing the CSS scripts.
Once you have finished writing the CSS scripts, save the file by clicking on the save icon or by clicking on the Menu bar Application -> Save.
Now the component has to be assigned to the respective CSS class names. After this step, refresh the application for the CSS to be applied on the analysis application.
Screenshot: “Custom CSS applied to textbox component in SAP BusinessObjects DesignStudio 1.6”
Except for the blank template in SAP BusinessObjects Design Studio, every other template comes with a CSS file by default, in which the CSS scripts are written for the various components in the application.
Screenshot: “Default Custom CSS for basic analysis template in SAP BusinessObjects DesignStudio 1.6”
So how does this enhancement help?
- There is no need to upload the CSS file each time for various iterations.
- The development time for an analysis application or a dashboard will reduce considerably.
- With the wide list of CSS properties, it is easy for application developers to key in the values across the respective properties.
This small yet extremely useful feature (my saviour feature) would help any developer in saving time and increasing his/her productivity. It feels amazing that SAP also concentrates on minute enhancement s of this kind which really aids in ease of use of the tool! Look out for more update on new features of SAP BusinessObjects DesignStudio 1.6 here
- SAP Managed Tags:
