Displaying Progress Indicators

Summary

AdapTable makes it possible to display a Progress Indicator during a long-running operation

AdapTable allows developers to create a Progress Indicators.

These will display when an operation takes a significant time to run.

Caution

This page describes how to provide progress indicators when using vanilla / pure TypeScript AdapTable
For Framework-specific instructions, see Angular Progress Indicators or React Progress Indicators

These can be displayed (and then hidden) at run-time using functions in the UserInterfaceApi.

Find Out More

It is also possible to display Custom Window Popups to display more general information

Developers can either simply provide the text to display and use AdapTable's default rendering, or can provide custom rendering which will be used instead.

The Progress Indicator is managed programatically via 2 companion functions in User Interface Api::

showProgressIndicator - displays the Progress Indicator (including with custom rendering if required)
hideProgressIndicator - closes the Progress Indicator

Deep Dive

Configuring the Progress Indicator

The ProgressIndicatorConfig object is defined as follows:

Property	Description
delay	Length of Delay
frameworkComponent	A React, Angular or Vue Framework component to use
render	Render function
renderMode	Determines whether custom component is rendered as "content" (inside window) or "dialog" (replacing window)
text	Text to display

As can be seen content is provided in one of 2 ways:

in Framework versions of AdapTable, by using the frameworkComponent property
in the vanilla (i.e. non-Framework) AdapTable version, by using the render property

The renderMode property determines how the custom component is rendered and can be one of 2 values:

"content" (default) the content is placed inside the default Dialog together with a spinner
"dialog": custom content completely replaces the Dialog

Note

This property applies to both frameworkComponent and render options

Displaying a Progress Indicator

Fork Fork

This example contains 3 Custom Dashboard Buttons that each open a Progress Indicator:
- Show Standard Progress Indicator - displays the text it is given and uses the default AdapTable rendering
- Show Custom Progress Indicator - displays using custom rendering that was supplied
- Show New Dialog Indicator - displays using a replacement Dialog
All 3 Progress Indicators display for 5 seconds (before being hidden via hideProgressIndicator)

Try It Out

Click the 3 Dashboard Buttons to see the associated Progress Indicators

import {
  AdaptableButton,
  AdaptableOptions,
  CustomRenderContext,
  CustomToolbarButtonContext,
  ProgressIndicatorConfig,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Progress Indicator',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'Buttons',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Show Standard Progress Indicator',
            buttonStyle: {
              variant: 'text',
              tone: 'info',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const config: ProgressIndicatorConfig = {
                text: 'This standard Progress Indicator will display for 5 seconds',
              };
              context.adaptableApi.userInterfaceApi.showProgressIndicator(
                config
              );
              setTimeout(() => {
                context.adaptableApi.userInterfaceApi.hideProgressIndicator();
              }, 5000);
            },
          },
          {
            label: 'Show Custom Progress Indicator',
            buttonStyle: {
              variant: 'text',
              tone: 'warning',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const config: ProgressIndicatorConfig = {
                text: 'Custom Indicator',
                render: (customRenderContext: CustomRenderContext) => {
                  return '<div style="height: 50px; width: 250px; background-color:lightyellow; color:red; padding:10px"><b><i>This Progess Indicator uses custom rendering and will display for 5 seconds</i></b></div>';
                },
              };
              context.adaptableApi.userInterfaceApi.showProgressIndicator(
                config
              );
              setTimeout(() => {
                context.adaptableApi.userInterfaceApi.hideProgressIndicator();
              }, 5000);
            },
          },
          {
            label: 'Show New Dialog Indicator',
            buttonStyle: {
              variant: 'text',
              tone: 'success',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const config: ProgressIndicatorConfig = {
                text: 'New Dialog',
                renderMode: 'dialog',
                render: (customRenderContext: CustomRenderContext) => {
                  return '<div style="height: 50px; width: 250px; background-color:lightgreen; color:blue; padding:10px"><b><i>This Progess Indicator is a new dialog and will display for 5 seconds</i></b></div>';
                },
              };
              context.adaptableApi.userInterfaceApi.showProgressIndicator(
                config
              );
              setTimeout(() => {
                context.adaptableApi.userInterfaceApi.hideProgressIndicator();
              }, 5000);
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Messages',
          Toolbars: ['Buttons'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousConfiguring Loading Screen NextHiding AdapTable

Framework: