Skip to Content

DS1.2 - Load Data in sequense - see data dropping in

Tags:
  • sapzen
  • design_studio
  • sap_design_studio
  • design_studio_12
Hi,
@Bharath Ramamurthy introduced in his Blog  New Event Triggers the Application in Design Studio now supports more than the "OnStartup"-Event known in 1.0 and 1.1.
With a combination of "OnStartup" and "OnBackgroundprocessing" you can load your Datasources in a sequence specify. Combined with the
ShowLoadingState command you can turn around the way of loading behavior. Up to 1.1 we had "load data" and then "show the components", now we can have "show components with loading bar" and than "load the data".

Situation:

Lets say you have 4 Datasources and 4 charts showing you important KPIs on one page. Each chart is assigned to 1 Datasource. You want to achieve that you see all 4 charts with a loading bar on top on start of the application and then the datasources should be loaded in sequence, filling the charts one after the other. See video of the final result..
.

Step by step solution

  • Create an application with 4 datasources and 4 charts assigned to one of the datasources. All Datasources are set to Load in script = true in the properties
  • Create a global script variable, lets call it DS_Counter and give it the default value = 1
  • In the OnStartup event of the application add the following lines to overlay the charts with the loading bar
    CHART_1.showLoadingState("loading...");
    CHART_2.showLoadingState("loading...");
    CHART_3.showLoadingState("loading...");
    CHART_4.showLoadingState("loading...");
  • directly after that start the new backgroundprocessing by adding the line
    APPLICATION.doBackgroundProcessing();
  • Add the following lines of code to the doBackgroundProcessing Event of you application

          //the following lines remove the loading bar and loads the data for 1 Datasource per cycle

           if (DS_Counter == 1) {

                CHART_1.hideLoadingState();

               DS_1.loadDataSource();

               }

          else if (DS_Counter == 2) {

                 CHART_2.hideLoadingState();

                 DS_2.loadDataSource();

               }

          else if (DS_Counter == 3){

               CHART_3.hideLoadingState();

               DS_3.loadDataSource();

               }

          else if (DS_Counter == 4){

               CHART_4.hideLoadingState();

               DS_4.loadDataSource();

               }

           // the following line loops again into that code to load the next datasource until counter = 4 (last datasource)   

              if (DS_Counter < 4){

               DS_Counter = DS_Counter + 1;

               APPLICATION.doBackgroundProcessing();

               }

Then start your application and you will see the effect.

Hope you and especially your users will enjoy that way of starting the application.

Dirk

November 22, 2013 at 15:14 PM
12 Likes

5 replies