Displaying Progress Indicators

Summary

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

AdapTable allows developers to create Progress Indicators when an operation takes a significant time to run.

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.

Show and hide Progress Indicators via User Interface API:

showProgressIndicator — displays the indicator (default or custom rendering)
hideProgressIndicator — closes the indicator

Deep Dive

Configuring the Progress Indicator

The ProgressIndicatorConfig object is defined as follows:

Property	Type	Description
delay	`number`	Length of Delay
frameworkComponent	`AdaptableFrameworkComponent`	A React, Angular or Vue Framework component to use
render	`CustomRenderFunction`	Render function
renderMode	`'content' \| 'dialog'`	Determines whether custom component is rendered as "content" (inside window) or "dialog" (replacing window)
text	`string`	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

Developer Guide

Providing a Progress Indicator

const config: ProgressIndicatorConfig = {
  text: 'This standard Progress Indicator will display for 5 seconds',
};

Standard indicator (text only)

Provide text on ProgressIndicatorConfig for AdapTable's default spinner and message. Omit render and frameworkComponent.

const config: ProgressIndicatorConfig = {
  text: 'Custom Indicator',
  render: () =>
    '<div style="padding:10px"><b>Custom progress content</b></div>',
};

const dialogConfig: ProgressIndicatorConfig = {
  text: 'New Dialog',
  renderMode: 'dialog',
  render: () =>
    '<div style="padding:10px"><b>Fully custom dialog content</b></div>',
};

Custom HTML with `render`

Supply a render function that returns HTML. It receives CustomRenderContext when you need lifecycle hooks (phase, element, adaptableApi).

renderMode: 'content' (default) — custom HTML appears inside AdapTable's progress dialog together with the spinner
renderMode: 'dialog' — your HTML replaces the default dialog entirely

Optional delay (milliseconds) defers showing the indicator until the operation has run for that long.

onClick: (button, context) => {
  context.adaptableApi.userInterfaceApi.showProgressIndicator(config);
},

Show from application code

Call showProgressIndicator wherever you have adaptableApi — for example a Custom Toolbar Button onClick handler.

setTimeout(() => {
  context.adaptableApi.userInterfaceApi.hideProgressIndicator();
}, 5000);

Hide when the operation completes

Call hideProgressIndicator when the long-running task finishes (the demo uses a 5-second timeout).

Displaying a Progress Indicator

Fork Fork

This example contains 3 Custom Toolbar 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 toolbar 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,
        },
      ],
    },
  },
};

PreviousLoading Screen NextCustom Components