Skip to Content

Introduction

A sliding panel transition can be a really good solution for someone looking to save on dashboard real estate. Sliding it in and out of view with butter-smooth transitions on demand presents a very compelling case when it comes to dashboard aesthetics – it’s fast, can be easily animated, and it’s something users are used to seeing on SAP Design Studio dashboards.

What is a slide panel?

The slide-out panel, using CSS3 transitions, promotes efficient use of space on a dashboard. When used as a navigation panel, users can choose to reveal the panel on-demand. Transitions give an aesthetic appeal to the panel, constituting a good look-and-feel along with functionality.

How to create the slide panel using CSS3:

1) Insert a panel in the application and set its layout attributes as required.

panel in SAP Design Studio

2) Insert a Grid Layout inside the panel and set its layout attributes as required. All components to be shown in the navigation panel are to be contained in the Grid Layout (it is preferable to set the width of the Grid Layout to an absolute value to ensure that the transition works seamlessly).

Grid layout in SAP Design Studio

3)  Save the CSS script given below as a separate style sheet (Create a notepad file and save it as <name>.css).


.slideout {
  position: fixed;
  top: 42px;
  left:0;
  width: 35px;
  padding: 12px 0;
  text-align: center;
  background: #fdcb03;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  cursor:pointer;
  height:90% !important;
 }
 .slideout_inner {
  position: fixed;
  top: 42px;
  left: -300px;
  height:93% !important;
  background: #000000;
  padding: 25px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  text-align: left;
  -webkit-border-radius: 0 0 5px 0;
  -moz-border-radius: 0 0 5px 0;
  border-radius: 0 0 5px 0;
 }
 .slideout:hover, .slideout:focus {
  left: 300px;
 }
 .slideout:hover .slideout_inner, .slideout:focus .slideout_inner {
  left: 0;
 }

4) Now insert a Text Box with the layout attributes similar to that of the panel, and width as an absolute value – around 10px. Insert the CSS tags/attributes given below under the CSS Style property of the Text Box:



filter:flipv fliph;
 writing-mode:tb-rl;
 color:#333333;
 font-size:14px;
 text-align:center;
 height:90%;

5) Upload the CSS file using the application’s properties (Properties View), and set the CSS classes as follows:

  • Panel -> ‘slideout’
  • Grid Layout -> ‘slideout_inner’

The application should now look like this:

CSS in SAP Design Studio

What are the advantages of having a Slide-Out Panel using CSS?

1) Responsive on all devices and all browsers (10+ for ie and all latest versions)

2) Much faster transitions

3) Light weight animation

4) Access filters/navigation on demand, without wasting or disturbing the layout of the dashboard.

source: http://visualbi.com/blogs/design-studio/design-studio-tips-and-tricks/css-sliding-panel-transition-sap-design-studio/

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. James Rapp

    Hi Manoj,

    Nice post … just to confirm, you aren’t setting any CSS classes dynamically with an on-click event for these panels? Can you explain a bit more about how this works behind the scenes?

    (0) 
    1. MANOJ KUMAR Post author

      Hi James,

      Thanks , i achieved slide panel by using hover and focus. its work fine mobile devices as well by using focus like on-click property.

      (0) 

Leave a Reply