Layout Components

There are a number of components that serve to contain other components, allowing you to arrange your layout in a flexible manner. When a component contains other sub-components, the sub-components are displayed indented below the component in the Components panel. Container components can be nested, that is, they can contain other container components. Container components can contain any number of components.

Stack

A Stack displays the components it contains vertically. In the following example, we see a Stack component titled Layers that contains a Layers component and a Layer Presets component.

Stacks can be nested and contain other container components. You can modify the alignment and size of sub-components, and specify whether the parts of the Stack can be resized by the user. For more information about layout settings, see Common Settings.

Split

A Split displays the components it contains horizontally. In the following example, we see a Split component that contains a Panel component and a Stack component that contains the toolbar and map.

Splits can be nested and contain other container components. You can modify the alignment and size of sub-components, and specify whether the parts of the Split can be resized by the user. For more information about layout settings, see Common Settings.

Panel

A Panel is a component whose Back button navigates through any of its sub-components that were activated towards the first sub-component. In the following example, we see a Panel component that contains a Tabs component, Results List component, and Result Details component.

If the user performs an Identify operation, the Results List component displays in the Panel. If the user then clicks one of the results in the Panel, the Result Details component displays in the Panel. If the user clicks the Back button in the Result Details panel, the panel displays the Results List component. If the user clicks the Back button again in the Results List panel, the panel displays the first Tabs component.

We do not recommend nesting Panel components inside other Panel components. You can modify the alignment of sub-components, and specify whether the panel should be initially minimized or maximized. You can also specify whether the panel includes a Close, Back, Maximize or Minimize button. For more information about layout settings, see Common Settings.

Tabs

A Tabs component displays each of its components within tabs like a web browser. In the following example, we see a Tabs component that contains a Text component titled Home, Stack component titled Layers, Legend component, Workflow component titled Forms, and Print component.

We do not recommend nesting Tabs components inside other Tabs components. You can modify the alignment of sub-components. For more information about layout settings, see Common Settings.

Expand

By default, an Expand component hides its sub-components until it is clicked. Once clicked, it displays its sub-components vertically. If the Expand component is clicked again, its sub-components are hidden again. In the following example, we see an Expand component that contains a Basemap Picker component.

We do not recommend nesting Expand components inside other Expand components. You can modify the alignment and height of sub-components, and specify whether the Expand component is initially open or closed. For more information about layout settings, see Common Settings.

© 2019 Latitude Geographics Group Ltd. All Rights Reserved.

Documentation Version 5.3