Modification of Design Studio Loading Indicator

[Karol-K]

Purpose

You want to change the default loading indicator of Design Studio

Technical Background

There are 3 loading indicators caused by Design Studio

• (1) the initial loading indicator before the application will be started. It is a full screen indicator with dark background.

             

• (2) the between-loading indicator. it is a full screen indicator with transparent background.

             

• (3) the crosstab loading indicator for scrolling. It is smaller indicator in crosstab component with dark background.

             

What can be changed easily?

The indicators (2) and (3) can be changed by custom CSS. The indicator (1) canot be changed as the initial html page is static and pre-compiled in JAR file which is delivered in the installer.

Example of (2) and (3)

In the attached application (created in DS 1.3 SP1) you can find CSS which will change your loading indicators. The only tricky point is that the image URL needs to be hard coded in CSS, this means you need either to check the URL to the image via developer toolings or use full qualified URL with http://..

Screens after change

    (2) between-loading indicator

         

    (3) crosstab loading indicator (&between-loading indicator)

       

The corresponding CSS

    (2) between-loading indicator

.customLoadingIndicatorZenClass {

  background-image:url('/aad/zen/mimes/LOADING_INDICATOR/ajax-loader.gif');

  width: 48px !important;

  height: 48px !important;

  top: 50% !important;

  left:50% !important;

  z-index: 100000099; /* optional */

}

/* optional */

.customGlasspaneZenClass {

  background: #ffffff !important;

  opacity: 0.3 !important;

  width: 100% !important;

  height: 100% !important;

  border: 0px solid !important;

  z-index: 100000098;

}

/* optional */

.zenCursorLoadingIndicator-outerDiv {

  width: 100% !important;

  height: 100% !important;

  border: 0px solid !important;

  z-index: 100000098;

}

    (3) crosstab loading indicator

.sapzencrosstab-loadingAnimation {

  background-image:url('/aad/zen/mimes/LOADING_INDICATOR/ajax-loader.gif');

  width: 48px !important;

  height: 48px !important;

  top: 50% !important;

  left:50% !important;

}

How To Use the Example?

The examples above were created in local mode.

You have to create a folder in local repository "LOADING_INDICATOR" and copy there the attached files. The txt extension needs to be removed.