Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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 RowsScript 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!


Source: http://visualbi.com/blogs/uncategorized/sap-design-studio-tips-tricks-4-tweaking-navigation-mode-fil...

5 Comments
Labels in this area