Controlling Data Loading on Widget Level with Data Refresh Settings

When a data-bound widget is rendered, based on the story level Loading Optimization Setting, it will be checked to see if the widget needs to be rendered with data or without data (known as a ghost image).

This behavior can be controlled in the Data Refresh setting in the Builder panel for chart and table widgets. Additionally, it can be dynamically set with the setRefreshPaused() APIs.

If the widget Data Refresh setting is set to:

• Always Refresh: The load is not paused. The widget will fetch its query data and will be rendered with data.
• Always Pause: The load is paused. The widget will not fetch its query data and will be rendered as a ghost image.
• Refresh Active Widget Only: The load is paused based on widget visibility. If the widget is visible, then the widget will fetch its query data and will be rendered with data. If the widget is not visible, then the widget will not fetch its query data and will be rendered as a ghost image.

For more information on this specific setting, go to Use Pause Refresh Options and APIs in the SAP Help Portal.

There are standard widget-level data refresh options available for data-bound widgets. In this video, we will explore the three Data Refresh settings available for tables and charts and how they help control data flow.

In the widget's Builder panel, scroll down to the chart or table properties to the Data Refresh options.

1. Always Refresh: The default setting. A data query is sent to the source system to fetch the data.
2. Refresh Active Widgets Only: A data query is sent to the source system to fetch the data only when the widget is in the viewport.
3. Always Pause: Stops a data query from being sent to the source system to fetch the data.

There are scenarios where a customized data loading flow is required in a story. This type of scenario requires a good understanding of the users' requirements and an agreement with them as to when wait times will occur when they navigate in the story.

It requires a story-level Loading Optimization Setting combined with different widget-level Data Refresh settings to create a data loading scenario that meets the needs of the users.

In this video, we will explore a scenario that requires a customized data flow and learn how the story is built.

Any widget that is referenced in a script is rendered, regardless of if it is part of the visible area or not.

As rendering might trigger a data request to the backend, then this might lead to unneeded data requests and reduce any performance gains from using Viewport Loading instead of Background Loading.

If you use a tab strip or page book container in combination with a lot of referenced data-bound widgets within a script, then you can set the data refresh setting for widgets that are not on the visible tab/page book page to Always Pause or Refresh Active Widgets Only. This will delay the rendering/data loading to when it is really needed instead of during the initial loading of the story.

In many cases, not all users are looking at all of the available information in a story like tabs of a tab strip or pages within a page book. Rendering all widgets on the page, and even worse, fetching all data from the sources can result in lots of wasted resources on all layers (frontend, network, and backend).

Using the Data Refresh setting Always Pause can help prevent this high volume of traffic.