Configuring the Settings Panel

All Modules which do not have an Entitlement of Hidden appear in the Settings Panel.

AdapTable lists all of these in conceptual groups (see DeepDive above for more details).

Use the navigation property to return a different set of groups and modules.

Each group has 2 properties:

• label - section heading (use an empty string for items without a heading)
• items - module or custom panel names

// Create a new grouped order for the Settings Panel
// Include a Custom Settings Panel ('App Settings') as the first group
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    customSettingsPanels: [
      {name: 'App Settings', frameworkComponent: AppSettingsPanel},
    ],
    navigation: (_context, _defaultNavigation) => ({
      groups: [
        {label: 'Application', items: ['App Settings']},
        {label: 'Important', items: ['CalculatedColumn', 'FormatColumn']},
        {label: 'UI', items: ['Dashboard', 'ToolPanel']},
        {label: 'Administration', items: ['Alert', 'CustomSort', 'Export']},
        {label: 'Support', items: ['GridInfo', 'TeamSharing', 'Theme']},
      ],
    }),
  },
};

The Settings Panel has 2 modes for display:

• modal - centred on screen with a backdrop; cannot be moved or resized (the default value)
• window - draggable, resizable panel with no backdrop; honours the size and position options

// Make the Settings Panel a draggable, resizable window
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    popupType: 'window',
  },
};

The Dashboard contains a collection of Module Buttons.

Each button opens a different page in the Settings Panel, including the SettingsPanel Modules Button which opens the Settings Panel on the first page.

By default this is the only Module Button that appears in the Dashboard.

Users are able, however, to remove this Button by changing the Modules Buttons collection in the Dashboard UI.

Settings this property to true means that this Button can never be removed (in the UI).

// Ensure the Settings Panel is always displayed in the Dashboard
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    alwaysShowInDashboard: 'true',
  },
};

The AdapTable ToolPanel Component> contains a collection of Module Buttons.

Each button opens a different page in the Settings Panel, including the SettingsPanel Modules Button which opens the Settings Panel on the first page.

By default this is the only Module Button that appears in the Tool Panel.

Users are able, however, to remove this Button by changing the Modules Buttons collection in the Tool Panel UI.

Settings this property to true means that this Button can never be removed (in the UI).

// Ensure the Settings Panel is always displayed in the AdapTable ToolPanel Component
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    alwaysShowInToolPanel: 'true',
  },
};

This property sets which Icon will be used by AdapTable in relation to the Settings Panel.

There are 3 options available:

• ConfigurationIcon - AdapTable will use the 'configure' icon (the default option)
• ApplicationIcon - use the applicationIcon property as set in User Interface Options
• an AdaptableIcon object - a custom Icon provided by the User

// Use the Icon set as the Application Icon for the Settings Panel
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    icon: 'ApplicationIcon',
  },
};

By default the Settings Panel displays the icon and name of all Modules that are currently permissioned.

This property can be set to false to hide the icon so that only the Module's name is displayed.

// Hide Module Icons
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    showModuleIcons: false,
  },
};

By default AdapTable will put the Settings Panel in the middle of the Screen.

Use this property to provide a different location.

The position object has 2 numeric properties - x and y:

// The initial position of the Settings Panel window
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    popupType: 'window',
    position: {
      x: 100,
      y: 200,
    },
  },
};

By default AdapTable will calculate the size of the Settings Panel using the current screen size.

Use this property to provide an actual size.

The size object has 2 numeric properties - width and height:

// The initial size of the Settings Panel window
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    popupType: 'window',
    size: {
      width: 800,
      height: 450,
    },
  },
};

Use this property to change the Title of the Settings Panel - i.e. what appears at the top of the Screen, from the default value of "Settings Panel".

// The title of the Settings Panel
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    title: 'My Settings',
  },
};

By default AdapTable displays a warning whenever an AdapTable Object is about to be deleted.

Set this property to false to stop users seeing this warning.

// Don't display a warning when deleting an Adaptable Object
const adaptableOptions: AdaptableOptions = {
  userInterfaceOptions: {
    disableDeleteConfirmation: true,
  },
};