Page Layout Objects

The page layout offers various objects that can be utilized as tools. These tools range from enabling us to structure the screen using rows to applying different filters for visualizing information as needed. The available objects include:

Add Row

The Add Row object is a fundamental component for structuring our Page Layout design. It allows us to add a new row to the screen, where we can place multiple elements efficiently.

Date Range

The Date Range object serves as a filter, allowing users to select a date range that impacts all nodes with a defined date filter field. Users can specify the filter name and the initial range to be displayed when the screen loads. The available range options include: Current Month, Last Month, Current Year, and Last Year.

Filter

The Filter object allows us to customize filters for our screen. It uses a Node as the base information source, enabling us to filter specific vectors or columns. Additionally, it can be customized by changing the filter name and type to suit our needs.

Here are the available filter types:

Selector: Allows us to choose from the already registered data on the column as a filter.

Search Box: Allows us to manually type in the information we want to search or filter.

Number: Allows us to manually input a number as a filter.

Number Range: Allows us to input a number range to use it as a filter.

Action Button

The Action Button object allows us to add an action button to our page layout. The button can be configured to do different actions depending on the type of button, it also can be customize by changing the button label, icon, color and placement on the screen.

The available action buttons types are:

• Link :The Link Type allows us to customize the button with an external URL, enabling us to direct the user to a desired web page. Additionally, we can choose whether the webpage opens in the current screen or in a new window.

• Screen Navigation: The Screen Navigation Type allows us to link the button to a screen within our application. It can be customized based on how the screen is displayed:
  • Directly open the screen.
  • Launch the screen in a small, large, or full-width modal window.
  • Display the screen in a right pane within the current window.

🚧

Available screen

As you can see in the image, only screens of type (Page Layout, Form, Group of Forms, Custom Screen, Kube Viewer, DataForm Insights, Run Workshop Project) can be shown using an screen type action button.

• Custom Code Function: The Custom Code Type allows us to define the button's interaction using JavaScript to set up the desired actions. It also provides the Button ID for direct interaction in the code.

Page Layout Elements

The Page Layout screen provides various elements to create dynamic and interactive layouts. These elements range from simple row nesting to complex data tables and forms. Each element allows customization to meet specific needs, ensuring flexibility in design and functionality.

Row

The Row element enables nesting rows within other row containers. This helps in organizing and designing layouts efficiently.

Note: Once an element is added inside a row, only rows can be added within that same row.

Header

The Header element adds titles and subtexts to rows. It supports customization of font color, background color, and alignment, and allows adding a button linked to an external URL.

Title

The Title element inserts title text with customization options for heading sizes (H1 to H6). Titles in H1 and H2 are automatically set in uppercase.

Text

The Text element allows inserting paragraphs with customizable styles, including block-quotes, headings, font families, bold, underline, background color, and font color.

Button(s)

The Button(s) element adds action buttons with various types such as Normal, Button Group, Justified Group, and Dropdown. Each button can be customized for alignment and size.

HTML

The HTML element allows for custom HTML code with CSS for further customization.

Note: Click "APPLY" to see the preview of the designed element.

Tabber

The Tabber element creates tabs within a container, organizing content efficiently. Add tabs by entering the desired name and clicking the "+" icon.

Horizontal Line

The Horizontal Line element divides content organically. Click "APPLY" to add it.

Dashlet Kube

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

Data Table

The Data Table element presents node information as a list. It has three tabs: List, Options, and Form Layout. Each tab allows various configurations for displaying, editing, and managing data.

Form

The Form element adds customizable forms with three tabs: Form Properties, Options, and Form Layout. Each tab allows configuring repository settings, submit options, and form layout.

Conclusion

These elements provide a robust set of tools for creating interactive and visually appealing page layouts. Each element is designed to be flexible and customizable, ensuring that you can tailor your layout to meet specific needs and enhance the user experience.