Configuring the Settings Panel

All Modules which do not have an Entitlement of Hidden appear in the Settings Panel. The default order of entries is: GridInfo ColumnInfo Dashboard ToolPanel StatusBar

Layout CalculatedColumn CustomSort Alert SystemStatus

Export DataImport

FormatColumn StyledColumn FlashingCell Theme

QuickSearch GridFilter ColumnFilter DataSet NamedQuery

Note Comment FreeTextColumn

PlusMinus Shortcut DataChangeHistory

Charting Schedule TeamSharing StateManagement

Use this property to provide a different order / set of Modules in the Settings Panel.

// Create a new order for the Settings Panel
// Add extra separators
// Include a Custom Settings Panel ('App Settings') as the first item
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    customSettingsPanels: [
      {name: 'App Settings', frameworkComponent: AppSettingsPanel},
    ],
    navigation: {
      items: [
        'App Settings',
        '-',
        'CalculatedColumn',
        'FormatColumn',
        '-',
        'Dashboard',
        'ToolPanel',
        '-',
        'Alert',
        'CustomSort',
        'Export',
        '-',
        'GridInfo',
        'TeamSharing',
        'Theme',
      ],
    },
  },
};

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

  Find Out More

  See the Guide to the Adaptable Icon for more information

// 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,
  },
};

The Settings Panel has 2 modes for display:

• window - movable, resizable, and no backdrop (the default value)
• modal - placed in the centre of screen with backdrop and not movable or resizable

// Set Settings Panel to be modal
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    popupType: 'modal',
  },
};

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 position of the Settings Panel
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    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 size of the Settings Panel
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    size: {
      width: 800,
      height: 450,
    },
  },
};

This is the Title of the Settings Panel - i.e. what appears at the top of the Screen.

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