Editing Component Layout

Each dashboard has a single Root Panel container which can hold components and other containers. Each container, including the Root Panel, has a layout type which manages the spacial relationship between components. A single dashboard can contain containers with different layout types, for example, a root panel with absolute layout may contain a tabbed panel where each tab uses a dockable layout, and each tab has a nested panel with grid layout.

The layout of each container is edited independently. However, it's possible to move components between containers.

The layout editing process comprises:

  • Adding new components to the dashboard by dragging them from palette and dropping into the work area

  • Moving components from one container to another

  • Moving components between two locations within one container

  • Resizing components

  • Cloning components

  • Editing component constraints (such as column span)

Make sure that you read and understood how dashboard layout is organized before reading articles devoted to editing grid, absolute, or dockable layouts.

Choosing a Layout Type

When creating web dashboards, choosing the correct layout type is crucial for organizing components and presenting information effectively. Understanding the unique features of each layout option can ensure the correct layout is chosen for specific use cases.

Name

Description

Example Use Case

Grid Layout

Formats the layout area as a series of grid cells defined by rows and columns. Default cells are evenly spaced, but can be customized by dragging dividers.

  • Data entry forms, displaying tabular data or a few components.

  • Regular web portal pages with primarily static content.

  • When design requires relative positioning between components.

Absolute Layout

Allows granular control over component layout by defining pixel coordinates for each component. Components can be moved, aligned, and sized by dragging and dropping on the canvas.

  • Human-Machine Interfaces (HMIs).

  • Dynamic facility or floor maps.

  • Skeuomorphic control panels.

  • When irregular positioning of components is critical for visual design or functionality.

Dockable Layout

Components are distributed as floating windows, horizontally or vertically-aligned panes, or as tabs within panes. End users are able to reposition the layout according to their needs.

  • Integrated development environments.

  • Complex reports or control panels where each user needs the flexibility to customize their layout.

  • When many elements need to be in a single dashboard, but different users will be focused on different elements.

Editing Mode Decorations

When a component layout is displayed in a work area, it's elements may have additional decorations that will never appear in a live application. These decoration make it easier to edit the layout.

The following additional visible elements are shown when decorations are enabled:

  • Empty cells of a Grid Layout are shown as thick pink rectangles

  • Absolute Layout has a grey-green grid that assists component positioning

  • Every component/sub-container in a Grid Layout has a dashed grey border, to help find separate and joined cells

  • Selected component/sub-container in a Grid Layout has a green border, to help understanding which component's properties are being edited

  • Every component/sub-container in a Grid Layout has small green rectangles that appear on mouse hover, those rectangles allow to change component's position and span within parent container's grid

  • Components have their names displayed while container names appear on mouse hover

  • Some containers have an Add icon allowing to create a new container's pane (i.e. a tab/step/layer/etc.)

  • Every component/sub-container has Edit and Delete icons

Was this page helpful?