AdapTable Version:

Framework:

Extending Layouts

Summary

Layouts contain useful sets of column-related information
This means that they do not include Formats, Alerts and Reports etc
AdapTable provides a mechanism for users who find this restriction too constraining
Object Tags allow particular objects (e.g Formats) to be grouped with certain Layouts

At their core, Layouts are simply sets of column-related properties.

They contain details of Column visibility, order, sorting, grouping, aggregations, filters and related properties.

Caution

By default, Layouts do not contain other Adaptable Objects like styling, formatting, Alerts or Flashing Cells

This results in 2 types of "restrictions":

all Adaptable Objects in Adaptable State are automatically available in all Layouts, even though a user might prefer, for example, for some styles or Alerts to be applicable to one Layout but not another
developers cannot add custom objects, or properties, to their Layouts

AdapTable therefore allows for Layouts to be extended to meet these 2 limitations:

object tags - so that some additional AdapTable objects are "included" in the Layout
metadata - to enable developers to provide additional bespoke information in the Layout

AdapTable Objects

AdapTable allows Layouts to be extended to have knowledge of specific Adaptable Objects.

In other words developers can specify that a particular Report or Format Calculated Column is available in LayoutA but not LayoutB.

Object Tags

AdapTable Objects are extended into Layouts by using Object Tags.

Object Tags are available to AdapTable Objects in these Modules:

Module	Extendable Object
Alerts	`AlertDefinition`
Custom Sort	`CustomSort`
Flashing Cell	`FlashingCellDefinition`
Column Formatting	`FormatColumn`
FreeText Column	`FreeTextColumn`
Plus Minus	`PlusMinusNudge`
Schedules	`ReportSchedule` & `ReminderSchedule`
Shortcuts	`Shortcut`
Styled Columns	`StyledColumn`

This approach leverages the Tags property, which exists in every Adaptable Object, to list all the Layouts where the Object can be used - ideal for our purposes.

Deep Dive

Understanding Object Tags

Every Adaptable Object has a Tags property of type AdaptableObjectTag which can contain any value:

export type AdaptableObjectTag = string;

Note

Tags are designed to be an independent feature which be used for reasons other than extending Layouts

Hint

Because this is such a popular use case, the layoutTagOptions section of Layout Options contains a number of properties designed to help developers easily achieve this - see below for more details

Extended Layouts

Fork Fork

This demo illustrates how to leverage the tags property in Adaptable Objects to limit their scope to particular Layouts.
We provide 2 Layouts - First Layout and Second Layout with identical configuration
We also provide 5 Format Columns and 5 Styled Columns - all are given a Tag with the name of a Layout:
There are 5 Format Columns provided:
- License is bold - First Layout
- Language is blue where value is 'TypeScript' - First Layout
- Github Stars has a bespoke Style and a Display Format - Second Layout
- Whole row is orange where Language value is 'HTML' - Second Layout
- Date Columns are Italicised and have a Display Format - First Layout and Second Layout
Additionally we provide 5 Styled Columns:
- Name has a Badge Style - First Layout
- Open PRs has a Gradient Column - First Layout
- Closed Issues has a Percent Bar - Second Layout
- History has a different Sparkline Column in First Layout and Second Layout
We set 2 properties to true in the layoutTagOptions section of Layout Options to facilitate this:
- autoCheckTagsForLayouts - tells a Layout to check all Objects to see if they include a Tag that matches its Name
- autoGenerateTagsForLayouts - tells AdapTable to automatically add all Layouts to the Tags collection so they are visible in the UI

Expand to see the how the Object Tags are applied

Try It Out

