Custom ToolPanels

Adaptable allows Custom ToolPanels to be included in the Adaptable ToolPanel.

They are defined in the customToolPanels property in the ToolPanel Options section of Adaptable Options.

A Custom ToolPanel can be given 2 sets of content:

AngularFrameworkComponent

AdapTable automatically creates the AngularFrameworkComponent each time the ToolPanel becomes visible.

note

Similarly, when the ToolPanel is closed, AdapTable will automatically destroy the component

export type AngularFrameworkComponent<T = unknown> = {
type: T;
onSetup?: ({adaptableApi}: {
adaptableApi: AdaptableApi;
}) => Partial<T>;
};

type property

A standard Angular component class (instance of https://angular.io/api/core/Type).

It is automatically instantiated or destroyed by AdapTable at runtime.

onSetup() function

If specified, this (optional) function is called after each component instantiation and the returned object properties are assigned to the component instance.

This dynamic "patch" provides a way to customize at runtime any standard or reusable component.

Adaptable Api Injection Token

An InjectionToken for the Adaptable Api is provided if communication with Adaptable is required in the component

const ADAPTABLE_API = new InjectionToken<AdaptableApi>('ADAPTABLE_API')

Putting It Together

There are just 2 steps required to create Custom ToolPanel content:

tip

The code snippets are taken from a much larger example in the Angular Demo Application.

1. Create Custom Component

This is a standard Angular Component (which can itself wrap 3rd party UI Components).

In this example we provide 'MaterialMenuComponent' - a component wrapping an Angular Material Menu in a custom menu.

note

The implementation is entirely generic and reusable, as the I/O params are set via the onSetup() function

import { Component, Inject, OnInit } from '@angular/core';
import {
ADAPTABLE_API,
AdaptableApi,
} from '@adaptabletools/adaptable-angular-aggrid';
@Component({
selector: 'app-material-menu',
template: `
<button
mat-button
[matMenuTriggerFor]="menu"
[disabled]="isDisabled()"
class="ab-SimpleButton ab-SimpleButton--font-weight=normal ab-SimpleButton--variant-raised ab-SimpleButton--tone-accent"
>
Layout Menu Shortcut
</button>
<mat-menu #menu="matMenu">
<button
*ngFor="let item of menuItems"
mat-menu-item
(click)="onClick(item)"
>
{{ item }}
</button>
</mat-menu>
`,
styles: [
`
button[mat-button]:disabled {
background: initial;
}
`,
],
})
export class MaterialMenuComponent {
menuItems: string[] = [];
constructor(@Inject(ADAPTABLE_API) private adaptableApi: AdaptableApi) {
// AdaptableApi is provided by AdapTable
}
protected onClick(item: string) {
this.onItemClick(item);
}
onItemClick(item: string) {
// overwritten by onSetup() function
}
isDisabled() {
// overwritten by onSetup() function
return false;
}
}

2. Create Custom ToolPanel

Import the Component and create a Custom ToolPanel definition.

In the definition reference the Component in the type property (of frameworkComponent) and (optionally) provide an implementation of the onSetup() function:

import { ButtonToggleComponent } from './custom-toolpanels/button-toggle.component';
.....
const adaptableOptions: AdaptableOptions = {
toolPanelOptions: {
customToolPanels: [
{
name: 'LayoutMenu',
title: 'Layout menu',
frameworkComponent: {
// custom component providing Angular Material menu in custom ToolPanel menu
type: MaterialMenuComponent,
onSetup:({adaptableApi}): Partial<MaterialMenuComponent> => {
return {
// component interacts with adaptableApi
menuItems: adaptableApi.layoutApi.getAllLayout().map(l => l.Name),
onItemClick: layoutName => {
adaptableApi.layoutApi.setLayout(layoutName);
},
// disabled state is updated by another custom ToolPanel (slideToggle)
isDisabled: () => {
return this.isLayoutShortcutMenuDisabled;
},
};
},
},
},
],
}
}

Further Information