With the release of SAP BusinessObjects Design Studio 1.5, there have been many new and interesting features and components. One feature that I found particularly interesting was the Chart Type Picker. There are 5 menu buttons to change the chart type at runtime and even more can be added. However, when designing my dashboard, I found there is a challenge when restricting the number of menu options to less than 5 or when restricting the display of the particular chart type buttons. While there is no such option inside SAP BusinessObjects Design Studio, I have found a way for it to be achieved through a workaround using CSS.
N-th child CSS selector
To do this, I have used the concept of n-th child CSS selector, which is defined as ,
“The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula” – w3schools
To know more nth-child selector, visit: http://nthmaster.com/
Using a workaround to restrict menu options
In the following steps, I will show you how to restrict the number of menu options in a Chart Type Picker in SAP BusinessObjects Design Studio 1.5.
To display only the even menu options:
.viz-controls-switchbar-switcher:nth-child(odd) {
display:none;
}
To display only the odd menu options:
.viz-controls-switchbar-switcher:nth-child(even){
display:none;
}
To display particular menu option using index:
.viz-controls-switchbar-switcher{
display:none;
}
.viz-controls-switchbar-switcher:nth-child(1) {
display:block ;
}
To display particular menu options selection (0 to 2):
.viz-controls-switchbar-switcher{
display:none;
}
.viz-controls-switchbar-switcher:nth-child(-n+2) {
display:block ;
}
Now, copy and paste the required CSS script as a separate stylesheet and save it as mentioned above.
Nth CSS selector comes in handy when you want to do some specific selection of elements to apply CSS. Using this, we were able to customize the chart type picker with ease. Thank you CSS!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |