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:

ReactFrameworkComponent

The ReactFrameworkComponent is a function (called with an object that gives you access to the Adaptable Api) that returns a ReactElement:

export type ReactFrameworkComponent = ({
adaptableApi,
}: {
adaptableApi: AdaptableApi;
}) => ReactElement;

This function will be automatically created by AdapTable each time the ToolPanel becomes visible.

note

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

// Define the Component
const QuickSearchCustomComponent = (props: any) => {
const [searchText, setSearchText] = useState("");
useEffect(() => {
console.log('mount')
return () => {
// since this is just a React component,
// you can use useEffect to perform different actions on mount/unmount
console.log('unmount')
}
}, [])
return (
<div>
CUSTOM QuickSearch
<input
value={searchText}
style={{ padding: "6px 10px", marginLeft: 5 }}
onChange={(event) => {
const value = event.target.value;
setSearchText(value);
props.onSearchTextChange(value);
}}
/>
</div>
);
};
// Reference it in frameworkComponent in Custom ToolPanel
const adaptableOptions: AdaptableOptions = {
toolPanelOptions: {
customToolPanels: [
{
name: "CustomQuickSearch",
title: "Custom Quick Search",
frameworkComponent: ({ adaptableApi }) => {
// return any valid ReactElement
return (
<QuickSearchCustomComponent
onSearchTextChange={(searchText: string) => {
adaptableApi.quickSearchApi.runQuickSearch(searchText);
}}
/>
);
},
},
],
}
}
// Reference the Custom ToolPanel in Dashboard Config
// Set it (and Export) to be expanded at startup
const predefinedConfig: PredefinedConfig: {
ToolPanel: {
ToolPanels: [
{
Name: 'CustomQuickSearch',
VisibilityMode: 'expanded',
},
{
Name: 'Layout',
},
{
Name: 'Export',
VisibilityMode: 'expanded',
},
{
Name: 'SmartEdit',
VisibilityMode: 'collapsed',
},
]
},
}

Further Information