Manually Saving Layouts

Summary

The updateCurrentLayout function in Layout Api allows developers easily to update a Layout programatically
The applyState function in State Options can be used to control when Layouts are saved

Layouts, like all AdapTable objects, save automatically as soon as they are changed.

Whenever a Column is grouped, resized, pinned etc, the change is immediately persisted to AdapTable State.

Sometimes this is not desired behaviour, and developers prefer to manually control when a Layout is saved.

In other words, run-time users can only make temporary changes to Layouts, and the actual state persistence is imperatively driven.

This is possible in AdapTable as the demo below demonstrates.

Note

This demo is a cut down version from examples provided in the Guide to Controlling AdapTable State Persistence
See the demos there for full explanations and in-depth details of this advanced topic

Manually Saving Layouts

Fork Fork

In this demo we prevent the auto-saving of Layouts
Changes to Layouts are not automatically saved in AdapTable State - instead we keep a local copy of the changes and we provide 3 Dashboard Buttons:
- Persist Layout Changes - manually saves all changes to Layouts to AdapTable State
- Undo Layout Changes - replaces any locally saved changes to Layouts with last saved version in AdapTable State
- Reset Layout Changes - replaces any locally saved changes to Layouts with inital version in AdapTable State
Note: only Layouts are not auto-saved - changes to other objects (e.g. changing the back colour of the Format Column on Github Stars Column are automatically persisted)

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';
import {
  customStateOptions,
  persistLayoutChanges,
  resetLayoutChanges,
  undoLayoutChanges,
} from './stateOptions';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Manually Saving Layouts',
  stateOptions: customStateOptions,
  dashboardOptions: {
    customToolbars: [
      {
        name: 'PersistLayoutChanges',
        toolbarButtons: [
          {
            label: `Persist Layout Changes`,
            onClick: (_button, context) => {
              const {adaptableApi} = context;

              persistLayoutChanges(adaptableApi);
            },
            buttonStyle: {
              variant: 'raised',
              tone: 'success',
            },
          },
        ],
        title: 'Save Changes',
      },
      {
        name: 'UndoLayoutChanges',
        toolbarButtons: [
          {
            label: `Undo Layout Changes`,
            onClick: (_button, context) => {
              const {adaptableApi} = context;

              undoLayoutChanges(adaptableApi);
            },
            buttonStyle: {
              variant: 'raised',
              tone: 'warning',
            },
          },
        ],
        title: 'Undo Unsaved Changes',
      },
      {
        name: 'ResetLayoutChanges',
        toolbarButtons: [
          {
            label: `Reset Layout Changes`,
            onClick: (_button, context) => {
              const {adaptableApi} = context;

              resetLayoutChanges(adaptableApi);
            },
            buttonStyle: {
              variant: 'raised',
              tone: 'error',
            },
          },
        ],
        title: 'Reset to Initial State',
      },
    ],
    customDashboardButtons: [
      {
        tooltip: 'Reset state',
        icon: {
          name: 'refresh',
        },
        buttonStyle: {
          tone: 'error',
        },
        onClick: (_button, context) => {
          context.adaptableApi.stateApi.reloadInitialState();
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Default',
          Toolbars: [
            'Layout',
            'PersistLayoutChanges',
            'UndoLayoutChanges',
            'ResetLayoutChanges',
          ],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-github_stars',
          Rule: {
            Predicates: [
              {
                PredicateId: 'GreaterThan',
                Inputs: [1000],
              },
            ],
          },
          Style: {
            BackColor: 'Yellow',
            ForeColor: 'Black',
          },
          Scope: {
            ColumnIds: ['github_stars'],
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
        },
        {
          Name: 'Grouped Layout',
          RowGroupedColumns: ['language'],
          TableColumns: [
            'name',
            'github_stars',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          RowGroupValues: {
            RowGroupDefaultBehavior: 'collapsed',
          },
        },
      ],
    },
  },
};

PreviousUpdating Layouts NextExtending Layouts

Framework: