Page Layout
π οΈ 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:
β 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.
π
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.
π 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.
π 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.
𧩠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.
π·οΈ 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.
ποΈ Title
The Title element allows inserting titles with customizable heading sizes (H1 to H6). Titles in H1 and H2 are automatically set in uppercase.
π Text
The Text element lets you insert paragraphs with customizable styles such as font families, bold, underline, background color, and font color.
π Button(s)
The Button(s) element adds action buttons with various options such as Normal, Button Group, Justified Group, and Dropdown.
π HTML
The HTML element lets you insert custom HTML code with CSS, providing further design customization.
ποΈ Tabber
The Tabber element creates tabs within a container, allowing efficient content organization.
β Horizontal Line
The Horizontal Line element divides content neatly.
π Dashlet Kube
The Dashlet Kube element adds a Knowledge Graph to a row. Customize the title and configure node settings to display information.
π Data Table
The Data Table element presents node information as a list, with configuration options for display, editing, and management.
π Form
The Form element adds customizable forms with repository settings, submit options, and layout configurations.
π 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.
Updated 2 months ago