Element Library

The Element Library provides the building blocks used to create the visual structure, content, and interactive controls of Pages, Forms, and Page Slices in the ioLoop Page Editor.

Page Elements include layout containers, text, images, buttons, navigation controls, input fields, tables, and specialized Widgets. You can combine and nest these elements to create interfaces ranging from simple informational pages to data-driven application screens.

The Element Library is used to add new elements to the page. Once an element has been added, you can select it on the canvas and use the Selected Element Toolbar and Element Settings to configure its content, appearance, layout, and supported behavior.

Adding Elements

Page Elements are organized in a parent-child hierarchy. When adding an element, its placement within this hierarchy determines where it appears and which other elements can contain or surround it.

For example, a Container can hold a Row, a Row can contain Columns, and each Column can contain headings, text, images, buttons, or additional layout elements.

Selecting the Insertion Location

Before adding an element, select the existing element or content area where the new element should be placed.

The selected parent is important because different elements support different types of child content.

• Layout elements, such as Containers, Rows, Columns, Flexible Areas, and Content Areas, provide structures that can contain other elements.
• Content elements, such as headings, text, and images, generally represent individual pieces of content.
• Composite elements, such as tables, menus, and collapsible areas, contain related child elements that form a specific structure.
• Widgets provide specialized functionality and may have their own configuration and content requirements.

The available insertion options depend on the selected element and the types of content it supports.

Adding an Element

To add a Page Element:

1. Open the Page, Form, or Page Slice in the Page Editor.
2. Select the parent element or content area where the new element should be placed.
3. Open the Element Library using the editor's element-adding controls.
4. Choose the appropriate element type from the available categories.
5. Add the element at the desired location in the page structure.
6. Select the newly added element to configure its content, properties, and appearance.
7. Save and preview the page to verify the result.

If the element appears in an unintended location, review its parent-child relationship and use the available arrangement controls to reposition it. Alternatively, select the intended parent and insert the element again.

For more information about arranging, moving, and editing content, see Editing Page Content.

Choosing the Right Element

The Element Library contains different types of elements for different purposes. Choosing an element based on its intended function helps keep the page structure organized and simplifies future configuration and maintenance.

Requirement	Recommended Elements
Organize a page into sections	Container, Content Area
Arrange content horizontally or vertically	Row, Column, Flexible Area
Create expandable content sections	Collapsible Area
Display headings, paragraphs, or labels	Heading, Text, Inline Text, Label
Display images or videos	Image, Video, YouTube Video
Provide navigation or user actions	Link, Button, Button Group
Collect user input	Input, Dropdown, Multiline Input, Form field blocks
Display basic tabular content	Table, Table Row, Table Heading Cell, Table Column Cell
Display data-backed records in a table	Data Table Widget
Create navigation menus	Menu and navigation elements
Add specialized functionality	AI Agent, Payment, and other Widgets

For example:

• Use a Row and Columns when the goal is to arrange content into multiple areas.
• Use a Heading when the goal is to establish a section title within the page's content hierarchy.
• Use a Link when users should navigate to another destination.
• Use a Button when users should perform an action or trigger application behavior.
• Use a Data Table Widget when the page needs a configured, data-aware table rather than manually created table rows.
• Use Data Design when the requirement is to display records through a custom repeated layout, such as product cards or dashboard items.

Although different elements can sometimes produce similar visual results, their underlying structure, configuration, and supported behavior may differ.

Element Categories

The Element Library groups related elements into categories to make it easier to locate the components needed for a particular interface.

Layout Elements

Layout Elements define the structure and arrangement of content within a page.

They provide containers and positioning structures that allow other Page Elements to be grouped, aligned, and organized.

Common layout elements include:

• Container — Groups related content into a section or structural area.
• Row — Arranges child content within a row-based layout.
• Column — Organizes content within a column, commonly as part of a multi-column arrangement.
• Flexible Area — Provides flex-based layout behavior for arranging and aligning child elements.
• Content Area — Groups content into a distinct area within the page structure.
• Collapsible Area — Provides a section whose content can be expanded or collapsed.

Layout elements can be nested to create more complex structures.

For example, a dashboard could use a Container holding a Row with three Columns, where each Column contains a heading and summary information.

The parent layout determines how its children are arranged, while individual child elements control their own content and supported presentation properties.

When building a page, establish its major layout structure before adding individual content elements. This makes spacing, alignment, and responsive layout adjustments easier to manage.

For more information, see Layout Elements.

Text and Content

Text and Content Elements display written information, labels, and other content within the interface.

Common elements include:

• Heading — Displays titles and section headings.
• Text — Displays paragraphs, descriptions, instructions, and other written content.
• Inline Text — Displays shorter pieces of text within a surrounding content structure.
• Label — Identifies input controls or nearby interface content.
• Alert — Displays short messages, notifications, or status information.
• Badge — Displays compact labels or status indicators.
• HTML Block — Provides an element for supported HTML-based content.

Choose the element that best represents the purpose of the content.

For example, use a Heading for a section title rather than styling ordinary text to resemble a heading. Use a Label when identifying an input control, and an Alert when presenting a message that should stand out from surrounding content.

Text and Content Elements can be configured through Element Settings to control their content and available presentation properties.

The HTML Block is distinct from the Page Editor's Import HTML functionality. Import HTML processes supported markup and converts it into editable Page Elements, while an HTML Block is an individual content element.

For more information, see Text and Content.

Media Elements

Media Elements display images, videos, and other supported media content within the page.

Common elements include:

• Image — Displays an image from a supported Project media resource or external source.
• Video — Displays configured video content.
• YouTube Video — Displays video content sourced from YouTube.

Media resources belonging to the Project are managed under Frontend → Media.

After adding a media element, configure its source and available display properties using Element Settings.

For example, an Image element may require an image source and sizing configuration, while a video element may expose playback-related settings.

When adding media, consider the dimensions of the containing layout and how the content should appear at different screen sizes.

For more information, see Media Elements and Media.

Buttons, Links, and Actions

Buttons and links allow users to navigate the application and initiate supported actions.

Common elements include:

• Link — Navigates to another Page, external URL, or supported destination.
• Button — Provides an interactive control for navigation, Form operations, or application actions.
• Button Group — Groups related buttons within a common interface area.

A Link is generally appropriate when the primary purpose is navigation. A Button is more appropriate when the user is performing an action.

For example, a dashboard might contain:

• A Link that navigates to a reports page.
• A Button that opens a Form in a modal.
• A Button that triggers Page Flow to refresh displayed information.
• A Button Group containing related record-management actions.

Adding a Button creates the visible control, but Project-specific behavior may require additional configuration through Page Flow or another supported mechanism.

The appearance of a Button or Link is configured separately from the Project logic associated with its actions.

For more information, see Buttons and Actions.

Input Controls

Input Controls collect values entered or selected by users.

They are commonly used within Forms but can also participate in other supported input workflows.

Common controls include:

• Input — Collects individual values through supported input types, including text, number, email, password, date, time, checkbox, color, and range.
• Dropdown — Allows the user to select from a configured list of options.
• Multiline Input — Collects longer text values that may span multiple lines.
• Button — Provides submission or other action controls associated with the input workflow.

Depending on the selected control, available settings may include:

• Title or label text.
• Placeholder text.
• Initial value.
• Field name.
• Required state.
• Selectable options.
• Input type and sizing.

The available properties vary by control type.

Form-Specific Field Blocks

When editing a Form, the Element Library can also provide input blocks generated from the Form's configured fields.

These blocks differ from generic input elements because they are prepared for the specific data structure associated with the Form.

For a Table-Backed Form, the available field blocks are generated from the fields of the associated database table.

For a Custom Form, the field blocks are generated from the custom schema defined for that Form.

Depending on the underlying field, a generated block can include:

• An appropriate input control.
• A corresponding field label.
• The required state associated with the field.
• Selectable values, where applicable.
• The field binding required for ioLoop to identify and process its value during Form operations.

The Element Library can present Form fields through different layout arrangements, including field groups and input groups.

