(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Grid container

The Dynamic Grid Container is a powerful layout component that organizes content in a CSS grid system. It allows creating responsive, flexible layouts by arranging child elements in a customizable grid pattern defined by columns and rows. This component is ideal for creating dashboards, form layouts, or any interface that requires organized content placement in a grid structure.

Properties

General Properties

• displayName - Sets the display name of the component shown in the structure panel. For example, "Dashboard Layout" provides clear identification of the grid's purpose in the component hierarchy.

• elements - Contains all components to be rendered within the grid container. This array can include any dynamic components that will be positioned according to the defined grid layout.

Visual Properties

• gridLayout - Defines the grid structure using CSS Grid properties. This configuration object contains:

  • gridTemplateColumns: Specifies the column layout using CSS grid syntax. For example, "1fr 1fr 1fr" creates three equal-width columns, while "200px 1fr 2fr" creates a fixed width column followed by two proportional columns.
  • gridTemplateRows: Specifies the row layout using CSS grid syntax. For example, "auto 1fr 100px" creates a row that sizes to content, a flexible middle row, and a fixed height bottom row.
  • gridGap: Sets the spacing between grid items. For example, "8px" creates uniform spacing between all grid cells.

• fullHeight - Controls whether the grid container should expand to fill its parent container's height. When set to true, the grid will occupy 100% of the available vertical space, which is useful for creating full-height layouts in panels or tabs.

Event Actions

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the component is initialized. Can be used to perform setup operations like setting initial data or calculating dimensions.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations or releasing resources.

Testing Hooks

• dataTestId - Sets the testing hook ID for automated testing. For example, setting it to "main-dashboard-grid" allows test scripts to reliably locate this grid container during automated testing.

Authorization

• visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "adminOnlyPolicy" restricts the grid container to users with admin privileges, hiding it from other users without the required permissions.

Visibility

• displayConditions - Defines conditions for displaying the component based on context data or expressions. For example, configuring it to display only when "userType === 'advanced'" ensures the grid appears only for advanced users, providing a conditional layout experience.