State Management Module

Summary

The State Management Module allows users to manage AdapTable State at run-time

AdapTable State usually just 'happens' without the User being aware of the persistence mechanism or needing to do anything in particular.

However AdapTable provides the State Management Module to assist managing Adaptable State in the UI.

It primarily allows users to import and export AdapTable State.

It's functionality can be accessed in 3 UI components:

The Manage State section in the Settings Panel
The Manage State Toolbar in the Dashboard
The Manage State Tool Panel in the AdapTable Tool Panel Component

Hint

It is unlikely that you will want all your users to have access to this feature at run-time
If so, set the Entitlement to Hidden for those users who do not need this feature

State Functionality

All 3 Manage State components contain 4 State-related options:

Clearing User State
Loading Initial Adaptable State (from a JSON file)
Exporting the AdapTable State - to Clipboard, Console or JSON
Exporting Initial Adaptable State - to Clipboard, Console or JSON

Caution

Clearing User State will re-load the initial Initial Adaptable State that was provided

Note

If using Local Storage, AdapTable will automatically clear what is in the User's State
If using Remote Storage, AdapTable will invoke the clearState function that was provided at design-time

State Management Module

Fork Fork

This demo opens the State Management page of the Settings Panel

Loading demo…

Reloading Initial State

The Manage State panel allows you to re-apply your Initial Adaptable State using a JSON file.

This is done using the Load Initial Adaptable State button.

When clicked, AdapTable will replace the current State with the State in the uploaded file.

Load Initial Adaptable State

Fork Fork

The demo illustrates how to reload the Initial Adaptable State using the Manage State Settings Panel
Initial State includes a Format Column on Name (blue). Change Format Columns replaces it with runtime styles on Github Stars and Language; reloading from the downloadable file restores Name

Try It Out

On load, confirm Name is styled blue (from Initial State)
Click Change Format Columns — Name styling is removed and Github Stars (yellow) / Language (green) appear instead
Download this file: initial-adaptable-state.json
Open the Settings Panel using the Manage State module button, and then click Load Initial Adaptable State to select the downloaded file
Runtime styles disappear and Name (blue) returns — confirming the Grid was restored from the file

import {
  AdaptableButton,
  AdaptableOptions,
  DashboardButtonContext,
  FormatColumn,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';
import {initialState} from './initialState';

const INITIAL_FORMAT_COLUMN_NAME = 'formatColumn-name-initial';

const runtimeFormatColumns: FormatColumn[] = [
  {
    Name: 'formatColumn-github_stars-runtime',
    Scope: {
      ColumnIds: ['github_stars'],
    },
    Style: {
      BackColor: 'Yellow',
      ForeColor: 'Black',
      FontWeight: 'Bold',
    },
  },
  {
    Name: 'formatColumn-language-runtime',
    Scope: {
      ColumnIds: ['language'],
    },
    Style: {
      BackColor: '#32cd32',
      ForeColor: 'Black',
      FontWeight: 'Bold',
    },
  },
];

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Load Initial Adaptable State',
  adaptableStateKey: 'docs/LoadInitialStateDemo',
  initialState,
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Change Format Columns',
        buttonStyle: {
          tone: 'info',
          variant: 'raised',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          const formatColumnApi = context.adaptableApi.formatColumnApi;

          const initialFormatColumn = formatColumnApi.getFormatColumnByName(
            INITIAL_FORMAT_COLUMN_NAME
          );
          if (initialFormatColumn) {
            formatColumnApi.deleteFormatColumn(initialFormatColumn);
          }

          const formatColumnsToAdd = runtimeFormatColumns.filter(
            formatColumn =>
              !formatColumnApi.getFormatColumnByName(formatColumn.Name)
          );

          if (!initialFormatColumn && formatColumnsToAdd.length === 0) {
            context.adaptableApi.systemStatusApi.setInfoSystemStatus(
              'Format Columns already changed — load Initial State to restore Name'
            );
            return;
          }

          if (formatColumnsToAdd.length > 0) {
            formatColumnApi.addFormatColumns(formatColumnsToAdd);
          }

          context.adaptableApi.systemStatusApi.setInfoSystemStatus(
            'Replaced Name Format Column with Github Stars + Language — load Initial State to restore'
          );

          // TODO(adaptable-patch): remove after patch (Format Column refresh + UpdateStrategy KeepUserDefined)
          context.adaptableApi.gridApi.refreshColumns(['github_stars', 'language']);
        },
      },
    ],
  },
};

Read-only

Loading demo…

PreviousUpdating Initial AdapTable State NextCustomising AdapTable State