357 views

Optimize widget rendering time on responsive dashboards

 

Overview of types of dashboards


Two types of dashboards exist: Responsive and Non-responsive. To determine which type you are using, click Edit on a dashboard.

  • Responsive dashboards have the context menu ("hamburger") button on the top left side. Users with editing rights will see the Add Widget (Add Widget button) and Quick Layout (Quick Layout button) buttons appear.



  • On non-responsive dashboards, the Change layout button appears for users with edit permissions. All users will have a link icon, a favorite icon and refresh icon.

 

Advantages of responsive dashboards

Responsive dashboards improve the creation and management of dashboard content. They are not enabled by default (prior to Istanbul), and must be enabled by an admin. Set the glide.cms.enable.responsive_grid_layout system property to true. If this property does not exist, you can create it.

 

Responsive dashboards are active and enabled by default for new customers since Istanbul. Customers who upgraded from previous versions to Istanbul or later need to enable responsive dashboards manually by setting the system property to true.

Some of the many advantages to using responsive layouts are:

  • The ability to drag to move and resize widgets.

  • Create and edit reports, Performance Analytics, and other widgets directly from the dashboard by clicking the pencil icon on the widget that displays the editor page for that widget.

  • Use the Add Widget pane to quickly find and preview widgets to add to the dashboard.

  • Use quick layouts to snap widgets into a predefined layout, then adjust the layout as desired.

  • The permission system applies to all dashboards and all users, and you need to explicitly share your dashboard for others to be able to view or edit it.

  • Lazy loading: Only visible widgets load. More widgets load as the user scrolls down in order to reduce load on the system and speed up the loading of initial widgets.

 

How to optimize how widgets load

To improve the overall performance of your dashboards, you can use the glide.canvas.grid.widget_render_concurrent_max system property to optimize how widgets load. 

Note: This system property applies to responsive dashboards only.

 

Type: Integer

Default value: 3 if the property is not manually set. The minimum value is 2 if the property is manually set.

Location: Add to the System Property [sys_properties] table.

Behavior:

  • Defines the maximum number of widgets that render simultaneously on a dashboard. With smaller values, individual sets of widgets load more quickly. With larger values, fewer requests to the server are made.

  • Widgets that are outside of the screen do not load at all until you scroll past them.

  • If the value is set to a low number, a slow widget blocks fewer widgets from loading. The widgets visible on the dashboard take slightly longer to load because more requests are sent to the server. Setting a value less than 2 causes all widgets that are visible above the page “fold” to be loaded at once.

    For example: If a very large monitor allows you to see 10 widgets at once, then 10 will be loaded in a single request. If the monitor is small, or you shrunk your browser window, and you can only see 4 at once, only 4 will be loaded in a single request. If you can see 10 widgets at once and you’ve set the value of the property to 4, it will load all 10 widgets using 3 requests: 4 widgets + 4 + 2. Additional widgets will be loaded in the same fashion when you scroll the page. If you scroll very fast to the bottom of the page you cause the loading of all widgets.

  • If the value is set to a higher number, one slow-loading widget blocks a larger number of widgets from loading. The widgets visible on the dashboard load a little more quickly because fewer requests are sent to the server.

 

Best practices


  • Set the value of this property to half of the number of widgets that are visible when your most-used dashboard loads. For example, if six widgets are visible on that dashboard, set the value of this property to three.

  • The values to use for these properties depend on the performance of your instance and the contents of its dashboards.

The overall performance of a dashboard depends on the combined performance of all its widgets. Optimizing the performance of the data requests each widget is making goes a long way to improve the dashboard’s performance.

Article Information

Last Updated:2017-09-15 00:45:51
Published:2017-09-15