Switch between the 2 Layouts to see the different Format Columns and Styled Columns applied
Edit one of the objects to change the Tags it contains and see how that affects the Layout

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Extended Layouts',
  layoutOptions: {
    layoutTagOptions: {
      autoCheckTagsForLayouts: true,
      autoGenerateTagsForLayouts: true,
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      PinnedToolbars: ['Layout'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'First Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'history',
            'license',
            'language',
            'github_stars',
            'open_pr_count',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'created_at',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'First Layout',
          AutoSizeColumns: true,
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'open_pr_count',
            'history',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'license',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Second Layout',
          ColumnSizing: {
            history: {Width: 175},
          },
          AutoSizeColumns: true,
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'name',
          BadgeStyle: {
            Badges: [
              {
                Style: {
                  BackColor: 'DarkGray',
                  BorderRadius: 6,
                },
              },
            ],
          },
          Tags: ['First Layout'],
        },
        {
          ColumnId: 'open_pr_count',
          GradientStyle: {
            CellRanges: [
              {
                Min: 0,
                Max: 254,
                Color: '#a52a2a',
              },
            ],
          },
          Tags: ['First Layout'],
        },
        {
          ColumnId: 'closed_issues_count',
          PercentBarStyle: {
            RangeValueType: 'Number',
            CellRanges: [
              {
                Min: 0,
                Max: 21706,
                Color: 'purple',
              },
            ],
            CellText: ['PercentageValue'],
          },
          Tags: ['Second Layout'],
        },
        {
          ColumnId: 'history',
          SparklineStyle: {
            options: {
              type: 'line',
              stroke: 'rgb(124, 255, 178)',
              strokeWidth: 2,
              padding: {
                top: 5,
                bottom: 5,
              },
              marker: {
                enabled: true,
                size: 3,
                shape: 'diamond',
              },
            },
          },
          Tags: ['First Layout'],
        },
        {
          ColumnId: 'history',
          SparklineStyle: {
            options: {
              type: 'area',
              fill: 'rgba(216, 204, 235, 0.3)',
              stroke: 'rgb(119,77,185)',
              axis: {
                type: 'category',
                stroke: 'rgb(204, 204, 235)',
              },
            },
          },
          Tags: ['Second Layout'],
        },
      ],
    },

    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-license',
          Scope: {
            ColumnIds: ['license'],
          },
          Style: {
            FontWeight: 'Bold',
          },
          Tags: ['First Layout'],
        },
        {
          Name: 'formatColumn-github_stars',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Style: {
            ForeColor: '#c2bb00',
            BackColor: '#f5f5f5',
          },
          DisplayFormat: {
            Formatter: 'NumberFormatter',
            Options: {
              Prefix: 'Stars: ',
            },
          },
          Tags: ['Second Layout'],
        },
        {
          Name: 'formatColumn-date',
          Scope: {
            DataTypes: ['date'],
          },
          Style: {
            FontStyle: 'Italic',
            Alignment: 'Center',
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'MMM do yyyy',
            },
          },
          Tags: ['First Layout', 'Second Layout'],
        },
        {
          Name: 'formatColumn-language',
          Style: {
            BackColor: '#87cefa',
          },
          Scope: {
            ColumnIds: ['language'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Is',
                Inputs: ['TypeScript'],
              },
            ],
          },
          Tags: ['First Layout'],
        },
        {
          Name: 'formatColumn-all',
          Style: {
            BackColor: 'orange',
          },
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: '[language] = "HTML"',
          },
          Tags: ['Second Layout'],
        },
      ],
    },
  },
};

Configuring Object Tags

Developers are able to set up Object Tags in AdapTable in order to extend Layouts.

Developer Guide

Setting up Object Tags to Extend Layouts

There are the steps required to extend Layouts by leveraging Object Tags:

const adaptableOptions: AdaptableOptions = {
  layoutOptions: {
    layoutTagOptions: {
      autoGenerateTagsForLayouts: true,
      autoCheckTagsForLayouts: true,
    },
  },
};

Set Auto Generate Tags for Layouts to true

Set autoGenerateTagsForLayouts in layoutTagOptions section of Layout Options) to true.

AdapTable will create an Object Tag entry for every Layout.

const adaptableOptions: AdaptableOptions = {
  layoutOptions: {
    layoutTagOptions: {
      autoGenerateTagsForLayouts: true,
      autoCheckTagsForLayouts: true,
    },
  },
};

Set Auto Check for Layouts to true

Set autoCheckTagsForLayouts in layoutTagOptions section of Layout Options) to true.

AdapTable will now check if an Object's Tags are available in the current Layout (i.e. include Layout name)

Layout: {
    CurrentLayout: 'First Layout',
    Layouts: [
      {
        TableColumns: ['name', 'language', 'description'],
        Name: 'First Layout',
      },
      {
        TableColumns: ['license', 'has_wiki', 'has_pages'],
        Name: 'Second Layout',
      },
    ],
  },

Create the Layout(s)

Define any required Layout(s) in Layout Initial State.

Create the Layouts as usual - nothing special is required.

