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: 
JBARLOW
Contributor
Following on from my previous blog post   Animating panels to create a drop-down effect

In this post we will look at how the UX of  Analytic Applications can be enhanced via fading
widgets in & out -  instead of instantly appearing on screen.

Below is an example of the fade effect in action - using switches and a slider to show what's possible.



Create a fade effect


In this example we will create a fade of a single panel.



Components used



Custom CSS styles


The styles set panel opacity ranging from 0 - 100 %
.panel_0 .sap-custom-panel-widget{opacity:0;}
.panel_10 .sap-custom-panel-widget{opacity:0.1;}
.panel_20 .sap-custom-panel-widget{opacity:0.2;}
.panel_30 .sap-custom-panel-widget{opacity:0.3;}
.panel_40 .sap-custom-panel-widget{opacity:0.4;}
.panel_50 .sap-custom-panel-widget{opacity:0.5;}
.panel_60 .sap-custom-panel-widget{opacity:0.6;}
.panel_70 .sap-custom-panel-widget{opacity:0.7;}
.panel_80 .sap-custom-panel-widget{opacity:0.8;}
.panel_90 .sap-custom-panel-widget{opacity:0.9;}
.panel_100 .sap-custom-panel-widget{opacity:1;}

If you want a smoother transition effect you could add more styles in smaller increments.

e.g   .panel_01 . sap-custom-panel-widget {opacity:0.05}
.panel_02 . sap-custom-panel-widget {opacity:0.06}

You'd also need to update the CSS array variable and subsequent logic that checks the value of the FLAG variable.

Steps


1.  Add a panel and 2 buttons to the canvas
     The panel can be any size and any background colour fill - name it 'Panel'

2.  Create a script variable 'CSS'
      Declare it as a string and set it as an Array


3. Populate the CSS array variable with the custom CSS styles
    In the onInitialization event use the following code
CSS = ['panel_0','panel_10','panel_20','panel_30','panel_40','panel_50',
'panel_60','panel_70','panel_80','panel_90','panel_100'];​

4.  Create a 2nd Script variable 'FLAG'
Set the type to Integer and set the default value to 10



5. Add code to the fade in button: 'btn_in'

This code calls the Script function FADE.FADE_IN
FADE.FADE_IN();

6. FADE.FADE_IN

This script function checks the current value of the FLAG variable & if it's less than 11 calls the          Timer 'TIMER_FADE_IN'  with a delayed start of 0.06 seconds
(this delay value can be changed to slow down / speed up the fade effect)
if (FLAG < 11)
{TIMER_FADE_IN.start(0.06);}

7. TIMER_FADE_IN
This code checks the value of FLAG and if it's greater than -1 it applies a CSS style to the Panel.
if(FLAG >-1)
{Panel.setCssClass(CSS[FLAG]);}
FLAG=FLAG+1; //Increment the value of FLAG by 1
FADE.FADE_IN(); //Call the FADE_IN function again

CSS[FLAG]  is used to pick the CSS style from the CSS array variable - the value of FLAG tells         the code which position in the array to choose.

e.g. a FLAG value of 2 would apply the custom CSS style 'panel_20'
CSS = ['panel_0','panel_10','panel_20','panel_30','panel_40','panel_50' .................

At the end of the Timer code, we call the FADE_IN function again - so we're effectively creating
a loop that will run until one of the conditions specified is not met.

 

The logic is reversed to create the Fade out effect


btn_out  code:
FADE.FADE_OUT();

FADE.FADE_OUT code:
if (FLAG > -1)
{TIMER_FADE_OUT.start(0.05);}

TIMER_FADE_OUT code:
Panel.setCssClass(CSS[FLAG]);
FLAG=FLAG-1;
FADE.FADE_OUT();

 

Summary


Using simple scripting & custom CSS styles we have created a fade in/out effect.
The really cool thing is that although we are applying the CSS opacity style to a panel - it also fades any widgets that are contained within the panel.

In the example at the top of this post 2 panels were used (each with a transparent background)
yet the fade effect still worked on the images & text boxes contained within those panels.

Feel free to add comments, questions below & as always further help from the community can be
found here: Analytic Designer Q&A

 
3 Comments
Labels in this area