User Interface Options

Options for managing the User Interface in Adaptable.

Includes options for managing UI Elements in AdapTable, creating Action Columns, Permitted Values, the Color Palette and other User Interface elements.

Also includes properties for managing the Date Picker.

The full list of options is as follows:

User Interface Options Properties

PropertyDescriptionDefault
actionColumnsColumns which contain an AdapTable Button - used for performing Actions
applicationIconThe application icon to appear in Dashboard and elsewhere (e.g. OpenFin notifications)null
bulkUpdatePermittedValuesCustom column values for editing via bulk-update. When not defined it defaults to permittedValues.
colorPaletteColours to display in Colour Picker (in place of AdapTable's default set)
customSortPermittedValuesCustom column values for defining custom sort. When not defined it defaults to permittedValues.
dateInputOptionsOptions for managing and customizing date inputs in AdapTable
editableCellStyleStyle to set for editable cells
editLookUpItemsDropdown values displayed when column is being edited. When not defined it defaults to permittedValues.
filterPermittedValuesDropdown values for filter options inside floating and header filter. When not defined it defaults to permittedValues.
permittedValuesList of values which are permitted (e.g. to show in filter)
readOnlyCellStyleStyle to set for non-editable cells
showDocumentationLinksProvide links to AdapTable documentation (in Module popups and Expression Editor)true
styleClassNamesOptional list of CSS styles that can be used when creating Adaptable Styles in Adaptable (e.g. in Conditional Style, Format Column and other Modules)
useCustomMacLikeScrollbarsShow Mac-like scrollbars; size is configurable via CSS variable --ab-custom-scrollbar-size (default: 10px)false

Permitted Values

By default AdapTable fetches the distinct values for a column on demand from the grid when required, e.g. when opening a Column Filter or running Bulk Update.

However this can be overriden by populating the permittedValues property in User Interface Options.

tip

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

note

Only the values listed in this property will appear whenever a set of column values is required

The permittedValues object is of type CellValuesList which is defined as follows:

@import file="../../api/cellvalueslist.md" section="Properties"

note

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

As can be seen there are 2 options for providing Permitting Values - a list or via a function.

caution

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

Hard Coded List

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

userInterfaceOptions = {
permittedValues: [
{
scope: {
ColumnIds: ['country'],
},
values: ['France', 'United States', 'United Kingdom', 'Italy', 'Germany', 'Spain'],
},
],
}

JavaScript function

Alternatively provide a function which takes an AdaptableColumn as an argument and returns an array of values:

userInterfaceOptions = {
permittedValues: [
{
scope: {
ColumnIds: ['status'],
},
values: (column: AdaptableColumn) => {
return ['Rejected', 'Dead', 'Active'];
},
},
],
}

Edit Look Up Items

AdapTable can create dropdowns dynamically when editing cells.

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

  1. EditLookUpItems: You can provide a list of editLookUpItems 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.

Like Permitted Values, editLookUpItems is of type CellValuesList and defined as follows:

@import file="../../api/cellvalueslist.md" section="Properties"

So it, too, has 2 options for provding this list:

Hard Coded List

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

userInterfaceOptions = {
editLookUpItems: [
{
scope: {
ColumnIds: ['counterparty'],
},
values: ['New1', 'New2', 'UBS', 'JP Morgan', 'Citi', 'Soc Gen', 'Nat West'],
},
{
scope: {
ColumnIds: ['status'],
},
// no values provided so will use Permitted Values if given, otherwise get distinct
},
],
}

JavaScript function

Alternatively provide a function which takes an AdaptableColumn as an argument and returns an array of values:

userInterfaceOptions = {
editLookUpItems: [
{
scope: {
ColumnIds: ['currency'],
},
values: (column: AdaptableColumn) => {
rreturn ['US Dollar', 'Swiss Franc', 'Shilling'];
},
},
],
}

Color Palette

The Color Palette is an optional list of colours (provided in hex format) that will be displayed in the Colour Picker in place of the default set that AdapTable provides.

caution

The colour must be in hex format including a hash and 6 digits e.g. '#ff0099' and not 'ff0099' or 'f09'

It's used in Modules which create an Adptable Style) (e.g. Conditional Style and Format Column).

tip

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

userInterfaceOptions = {
colorPalette: ['#660033', '#CCFFFF', '#FFCCFF', '#B2FF66', '#FF3333', '#FFFFFF']
},

Style ClassNames

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 and other functions 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.

userInterfaceOptions = {
styleClassNames: ['grayStyle', 'italicGreenStyle'],
}
// in css file
.grayStyle {
background: lightgrey !important;
font-weight: normal !important;
font-style: italic !important;
}
.italicGreenStyle {
background: lightgreen !important;
font-weight: normal !important;
font-style: italic !important;
}
caution

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

Date Input Options

The Date Input Options are a group of properties which allow you to configure the AdapTable Date Picker.

note

The Date Picker is used in the Date Cell Editor and with Date Filters

important

These options control Date Picker behaviour - see Date Picker Theming for how to style the Date Picker

Date Input Options contains these properties:

PropertyDescriptionDefault
dateFormatFormat string for formatting date input field'yyyy-MM-dd'
datepickerButtonsList of buttons which are displayed in the datepicker overlay in the given order (provide empty array to display no buttons); custom button layout and positioning is achievable with the special elements - and ``
localeLocale object (to localize Date Picker)en-US
showOutsideDaysDisplay outside days (i.e. those falling in next or previous month)true
showWeekNumberDisplay the week numbers columnfalse
useNativeInputUse browser specific date input instead of AdapTable's Date Pickerfalse
tip

See the Date FNS documentation for more intormation on Date Formats and Internationalisation

Date Buttons

The Date Picker is able to display custom 'Date' buttons at the bottom of the screen.

These are configurable via the datepickerButtons property.

By default this will show the 'Close' and 'Today' buttons but they can be configured also to include:

Available buttons are:

  • close
  • today
  • tomorrow
  • yesterday
  • nextWorkday
  • prevWorkday
important

By default - if nothing is set - the 'close' and 'today' buttons are provided

tip

Provide an empty array to show no buttons

Button Positioning

You can tell AdapTable how to position these buttons via 2 further options:

  • '|' : Inserts a line break, 'forcing' the following buttons into a new line
  • '-' : Positions the buttons in a line by 'pushing' left and right hand side buttons to the line's edges

Showing Documentation Links

By default AdapTable provides context-sensitive help which links to this Documentation Site.

note

Areas in AdapTable which contain these links include Module Popups and the Expression Editor

This can be turned off by setting showDocumentationLinks to false.

Action Columns

Action Columns are special columns which contain a styleable button that can peform bespoke actions.

See the Action Column page for more information.

More Information