User Interface Technical Reference
Summary
- User Interface State is used to hide / show the AdapTable UI
- User Interface Options contains properties that can provided at design-time
- User Interface API contains run-time functions to manage the UI
User Interface State
The UserInterfaceState section of AdapTable Initial State contains just one property:
| Property | Description | Default |
|---|---|---|
| HideAdaptableUI | Hides all AdapTable UI elements (i.e. Dashboard, Tool Panel, Status Bar, Column & Context Menus etc.) | false |
User Interface Options
The UserInterfaceOptions section contains a large collection of UI-related Options, including:
| Property | Description | Default |
|---|---|---|
| alternativeModuleNames | Alternative names to use for Adaptable Modules in the UI | null |
| applicationIcon | The application icon to appear in Dashboard and elsewhere (e.g. in Notifications) | null |
| colorPalette | Colours to display in Colour Picker (in place of AdapTable's default set); can be hardcoded list or function | |
| customIcons | Bespoke icons that can be used in AdapTable (e.g. Badge Styles and Buttons) | |
| dateInputOptions | Options for managing and customizing date inputs in AdapTable | |
| disableDeleteConfirmation | Hides confirmation dialog which displays whenever an AdaptableObject is deleted | false |
| editableCellStyle | Style to set for editable Cells | |
| editedCellStyle | Style to set for Cells which have been edited | |
| englishVariant | English variant to use in AdapTable UI | 'GB' |
| loadingScreenOptions | Options for showing Loading Screen (during initialisation) | |
| objectTags | Optional list of AdaptableObjectTags that can be associated with AdaptableObjects | |
| readOnlyCellStyle | Style to set for non-editable Cells | |
| showAdapTableVersion | Displays the AdapTable version in Grid Info section of Settings Panel | true |
| showAgGridVersion | Displays the AG Grid version in Grid Info section of Settings Panel | true |
| showDocumentationLinks | Provide links to AdapTable documentation (in Module popups and Expression Editor) | true |
| styleClassNames | Optional list of CSS styles that can be used when creating Adaptable Styles in Adaptable (e.g. in Format Column and other Modules) | |
| useCustomMacLikeScrollbars | Show Mac-like scrollbars; size is configurable via CSS variable --ab-custom-scrollbar-size (default: 10px) | false |
Loading Screen Options
AdapTable allows developers to display a Loading Message when AG Grid (and AdapTable) initialises.
This is fully configurable via a series of proporties in the loadingScreenOptions section:
| Property | Description | Default |
|---|---|---|
| loadingScreenDelay | Delay in ms before Loading Screen appears | 200 |
| loadingScreenText | Text to display in Loading Screen. | 'Retrieving your settings and setting up Grid...' |
| loadingScreenTitle | Title to display in Loading Screen. | 'Initialising Grid' |
| showLoadingScreen | Display Loading Screen when AdapTable initialises | true |
Find Out More
See Configuring the Loading Screen for full instructions
Date Input Options
The dateInputOptions section manages how Dates are rendered in AdapTable:
| Property | Description | Default |
|---|---|---|
| dateFormat | Format string for formatting date input field | 'yyyy-MM-dd' (ISO 8601 format) |
| datepickerButtons | List 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 | | ['close','today'] |
| locale | Locale object (to localize Date Picker) | en-US |
| showOutsideDays | Display outside days (i.e. those falling in next or previous month) | true |
| showWeekNumber | Display the week numbers column | false |
| useNativeInput | Use browser specific date input instead of AdapTable's Date Picker | false |
Find Out More
The dateInputOptions are described in greater detail in the Date Picker Guide
User Interface API
The UserInterfaceAPI section enables accessing the AdapTable UI at run-time:
| Method | Description |
|---|---|
| closeCustomWindowPopup(windowId) | Closes a custom window |
| getAdaptableObjectsWithTag(tag, adaptableModule) | Retrieves all objects in list which contain the given Tag |
| getAdaptableObjectTags() | Retrieves any Object Tags (provided in User Interface Options) |
| getColorPalette() | Retrieves Color Palette currently being used |
| getCustomIcons() | Retrieves Custom Icons provided by users |
| getEditableCellStyle() | Returns Style set for Editable cells |
| getEditedCellStyle() | Returns Style for Cells that have been edited |
| getReadOnlyCellStyle() | Returns Style set for ReadOnly Cells |
| getStyleClassNames() | Retrieves any Style Class Names from User Interface Options |
| getUserInterfaceState() | Retrieves the current User Interface State |
| hideAdaptableUI() | Hides all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.) |
| hideProgressIndicator() | Hides the progress indicator |
| isAdaptableUIVisible() | Returns whether the AdapTable UI is currently visible |
| openCustomWindowPopup(config) | Opens a custom window popup |
| showAdaptableUI() | Shows all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.) |
| showProgressIndicator(config) | Displays a progress indicator |