Using the Loading Optimization Setting on a Story Level

Technically, the instance of a data-bound widget is created first. As soon as the instance is available, then the widget is accessible by scripting and pending for rendering.

If, and when, a data-bound widget is rendered depends on the story's Loading Optimization Setting:

• Viewport Loading
• Background Loading
• None

For Viewport Loading, the rendering phase is split up into three different sub-phases:

1. Initial rendering phase
2. Background rendering phase
3. Viewport rendering phase

For Background Loading, the rendering phase is split up into two different sub-phases:

• Initial rendering phase
• One or two background rendering phases (depending on scripts processing)

For None, there is only an initial rendering phase.

In this lesson, the same story is used in all scenarios to demonstrate the different Loading Optimization Settings available to you. Let's take a closer look at the story, as it's important to know how the story is built, in order to understand the data loading flow as we explore the data loading scenarios.

In general, the following statements are true:

• All content in the visible area of the story is fully rendered as soon as the initial rendering phase is complete.
• The user can start to interact with the story to trigger scripting (for example, press a button that runs a script) as soon as the initial rendering AND the script execution of the page.onInitialization and page.onActive event scripts are processed.
• Any widget that is referenced in a script is rendered, regardless of if it is part of the visible area or not.

Viewport Loading is the default setting for all stories.

Using this setting means that from the data-bound widgets in the story, only those within the visible area of the story (viewport) are rendered. As the user navigates in the page, then the data-bound widgets that become part of the new viewport are rendered. This means that if the user does not look at the whole story, then the unneeded data-bound widgets may never be rendered.

In this lesson, we will explore the flow for two scenarios:

1. onInitialization and onActive events finish before the initial rendering phase.
2. onInitialization and onActive events finish after the initial rendering phase.

In the examples below, you can see the key steps in the rendering process, numbered 1-4:

1. Loading screen appears.
2. onInitialization script complete.
3. Initial viewport rendering complete.
4. User can interact with story content to trigger scripting.

Scenario 1: Script Execution Finishes Before the Initial Rendering Phase:

Scenario 2: Script Execution Finishes After the Initial Rendering Phase:

In the initial rendering (R1) phase, the following data-bound widgets are rendered:

• Viewable data-bound widgets.
• Data-bound widgets that do not support background loading or viewport loading.
• Data-bound widgets that are flagged with Always initialize on startup.
• Data-bound widgets that are referenced in the current page's onInitialization or onActive events.

In parallel to the initial rendering phase, the script of the script (S1)- onInitialization event of the current page is processed. When it is finished, the script of the script (S2) - onActive event of the current page is processed.

After the scripts have been processed, in the background rendering (R2) phase, data-bound widgets that are referenced by any script or script function are rendered.

As you can see in scenarios 1 and 2, this rendering process can start either during or after the initial rendering phase, depending on the duration of the script execution.

In the viewport rendering (R3) phase, when a user navigates to a new area of a story that was not previously viewed, then any corresponding data-bound widgets that were not previously rendered will be rendered at this point.

In this video, we will explore the Loading Optimization Setting: Viewport Loading, how it affects the data loading of your story, and scenarios for using the setting in your story.

The following table summarizes the data-bound widget rendering when Viewport Loading is selected:

Using the Background Loading setting means that widgets within the viewport are rendered first and all other data-bound widgets on the current page are rendered afterward, regardless of if the user ever looks at them or not. This might result in unnecessary rendering and data loading requests.

In this lesson, we will explore the flow for two scenarios:

1. Script execution finishes before initial rendering phase.
2. Script execution finishes after initial rendering phase.

In the examples below, you can see the key steps in the rendering process, numbered 1-4:

1. Loading screen appears.
2. onInitialization script complete.
3. Initial viewport rendering complete.
4. User can interact with story content to trigger scripting.

Scenario 1: Script Execution Finishes Before the Initial Rendering Phase:

