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 | Type | Description | Default |
|---|---|---|---|
| HideAdaptableUI | boolean | 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 | Type | Description | Default |
|---|---|---|---|
| alternativeModuleNames | AlternativeModuleName[] | Alternative names to use for Adaptable Modules in the UI | null |
| applicationIcon | AdaptableIcon | The application icon to appear in Dashboard and elsewhere (e.g. in Notifications) | null |
| customIcons | CustomIcon[] | (() =>CustomIcon[]) | Bespoke icons that can be used in AdapTable (e.g. Badge Styles and Buttons) | |
| dateInputOptions | DateInputOptions | Options for managing and customizing date inputs in AdapTable | |
| disableDeleteConfirmation | boolean | Hides confirmation dialog which displays whenever an AdaptableObject is deleted | false |
| editableCellStyle | AdaptableStyle | Style to set for editable Cells | |
| editedCellStyle | AdaptableStyle | Style to set for Cells which have been edited | |
| englishVariant | 'GB' | 'US' | English variant to use in AdapTable UI | 'GB' |
| loadingScreenOptions | LoadingScreenOptions | Options for showing Loading Screen (during initialisation) | |
| objectTags | AdaptableObjectTag[] | ((context:ObjectTagsContext) =>AdaptableObjectTag[]) | Optional list of AdaptableObjectTags that can be associated with AdaptableObjects | |
| readOnlyCellStyle | AdaptableStyle | Style to set for non-editable Cells | |
| showAdapTableVersion | boolean | Displays the AdapTable version in Grid Info section of Settings Panel | true |
| showAgGridVersion | boolean | Displays the AG Grid version in Grid Info section of Settings Panel | true |
| showDocumentationLinks | boolean | Provide links to AdapTable documentation (in Module popups and Expression Editor) | true |
| styleClassNames | string[] | Optional list of CSS styles that can be used when creating Adaptable Styles in Adaptable (e.g. in Format Column and other Modules) | [] |
| useCustomMacLikeScrollbars | boolean | 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 | Type | Description | Default |
|---|---|---|---|
| loadingScreenDelay | number | Delay in ms before Loading Screen appears | 200 |
| loadingScreenText | string | Text to display in Loading Screen. | 'Retrieving your settings and setting up the grid...' |
| loadingScreenTitle | string | Title to display in Loading Screen. | 'Initialising Grid' |
| showLoadingScreen | boolean | 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 | Type | Description | Default |
|---|---|---|---|
| dateFormat | string | Format string for formatting date input field | 'yyyy-MM-dd' (ISO 8601 format) |
| datepickerButtons | DatepickerButton[] | 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 | any | Locale object (to localize Date Picker) | en-US |
| showOutsideDays | boolean | Display outside days (i.e. those falling in next or previous month) | true |
| showWeekNumber | boolean | Display the week numbers column | false |
| useNativeInput | boolean | 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 | Returns | Description |
|---|---|---|
| closeCustomWindowPopup(windowId) | void | Closes a custom window |
| getAdaptableObjectsWithTag(tag, adaptableModule) | AdaptableObject[] | undefined | Retrieves all objects in list which contain the given Tag |
| getAdaptableObjectTags() | AdaptableObjectTag[] | undefined | Retrieves any Object Tags (provided in User Interface Options) |
| getColorPalette() | string[] | Retrieves Color Palette currently being used |
| getCustomIcons() | CustomIcon[] | Retrieves Custom Icons provided by users |
| getEditableCellStyle() | AdaptableStyle | undefined | Returns Style set for Editable cells |
| getEditedCellStyle() | AdaptableStyle | undefined | Returns Style for Cells that have been edited |
| getReadOnlyCellStyle() | AdaptableStyle | undefined | Returns Style set for ReadOnly Cells |
| getStyleClassNames() | string[] | undefined | Retrieves any Style Class Names from User Interface Options |
| getUserInterfaceState() | UserInterfaceState | Retrieves the current User Interface State |
| hideAdaptableUI() | void | Hides all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.) |
| hideProgressIndicator() | void | Hides the progress indicator |
| isAdaptableUIVisible() | boolean | Returns whether the AdapTable UI is currently visible |
| openCustomWindowPopup(config) | \{ close: () => void; \} | Opens a custom window popup |
| showAdaptableUI() | void | Shows all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.) |
| showProgressIndicator(config) | \{ close: () => void; \} | Displays a progress indicator |