User Interface Config

The User Interface section of Predefined Configuration.

It is defined as follows:

PropertyDescription
CheckboxColumnsNames of (boolean) Columns which will be rendered with a checkbox (editable if column is editable)
ColorPaletteAn optional list of colours that will be displayed in the Colour Picker in place of the default set that ships with Adaptable.
ColumnMenuItemsA collection of UserMenuItem objects to be added to the Column Header Menu (the one that appears as a dropdown in each Column Header).
ContextMenuItemsA collection of UserMenuItem objects to be added to the Context Menu (the one that appears when you right-click on a cell, or cells, in the Grid).
EditLookUpItemsA list of Columns which, when being edited, will automatically display a Dropdown allowing the user easily to select a value.
PermittedValuesItemsAn optional list of values which are permitted for a given column.
StyleClassNamesAn optional list of css styles (existing and available) that can be used when creating styles in Adaptable (e.g. in the Conditional Styles, Format Column and other functions that use an AdaptableStyle).

As can be seen, this section of Config contains a number of useful properties and collections.

ColorPalette

This is an optional list of colours that will be displayed in the Colour Picker in place of the default set that ships with Adaptable.

note

It's used in Functions which create an Adptable Style (e.g. Conditional Style, Format Column, Flashing Cell)

tip

Provide a list of hex values as a string array which AdapTable will convert into colours.

export default {
UserInterface: {
ColorPalette: ['660033', 'CCFFFF', 'FFCCFF', 'B2FF66', 'FF3333', 'FFFFFF'],
},
} as PredefinedConfig;

ColumnMenuItems

A collection of UserMenuItem objects to be added to the Column Header Menu

note

There is no limit on the number of UserMenuItems that can be provided

A UserMenuItem contains the following properties:

PropertyDescription
IconOptional icon to show in the Menu Item
LabelThe text that will appear in the Menu Item
SubMenuItemsArray of Menu Items, enabling creation of (limitless levels of) sub menus
UserMenuItemClickedFunctionUser Function that runs when a Menu Item is selected by the User
UserMenuItemLabelFunctionUser Function that can provide alternative run-time value for a Menu Item label
UserMenuItemShowPredicatePredicate User Function that evaluates whether a Menu Item should display
tip

To control which, if any, of the pre-shipped Adaptable Column Menu items are displayed use the showAdaptableColumnMenu property in UserInterfaceOptions.

