🛠️ Page Layout Objects Overview

The Page Layout offers various objects that act as tools to structure the screen using rows and filters to visualize information. The available objects include:

Page Layout

➕ Add Row

The Add Row object is essential for structuring Page Layout designs. It allows you to add rows where multiple elements can be placed efficiently.

Add Row

📅 Date Range

The Date Range object serves as a filter that allows users to select a date range, impacting all nodes with a defined date filter field. It includes options such as Current Month, Last Month, Current Year, and Last Year.

Date Range

🔍 Filter

The Filter object allows customization of filters for your screen, using a Node as the base information source. You can configure filter types like:

Selector: Select from registered data.
Search Box: Manually type the information.
Number: Input a number as a filter.
Number Range: Specify a range of numbers.

Filter

🔘 Action Button

The Action Button object lets you add buttons with various customizable options like label, icon, color, and screen placement. It can trigger different actions based on button types such as:

Link: Direct users to a webpage.
Screen Navigation: Link to a specific screen in your app.
Custom Code Function: Use JavaScript to define button actions.

Action Button

🧩 Page Layout Elements

The Page Layout screen provides various elements to create dynamic and interactive layouts. Each element offers customization to suit your needs.

🏗️ Row

The Row element helps in nesting rows within row containers, organizing layouts efficiently.

Row Element

🏷️ Header

The Header element adds titles and subtexts with options for font color, background color, and alignment. You can also add a linked button to an external URL.

Header Element

🖋️ Title

The Title element allows inserting titles with customizable heading sizes (H1 to H6). Titles in H1 and H2 are automatically set in uppercase.

Title Element

📄 Text

The Text element lets you insert paragraphs with customizable styles such as font families, bold, underline, background color, and font color.

Text Element

🔘 Button(s)

The Button(s) element adds action buttons with various options such as Normal, Button Group, Justified Group, and Dropdown.

Button Element

🌐 HTML

The HTML element lets you insert custom HTML code with CSS, providing further design customization.

HTML Element

🗂️ Tabber

The Tabber element creates tabs within a container, allowing efficient content organization.

Tabber Element

➖ Horizontal Line

The Horizontal Line element divides content neatly.

Horizontal Line

📊 Dashlet Kube

The Dashlet Kube element adds a Knowledge Graph to a row. Customize the title and configure node settings to display information.

Dashlet Kube Element

📋 Data Table

The Data Table element presents node information as a list, with configuration options for display, editing, and management.

Data Table Element

📑 Form

The Form element adds customizable forms with repository settings, submit options, and layout configurations.

Form Element

🔚 Conclusion

These elements provide a comprehensive toolkit for creating interactive and visually appealing page layouts. Each element is designed with flexibility and customization in mind, ensuring that your layout can be tailored to your specific needs and enhance user experience.