FormatColumn: {
  FormatColumns: [
    {
      Name: 'FormatColumn-name-270',
      Scope: { ColumnIds: ['name'] },
      Style: { FontWeight: 'Bold' },
      Tags: ['First Layout'],
    },
    {
      Name: 'FormatColumn-text-271',
      Scope: { ColumnIds: ['text'] },
      Style: { FontStyle: 'Italic', },
      Tags: ['First Layout', 'Second Layout'],
    },
  ],
}

Add the Layout Names to Object Tags in Other Objects

Create other Initial Adaptable State as needed.

Add a Tags property to each Object that you wish to scope to a given Layout (or Layouts) only.

Provide the name of the Layout(s) as an array to the property.

Using Object Tags

End Users are also able to manage Layouts using Object Tags.

If Tags have been provided, each Object's Creation Wizard will include an additional step called 'Tags'.

This lists all the Tags which have been provided, together with a Checkbox.

Ticking the Checkbox will limit the scope of the Object just to the checked Layouts.

Layout Tag Options

Three properties in the layoutTagOptions section of Layout Options aid in the creation of Object Tags:

autoCheckTagsForLayouts

Boolean

AdapTable Automatically checks if an Adaptable Object's Tags are available in the current Layout

Set this property to true to tell AdapTable to check whether the Object Tags of each Adaptable Object includes the name of the current Layout.

Caution

If set to true, an Adaptable Object only displays in Layouts whose Name is included in the it's Tags property

Note

If an Adaptable Object has no Tags (and this property is true) then it is available in every Layout

// Only display Adaptable Objects which contain the name of the current Layout in the Tags property
const adaptableOptions: AdaptableOptions = {
  layoutOptions: {
    autoCheckTagsForLayouts: false,
  },
};

Hint

For a more granular application use the isObjectExtendedInLayout property instead
This provides a custom function that allows a per Object and Layout approach

autoGenerateTagsForLayouts

Boolean | function

Whether AdapTable should create an Object Tag for every Layout

A popular application of Object Tags is to use them to list the Layouts where they can be applied (and only there).

To facilitate this, AdapTable can be configured to automatically create a Tag for each Layout in AdapTable State.

Note

These are added to the list of Tags that users provide in the objectTags property of User Interface Options

The property is defined s follows:

autoGenerateTagsForLayouts?:
    | boolean
    | ((context: AutoGenerateTagsForLayoutsContext) => AdaptableObjectTag[]);

As can be seen it has 2 different return types:

Boolean

This simply returns true or false if AdapTable should generate a Tag for every Layout

// Generate a Tag for every Layout in Adaptable State
const adaptableOptions: AdaptableOptions = {
  layoutOptions: {
    autoGenerateTagsForLayouts: false,
  },
};

Function

For more advanced scenarios a bespoke function can be provided.

AdapTable will invoke this function each time a list of Tags is required.

Hint

Provide this property if you want to create Object Tags for just some of the available Layouts

The function receives an AutoGenerateTagsForLayoutsContext property and returns an array of AdaptableObjectTag.

The AutoGenerateTagsForLayoutsContext object contains 2 collections:

Property	Description
layouts	Layouts currently in Adaptable State
objectTags	Object Tags provided in User Interface Options
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

// Generate a Tag only for Layouts which include the word 'Custom' in the Name
const adaptableOptions: AdaptableOptions = {
  layoutOptions: {
    autoGenerateTagsForLayouts: (
      context: AutoGenerateTagsForLayoutsContext
    ) => {
      return context.layouts
        .filter(l => l.Name.includes('Custom'))
        .map(l => l.Name);
    },
  },
};

isObjectExtendedInLayout

Boolean function

Checks if the provided Adaptable Object is available in the given Layout

This property checks for each Adaptable Object whether it should be made available in the currently applied Layout.

It is provided for 2 different scenarios:

When Object Tags are being used to limit object scope but the autoCheckTagsForLayouts property is too broadly applied and a more granular approach is required
If Tags are not being used and a totally bespoke approach is preferred to limit Object / Layout scope

Hint
You can still provide this property if not using Object Tags

This is a boolean function which receives a context property of type LayoutExtendedContext defined as follows:

Property	Description
adaptableObject	Object being checked
layout	Current Layout
module	Current Adaptable Module
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

// Allow all ReadOnly Adaptable Objects to be available
// Limit the scope of other AdapTable Objects to Layouts which include the word 'Custom' in the Name
const adaptableOptions: AdaptableOptions = {
  layoutOptions: {
    isObjectExtendedInLayout: (context: LayoutExtendedContext) => {
      if (context.adaptableObject.IsReadOnly) {
        return true;
      }
      return context.layout.Name.includes('Custom');
    },
  },
};