// Predefined Config
export default {
UserInterface: {
ColumnMenuItems: [
{
Label: 'Mimise Dashboard',
UserMenuItemClickedFunction: 'minimizeDashboard',
},
{
Label: 'Set System Status',
SubMenuItems: [
{
Label: 'Set Error',
UserMenuItemShowPredicate: 'isSortable',
UserMenuItemClickedFunction: 'setError',
},
{
Label: 'Set Warning',
UserMenuItemShowPredicate: 'isSortable',
UserMenuItemClickedFunction: 'setWarning',
},
],
},
],
},
} as PredefinedConfig;
// Adaptable Options
const adaptableOptions: AdaptableOptions = {
userFunctions: [
{
type: 'UserMenuItemClickedFunction',
name: 'minimizeDashboard',
handler() {
adaptableApi.dashboardApi.minimise();
},
},
{
type: 'UserMenuItemClickedFunction',
name: 'setError',
handler() {
adaptableApi.systemStatusApi.setErrorSystemStatus('System Down');
},
},
{
type: 'UserMenuItemClickedFunction',
name: 'setWarning',
handler() {
adaptableApi.systemStatusApi.setWarningSystemStatus('System Slow');
},
},
{
type: 'UserMenuItemShowPredicate',
name: 'isSortable',
handler(menuInfo) {
return menuInfo.Column.Sortable;
},
},
],

See UserMenuItemClickedFunction, UserMenuItemLabelFunction and UserMenuItemShowPredicate for more in-depth Help on these User Functions.

See Column Menu for full details on this topic.

ContextMenuItems

A collection of UserMenuItem objects to be added to the Context Menu

note

There is no limit on the number of UserMenuItems that can be provided

tip

To control which, if any, of the pre-shipped Adaptable Column Menu items are displayed use the showAdaptableColumnMenu property in UserInterfaceOptions.

See Column Menu section above for more details.

EditLookUpItems

This is a list of Columns which, when being edited, will automatically display a Dropdown allowing the user easily to select a value.

Order of Values in Dropdown

Column values will be displayed in the dropdown will be shown according to the following logic:

  1. LookUpValues: You can provide a list of LookUpValues that will be displayed in the Dropdown. This list can be either 'hardcoded' or returned from a function.

  2. PermittedValues: If no LookUpValues are provided, Adaptable will show a list of PermittedValues (if one has been provided).

  3. Distinct Column Values: Otherwise, Adaptable will fetch all the distinct values in the Column and populate the Dropdown with them.

warning

The column must also be marked as editable in the column schema for the Dropdown to appear.

An EditLookupItem contains the following properties:

PropertyDescription
GetColumnValuesFunctionThe name of the function which will run each time Look Up Values are required.
LookUpValuesAny particular values to show in the Lookup - the list can be either hard-coded or returned by a function.
ScopeWhich Column(s) will show the Edit Lookup Mandatory

As can be seen, there are 2 options for providing Edit Look Up Values:

  • Hard Coded List - via the LookUpValues property which accepts an array
  • JavaScript Function - via the GetColumnValuesFunction which will be provided by developers and invoked by AdapTable
caution

Whichever method you provide you must also provide Scope so AdapTable knows which column(s) to provide the values for.

note

The order of evaluation of Scope is first ColumnIds and then DataTypes.

LookUpValues

This is the simplest way - simply provide a list of values in an array.

export default {
UserInterface: {
EditLookUpItems: [
{
Scope: {
ColumnIds: ['country'],
},
LookUpValues: ['UK', 'France', 'Italy', 'Germany'],
},
],
},
} as PredefinedConfig;

GetColumnValuesFunction

For more complicated scenarios you can provide a JavaScript function that will be invoked by AdapTable for all the columns in the Scope.

As with all instances where a JavaScript function needs to be provided to AdapTable, this is done in 2 steps:

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

  1. Provide a custom, named GetColumnValuesFunction implementation in the User Functions section of Adaptable Options.

  2. Reference that function by name in Predefined Config.

export default {
UserInterface: {
EditLookUpItems: [
{
Scope: {
DataTypes:['String']
} ,
GetColumnValuesFunction: 'GetLookUpValues',
},
],
},
} as PredefinedConfig;
// Adaptable Options
const adaptableOptions: AdaptableOptions = {
userFunctions: [
{
name: 'GetLookUpValues',
type: 'GetColumnValuesFunction',
handler(column: AdaptableColumn) {
return mockServer.getLookUpValuesForStringCols(column);
},
},
],

PermittedValuesItems

Option to tell AdapTable which values to display in a given column's Filter, Expression Editor, Bulk Update dropdown etc..

tip

Leave this unset for AdapTable to retrieve a list of distinct column values automatically

note

If this property is set, then only these values will appear when distinct column values are required.

A Permitted Values Item contains the following properties:

PropertyDescription
GetColumnValuesFunctionThe name of the function which will run each time Permitted values are required.
PermittedValuesHardcoded list of Permitted Values that will be shown in the Column Filter and when building a Query.
ScopeScope where Permitted Values will show Mandatory

There are 2 options for providing Permitting Values:

  • Hard Coded List - via the PermittedValues property which accepts an array
  • JavaScript Function - via the GetColumnValuesFunction which will be provided by developers and invoked by AdapTable
caution

Whichever method you provide you must also provide Scope so AdapTable knows which column(s) to provide the values for.

note

The order of evaluation of Scope is first ColumnIds and then DataTypes.

PermittedValues

This is the simplest way - simply provide a list of values in an array.

export default {
UserInterface: {
PermittedValuesColumns: [
{
Scope: {
ColumnIds: ['status'],
},
PermittedValues: ['Rejected', 'Pending', 'Completed'],
},
],
},
} as PredefinedConfig;

GetColumnValuesFunction

For more complicated scenarios you can provide a JavaScript function that will be invoked by AdapTable for all the columns in the Scope.

As with all instances where a JavaScript function needs to be provided to AdapTable, this is done in 2 steps:

note

Predefined Config is stored as JSON so cannot include JavaScript functions (as they cannot be stringifed)

  1. Provide a custom, named GetColumnValuesFunction implementation in the User Functions section of Adaptable Options.

  2. Reference that function by name in Predefined Config.

export default {
UserInterface: {
PermittedValuesColumns: [
{
Scope: {
All: true,
},
GetColumnValuesFunction: 'GetUniqueColumnValues',
},
],
},
} as PredefinedConfig;
// Adaptable Options
const adaptableOptions: AdaptableOptions = {
userFunctions: [
{
name: 'GetUniqueColumnValues',
type: 'GetColumnValuesFunction',
handler(column: AdaptableColumn) {
return mockServer.getUniqueColumnValues(column);
},
},
],

StyleClassNames

An optional list of css styles (existing and available) that can be used when creating styles in Adaptable (e.g. in the Conditional Style, Format Column, Flashing Cell and other fucntions that use an Adaptable Style.

important

This allows you quickly to select the css style name instead of having to build a style manually.

When this collection is not empty the Syle Creation dialog will include a 'Use Style Class Name' checkbox.

note

If that checkbox is checked, the dialog will displa a dropdown containing the contents of this collection.

export default {
UserInterface: {
StyleClassNames: ['evenRowStyle', 'oddRowStyle', 'allRowStyle '],
},
} as PredefinedConfig;
// in css file
.evenRowStyle {
background: lightgrey !important;
font-weight: normal !important;
font-style: italic !important;
}
.oddRowStyle {
background: lightgreen !important;
font-weight: normal !important;
font-style: italic !important;
}
.allRowStyle {
background: pink !important;
font-weight: normal !important;
font-style: italic !important;
}
warning

You must ensure that any style name you list here is available to Adaptable in a stylesheet that you provide

RowStyles

A list of RowStyles which allow you to specifiy how Adaptable should look.

tip

You can choose to style All, Odd or Even rows (the last 2 are used when wanting alternating row styles).

note

This is particularly useful for when you create a custom theme for Adaptable and want the grid to share the same colour scheme.

The RowStyle object contains 2 properties:

  • Style: the Adaptable Style object - can be either a classname or a set of style-related properties.

  • RowType: specifies which rows the Style will be applied on - can be 'All', 'Odd' or 'Even'

caution

If this property is left empty (the default) then the row style in the Grid theme will be used

// Create Even and Odd Row Styles
// Even Row style uses the 'ClassName' property of Adaptable Style to leverage
// a Style provided in CSS (which we provide below)
// Odd Row style is created in line using various properties of Adaptable Style
export default {
UserInterface: {
RowStyles: [
{
Style: {
ClassName: 'evenRowStyle',
},
RowType: 'Even',
},
{
Style: {
ForeColor: 'lightyellow',
BackColor: 'brown',
FontStyle: 'Italic',
FontWeight: 'Bold',
},
RowType: 'Odd',
},
],
},
} as PredefinedConfig;
// in css file
.evenRowStyle {
background: lightgrey !important;
font-weight: normal !important;
font-style: italic !important;
}

CheckboxColumns

Checkbox Columns are boolean columns where AdapTable will automatically display a checkbox - checked if the cell value is true.

note

If the Column is ReadOnly the checkbox is disabled but the check mark remains visible

All that is required is simply to provide a list of boolean columnIds which should display a checkbox.

export default {
UserInterface: {
CheckboxColumns: ['isLive', 'isValid', 'isActive '],
},
} as PredefinedConfig;

When a checkbock is clicked / unclicked the CheckboxColumnClickedEvent is fired by AdapTable.