Skip to main content
Version: Current


Home > @genesislcap/foundation-layout > FoundationLayout

FoundationLayout class

Top level web component which is used to initialise a custom layout


export declare class FoundationLayout extends FoundationElement implements LayoutComponent 

Extends: FoundationElement

Implements: LayoutComponent


Can be used in a composition to customise the styles of the layout.

The constructor for this class is marked as internal. Third-party code should not call the constructor directly or create subclasses that extend the FoundationLayout class.


autoSaveKey?string(Optional) Attribute which if set will auto save and load the layout as the user changes it. Omit this attribute to disable this feature. Set attribute using auto-save-key.
class"FoundationLayoutMain"Identifier constant token.
customButtonsCustomButton[]Set custom button definition on this property to add them to the layout header controls
dimensionsConfig?LayoutConfig.Dimensions(Optional) Apply dimensions config to the layout, such as setting the size of the drag handles.
draggingbooleanSet to true when the user is currently dragging the panes inside of the layout
hasFirstLoadedbooleanBoolean signifies whether the layout has loaded for the first time or not.
lifecycleUpdateTokenstring | undefinedUsed to calculate whether a layout item should run its lifecycle methods or not
missingItemPlaceholder(missingItem: string) => stringFunction which is used to generate the placeholder text when a layout is loaded with a missing item.
popoutConfigstring | undefined(BETA) Controls whether popout functionality is enabled on the layout. Defaults to disabled. Set this attribute to any string to enable popout functionality. If this string is of format number;number then this will be interpreted as the width and height of the popout window.
reloadBuffernumberNumber describing how long to wait in ms before reloading the config when adding items declaratively by the html API. Default 500 (ms).


addItem(config, placement)Dynamically add a new item to the layout. The user can move the new plane to whenever they want once it has been added.
getLayout()Gets a minified string containing the config describing the current layout of the layout object to later restore in function
layoutRequiredRegistrations(layout)staticGets all of the required element registry function names for a set of config
loadLayout(layout, handleMissingItem, disableCache)Restores a layout described in the config from getLayout()
registeredItems()Gets all of the currently registered names
registerItem(registration, elements)Register a collection of Element and associate them with an ID with the layout system for later use.
removeItems(registration, force)Removes all instances of a specified registered item from the layout.
tryActivatePopoutMode()(BETA) If in a popout window from the dynamic layout, this function will run the flow to put the component in popout mode. This function is automatically called if using the declarative HTML API, but if only using the JavaScript API then you will need to call this function manually.
tryLoadLayoutFromLocalStorage()Try to load a layout from local storage, or return false. Only required if manually calling FoundationLayout.registerItem()