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