Creating Extended Layouts

The createOrUpdateExtendedLayout function in Layout API enables creating or updating Extended Layouts.

createOrUpdateExtendedLayout

extendedLayout: ExtendedLayout

void

Receives an Extended Layout and saves it, and all extended Objects, to State

This function receives an Extended Layout and saves it to State.

The main, Layout, is saved with Layouts and any Extensions are saved to the associated parts of AdapTable State.

Caution

If the object already exists in State, then it is updated with what is passed into the Object

// Create an Extended Layout with a Styled Column
const extendedLayout: ExtendedLayout = {
  Layout: importedLayout, // the Layout object to import
  Extensions: [
    {
      Module: 'StyledColumn',
      Object: badgeStyle, // a previously defined Badge Style
    },
  ],
};
// Import the Extended Layout and then Select it to be current
adaptableApi.layoutApi.createOrUpdateExtendedLayout(extendedLayout);
adaptableApi.layoutApi.setExtendedLayout(extendedLayout);

Retrieving Extended Layouts

AdapTable also provides the getExtendedLayoutByName helper function in Layout API which can fetch an Extended Layout from AdapTable State.

Hint

This is particularly useful if wanting to share or clone an Extended Layout (see below)

getExtendedLayoutByName

layoutName: string

ExtendedLayout

Returns the full Extended Layout object with the given name

This function returns an Extended Layout with the provided name.

The return object is of type of ExtendedLayout defined as follows:

Property	Description
Extensions	Object to be included in the Layout
Layout	Layout being extended

// Get the full Extended Layout for the Current Layout and output to console
const layoutApi: LayoutApi = adaptableApi.layoutApi;
const extendedLayout: ExtendedLayout = layoutApi.getExtendedLayoutByName(
  layoutApi.getCurrentLayoutName()
);

By their nature, Extended Layouts are not stored as a single, composite object in Adaptable State.

Instead, the main properties are in the Layout object, but extended objects (e.g. Format Columns or Custom Sorts) are stored in the appropriate State section.

This means that it is not possible, easily, to share an Extended Layout as a single object.

However by using the 2 functions above - getExtendedLayoutByName and createOrUpdateExtendedLayout - it is possible to fetch an ExtendedLayout and make any changes to it as needed.

Hint

A better way to do this is via Referenced Team Sharing which allows a Layout to be shared between team members

This example has an initial Layout ('First Layout') extended with 4 Format Columns
A Custom Dashboard Button imports - and sets - a new Extended Layout ('Extended Layout') with 2 Styled Columns
When a Layout is Selected we send a System Status message with its contents (and log the full object to the console())

Try It Out

Click the button to import and set the new Extended Layout and note that you see the Layout and the 2 Styled Columns
Open the System Status popup to see the contents of the Extended Layout
Open the Console and switch between Layouts to see the full Extended Layout object

