Custom Settings Panels

Summary

Developers can provide Custom Settings Panels using Settings Panel Options
Requirements differ for Adaptable Vanilla (explained below), AdapTable React and AdapTable Angular

Developers can add custom panels to the Settings Panel.

Hint

This allows your application to have a single screen where users can manage all configuration and settings
This screen can include settings both for AdapTable and the wider system

Custom Settings Panels are provided via the customSettingsPanels property of Settings Panel Options.

customSettingsPanels

CustomSettingsPanel[]

Custom Settings Panels to include in the Settings Panel

CustomSettingsPanel[]

Developers are able to provide bespoke Settings Panels to add to those provided by AdapTable

Find Out More

See the Custom Settings Panel Guide for in-depth instructions

 const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {     
    customSettingsPanels: [
      {
        name: 'Application Settings',
        icon: {
          style: {margin: '5px'},
          src:
            'https://www.pngfind.com/pngs/m/382-3828831_png-file-white-person-icons-png-transparent-png.png',
        },
        render: ({visible, node}) => {
          if (visible) {
            return `
              <h1>Application Info</h1>
              <p>Describing what the app does</p>
              <label>Number of agents: <input type="text" /></label>
            `;
          } else {
            console.log('unmount');
          }
          return null;
        },
      },
    ],
  },

Caution

This page primarily explains how to act Custom Settings Panels in Adaptable Vanilla
If using AdapTable React see AdapTable React Components Guide
If using AdapTable Angular consult the AdapTable Angular Components Guide

Deep Dive

Anatomy of a Custom Settings Panel

The CustomSettingsPanel object is defined as follows:

Property	Description
frameworkComponent	Framework-specific (Angular, React or Vue) component to be rendered
icon	Icon rendered inside settings-panel name, inside the navigation
name	Appears in Settings Panel Navigation and must be included in settingsPanelOptions.navigation for it to be displayed (by default added to the end)
render	Function to provide bespoke content when NOT using a Framework wrapper

The name property is self-explanatory.

The render function is invoked by AdapTable to fetch content when it displays the Settings Panel.

Caution

The render function is only used in AdapTable Vanilla version

Its signature is:

render?: (visible: boolean, node: HTMLDivElement, adaptableApi: AdaptableApi) => string | null;

If you are using AdapTable React or AdapTable Angular then the frameworkComponent property should be supplied.

Developer Guide

Providing a Custom Settings Panel in AdapTable Vanilla

There are 2 steps required to define a Custom Settings Panel:

const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    customSettingsPanels: [
    {
      name: 'Application Settings',
      icon: { src:'https://mypage.com/image.png'},
      render: ({visible, node}) => {
        if (visible) {
          return `
            <h1>Application Info</h1>
            <p>Describing what the app does</p>
            <label>Number of agents: <input type="text" /></label>
          `;
        } else {
          // Do anything required to unmount
        }
        return null;
      },
    }],
    navigation: {
      items: [
          'Application Settings',
          '-',
          'CalculatedColumn',
          'FormatColumn',
          '-',
          'Theme',
      ],
    },
  },
}

Provide the Custom Settings Panel

Define it in customSettingsPanels property in Settings Panel Options.

Up to 3 properties can be provided:

name - mandatory property providing a unique name for the Panel.

This will be displayed down the left hand side of the Settings Panel.

It is also how AdapTable will identify the Custsom Panel.
icon - of type AdaptableIcon providing the icon to display in the Settings Panel
render - returns the string content to display in the Settings Panel

If using AdapTable React or AdapTable Angular then supply the frameworkComponent property instead:

 frameworkComponent: MyCustomSettingsPanel,

Reference the Custom Settings Panel (Optional)

By default the Custom Settings Panel will be shown at the bottom of the list of Panel in the Panel Screen.

If this is not optimal, you can list the Panel in the navigation property of Settings Panel Options.

This includes an items array property.

There you can list all the (shipped and custom) Panels you want to display together with any separators required.

Adding a Custom Settings Panel

Fork Fork

This demo shows the a Custom Settings Panel added called Applications Settings
We have also used the Settings Panel API to open the Settings Panel with the Custom Panel

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom Settings Panel',
  settingsPanelOptions: {
    icon: 'ApplicationIcon',
    title: 'Config Viewer',
    navigation: {
      items: [
        'Application Settings',
        '-',
        'CalculatedColumn',
        'FormatColumn',
        '-',
        'Dashboard',
        'ToolPanel',
        '-',
        'Alert',
        'CustomSort',
        'Export',
        '-',
        'GridInfo',
        'TeamSharing',
        'Theme',
      ],
    },
    customSettingsPanels: [
      {
        name: 'Application Settings',
        icon: {
          //     cssProperties: {},
          src: 'https://www.pngfind.com/pngs/m/382-3828831_png-file-white-person-icons-png-transparent-png.png',
          style: {margin: '5px'},
          //  style: { color: buttonProps.color }
        },
        render: (customRenderContext: CustomRenderContext) => {
          if (customRenderContext.phase == 'onMount') {
            return `
              <h1>Application Info</h1>
              <p>Describing what the app does</p>
              <label>Number of agents: <input type="text" /></label>
            `;
          } else {
            console.log('unmount');
          }
          return null;
        },
      },
    ],
  },
  initialState: {
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['SettingsPanel'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    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,
        },
      ],
    },
  },
};

PreviousSettings Panel NextConfiguring Settings Panel

Framework: