@adaptabletools/adaptable 22.0.0-canary.7 → 22.0.0-canary.9

package/src/AdaptableOptions/ContainerOptions.d.ts

@@ -1,40 +1,80 @@
+import type { BaseContext } from '../AdaptableState/Common/BaseContext';
+/**
+ * CSS Selector used to target elements by CSS selectors (e.g. class, attribute, etc.) rather than elementID
+ */
+export interface AdaptableCSSSelector {
+    /**
+     * CSS Selector that locates DOM element
+     */
+    selector: string;
+}
+/**
+ * A resolved (non-function) container reference
+ *
+ * - `string` — an element ID (resolved via `document.getElementById`)
+ * - `AdaptableCSSSelector` — a CSS selector (resolved via `document.querySelector`)
+ * - `HTMLElement` — a direct reference to a DOM element
+ */
+export type AdaptableContainerValue = string | AdaptableCSSSelector | HTMLElement;
+/**
+ * Context available to `adaptableContainer` and `agGridContainer` function callbacks (resolve **before** AdapTable initialises, so `adaptableApi` not available)
+ */
+export interface InitContainerContext {
+    /**
+     * Id of current AdapTable instance
+     */
+    adaptableId: string;
+    /**
+     * Current Adaptable State Key
+     */
+    adaptableStateKey: string;
+    /**
+     * Custom application Context provided in `AdaptableOptions.adaptableContext`
+     */
+    adaptableContext: any;
+}
+/**
+ * Context available to `modalContainer`, `systemStatusContainer`, `alertContainer` and `transposedViewContainer` function callbacks
+ */
+export type ContainerContext = BaseContext;
 /**
  * Options for managing the different div elements required by AdapTable
  */
 export interface ContainerOptions {
     /**
-     * Div containing AdapTable; string Id or HTMLElement
-     *
+     * Div containing AdapTable; element Id, CSS Selector, HTMLElement, or function returning one of these
      * @defaultValue "adaptable"
      * @gridInfoItem
      */
-    adaptableContainer?: string | HTMLElement;
+    adaptableContainer?: AdaptableContainerValue | ((context: InitContainerContext) => AdaptableContainerValue);
     /**
-     * Div containing AG Grid instance; string Id or HTMLElement
-     *
+     * Div containing AG Grid instance; element Id, CSS Selector, HTMLElement, or function returning one of these.
      * @defaultValue "grid"
      * @gridInfoItem
      */
-    agGridContainer?: string | HTMLElement;
+    agGridContainer?: AdaptableContainerValue | ((context: InitContainerContext) => AdaptableContainerValue);
     /**
-     * Name of div where popups appear
-     *
+     * Name of div where popups appear;element Id, CSS Selector, HTMLElement, or function returning one of these
      * @defaultValue undefined (centre of screen)
      * @gridInfoItem
      */
-    modalContainer?: string | HTMLElement;
+    modalContainer?: AdaptableContainerValue | ((context: ContainerContext) => AdaptableContainerValue);
     /**
-     * Div to show System Status messages; string Id or HTMLElement
-     *
+     * Div to show System Status Messages; elementId, CSS Selector, HTMLElement, or function returning one of these
      * @defaultValue undefined
      * @gridInfoItem
      */
-    systemStatusContainer?: string | HTMLElement;
+    systemStatusContainer?: AdaptableContainerValue | ((context: ContainerContext) => AdaptableContainerValue);
     /**
-     * Div to display Alert messages; string Id or HTMLElement
-     *
+     * Div to display Alerts; elementId, CSS Selector, HTMLElement, or function returning one of these
      * @defaultValue undefined
      * @gridInfoItem
      */
-    alertContainer?: string | HTMLElement;
+    alertContainer?: AdaptableContainerValue | ((context: ContainerContext) => AdaptableContainerValue);
+    /**
+     * Div to render a Transposed View; elementId, CSS Selector, HTMLElement, or function returning one of these
+     * @defaultValue undefined (rendered in a draggable popup window)
+     * @gridInfoItem
+     */
+    transposedViewContainer?: AdaptableContainerValue | ((context: ContainerContext) => AdaptableContainerValue);
 }

package/src/AdaptableState/AdaptableState.d.ts

@@ -24,6 +24,7 @@ import { StyledColumnState } from './StyledColumnState';
 import { NoteState } from './NoteState';
 import { NamedQueryState } from './NamedQueryState';
 import { CommentState } from './CommentState';
+import { UserInterfaceState } from './UserInterfaceState';
 /**
  * The main state object of Adaptable
  */
@@ -56,6 +57,7 @@ export interface AdaptablePersistentState {
     TeamSharing: TeamSharingState;
     Theme: ThemeState;
     ToolPanel: ToolPanelState;
+    UserInterface: UserInterfaceState;
 }
 /**
  * The state which is available in the internal Redux store but never persisted

package/src/AdaptableState/Common/AdaptableColumn.d.ts

@@ -9,17 +9,17 @@ export type AdaptableColumnDataType = 'text' | 'number' | 'boolean' | 'date' | '
 /**
  * Column Types recognised by AdapTable; to be set in GridOptions
  */
-export type AdaptableColumnType = 'hiddenColumn' | 'calculatedColumn' | 'freeTextColumn' | 'actionColumn' | 'fdc3Column' | 'pivotAnyTotal' | 'pivotGrandTotal' | 'pivotColumnTotal' | 'pivotAggregationTotal';
-export declare const HIDDEN_COLUMN_TYPE: AdaptableColumnType;
+export type AdaptableColumnTypeName = 'hiddenColumn' | 'calculatedColumn' | 'freeTextColumn' | 'actionColumn' | 'fdc3Column' | 'pivotAnyTotal' | 'pivotGrandTotal' | 'pivotColumnTotal' | 'pivotAggregationTotal';
+export declare const HIDDEN_COLUMN_TYPE: AdaptableColumnTypeName;
 export declare const hiddenColDefConfig: ColDef;
-export declare const CALCULATED_COLUMN_TYPE: AdaptableColumnType;
-export declare const FREE_TEXT_COLUMN_TYPE: AdaptableColumnType;
-export declare const ACTION_COLUMN_TYPE: AdaptableColumnType;
-export declare const FDC3_COLUMN_TYPE: AdaptableColumnType;
-export declare const PIVOT_ANY_TOTAL_COLUMN_TYPE: AdaptableColumnType;
-export declare const PIVOT_GRAND_TOTAL_COLUMN_TYPE: AdaptableColumnType;
-export declare const PIVOT_COLUMN_TOTAL_COLUMN_TYPE: AdaptableColumnType;
-export declare const PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE: AdaptableColumnType;
+export declare const CALCULATED_COLUMN_TYPE: AdaptableColumnTypeName;
+export declare const FREE_TEXT_COLUMN_TYPE: AdaptableColumnTypeName;
+export declare const ACTION_COLUMN_TYPE: AdaptableColumnTypeName;
+export declare const FDC3_COLUMN_TYPE: AdaptableColumnTypeName;
+export declare const PIVOT_ANY_TOTAL_COLUMN_TYPE: AdaptableColumnTypeName;
+export declare const PIVOT_GRAND_TOTAL_COLUMN_TYPE: AdaptableColumnTypeName;
+export declare const PIVOT_COLUMN_TOTAL_COLUMN_TYPE: AdaptableColumnTypeName;
+export declare const PIVOT_AGGREGATION_TOTAL_COLUMN_TYPE: AdaptableColumnTypeName;
 export declare function getColumnTypeFriendlyName(columnType: string): string;
 /**
  * Base class for AdapTable Column containing most important properties

package/src/AdaptableState/Common/AdaptableColumnContext.d.ts

@@ -9,3 +9,12 @@ export interface AdaptableColumnContext<TData = any> extends BaseContext {
      */
     column: AdaptableColumn<TData>;
 }
+/**
+ * Context provided for callbacks involving multiple Columns
+ */
+export interface AdaptableColumnsContext<TData = any> extends BaseContext {
+    /**
+     * All Columns
+     */
+    columns: AdaptableColumn<TData>[];
+}

package/src/AdaptableState/Common/AdaptableRowContext.d.ts

@@ -0,0 +1,11 @@
+import type { IRowNode } from 'ag-grid-enterprise';
+import { BaseContext } from './BaseContext';
+/**
+ * Context provided for per Row callbacks
+ */
+export interface AdaptableRowContext<TData = any> extends BaseContext {
+    /**
+     * The current Row
+     */
+    rowNode: IRowNode<TData>;
+}

package/src/AdaptableState/Common/AdaptableRowContext.js

@@ -0,0 +1 @@
+export {};

package/src/AdaptableState/Common/DataUpdateConfig.d.ts

@@ -19,3 +19,10 @@ export interface DataUpdateConfig {
      */
     addIndex?: number;
 }
+export interface DataRowConfig {
+    dataRows: {
+        add?: any[];
+        update?: any[];
+        delete?: any[];
+    };
+}

package/src/AdaptableState/Common/TransposeConfig.d.ts

@@ -1,3 +1,5 @@
+import type { AdaptableColumnsContext } from '../../types';
+import type { TypeHint } from './Types';
 /**
  * Config used when transposing a Grid
  */
@@ -13,18 +15,18 @@ export interface TransposeConfig {
      */
     hideTransposedColumn?: boolean;
     /**
-     * Only show curerntly visible Columns
-     * @defaultValue false
+     * Autosize columns in transposed view
+     * @defaultValue true
      */
-    visibleColumns?: boolean;
+    autosize?: boolean;
     /**
-     * Only show curerntly visible Rows
-     * @defaultValue false
+     * ColumnIds of Columns to Transpose
+     * @defaultValue all Columns in Grid
      */
-    visibleRows?: boolean;
+    columnsToTranspose?: string[] | ((context: AdaptableColumnsContext) => string[]);
     /**
-     * Autosize columns in transposed view
-     * @defaultValue true
+     * Rows to Transpose: All, VisibleOnly or via an Expression
+     * @defaultValue All
      */
-    autosize?: boolean;
+    rowsToTranspose?: TypeHint<string, 'VisibleOnly' | 'All'>;
 }

package/src/AdaptableState/InitialState.d.ts

@@ -19,6 +19,7 @@ import { StatusBarState } from './StatusBarState';
 import { StyledColumnState } from './StyledColumnState';
 import { ThemeState } from './ThemeState';
 import { ToolPanelState } from './ToolPanelState';
+import { UserInterfaceState } from './UserInterfaceState';
 /**
  * The initial state of Adaptable which is populated at design-time and used to create the Adaptable State - must include at least one Layout.
  */
@@ -107,6 +108,10 @@ export interface InitialState {
      * Sets order & visibility of Tool Panel controls in AdapTable ToolPanel (on right of grid)
      */
     ToolPanel?: ToolPanelState;
+    /**
+     * Controls the visibility of AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Menus etc.)
+     */
+    UserInterface?: UserInterfaceState;
 }
 /**
  * Deprecated initial state object (now replaced by InitialState)
@@ -197,4 +202,8 @@ export interface PredefinedConfig {
      * Sets the order and visibility of the Tool Panel controls in the AdapTable ToolPanel (on right of grid)
      */
     ToolPanel?: ToolPanelState;
+    /**
+     * Controls the visibility of AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Menus etc.)
+     */
+    UserInterface?: UserInterfaceState;
 }

package/src/AdaptableState/LayoutState.d.ts

@@ -166,8 +166,7 @@ export interface PivotLayout extends LayoutBase {
      */
     PivotColumnTotal?: PivotTotalPosition;
     /**
-     * Ordered list of Pivot Result Column Ids to control their display order.
-     * Set to `true` to enable tracking the current display order (will be populated automatically).
+     * Ordered list of Pivot Result Columns; set to `true` to track current display order, or provide custom list
      */
     PivotResultColumnsOrder?: string[] | boolean;
 }

package/src/AdaptableState/UserInterfaceState.d.ts

@@ -0,0 +1,14 @@
+import { BaseState } from './BaseState';
+/**
+ * Adaptable State Section for the User Interface
+ *
+ * Controls the visibility and behaviour of AdapTable UI elements
+ */
+export interface UserInterfaceState extends BaseState {
+    /**
+     * Whether to hide all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.)
+     *
+     * @defaultValue false
+     */
+    HideAdaptableUI?: boolean;
+}

package/src/AdaptableState/UserInterfaceState.js

@@ -0,0 +1 @@
+export {};

package/src/Api/GridApi.d.ts

@@ -2,7 +2,7 @@ import { SelectedCellInfo } from '../AdaptableState/Selection/SelectedCellInfo';
 import { SelectedRowInfo } from '../AdaptableState/Selection/SelectedRowInfo';
 import { ColumnSort } from '../AdaptableState/Common/ColumnSort';
 import { CellUpdateRequest, GridCell } from '../AdaptableState/Selection/GridCell';
-import { DataUpdateConfig } from '../AdaptableState/Common/DataUpdateConfig';
+import { DataRowConfig, DataUpdateConfig } from '../AdaptableState/Common/DataUpdateConfig';
 import { CellDataChangedInfo } from '../AdaptableState/Common/CellDataChangedInfo';
 import { CellHighlightInfo } from '../AdaptableState/Common/CellHighlightInfo';
 import { RowHighlightInfo } from '../AdaptableState/Common/RowHighlightInfo';
@@ -71,15 +71,11 @@ export interface GridApi {
      */
     deleteGridData(dataRows: any[], config?: DataUpdateConfig): Promise<IRowNode[]>;
     /**
-     * Applies a data transaction (add, update, remove) to AdapTable (and AG Grid)
-     * @param dataRows - Rows to add, update or remove (via transaction)
-     * @param config - batch option and callback function to run post transaction
+     * Adds, Updates or Deletes rows in AdapTable (and AG Grid) in single transaction
+     * @param dataRowConfig - Rows to add, update or remove
+     * @param dataUpdateConfig - batch option and callback function to run post transaction
      */
-    manageGridData(dataRows: {
-        add?: any[];
-        update?: any[];
-        delete?: any[];
-    }, config?: DataUpdateConfig): Promise<{
+    manageGridData(dataRowConfig: DataRowConfig, dataUpdateConfig?: DataUpdateConfig): Promise<{
         addedRows: IRowNode[];
         updatedRows: IRowNode[];
         removedRows: IRowNode[];

package/src/Api/Implementation/AlertApiImpl.js

@@ -7,6 +7,7 @@ import ObjectFactory from '../../Utilities/ObjectFactory';
 import { isAdaptableCellChangedAlert, isAdaptableRowChangedAlert, } from '../../AdaptableState/Common/AdaptableAlert';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { AlertInternalApi } from '../Internal/AlertInternalApi';
+import { resolveContainerElement } from '../../Utilities/resolveContainerElement';
 export class AlertApiImpl extends ApiBase {
     internalApi;
     constructor(_adaptable) {
@@ -62,12 +63,7 @@ export class AlertApiImpl extends ApiBase {
             }
             // Show Alert in a Div (if one has been set)
             if (alertProperties.ShowInDiv) {
-                let alertDiv;
-                let optionsDiv = this.getContainerOptions().alertContainer;
-                if (optionsDiv) {
-                    alertDiv =
-                        typeof optionsDiv === 'string' ? document.getElementById(optionsDiv) : optionsDiv;
-                }
+                const alertDiv = resolveContainerElement(this.getContainerOptions().alertContainer, this.getAdaptableInternalApi().buildBaseContext());
                 if (alertDiv) {
                     let alertString = alertToShow.header + ': ' + alertToShow.message;
                     alertDiv.innerHTML = alertString;

package/src/Api/Implementation/ColumnApiImpl.d.ts

@@ -83,7 +83,7 @@ export declare class ColumnApiImpl extends ApiBase implements ColumnApi {
     getPrimaryKeyColumn(): AdaptableColumn<any>;
     getDefaultAggFunc(columnId: string): string;
     openColumnInfoSettingsPanel(): void;
-    getColumnTypes(): import("../../AdaptableState/Common/Types").TypeHint<string, import("../../types").AdaptableColumnType>[];
+    getColumnTypes(): import("../../AdaptableState/Common/Types").TypeHint<string, import("../../types").AdaptableColumnTypeName>[];
     getColumnsByColumnType(columnType: string): AdaptableColumn[];
     getRowGroupedColumns(): AdaptableColumn[];
     setColumnCaption(columnId: string, caption: string): void;

package/src/Api/Implementation/GridApiImpl.d.ts

@@ -4,7 +4,7 @@ import { SelectedCellInfo } from '../../AdaptableState/Selection/SelectedCellInf
 import { SelectedRowInfo } from '../../AdaptableState/Selection/SelectedRowInfo';
 import { CellUpdateRequest, GridCell } from '../../AdaptableState/Selection/GridCell';
 import { ColumnSort } from '../../AdaptableState/Common/ColumnSort';
-import { DataUpdateConfig } from '../../AdaptableState/Common/DataUpdateConfig';
+import { DataRowConfig, DataUpdateConfig } from '../../AdaptableState/Common/DataUpdateConfig';
 import { CellHighlightInfo } from '../../AdaptableState/Common/CellHighlightInfo';
 import { RowHighlightInfo } from '../../AdaptableState/Common/RowHighlightInfo';
 import { ColDef, ColGroupDef, Column, ColumnState, IRowNode, RowModelType } from 'ag-grid-enterprise';
@@ -35,11 +35,7 @@ export declare class GridApiImpl extends ApiBase implements GridApi {
     addGridData(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
     undoCellEdit(cellDataChangedInfo: CellDataChangedInfo): boolean;
     deleteGridData(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
-    manageGridData(dataRows: {
-        add?: any[];
-        update?: any[];
-        delete?: any[];
-    }, config?: DataUpdateConfig): Promise<{
+    manageGridData(dataRowConfig: DataRowConfig, dataUpdateConfig?: DataUpdateConfig): Promise<{
         addedRows: IRowNode[];
         updatedRows: IRowNode[];
         removedRows: IRowNode[];

package/src/Api/Implementation/GridApiImpl.js

@@ -95,18 +95,18 @@ export class GridApiImpl extends ApiBase {
         }
         return [];
     }
-    async manageGridData(dataRows, config) {
-        const transactionResult = await this._adaptable.manageGridRows(dataRows, config);
+    async manageGridData(dataRowConfig, dataUpdateConfig) {
+        const transactionResult = await this._adaptable.manageGridRows(dataRowConfig, dataUpdateConfig);
         if (Array.isArray(transactionResult.removedRows) && transactionResult.removedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.delete, transactionResult.removedRows, 'Delete');
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRowConfig.dataRows.delete, transactionResult.removedRows, 'Delete');
             this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
         }
         if (Array.isArray(transactionResult.updatedRows) && transactionResult.updatedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.update, transactionResult.updatedRows, 'Update');
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRowConfig.dataRows.update, transactionResult.updatedRows, 'Update');
             this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
         }
         if (Array.isArray(transactionResult.addedRows) && transactionResult.addedRows.length) {
-            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRows.add, transactionResult.addedRows, 'Add');
+            const rowDataChangedInfo = this.getAdaptableInternalApi().buildRowDataChangedInfo(dataRowConfig.dataRows.add, transactionResult.addedRows, 'Add');
             this.getAdaptableInternalApi().getDataService().CreateRowDataChangedEvent(rowDataChangedInfo);
         }
         return transactionResult;
@@ -607,9 +607,9 @@ export class GridApiImpl extends ApiBase {
     showTransposedView(transposeConfig = {}) {
         const transposedColumnId = transposeConfig.transposedColumnId ?? this.getOptionsApi().getPrimaryKey();
         const hideTransposedColumn = transposeConfig.hideTransposedColumn ?? true;
-        const visibleColumns = transposeConfig.visibleColumns ?? false;
-        const visibleRows = transposeConfig.visibleRows ?? false;
         const autosize = transposeConfig.autosize ?? true;
+        const columnsToTranspose = transposeConfig.columnsToTranspose;
+        const rowsToTranspose = transposeConfig.rowsToTranspose;
         this.getAdaptableInternalApi().showPopupWindow({
             id: WINDOW_SHOW_TRANSPOSED_VIEW,
             factoryId: WINDOW_SHOW_TRANSPOSED_VIEW,
@@ -618,9 +618,9 @@ export class GridApiImpl extends ApiBase {
             popupProps: {
                 transposedColumnId,
                 hideTransposedColumn,
-                visibleColumns,
-                visibleRows,
                 autosize,
+                columnsToTranspose,
+                rowsToTranspose,
             },
         });
     }

package/src/Api/Implementation/LayoutApiImpl.d.ts

@@ -24,6 +24,7 @@ export declare class LayoutApiImpl extends ApiBase implements LayoutApi {
     getCurrentLayoutColumnSort(columnId: string): ColumnSort['SortOrder'] | null;
     getCurrentLayoutName(): string;
     getLayoutByName(layoutName: string): Layout | null;
+    setExtendedLayout(extendedLayout: ExtendedLayout): void;
     createOrUpdateExtendedLayout(extendedLayoutInfo: ExtendedLayout): void;
     getExtendedLayoutByName(layoutName: string): ExtendedLayout | undefined;
     cloneExtendedLayout(extendedLayoutToClone: ExtendedLayout, layoutName: string): ExtendedLayout | false;

package/src/Api/Implementation/LayoutApiImpl.js

@@ -90,6 +90,9 @@ export class LayoutApiImpl extends ApiBase {
             }
         }
     }
+    setExtendedLayout(extendedLayout) {
+        this.setLayout(extendedLayout.Layout.Name);
+    }
     createOrUpdateExtendedLayout(extendedLayoutInfo) {
         const config = {
             includeLayoutNotExtendedObjects: true,

package/src/Api/Implementation/SystemStatusApiImpl.js

@@ -7,6 +7,7 @@ import { createElement } from 'react';
 import UIHelper from '../../View/UIHelper';
 import StringExtensions from '../../Utilities/Extensions/StringExtensions';
 import { SystemStatusInternalApi } from '../Internal/SystemStatusInternalApi';
+import { resolveContainerElement } from '../../Utilities/resolveContainerElement';
 export class SystemStatusApiImpl extends ApiBase {
     systemStatusDiv;
     internalApi;
@@ -48,11 +49,7 @@ export class SystemStatusApiImpl extends ApiBase {
     }
     displayMessageInDiv(statusMessage, statusFurtherInformation, messageType) {
         if (!this.systemStatusDiv) {
-            let optionsDiv = this.getContainerOptions().systemStatusContainer;
-            if (optionsDiv) {
-                this.systemStatusDiv =
-                    typeof optionsDiv === 'string' ? document.getElementById(optionsDiv) : optionsDiv;
-            }
+            this.systemStatusDiv = resolveContainerElement(this.getContainerOptions().systemStatusContainer, this.getAdaptableInternalApi().buildBaseContext());
         }
         if (this.systemStatusDiv) {
             if (StringExtensions.IsNotNullOrEmpty(statusFurtherInformation)) {

package/src/Api/Implementation/UserInterfaceApiImpl.d.ts

@@ -6,6 +6,7 @@ import { UserInterfaceInternalApi } from '../Internal/UserInterfaceInternalApi';
 import { UserInterfaceApi } from '../UserInterfaceApi';
 import { ProgressIndicatorConfig } from '../../AdaptableState/Common/ProgressIndicatorConfig';
 import { ApiBase } from './ApiBase';
+import { UserInterfaceState } from '../../AdaptableState/UserInterfaceState';
 export declare class UserInterfaceApiImpl extends ApiBase implements UserInterfaceApi {
     internalApi: UserInterfaceInternalApi;
     private showProgressIndicatorTimeout;
@@ -26,4 +27,8 @@ export declare class UserInterfaceApiImpl extends ApiBase implements UserInterfa
         close: () => void;
     };
     closeCustomWindowPopup(windowId: string): void;
+    getUserInterfaceState(): UserInterfaceState;
+    isAdaptableUIVisible(): boolean;
+    hideAdaptableUI(): void;
+    showAdaptableUI(): void;
 }

package/src/Api/Implementation/UserInterfaceApiImpl.js

@@ -4,6 +4,7 @@ import { CUSTOM_WINDOW_FACTORY_ID } from '../../View/Components/Popups/WindowPop
 import { UserInterfaceInternalApi } from '../Internal/UserInterfaceInternalApi';
 import { ApiBase } from './ApiBase';
 import { ProgressIndicatorHide, ProgressIndicatorShow, } from '../../Redux/ActionsReducers/PopupRedux';
+import * as UserInterfaceRedux from '../../Redux/ActionsReducers/UserInterfaceRedux';
 export class UserInterfaceApiImpl extends ApiBase {
     internalApi;
     showProgressIndicatorTimeout = null;
@@ -128,4 +129,16 @@ export class UserInterfaceApiImpl extends ApiBase {
     closeCustomWindowPopup(windowId) {
         this.dispatchAction(PopupRedux.PopupHideWindow(windowId));
     }
+    getUserInterfaceState() {
+        return this.getAdaptableState().UserInterface;
+    }
+    isAdaptableUIVisible() {
+        return !(this.getUserInterfaceState().HideAdaptableUI ?? false);
+    }
+    hideAdaptableUI() {
+        this.dispatchAction(UserInterfaceRedux.UserInterfaceSetHideAdaptableUI(true));
+    }
+    showAdaptableUI() {
+        this.dispatchAction(UserInterfaceRedux.UserInterfaceSetHideAdaptableUI(false));
+    }
 }

package/src/Api/LayoutApi.d.ts

@@ -57,6 +57,12 @@ export interface LayoutApi {
      */
     getLayoutByName(layoutName: string): Layout | null;
     /**
+     * Sets (i.e. selects) the Extended Layout
+     * @param extendedLayout Extended Layout to set
+     */
+    setExtendedLayout(extendedLayout: ExtendedLayout): void;
+    /**
+     *
      * Retrieves Layout with the given name
      * @param layoutName Layout to retrieve
      * @returns layout

package/src/Api/UserInterfaceApi.d.ts

@@ -3,6 +3,7 @@ import { AdaptableObject, AdaptableObjectTag } from '../AdaptableState/Common/Ad
 import { AdaptableModule, CustomIcon } from '../types';
 import { CustomWindowConfig } from '../AdaptableState/Common/CustomWindowConfig';
 import { ProgressIndicatorConfig } from '../AdaptableState/Common/ProgressIndicatorConfig';
+import { UserInterfaceState } from '../AdaptableState/UserInterfaceState';
 /**
  * Functions relating to User Interface section of Adaptable State
  */
@@ -78,4 +79,20 @@ export interface UserInterfaceApi {
      * @param windowId window popup id
      */
     closeCustomWindowPopup(windowId: string): void;
+    /**
+     * Retrieves the current User Interface State
+     */
+    getUserInterfaceState(): UserInterfaceState;
+    /**
+     * Returns whether the AdapTable UI is currently visible
+     */
+    isAdaptableUIVisible(): boolean;
+    /**
+     * Hides all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.)
+     */
+    hideAdaptableUI(): void;
+    /**
+     * Shows all AdapTable UI elements (Dashboard, Tool Panel, Status Bar, Column and Context Menus etc.)
+     */
+    showAdaptableUI(): void;
 }

package/src/Redux/ActionsReducers/UserInterfaceRedux.d.ts

@@ -0,0 +1,11 @@
+import * as Redux from 'redux';
+import { UserInterfaceState } from '../../AdaptableState/UserInterfaceState';
+/**
+ * @ReduxAction Sets whether all AdapTable UI elements are hidden
+ */
+export declare const USER_INTERFACE_SET_HIDE_ADAPTABLE_UI = "USER_INTERFACE_SET_HIDE_ADAPTABLE_UI";
+export interface UserInterfaceSetHideAdaptableUIAction extends Redux.Action {
+    hideAdaptableUI: boolean;
+}
+export declare const UserInterfaceSetHideAdaptableUI: (hideAdaptableUI: boolean) => UserInterfaceSetHideAdaptableUIAction;
+export declare const UserInterfaceReducer: Redux.Reducer<UserInterfaceState>;

package/src/Redux/ActionsReducers/UserInterfaceRedux.js

@@ -0,0 +1,21 @@
+/**
+ * @ReduxAction Sets whether all AdapTable UI elements are hidden
+ */
+export const USER_INTERFACE_SET_HIDE_ADAPTABLE_UI = 'USER_INTERFACE_SET_HIDE_ADAPTABLE_UI';
+export const UserInterfaceSetHideAdaptableUI = (hideAdaptableUI) => ({
+    type: USER_INTERFACE_SET_HIDE_ADAPTABLE_UI,
+    hideAdaptableUI,
+});
+const initialState = {
+    HideAdaptableUI: false,
+};
+export const UserInterfaceReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case USER_INTERFACE_SET_HIDE_ADAPTABLE_UI:
+            return Object.assign({}, state, {
+                HideAdaptableUI: action.hideAdaptableUI,
+            });
+        default:
+            return state;
+    }
+};

package/src/Redux/Store/AdaptableStore.js

@@ -38,6 +38,7 @@ import * as InternalRedux from '../ActionsReducers/InternalRedux';
 import * as TeamSharingRedux from '../ActionsReducers/TeamSharingRedux';
 import * as ThemeRedux from '../ActionsReducers/ThemeRedux';
 import * as ToolPanelRedux from '../ActionsReducers/ToolPanelRedux';
+import * as UserInterfaceRedux from '../ActionsReducers/UserInterfaceRedux';
 import { areAdaptableProfileTracksEnabled, getMarker } from '../../devTools';
 import { isAdaptableSharedEntity, isCustomSharedEntity, } from '../../AdaptableState/TeamSharingState';
 import { buildAdaptableStateFunctionConfig } from './buildAdaptableStateFunctionConfig';
@@ -121,6 +122,7 @@ export class AdaptableStore {
             TeamSharing: TeamSharingRedux.TeamSharingReducer,
             Theme: ThemeRedux.ThemeReducer,
             ToolPanel: ToolPanelRedux.ToolPanelReducer,
+            UserInterface: UserInterfaceRedux.UserInterfaceReducer,
         };
         // allow plugins to participate in the root reducer
         adaptable.forPlugins((plugin) => {
@@ -992,6 +994,31 @@ const adaptableMiddleware = (adaptable) => (function(middlewareAPI) {
                     module.setUpScheduleJobs();
                     return returnAction;
                 }
+                /*******************
+                 * USER INTERFACE ACTIONS
+                 *******************/
+                case UserInterfaceRedux.USER_INTERFACE_SET_HIDE_ADAPTABLE_UI: {
+                    const returnAction = next(action);
+                    const { hideAdaptableUI } = action;
+                    // Hide or show Dashboard
+                    middlewareAPI.dispatch(DashboardRedux.DashboardSetIsHidden(hideAdaptableUI));
+                    // Hide or show Adaptable ToolPanel in the AG Grid sidebar
+                    if (hideAdaptableUI) {
+                        adaptable.hideAdaptableToolPanel();
+                    }
+                    else {
+                        adaptable.showAdaptableToolPanel();
+                    }
+                    // Hide or show Adaptable StatusBar panels
+                    if (hideAdaptableUI) {
+                        adaptable.hideAdaptableStatusBar();
+                    }
+                    else {
+                        adaptable.showAdaptableStatusBar();
+                    }
+                    // Column and Context Menus are handled in the AgGridMenuAdapter
+                    return returnAction;
+                }
                 /*******************
                  * DASHBOARD ACTIONS
                  *******************/