import {
  AdaptableButton,
  AdaptableOptions,
  CustomToolbarButtonContext,
  ExtendedLayout,
  StyledColumn,
  TableLayout,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Sharing Extended Layouts',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Import (and Select) Extended Layout',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              // Define an Extended Layout with 2 Styled Columns and Import and select it
              const badgeStyle: StyledColumn = {
                ColumnId: 'name',
                Tags: ['Imported Layout'],
                BadgeStyle: {
                  Badges: [
                    {
                      Style: {
                        BackColor: 'DarkGray',
                        BorderRadius: 6,
                      },
                    },
                  ],
                },
              };
              const gradientStyle: StyledColumn = {
                ColumnId: 'open_pr_count',
                Tags: ['Imported Layout'],
                GradientStyle: {
                  CellRanges: [
                    {
                      Min: 0,
                      Max: 254,
                      Color: '#a52a2a',
                    },
                  ],
                },
              };

              const importedLayout: TableLayout = {
                Name: 'Imported Layout',
                TableColumns: [
                  'name',
                  'license',
                  'language',
                  'github_stars',
                  'open_pr_count',
                ],
              };

              const extendedLayout: ExtendedLayout = {
                Layout: importedLayout,
                Extensions: [
                  {
                    Module: 'StyledColumn',
                    Object: badgeStyle,
                  },
                  {
                    Module: 'StyledColumn',
                    Object: gradientStyle,
                  },
                ],
              };

              context.adaptableApi.layoutApi.createOrUpdateExtendedLayout(
                extendedLayout
              );
              context.adaptableApi.layoutApi.setLayout(importedLayout.Name);
              // JW TODO   context.adaptableApi.layoutApi.setExtendedLayout(extendedLayout);
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
        ],
      },
    ],
  },
  layoutOptions: {
    layoutTagOptions: {
      autoCheckTagsForLayouts: true,
      autoGenerateTagsForLayouts: true,
    },
  },
  initialState: {
    Dashboard: {
      ModuleButtons: [
        'Layout',
        'FormatColumn',
        'StyledColumn',
        'SystemStatus',
        'SettingsPanel',
      ],
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['ButtonToolbar', 'Layout', 'SystemStatus'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'First Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'license',
            'language',
            'github_stars',
            'open_pr_count',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'created_at',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'First Layout',
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-license',
          Scope: {
            ColumnIds: ['license'],
          },
          Style: {
            FontWeight: 'Bold',
          },
          Tags: ['First Layout'],
        },
        {
          Name: 'formatColumn-date',
          Scope: {
            DataTypes: ['date'],
          },
          Style: {
            FontStyle: 'Italic',
            Alignment: 'Center',
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'MMM do yyyy',
            },
          },
          Tags: ['First Layout'],
        },
        {
          Name: 'formatColumn-language',
          Style: {
            BackColor: '#87cefa',
          },
          Scope: {
            ColumnIds: ['language'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Is',
                Inputs: ['TypeScript'],
              },
            ],
          },
          Tags: ['First Layout'],
        },
        {
          Name: 'formatColumn-all',
          Style: {
            BackColor: 'orange',
          },
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: '[language] = "HTML"',
          },
          Tags: ['First Layout'],
        },
      ],
    },
  },
};

Cloning Extended Layouts

Extended Layouts, like regular Layouts, can be be cloned.

AdapTable will clone the underlying Layout and all the objects that are being extended (e.g. Format Columns or Styled Columns).

This is done using the cloneExtendedLayout function in Layout API.

cloneExtendedLayout

layout: ExtendedLayout, newName: string

ExtendedLayout

Clones an Extended Layout

This function returns an Extended Layout, with the given name, which clones the one provided.

The return object is of type of ExtendedLayout defined as follows:

Property	Description
Extensions	Object to be included in the Layout
Layout	Layout being extended

// Retrieve the "Hello" Layout and clone it with the new name "Goodbye"
const layoutApi: LayoutApi = adaptableApi.layoutApi;
const layoutToExtend: ExtendedLayout =
  layoutApi.getExtendedLayoutByName('Hello');
const extendedLayout: ExtendedLayout = layoutApi.cloneExtendedLayout(
  layoutToExtend,
  'Goodbye'
);

Caution

Both original and cloned Layouts will now reference the same extended objects
This means that changing that object (e.g. a Format Column) will be reflected in both Layouts

Cloning Extended Layouts

Fork Fork

This example has an Extended Layout ('Original Layout') which we clone

Try It Out

Click first the button to clone (and then set) the Extended Layout and note that all extended objects have been cloned
Click the second button (which becomes enabled) to change the style for the Language Column
Switch Layouts and note that you see the new style in the original Layout also

