Settings Panel

Summary

The Settings Panel allows you to configure AdapTable and all associated objects in one convenient place
It can be used to launch wizards which will create and edit Adaptable objects
Users can also create bespoke settings screens for hosting custom Application settings
The Settings Panel has 2 modes:
- Modal - placed in the centre of screen with backdrop
- Window - movable, resizable, and no backdrop (the default value)

The Settings Panel provides a single location to manage all AdapTable-related configuration.

There is one section for each Adaptable Module which saves to Adaptable State.

Note

Most sections display that Module's collection of Adaptable Objects in an intuitive manner.

This allows AdapTable users to see all the objects to which they have access in Adaptable together with easy steps to manage them (if Entitlements allow).

Settings Panel

Fork Fork

This demo opens with the Settings Panel open on the Format Column Screen - with 5 Format Columns visible
There are 2 things of note:
- The 1st Format Column is suspended - unsuspending it will automatically render the Format
- All can be edited with the exception of the 2nd which has a ReadOnly Entitlement

Try It Out

Click Show More to make the Demo bigger and then drag the bottom of the Settings Panel to see more items
Set the first Format Column to be active and see how AG Grid automatically renders it

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Settings Panel',
  initialState: {
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SettingsPanel'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-all',
          Style: {
            FontWeight: 'Bold',
            FontStyle: 'Italic',
            ForeColor: 'Brown',
            BackColor: 'LightGreen',
          },
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: "CONTAINS([name] , 'ul')",
          },
          IsSuspended: true,
        },
        {
          Name: 'formatColumn-github_stars',
          Style: {
            BackColor: '#ffa500',
            ForeColor: 'white',
          },
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'GreaterThan',
                Inputs: [20000],
              },
            ],
          },
          IsReadOnly: true,
        },
        {
          Name: 'formatColumn-week_issue_change',
          Style: {
            ForeColor: 'Green',
          },
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Positive',
              },
            ],
          },
        },
        {
          Name: 'formatColumn-week_issue_change',
          Style: {
            ForeColor: 'Red',
          },
          Scope: {
            ColumnIds: ['week_issue_change'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Negative',
              },
            ],
          },
        },
        {
          Name: 'formatColumn-language',
          Style: {
            BackColor: '#87cefa',
          },
          Scope: {
            ColumnIds: ['language'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Is',
                Inputs: ['TypeScript'],
              },
            ],
          },
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'week_issue_change',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Help Links

Each section in the Settings Panel displays an Info button.

When this button is clicked, it opens the relevant help page in this documentation.

Hint

Turn this off by setting showDocumentationLinks to false in User Interface Options (as shown in this tutorial)

Window Types

The Settings Panel has 2 modes:

Modal - the Settings Panel is placed in the centre of screen with backdrop
Window - the Settings Panel is movable, resizable, and without backdrop (this is the default value)

Wizards

Most Settings Panel sections display a list of relevant Adaptable Objects e.g. Custom Sort or Column Formatting.

These typically use Wizards to allow users easily to create and edit the objects.

Note

Some sections in the Settings Panel do not contain collections, e.g. Quick Search or State Management
Instead, they display form inputs that allow users to configure the Module's properties

Find Out More

See Settings Panel Wizards for more information

Accessing Settings Panel

The Settings Panel can be accessed from multiple Adaptable UI components:

Settings Panel Module Button in the Dashboard
Settings Panel Module Button in the Tool Panel Component

Note

For both Dashboard and Tool Panel it is the only button visible by default

Settings Panel Module Button in the Status Bar
Open Settings Panel Column Menu item
Open Settings Panel Context Menu item

FAQ

Why can't I see the Settings Panel button in the Dashboard? If your existing Dashboard Initial State contains Module Buttons, these will be remain visible until you change them.

Can I stop my users from removing the Settings Panel button from the Dashboard? Yes, set alwaysShowInDashboard to true in Settings Panel Options. There is an equivalent alwaysShowInToolPanel property to ensure its always visible in the Tool Panel.

AdapTable Resources

NextCustom Settings Panel

Framework: