Grid Layout

Overview

By default, each module in Informat is displayed in full screen. Although the page can be divided into two parts through the module's sidebar settings, this is insufficient for more complex scenarios.

To meet the needs of complex layouts, the grid module divides the page into a 24x24 grid, where layout cards can be inserted. Each layout card can display independent content (modules, website pages, external pages, print templates), and supports tabbed display of multiple contents within a card. The following figure shows the basic structure of the grid.

Terminology

Grid

The grid for module display, supporting multiple grids. When there are multiple grids, the grid module will be displayed in tab form.

Card

A grid is divided into 24×24 blocks. The area displaying content is called a card. Each grid can add multiple cards, and the minimum size of a card is 1×1.

Page

A module embedded in a card, supporting multiple additions. When multiple pages are added, the embedded modules in the card will be displayed in tab form.

Permissions

For each grid and page in the layout card, expressions can be used to control whether to display, thus achieving permission control.

Configuration Instructions

Grid Configuration

Setting Item	Description
Grid Name	The name of the grid. When there are multiple grids, the name will be used as the tab name
Icon	The icon displayed in the grid. When there are multiple grids, the icon will be used as the tab icon
Tab Color	The background color of the grid display. When there are multiple grids, the color will be used as the tab background color
Only Allow the Following Roles to View	Set the permission to view the grid

Card Configuration

Setting Item	Description
Card Name	The name of the card
Border Color	The border color of the card
Border Style	The border style of the card
Border Width (Left)	Control the left border width of the card
Border Width (Right)	Control the right border width of the card
Border Width (Top)	Control the top border width of the card
Border Width (Bottom)	Control the bottom border width of the card
Padding (Left)	Control the left padding of the card
Padding (Right)	Control the left padding of the card
Padding (Top)	Control the top padding of the card
Padding (Bottom)	Control the bottom padding of the card

Pages Displayed on Cards

Setting Item	Description
Card Page Name	The name of the card page. When there are multiple card pages, the name will be used as the tab name
Card Page Identifier	The identifier of the card page, which can be used by subsequent context variables
Card Page Icon	The icon of the card page. When there are multiple card pages, the icon will be used as the tab icon
Card Tab Color	The color of the card tab. When there are multiple card pages, the color will be used as the tab background color
Only Allow the Following Roles to View	Set the permission to view the card page
Card Display Type	The type of module displayed in the card page Module, External Page, Website Page, Print Template
Module	When the card display type is Module, select the data table module to display
Page Address	When the card display type is External Page, expressions can be used to dynamically calculate the displayed page address
Website Module	When the card display type is Website Page, select the website module to display
Page Path	When the card display type is Website Page, select the page address of the website module to display
Print Template Module	When the card display type is Print Template, select the print template module to display
Print Template Module	When the card display type is Print Template, select the print template module to display
Print Template	When the card display type is Print Template, select the page under the print template module to display
Print Template Parameters	When the card display type is Print Template, the dynamic parameters passed in by the displayed print template. Expressions can be used to dynamically calculate page parameters

Usage Example

Assume there are Version (version) and Task (task) in the application, with the following data structures:

Version (version)

Field	Type	Description
name	Single-line Text	Version name
status	List Selection	Version status Planning scheduling Developing developing Published published
description	Rich Text	Version description

Task (task)

Field	Type	Description
taskNo	Single-line Text	Task number
name	Single-line Text	Task name
description	Rich Text	Task description
status	List Selection	Task status Not Started notstarted In Progress progress Completed complete Canceled canceled
version	Related Record	Task version
finishDate	Date	Completion time
planFinishDate	Date	Estimated completion time
owner	User Selection	Task responsible person
version	Related Record	Task version

Create Basic Display Modules

• Create a table view based on Version (version) to display only versions that are currently in development
• Create a table view (unfinished tasks) based on Task (task) to display current version unfinished (not started, in progress) tasks
• Create a table view (completed tasks) based on Task (task) to display current version completed tasks
• Create a dashboard digital card (task statistics) based on Task (task) to display the number of tasks in each status for the current version
• Create a dashboard pivot table (task statistics) based on Task (task), grouping rows and columns by status and estimated completion time (week)

Build Grid Layout Display Module

Create cards in sequence, as shown in the figure below:

Set Grid Layout Cards

• Version List

Notes

• The pages in the card are all bound to a module. For cards that only serve as display, a separate view module needs to be established to carry data
• When the card display type is External Page, it is embedded through iframe in the platform. Attention should be paid to the X-Frame-Options setting of the embedded page.
• Data communication between card pages can be achieved by calling Set Data Table Filter in automation interactions, sending Website Page messages, and other steps