import {
  AdaptableButton,
  AdaptableOptions,
  AdaptableStyle,
  CustomToolbarButtonContext,
  ExtendedLayout,
  FormatColumn,
  FormatColumnApi,
  LayoutApi,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Cloning Extended Layouts',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Clone Extended Layout',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const layoutApi: LayoutApi = context.adaptableApi.layoutApi;
              const layoutToExtend: ExtendedLayout | undefined =
                layoutApi.getExtendedLayoutByName('Original Layout');
              if (layoutToExtend) {
                const clonedLayout: ExtendedLayout | false =
                  layoutApi.cloneExtendedLayout(
                    layoutToExtend,
                    'Cloned Layout'
                  );
                if (clonedLayout !== false) {
                  context.adaptableApi.layoutApi.setLayout(
                    clonedLayout.Layout.Name
                  );
                }
              }
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
          {
            label: 'Change Language Style',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const formatColumnApi: FormatColumnApi =
                context.adaptableApi.formatColumnApi;
              const formatColumn: FormatColumn =
                formatColumnApi.getFormatColumnsForColumnId('language')[0];
              if (formatColumn) {
                const style: AdaptableStyle | undefined = {
                  BackColor: 'Green',
                };
                formatColumn.Style = style;
                formatColumnApi.editFormatColumn(formatColumn);
              }
            },
            buttonStyle: {
              tone: 'success',
              variant: 'text',
            },
            disabled: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              return context.adaptableApi.layoutApi.getLayouts().length == 1;
            },
          },
        ],
      },
    ],
  },
  layoutOptions: {
    layoutTagOptions: {
      autoCheckTagsForLayouts: true,
      autoGenerateTagsForLayouts: true,
    },
  },
  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['ButtonToolbar', 'Layout'],
        },
      ],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Original Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'license',
            'language',
            'github_stars',
            'open_pr_count',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'created_at',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Original Layout',
          AutoSizeColumns: true,
        },
      ],
    },
    FormatColumn: {
      FormatColumns: [
        {
          Name: 'formatColumn-license',
          Scope: {
            ColumnIds: ['license'],
          },
          Style: {
            FontWeight: 'Bold',
          },
          Tags: ['Original Layout'],
        },
        {
          Name: 'formatColumn-date',
          Scope: {
            DataTypes: ['date'],
          },
          Style: {
            FontStyle: 'Italic',
            Alignment: 'Center',
          },
          DisplayFormat: {
            Formatter: 'DateFormatter',
            Options: {
              Pattern: 'MMM do yyyy',
            },
          },
          Tags: ['Original Layout'],
        },
        {
          Name: 'formatColumn-language',
          Style: {
            BackColor: '#87cefa',
          },
          Scope: {
            ColumnIds: ['language'],
          },
          Rule: {
            Predicates: [
              {
                PredicateId: 'Is',
                Inputs: ['TypeScript'],
              },
            ],
          },
          Tags: ['Original Layout'],
        },
        {
          Name: 'formatColumn-all',
          Style: {
            BackColor: 'orange',
          },
          Scope: {
            All: true,
          },
          Rule: {
            BooleanExpression: '[language] = "HTML"',
          },
          Tags: ['Original Layout'],
        },
      ],
    },
  },
};

Meta Data

Sometimes developers want to extend Layouts by including their own custom bespoke properties and objects.

Note

A common use case is to include the Author or the Team or other organisation-specific details

This is done by using the Metadata property (of type any) which is in the Adaptable Object type, from which the Layout object derives.

Caution

Unlike most properties in the Layout, MetaData can only be added at design-time or programatically

Layouts With Metadata

Fork Fork

This example shows how to use Layout Meta data. We add a Metadata property to 4 layouts:
- First Layout and Third Layout - have Metadata property of 'Large' - and they show the Dashboard, open the Tool Panel and use dark theme
- Second Layout and Fourth Layout - have Metadata property of 'Small' - and they hide the Dashboard, close the Tool Panel and use light dark theme

Try It Out

Switch between the Layouts (you might need to use the status bar when the Dashboard is hidden!) to see how we listen to MetaData and change the grid accordingly

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

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Layout Meta Data',
  initialState: {
    Dashboard: {
      ModuleButtons: ['Layout', 'SettingsPanel'],
      PinnedToolbars: ['Layout'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'First Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'license',
            'language',
            'github_stars',
            'open_pr_count',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'First Layout',
          AutoSizeColumns: true,
          Metadata: 'Large',
        },
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'open_pr_count',
            'closed_issues_count',
            'created_at',
            'updated_at',
            'pushed_at',
            'license',
            'has_wiki',
            'github_watchers',
            'description',
            'open_issues_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Second Layout',
          RowGroupedColumns: ['language'],
          AutoSizeColumns: true,
          Metadata: 'Small',
        },
        {
          Name: 'Third Layout',
          PivotColumns: ['license'],
          PivotGroupedColumns: ['language'],
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'count',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
          ],
          Metadata: 'Large',
        },
        {
          Name: 'Fourth Layout',
          PivotColumns: [],
          PivotGroupedColumns: ['license'],
          SuppressAggFuncInHeader: true,
          PivotAggregationColumns: [
            {
              ColumnId: 'github_watchers',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'github_stars',
              AggFunc: 'sum',
            },
            {
              ColumnId: 'Total',
              AggFunc: 'sum',
            },
          ],
          Metadata: 'Small',
        },
      ],
    },
  },
};

PreviousSaving Layouts NextDefault Layouts

Framework: