AdapTable Version:

Framework:

Dashboard Buttons

Summary

Dashboard Buttons provide shortcuts to regularly used functionality in AdapTable
There are 2 sets available:
- Module Buttons - System buttons shippped by AdapTable which open the Module's Settings Panel section
- Custom Buttons - provided by Developers which can perform any action when clicked

The AdapTable Dashboard can include buttons - shortcuts to particular actions.

Caution

These are not the same Buttons which are rendered inside Custom Toolbars
Instead, these are Buttons which are displayed in the top part of the Dashboard itself

Dashboard Buttons can be of 2 types:

(System) Module Buttons - provided by AdapTable
Custom Buttons - supplied by developers

Module Buttons

These are System Buttons supplied by AdapTable.

There is one Button (of type Adaptable Button) for each AdapTable Module.

Note

By default, only the Settings Panel Button is displayed in the Dashboard
This is because the Settings Panel provides access to all other Modules

When the Button is clicked, AdapTable opens the associated Module section in the Settings Panel.

Hint

Set alwaysShowInDashboard to true in Settings Panel Options to ensure the Settings Panel button will always be visible

Dashboard: Module Buttons

Fork Fork

This example illustrates how to provide Module Buttons in the Dashboard
It sets 4 Module Buttons - FormatColumn, DataChangeHistory, CalculatedColumn and Shortcut

Expand to see how the Module Buttons are provided

Custom Buttons

Custom Dashboard Buttons are standard Adaptable Buttons provided by Developers at design-time.

They are supplied in the customDashboardButtons property in Dashboard Options.

customDashboardButtons

AdaptableButton<DashboardButtonContext>

Custom Buttons to show in the Dashboard Header

AdaptableButton<DashboardButtonContext>

The customDashboardButtons property of Dashboard Options enables developers to supply a group of custom Adaptable Buttons which will appear in the Dashboard Header.

const adaptableOptions: AdaptableOptions = {
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'First',
        buttonStyle: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          return context.dashboardState.ActiveTabIndex == 0
            ? {
                variant: 'raised',
                tone: 'info',
              }
            : {
                variant: 'outlined',
                tone: 'success',
              };
        },
        icon: {
          height: 30,
          src: 'https://img.icons8.com/ios-glyphs/30/000000/sort.png',
        },
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          console.log('button onClick function', {button, context});
        },
        hidden: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          return context.dashboardState.IsCollapsed != true;
        },
      },
      {
        label: 'Second',
        buttonStyle: {
          variant: 'raised',
          tone: 'accent',
        },
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          console.log('button onClick function', {button, context});
        },
      },
      {
        label: 'cb3',
        buttonStyle: {
          variant: 'raised',
          tone: 'accent',
        },
        icon: {
          height: 20,
          src: 'https://img.icons8.com/ios-glyphs/30/000000/sort.png',
        },
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          console.log('button onClick function', {button, context});
        },
      },
    ],
  },
};

Caution

Any Custom Button provided in Dashboard Options will be automatically displayed in the Dashboard
There is no requirement (or ability) to reference it in Dashboard Initial State - it appears anyway
Equally there is no ability for run-time users to hide a Custom Button (like they can with Module Buttons)

Deep Dive

Custom Dashboard Buttons

As with all Adaptable Buttons, the button can be styled to user requirements with many properties and functions available to configure visibility, styling, onClick and other features.

All the Button's functions receive as context a bespoke DashboardButtonContext object which contains a single property:

Property	Description
dashboardState	Current Dashboard State
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Custom Dashboard Buttons will perform bespoke actions when clicked.

Hint

Remember to provide an implementation for the Button's onClick property
Otherwise nothing will happen when the Button is clicked

Dashboard: Custom Buttons

Fork Fork

This example illustrates how to provide Custom Buttons in the Dashboard. There are 2 Custom Buttons:
- to show the time
- to change the theme (this button changes based on whether the Dark or Light Theme is currently applied)

Expand to see how the Custom Buttons are provided

The 2 Custom Buttons are defined in Dashboard Options:

dashboardOptions: {
  customDashboardButtons: [
    {
      label: (
        button: AdaptableButton<DashboardButtonContext>,
        context: DashboardButtonContext
      ) => {
        return context.adaptableApi.themeApi.getCurrentTheme() == 'light'
          ? 'Dark Theme'
          : 'Light Theme';
      },

      onClick: (
        button: AdaptableButton<DashboardButtonContext>,
        context: DashboardButtonContext
      ) => {
        context.adaptableApi.themeApi.getCurrentTheme() == 'light'
          ? context.adaptableApi.themeApi.loadDarkTheme()
          : context.adaptableApi.themeApi.loadLightTheme();
      },
      buttonStyle: {
        tone: 'accent',
        variant: 'raised',
      },
    },
    {
      label: 'Current Time',
      onClick: (
        button: AdaptableButton<DashboardButtonContext>,
        context: DashboardButtonContext
      ) => {
        context.adaptableApi.alertApi.showAlertInfo(
          'Current Time',
          new Date().toTimeString()
        );
      },
      buttonStyle: {
        tone: 'info',
        variant: 'text',
      },
    },
  ],
},

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Dashboard Custom Buttons',
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          return context.adaptableApi.themeApi.getCurrentTheme() == 'light'
            ? 'Dark Theme'
            : 'Light Theme';
        },

        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.themeApi.getCurrentTheme() == 'light'
            ? context.adaptableApi.themeApi.loadDarkTheme()
            : context.adaptableApi.themeApi.loadLightTheme();
        },
        buttonStyle: {
          tone: 'accent',
          variant: 'raised',
        },
      },
      {
        label: 'Current Time',
        onClick: (
          button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          context.adaptableApi.alertApi.showAlertInfo(
            'Current Time',
            new Date().toTimeString()
          );
        },
        buttonStyle: {
          tone: 'info',
          variant: 'text',
        },
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Setting Buttons Location

By default the Dashboard will display all Module and Custom buttons on the right hand side.

The buttonsLocation property of Dashboard Options can be used to display them on the left.

buttonsLocation

Default: right

right | left

Where in Dashboard to display Module and Custom Buttons

Set this property to 'left' if you would prefer to display the Dashboard Buttons in the left corner - before the Title.

// Show Module and Custom Buttons on left side of Dashboard
const adaptableOptions: AdaptableOptions = {
  dashboardOptions: {
    buttonsLocation: 'left',
  },
};

FAQ

Is there a limit to the amount of Module buttons that I can show? No, you can choose to show as many as you want.

Why can't I clear the Settings Panel Module Button? It keeps coming back! If alwaysShowInDashboard in set to true in Settings Panel Options, the Settings Panel button will always be visible

Can I hide Custom Dashboard Buttons at run-time? No, you can only set the visibility (and order) of Module Buttons. Custom Buttons have a hidden property which can be provided by developers to manage button visibility

AdapTable Resources

Adaptable Buttons

PreviousCustom Toolbars NextDashboard Modes