LayoutView

Label: :IA_Function
Property: type: LayoutView
Inherits from: Function and View

The LayoutView Function allows users to display multiple Views simultaneously. It divides the workspace into horizontal or vertical panels with tabs in each one to see, organize and switch between different views efficiently. Each panel can be resized manually.

The View is based on Docking Layout from Smart HTML Elements

LayoutView

Function parameters

Key	Description	Default value	Possible values
`$layout`	The initial layout description	`{}`	`Object`
`#actions`	List of actions to be performed on LayoutPanel `items`	`[]`	`Array` of actions (documented bellow)

Layout description

The $layout description can contain the following types of elements

`LayoutGroup`

Is used to split an area horizontally or vertically between multiple LayoutPanels or other LayoutGroups. A LayoutGroup should be the root element of the $layout parameter.

Key	Description	Default value	Possible values
`type`	Type of layout element		`LayoutGroup`
`orientation`	A string value indicating the orientation of the Splitter group	`vertical`	`horizontal` / `vertical`.
`size`	Sets the size of the item in pixels or percentages	`string`, `number`
`items`	A collection of `LayoutPanel` or `LayoutGroup` definitions	{}
`resizeMode`	A string indicating the resize mode.	`adjacent`	'none', 'adjacent', 'end', 'proportional'.
`resizeStep`	A numeric value that determines the step of resizing	`5`	`number`
`liveResize`	Determines if splitter resizing happens while dragging or not	`false`	`boolean`

`LayoutPanel`

A LayoutPanel holds one or more Tabs

Key	Description	Default value	Possible values
`type`	Type of layout element		`LayoutPanel`
`autoHide`	a boolean property that determines if the LayoutPanel is autoHidden	`false`	`Boolean`
`autoHidePosition`	determines the autoHide position of the item if `autoHide` property is set	`left`	`top`, `bottom`, `left`, `right`
`dropPosition`	Determines the possible positions for the item at which a new item can be dropped as a result of dragging	string `array` containing all possible values	`top`, `bottom`, `left`, `right`, `center`, `header`, `layout-top`, `layout-bottom`, `layout-left`, `layout-right`. Positions with the `layout` prefix reflect on LayoutPanelItems that are children of the LayoutPanel
`label`	the Label of the LayoutPanel window		`String`
`tabPosition`	Determines the position of the Tab labels inside the LayoutPanel	`top`	`top`, `bottom`, `left`, `right`
`headerButtons`	an Array of strings that define the buttons in the header section of the DockingLayout item
`tabCloseButtons`	a boolean property that Enables or disables the close buttons inside each Tab item label inside the DockingLayout item	`false`	`boolean`
`locked`	Locks the size of the item and does not allow resizing via Splitter bars	`false`	`Boolean`
`max`	sets the maximum size of the item in pixels		`string`, `number`
`min`	sets the minimum size of the item in pixels		`string`, `number`
`size`	sets the size of the item in pixels or percentages		`string`, `number`
`items`	a collection of objects. Each object defines the structure of a `Tab`. Each tab will will be uniquely identified by the key (in the `items` object.)		`Object`

`Tab`

The tab is the LayoutView element that contains other Graphileon Views.

Key	Description	Default value	Possible values
`area`	Graphileon View area ID		`String`
`label`	a string representing the label of the Tab item		`String`
`selected`	determines if the tab is selected. By default the first added item to the LayoutPanel is automatically selected		`Boolean`
`draggable`	a boolean property that allows to disable the dragging of the Tab item	`true`	`Boolean`
`closeable`	determines if the tab can be closed. When `false`, the close button is hidden and the tab is protected against every close path, including the `close` action	`true`	`Boolean`

For tabs the type should not be specified because it's implied.

The closeable property requires the containing LayoutPanel to have tabCloseButtons enabled to be visible in the UI, but it guards the close action regardless of that setting.

Making individual tabs non-closeable

Setting tabCloseButtons: true on a LayoutPanel enables close buttons on all of its tabs. Use closeable: false on a tab to exempt it:

panelA: {
  type: "LayoutPanel",
  tabCloseButtons: true,
  items: {
    surveys: {
      label: "My Surveys",
      area: "my_surveys",
      closeable: false     // permanent tab, cannot be closed
    }
  }
}

Tabs added later through the update action are closeable unless they specify closeable: false.

Action descriptions

Actions are passed through the #actions parameter and are applied in order. The parameter is reset after the actions have been processed.

`update`

Updates existing Tabs and creates missing ones.

Key	Description	Possible values
`type`	Action to be performed	`update`
`element`	a string representing key (in the layout description) of the `LayoutPanel` that contains the Tabs to be updated	`String`
`data.tabs`	A collection of Tab descriptions (similar to `LayoutPanel`'s `items`). Existing Tabs will be updated and missing ones will be created.	`object`

Any Tab property can be updated. Two of them behave in a way worth noting:

content — replaces the contents of the tab's view area. Passing an empty string (or null) empties the area while keeping it available for further rendering. Omitting the key leaves the current content untouched.
closeable — toggles whether the tab can be closed, see Tab.

{
  type: 'update',
  element: 'panelA',
  data: {
    tabs: {
      tabA1: {
        label: 'Updated label',
        content: '',          // empty the view area
        selected: true
      }
    }
  }
}

`close`

Closes one or more Tabs. Tabs marked closeable: false are skipped.

Key	Description	Possible values
`type`	Action to be performed	`close`
`element`	a string representing key (in the layout description) of the `LayoutPanel` that contains the Tabs to be closed	`String`
`data.tabs`	The Tabs to close, either as a collection keyed by Tab key (values are ignored) or as an array of Tab keys	`Object`, `Array`
`data.tab`	A single Tab key. Alternative to `data.tabs`	`String`

The three accepted forms are equivalent:

{type: 'close', element: 'panelA', data: {tabs: {tabA1: {}, tabA2: {}}}}
{type: 'close', element: 'panelA', data: {tabs: ['tabA1', 'tabA2']}}
{type: 'close', element: 'panelA', data: {tab: 'tabA1'}}

Closing a Tab through this action behaves exactly as closing it through its close button: the tabClosed trigger fires, a neighbouring tab is selected, and lastTabClosed fires when the panel is left empty. The Tab's area is released, so a Tab reusing that same area can be created again afterwards.