AdapTable Version:

Framework:

Adaptable Buttons

Summary

Adaptable Buttons are widely used in AdapTable and are highly configurable and flexible
Buttons can appear standalone in AdapTable (e.g in the Dashboard, ToolPanel or Action Columns)
Buttons can also appear in an Adaptable Form (e.g. when using Alerts, Custom Export Destinations or DataSets)

An AdapTable Button is designed to be extremely configurable and styleable.

It contains many optional properties which can be provided as required.

The properties that use a function always receive the same 2 parameters when invoked (and returns an appropriate value):

the button itself (with a generic ButtonContext)
an appropriate ButtonContext (matching the one of the Button)

Button Properties

The Adaptable Button has a number of properties and is defined as follows:

Property	Description
buttonStyle	Style for Button - can be object or function that provides a `ButtonStyle` object
disabled	Function that disables / enables the button based on its evaluation result
hidden	Function which sets whether Button is hidden
icon	Icon for Button - can be object or function that provides a `AdaptableIcon` object
label	Label for Button - can be string or function that provides string
onClick	Function to invoke when button is clicked
tooltip	Tooltip for Button - can be string or function that provides string

onClick

onClick is the function which is called when the Button is clicked and returns void:

onClick?: (button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => void;

Note

Although not mandatory, this function should nearly always be provided in practice

label

The text to show as the Button's caption.

The property can return either a string or a function which returns a string:

label?: string |
  (((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => string);

buttonStyle

Provides the Button Style for the Button.

The property can return either a ButtonStyle object or a function which returns a ButtonStyle:

buttonStyle?: ButtonStyle |
  ((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => ButtonStyle);

toolTip

The text to use as the Button's Tooltip.

The property can return either a string or a function which returns a string:

toolTip?: string |
  ((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => string);

hidden

Function that returns whether or not the Button will display.

Caution

If this property is not provided the Button will always be displayed

The function is invoked when the Button is about to be rendered - allowing you to decide whether it should display - and returns a boolean:

hidden?: (button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => boolean;

disabled

Function that disables / enables the button based on its evaluation result:

disabled?: (button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => boolean;

icon

The property can return either an AdaptableIcon or a function which returns an AdaptableIcon:

icon?: AdaptableIcon | ((button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE) => AdaptableIcon);

Find Out More

See the Guide to Adaptable Icons for details on how to provide custom icons

Button Style

AdapTable provides a ButtonStyle object which defines how a Button will be visually rendered.

The object has 3 properties:

Property	Description	Default
className	CSS Classname to use for the Button
tone	Button's Tone - values: 'success', 'error', 'neutral', 'none', 'warning', 'info', 'accent'	'neutral'
variant	How Button appears - values: 'text', 'outlined', 'raised'	'outlined'

Deep Dive

Understanding Button Style

Tone

The tone provides the colour for the button using the theme's CSS Variables. The options are:

Tone Value	CSS Variables
success	--ab-color-success
error	--ab-color-error
neutral	--ab-color-text-on-primary
none	inherit
warning	--ab-color-warn
info	--ab-color-info
accent	--ab-color-accent

Variant

The variant property specifies how the Button will appear and has 3 options:

Variant Value	Behaviour
text	Displays the caption
outlined	Provides a border
raised	Accentuates the button

Button Contexts

All the functions that the Button can receive, include a Context parameter.

Each implementation of the Adaptable Button in AdapTable will be provided with its own, bespoke, context property that contains information relevant to that particular use case.

Note

In addition the button argument is of generic type of the same Context

button: AdaptableButton<CONTEXT_TYPE>, context: CONTEXT_TYPE

There are 8 Context Types - for 8 different use cases where Adaptable Buttons are provided:

Class	Module	When Used	Base Class
`ActionColumnContext`	Action Column	In the generated buttons	`BaseContext`
`AlertFormContext`	Alert	When a Notification is displayed	`FormContext`
`ExportFormContext`	Export	In Custom Destination Forms	`FormContext`
`DashboardButtonContext`	Dashboard	In Dashboard Buttons	`BaseContext`
`CustomToolbarButtonContext`	Custom Toolbar	Buttons in Custom Toolbars	`BaseContext`
`ToolPanelButtonContext`	ToolPanel	In ToolPanel Buttons	`BaseContext`
`CustomToolPanelButtonContext`	Custom ToolPanel	Buttons in Custom ToolPanels	`BaseContext`
`DataSetFormContext`	DataSet	When a DataSet displays a Form	`FormContext`

Deep Dive

Understanding Button Context

Base Context

All Context classes derive from a base class (BaseContext) which simply contains a reference to the Adaptable API, the Adaptable Id and the current user:

Property	Description
adaptableApi	Adaptable Api object
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`
adaptableId	Id of current AdapTable instance
adaptableStateKey	Current Adaptable State Key
clientTimestamp	Time on user's computer
userName	Name of Current User

Form Context

The Context Classes - which are used in Forms - derive from FormContext (which itself derives from BaseContext) and contains all the form data that was inputted by the user:

Property	Description
formData	Adaptable Form Data
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Action Column

When using a button in an Action Column the handler receives an ActionColumnContext object which is defined as follows:

Property	Description
actionColumn	Action Column in question
data	The current row's data
primaryKeyValue	Primary Key Value in current row
rowNode	Current AG Grid Row Node
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Alert

When using a button in an Alert form the handler receives an AlertFormContextobject which is defined as follows:

Property	Description
alert	Alert that has been triggered
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Export

When using a button in a Custom Destination form the handler receives an ExportFormContext object which is defined as follows:

Property	Description
customDestination	Custom Export destination
report	The exported report
reportData	The data in the report
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Dashboard

When showing a Dashboard Button the handler receives an DashboardButtonContext object defined as follows:

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

Custom Toolbar

When rendering a Custom Toolbar Button the handler receives an CustomToolbarButtonContext object defined as follows:

Property	Description
customToolbar	Custom Toolbar which hosts the Button
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

ToolPanel

When showing a Tool Panel Button the handler receives an ToolPanelButtonContext object defined as follows:

Property	Description
toolPanelState	Current ToolPanel State
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

Custom ToolPanel

When showing a button in a Custom ToolPanel the handler receives an CustomToolPanelButtonContext object defined as follows:

Property	Description
customToolPanel	The Custom ToolPanel which contains the button
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

DataSet

When a DataSet includes a Form, the buttons receive a DataSetFormContext object defined as follows:

Property	Description
dataSet	The DataSet which triggered the Form
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`

PreviousSupplying an Adaptable Style NextConfiguring AdapTable Forms

Framework: