Animating panels (Create your own dropdown effect)

When designing Analytic Applications for customers we’re always conscious of the need to minimize  on screen clutter to allow users to focus on the data.
At the same time we need to provide users with an intuitive UI & UX that allows them to navigate the application/dashboard with ease.

Invariably this leads us to build in dynamic visibility of components (usually panels in an SAP Analytic Application).
However using the out of the box code setVisible(true/false);  – visuals instantly appear/disappear which isn’t always the most pleasing to the eye.

This got me thinking about how to animate the changing visibility of components – particularly simulating a drop-down effect for menus etc.

The image below shows the type of effect we want to create.

Steps to create the effect

To simplify the example I’ve intentionally avoided using global variables / functions and have separated the Show/Hide code out into 2 buttons.

The Application consists of the following components

2 Buttons:  BHIDE  & BSHOW

2 Panels:     P1 & P2

Why 2 Panels?
Using a single panel that suddenly appears doesn’t create the effect we’re looking for.
Hence the parent panel P1 is transparent and the child panel P2 sits 16px from the top of P1.

Panel Layout Settings:

Panel P1:
set to be invisible at runtime,
set to have a transparent background.
has a height of 600px

On initialization code is used to set Panel  P1 to 16px high

Panel P2:
is contained within Panel P1
has a solid background
a layout setting of 16px from the top of Panel P1

On Initialization Code to set Panel P1 to 16px high

I don’t set the height to 16px in design mode as I want to be able to add content to the panel and ensure it all fits correctly.

P1.getLayout().setHeight(16);

Button code

Button: BSHOW
…………………………………………………………………………………………………………………………….

P1.setVisible(true); 
//Set panel P1 to be visible

var H=P1.getLayout().getHeight().value; 
// Define a variable ‘H’ that stores the current height of Panel P1

if(H<600)
// If the value of H (panel P1 height) is less than 600 then run the loop below

{for (var i=0;i<600;i=i+10)
    // loop that runs until the value of ‘i’ is 600
    // increasing or decreasing +10 will alter the speed of the drop down effect 

{ P1.getLayout().setHeight(i); }
   // Set the height of panel P1 to the value of ‘i’       

P1.getLayout().setHeight(600); }
  /* Once the loop has run manually set the panel height to 600,
     just in case the loop stops early – not an issue with this code as we’re using a max height of               
     600px and incrementing in steps of 10px –  but has been an issue when using an odd number of panel 
     height or increment value.  */

Button: BHIDE

Very similar to the code used to show the panel
…………………………………………………………………………………………………………………………….

var H=P1.getLayout().getHeight().value;

if(H>16){for (var i=H;i>16;i=i-10)
/*  here we set i = to H (the current height of Panel P1)
    then loop through decreasing the value of i by 10 each time until 
    we hit a value of 16px */

{P1.getLayout().setHeight(i); }
          // on each loop set the height of Panel P1 to the value of i

P1.getLayout().setHeight(16); }
          // after the loops have run, manually set the height to 16px

P1.setVisible(false);
          // finally set the panel P1 to be invisible

You can apply this logic to enhance Analytic Apps with all sorts of animated transition effects,
we can add further panels that expand horizontally  – very useful if you want to create dynamic menus.

Conclusion

In this post we have demonstrated how widget visibility can be scripted to create an animated effect, this allows us to create greater interactivity within Analytic Applications – whilst freeing up screen real estate.

The SAP Q&A site provides a wealth of information should you have further questions about SAP Analytic Applications:  https://answers.sap.com/tags/3f33380c-8914-4b7a-af00-0e9a70705a32

If there’s any interest in another blog post, I can share how to fade panels in & out.
Please feel free to add comments below.