This allows the Form interface to be structured without having to manually configure every input control and its relationship to the underlying Form field.

Choosing Between Generic Inputs and Form Field Blocks

Approach	Recommended Use
Generic Input, Dropdown, or Multiline Input	When creating an independently configured input control or a custom input interaction
Table-Backed Form field block	When collecting or displaying a value associated with a field in the Form's database table
Custom Form field block	When collecting or displaying a value defined in the Form's custom schema

When a control is intended to participate in a Form's data processing workflow, using the appropriate Form-specific field block helps maintain the expected field configuration and binding.

Adding an input control does not, by itself, implement the complete Form workflow. Form configuration and Page Flow determine how values are initialized, validated, submitted, and processed.

For more information, see Forms, Table-Backed Forms, and Custom Forms.

Menus and Navigation

Menu Elements provide structured navigation interfaces and groups of related navigation actions.

Common menu-related elements include:

• Menubar holders.
• Menu bars.
• Menu items.
• Menu item links.
• Popup menu items.
• Collapsible menu areas.
• Login information areas.

Menus commonly contain several related elements that work together to define the overall navigation structure.

For example, an application header might contain a menu bar with links to the Dashboard, Projects, Reports, and Settings pages.

When constructing a menu, establish the required parent and child structure before configuring individual menu items.

Each navigation item can then be configured with its intended destination or supported behavior.

For more information, see Menus and Navigation.

Tables and Cards

Table and card-style layouts provide ways to organize and display structured information.

Common elements and related capabilities include:

• Table — Defines a basic tabular content structure.
• Table Row — Defines a row within a table.
• Table Heading Cell — Defines a heading cell within a table.
• Table Column Cell — Defines a content cell within a table.
• Data Table Widget — Provides a configurable, data-aware table interface.
• Data Design — Supports custom visual layouts that can be populated repeatedly with application data.

Basic Tables vs. Data-Driven Displays

A basic Table is appropriate when you need direct control over the structure and content of the table.

For example, a comparison table containing a fixed set of features and descriptions can be created using Table, Table Row, and table cell elements.

A Data Table Widget is appropriate when the application needs to display data records through a configured table interface.

Data Design serves a different purpose. Rather than providing a conventional table, it allows Page Elements to define a custom layout that can be populated with data.

For example, a product catalog might use Data Design to display each product as a card containing an image, name, price, and action button.

Data Design is a separate Frontend capability that uses Page Elements to define the appearance of repeated content. It should not be confused with a basic Table element or the Data Table Widget.

For more information, see Tables and Cards, Data Design, and Data Table Widget.

Widgets

Widgets are specialized Page Elements that provide functionality beyond basic content display and layout.

They are added to the page through the Element Library, but typically require configuration specific to the Widget and the Project capability it represents.

Examples include:

• Data Table Widget — Displays configured data-backed tables.
• AI Agent Widget — Provides an interface for interacting with a Project AI Agent.
• Payment Widgets — Provide interfaces for supported payment integrations.
• Display and Utility Widgets — Provide smaller specialized experiences such as Chart Area and Login Info.

Video and YouTube elements are covered under Media Elements.

After adding a Widget, its required configuration depends on the Widget type.

For example:

• A Data Table Widget requires configuration appropriate to the data it displays.
• An AI Agent Widget must be associated with the appropriate Project AI Agent and its supported settings.
• Payment Widgets require configuration for their supported payment integration and workflow.

Some Widgets also support interactions coordinated through Page Flow.

The Widget's appearance and its underlying functionality are related but distinct. Adding the visual element does not automatically configure every associated data source, integration, or application workflow.

For more information, see Widgets.

After Adding an Element

After adding an element, select it on the Page Editor canvas to access its available editing actions and configuration.

Two primary interfaces are used for working with an existing element.

Selected Element Toolbar

The Selected Element Toolbar provides contextual actions for the currently selected element.

Depending on the element type and editing context, these actions may include:

• Opening Element Settings.
• Accessing arrangement or editing controls.
• Importing HTML into supported containers.
• Using Clipboard Export or Clipboard Import.
• Switching the editing view or target for supported nested content.
• Applying available text alignment options.