Scenario 2: Script Execution Finishes After the Initial Rendering Phase:

In the initial rendering (R1) phase, the following widgets are rendered:

• Viewable data-bound widgets.
• Data-bound widgets that do not support background loading.
• Data-bound widgets that are flagged with Always initialize on startup.
• Data-bound widgets that are referenced in the current page's onInitialization or onActive event.
  Note

  • Widgets retrieved by Application.getWidgets() script API are not recognized as referenced by script.
  • Using Application.getWidgets() API to search widget by table type will force rendering of all tables.

In parallel to the initial rendering phase, the script of the script (S1) - onInitialization event of the current page is processed. When it is finished, the script of the script (S2) - onActive event of the current page is processed.

In the first scenario, where the script execution finishes before the initial rendering phase, there are two background rendering phases. During background rendering (R2) any data-bound widget referenced in the onInitialization and onActive event scripts are rendered. In the background rendering (R3) phase, all other data-bound widgets on the current page that are not yet rendered start their rendering.

In the second scenario, where the script execution finishes after the initial rendering phase, in the background rendering (R2) phase, all other data-bound widgets on the current page that are not yet rendered start their rendering.

In this video, we will explore the Loading Optimization Setting: Background Loading, how it affects the data loading of your story, and scenarios for using the setting in your story.

The following table summarizes the data-bound widget rendering when Background Loading is selected:

Using this setting means that all data-bound widgets in the story are rendered at startup.

This setup can be used to ensure that all widgets are rendered so that the user never has to wait for any additional rendering while navigating within the story. For the none optimized loading it is important to understand that the execution flow differs from the viewer that was used to render the story.

The lite viewer was introduced in early 2024, and was created to load the lightest version of a story. It has been made possible by decoupling the designer and viewer persona. If a story is compatible with lite viewer, then SAP Analytics Cloud automatically opens it using lite viewer with no action required from the story designer or viewer.

The specific conditions that need to be met to access the lite viewer, supported features, and the restrictions can be found by going to Lite Viewer Usage Restrictions on the SAP Help Portal.

Loading Optimization Setting: None - Lite Viewer: In the example below, you can see the key steps in the rendering process, numbered 1-5.

1. The loading screen appears.
2. The onInitialization event is triggered for the current page.
3. The onActive event is triggered for the current page.

   The onInitialization is script complete.

4. Initial viewport rendering is complete.
5. User can interact with story content to trigger scripting.

Loading Optimization Setting: None - Full Viewer: In the example below, you can see the key steps in the rendering process, numbered 1-4.

1. Loading screen appears.
2. The initial viewport rendering is complete.

   The onInitialization event is triggered for the current page.

3. The onInitialization is script complete.

   The onActive event is triggered for the current page.

4. User can interact with story content to trigger scripting.

In the initial rendering (R1) phase, all data-bound widgets are rendered for both Lite Viewer and Full Viewer.

Lite Viewer:

During the initial rendering phase, script (S1) in the onInitialization event of the current page is processed. When it is finished, script (S2) in the onActive event of the current page is processed.

Full Viewer:

After the initial rendering phase, script (S1) in the onInitialization event of the current page is processed. When it is finished, script (S2) in the onActive event of the current page is processed.

The following table summarizes the data-bound widget rendering when None is selected for both Lite Viewer and Full Viewer.

In this video, we will explore the Loading Optimization Setting: None, how it affects the data loading of your story when using Full Viewer, and scenarios for using the setting in your story.

Next, let's look at the settings' impact on users and their ability to interact with a story using scripting.

We will explore the Viewport Loading and Background Loading when the onActive script finishes before and after the initial rendering phase, as well as the data loading scenario for the None setting.

The Loading Optimization Setting that you select, and the duration of the scripts in your story, will impact on when the users can interact with the story to trigger scripting.

Knowing how they use the story and including visual hints that there is still processing happening in the background will improve user experience in the story and is something to consider when understanding the requirements and planning the story design.