SAP Design Studio Tips & Tricks – Tweaking Navigation Mode in a Filter Panel
The following question on one of the SCN forums triggered this idea & that prompted me to come up with this post:
“I want to be able to allow users to use the Filter Panel in Navigation mode, but allow them to add dimensions ONLY to the rows or columns of a Data Source.”
It appears to be challenging to remove an option from a native component but I was quite taken by surprise when I figured out how simple it actually was in achieving this on SAP Design Studio. A simple CSS script was enough to meet this requirement of restricting users to adding dimensions to either columns/rows.
CSS Script
SAP makes use of a number of native classes to style their components. Achieving the required functionality meant identifying SAP’s base class and over-riding the options set for it. In this case, the base classes for the column and row buttons on the filter panel are:
- .sapzenfilterpanel-RowsNavigationButton
- .sapzenfilterpanel-ColumnsNavigationButton
We will now write a CSS script to hide contents, under the identified base class. Note that in order to ensure that the other Filter Panels in the application remain unaffected, these attributes need to be defined under a different class name. Consider the example below:
| Script to Hide Rows | Script to Hide Columns |
|---|---|
| .HideButtonRows .sapzenfilterpanel-RowsNavigationButton{display: none !important;} | .HideButtonColumns .sapzenfilterpanel-ColumnsNavigationButton{display: none !important;} |
We now have 2 classes – “HideButtonRows” and “HideButtonColumns”, which can hide the “Add to Rows” button, and the “Add to Columns” buttons respectively. The final step is to upload the CSS file into the application and assign the CSS classes that we’ve created, to the Filter Panel(s) which we want to modify. The end result should leave you with Filter Panels that look like this:
The possibilities of using CSS to modify the look-and-feel of components in SAP Design Studio are endless. Try exploring the options available, to achieve a myriad number of results!
Hi Eshwar,
Nice post ... curious if you pulled these CSS classes out of the document:
Design Studio 1.1 Full List of CSS classes (?)
Or if you've discovered another way to get this list?
Thanks,
Jim
Chrome or IE F12 developer tools are how I figure all mine out.
I'm parsing the 1.4 CUV version in Textpad now to see if I can provide an updated list to correspond with the product release next week (fingers crossed on the release). The key is really figuring out which elements they control. For example, there are 16 references to 'div' elements in the crosstab object alone!
I'm a little surprised to hear if the DS 1.4's version of the Cross Tab changed in DOM structure that much! I'd imagine we'd start hearing from 1.4 folks very quickly if a lot of CSS breaks as a result!
I'm mostly happy with the Blue Crystal default look and feel so I don't have a ton of CSS regression risk here.
It's more about additions ... new version of UI5, updated functionality since 1.1, there seem to be a great deal of extra classes floating around. I personally would like a better understanding for what controls what.
How about this level of granularity:
Customize your layout in SAP BusinessObjects Design Studio
But for the dimension filters, popups, message view, etc. After seeing how the classes are leveraged in the SDK samples I feel I need to know a lot more about what's available to leverage.