Not every action is available for every element.

For more information, see Selected Element Toolbar.

Element Settings

Element Settings provide the detailed properties of the selected element.

These settings vary according to the element type.

For example:

Element	Typical Configuration
Container or Row	Layout, sizing, spacing, and alignment
Heading or Text	Content, typography, color, and alignment
Image	Image source and display properties
Button	Label, presentation, and supported interaction properties
Dropdown	Field properties and selectable options
Table	Table structure and supported presentation properties
Widget	Widget-specific configuration

Element Settings control the selected element, while Page Settings control page-level properties such as URLs, access restrictions, and included code assets.

For more information, see Element Settings and Page Settings.

Page Elements and Page Flow

The Element Library provides the visual and structural components of an interface. Application behavior is configured through the relevant Frontend and Backend capabilities.

Page Flow provides browser-side application logic that can respond to user interactions and coordinate operations involving supported Page Elements.

For example, a Button added through the Element Library might be connected to Page Flow that:

1. Responds when the user clicks the Button.
2. Retrieves information through a supported data operation or Cloud Flow.
3. Updates the relevant page content or data display.

Similarly, Page Flow can participate in Form operations, control supported element states, open Forms as modals, and coordinate interactions with Widgets.

Element References and Dependencies

Page Flow and other application configurations may refer to specific Page Elements.

When an element participates in application behavior, its identity and associated configuration can become dependencies of that behavior.

For example, replacing a Button used by Page Flow with a new Button may require updating the Page Flow logic that references the original element.

When modifying or removing elements:

• Review whether the element is referenced by Page Flow.
• Check whether Form workflows, Widgets, or Data Design depend on it.
• Consider whether removing a parent element will also remove nested elements.
• Verify that related actions and data operations continue to work.

Adding an element and configuring its application behavior are separate activities. Changes to the visual interface do not necessarily update the logic that depends on it.

For more information, see Page Flow.

Working with Elements in Different Editing Contexts

The Element Library is used when editing Pages, Forms, and Page Slices, but the available elements and their configuration can depend on the editing context.

Editing Context	Considerations
Page	Add layout, content, navigation, input controls, and supported Widgets to construct the page interface.
Form	Add layout and content elements, along with generic inputs or Form-specific field blocks associated with the Form configuration.
Page Slice	Add and configure Page Elements within a section that can be included in Structured Pages.

A Page Slice uses the same general element-editing approach as a regular Page.

However, when a Page Slice is shared across multiple Structured Pages, modifications to its content can affect every page that references it.

When editing shared Page Slices, consider the impact of changes to elements, navigation links, and associated Page Flow behavior.

For more information, see Editing Structured Pages.

Reviewing the Result

After adding and configuring Page Elements, save and preview the content to verify its appearance and behavior.

Review the following:

• Structure — Elements are placed within the intended parent containers and appear in the correct order.
• Layout — Spacing, alignment, sizing, and nested layouts behave as expected.
• Responsive presentation — Content remains usable at the intended screen sizes.
• Navigation — Links, buttons, and menus lead to the appropriate destinations or trigger the intended actions.
• Inputs — Form controls display the correct labels, options, and required states.
• Data displays — Widgets and Data Design render the intended data.
• Application behavior — Page Flow actions and related workflows continue to function correctly.

Previewing a page may execute application behavior, including data operations or external integrations. Exercise care when testing interactions that can modify Project data or invoke connected services.

For more information, see Previewing.

Where to Go Next

• Layout Elements — Learn how to construct and organize page layouts.
• Text and Content — Work with headings, paragraphs, labels, and other content.
• Media Elements — Add and configure images and videos.
• Buttons and Actions — Configure interactive controls and navigation actions.
• Menus and Navigation — Create and configure navigation-oriented interface elements.
• Tables and Cards — Organize and present information using tables, cards, and related layouts.
• Selected Element Toolbar — Understand the available editing actions for selected elements.
• Element Settings — Configure individual element properties.
• Editing Page Content — Learn the broader workflow for editing and arranging page content.