Pages & Forms

Pages & Forms is the Frontend section where you create, configure, and maintain the pages and forms that make up an ioLoop application's user interface.

A Page is a screen within the application. A Form is a specialized page designed to collect information from users. Both are managed through Pages & Forms and can combine visual editing, Page Elements, Widgets, Page Flow, Media, Code, Database, Cloud Flow, and AI Wiz depending on the application's requirements.

Pages & Forms supports everything from simple informational pages to interactive, data-driven application interfaces.

What You See in Pages & Forms

The Pages & Forms area displays the pages and forms belonging to your Project. Each item shows information such as its name, type, status, access configuration, and URL.

From this area, you can:

• Create a new Page, Form, or Structured Page.
• Open an existing item for editing.
• Rename, clone, or delete an item.
• Access Page Settings.
• Preview a page or form.
• Open Page Flow to configure page behavior.

The list provides a central place to organize and manage the application's screens. Select an item to open it in the Page Editor.

Creating a Page or Form

Click New in Pages & Forms to create an item.

The creation dialog includes:

• Page/Form ID: A required identifier for the page or form, using alphanumeric characters.
• Type: The type of page or form to create.

Page Types

The Type dropdown provides three choices:

Type	Description
Page	A general-purpose application screen for content, dashboards, portals, landing pages, or interactive interfaces.
Form	A specialized page for collecting input, creating or editing records, or supporting an input-driven workflow.
Structured Page	Structured Page is designed for building pages from reusable Page Slices. Multiple Structured Pages can share the same header, footer, or other content sections, allowing common content to be maintained in one place. Each page can also have its own unique Page Slices and arrange its sections independently.

Use Page for most general-purpose screens.

Use Form when the primary purpose is collecting or editing information. Forms are opened from other pages as modal input experiences.

Use Structured Page for site-style layouts where the organization of the page matters as much as its individual content. For example, a marketing page might contain a header, several independently editable body sections, and a footer.

The three choices describe the types available during creation. They should not be confused with the different visual, HTML-based, and code-based customization techniques available through the supported editing tools.

For a detailed comparison, see Page Types.

Page/Form ID, Name, and URL

These identify different aspects of a page:

Property	Purpose
Page/Form ID	The identifier assigned when the item is created and cannot be changed.
Name	The display name used to identify the item within the Project Editor. This can be changed.
Page URL	The URL path used to access the page in the published application, configured through Page Settings.

Choose a short, meaningful Page/Form ID, such as Events, RegistrationForm, AdminDashboard, or CustomerPortal.

The Name can be more descriptive and readable than the ID. The published URL is configured separately through Page Settings.

For more information, see Managing Pages and Page Types.

Page Editor

Opening a Page or Form launches the Page Editor, where you design and configure that item's content.

The Page Editor is where you work with layouts, sections, Page Elements, Widgets, input controls, styling, and other page-specific presentation features.

The main Page Editor actions include:

• Flow: Open Page Flow to configure the page's client-side behavior.
• Preview: Test the page from within the Project Editor.
• Settings: Open Page Settings.
• Save: Save changes to the page.
• Close: Return to the Pages & Forms list.

The Page Editor manages the visual structure of the page, while Page Flow manages the behavior associated with that page.

You can move between visual editing and Page Flow as you develop an interactive page.

Page Elements

The Page Editor includes a Page Element Library containing the building blocks used to construct page layouts and interfaces.

Common Page Elements include:

• Layout sections, containers, rows, and columns.
• Text, headings, links, and buttons.
• Images and other media elements.
• Menus and navigation elements.
• Tables and card-style content.
• Form input controls.
• Widgets for data display, AI Agents, payments, and media.

Elements can be combined to create both simple and sophisticated interfaces.

After adding an element, select it to configure the properties available for that element. These may include appearance, layout, content, styling, and behavior-related options depending on the element type.

Page Elements define the interface, while Page Flow can interact with supported elements to update their content, respond to events, or change their state.

Widgets

Widgets are specialized Page Elements that provide ready-made functionality beyond basic visual content.

Rather than implementing an entire interactive component from scratch, you can add and configure a supported widget.

Examples include:

Widget	Purpose
Data Table	Display and interact with records in a table-style interface.
AI Agent	Provide an AI Agent interface within a page.
Payment widgets	Add supported payment experiences.
Video widgets	Display video or YouTube content.

Each widget has its own configuration requirements.

For example, a Data Table needs a data configuration, and an AI Agent widget needs an appropriate AI Agent configuration.

Widgets can also participate in page behavior through supported Page Flow operations.

For detailed configuration, see Widgets.

Data Design

Data Design lets you visually create custom layouts that can be populated with dynamic data.

Unlike a Data Table widget, which provides a predefined table-style interface, Data Design gives you control over the appearance and arrangement of content representing individual records.

This makes it suitable for:

• Repeating cards or tiles.
• Custom search results.
• Lists with specialized layouts.
• Custom table-style rows.
• Repeating content blocks populated from Project data.

How Data Design Works

Data Design combines three concepts:

1. Visual Design

Create the visual structure for an individual item or repeating content block. This may include text, images, containers, and other supported elements.

2. Placeholders

Define the locations within the design where dynamic values will appear.

For example, a customer card might contain placeholders for a customer's name, photograph, and account status.

3. Rendering

Supply data through supported Page Flow operations to populate the placeholders and render the designed content.

A single design can be used to display multiple records without manually creating a separate set of Page Elements for each record.

Data Table vs. Data Design

Use a Data Table widget when a standard record-oriented table interface meets your requirements.

Use Data Design when you need a custom visual presentation of data, such as product cards, search results, customer profiles, or other repeating content layouts.

For implementation details, see Data Design.

Forms

A Form is a specialized page for collecting and processing user input.

Forms can be used to create records, edit existing information, collect user responses, or initiate application workflows.

ioLoop supports two important form implementation approaches.

Table-Backed Forms

A Table-Backed Form is connected to a Project Database table.

Use this approach when the form's primary purpose is to create or edit records stored in that table.

For example, a customer registration form can collect information associated with a customer record in the Database.

Table-Backed Forms provide a data-oriented approach to building input interfaces.

Custom Forms

A Custom Form collects information for a workflow whose behavior is defined by the application.

Use this approach when the input does not simply correspond to creating or editing a record in a single Database table.

For example, a form might collect information for a quotation request, invoke Cloud Flow to perform calculations, or initiate a process involving several application components.

Page Flow can coordinate the form's client-side behavior and use Cloud Flow for protected server-side processing when needed.

Using Forms

Depending on the application design, a Form can be opened as a modal from a button, Page Flow action, or Data Table action.

This allows you to create input experiences that can be used from different parts of an application.

For more information, see Forms, including Table-Backed Forms, Custom Forms, and form-specific Page Flow behavior.

Page Settings

Each Page or Form has its own Page Settings, which control how it is configured, presented, accessed, and made available in the application.

The available settings include:

Setting	Purpose
Active	Controls whether the page is available in the published application.
Page URL	Configures the URL path used to access the page.
Access	Configures public or protected page access, including Project Users and User Groups where applicable.
Page Info	Configures browser titles, descriptions, theme color, and social sharing information.
Fonts	Configures page-level font selections.
Code	Selects JavaScript and CSS assets to include on the page.
Advanced	Provides specialized options such as custom head content and page-specific CSS.

Page Settings apply to the individual page. Broader application defaults and configuration are managed through Project Settings.

URLs and Access

A page's URL determines how users reach it. Changing the URL may affect navigation links, menus, buttons, Page Flow operations, or other application components that reference the previous path.

Access settings determine who may access the page through the supported runtime access controls.

Page access and data authorization are separate concerns. Restricting access to a page does not replace the need for appropriate Database access rules or trusted authorization checks in backend operations.

For more information, see Page Settings.

Page Flow

Page Flow defines the client-side behavior associated with an individual Page or Form.

It is accessed through the Flow action in the Page Editor and executes in the user's browser.

Page Flow can be used to:

• Initialize page behavior when a page opens.
• Respond to button clicks and other user actions.
• Show, hide, or update page content.
• Validate form input.
• Open Forms from another page.
• Interact with supported Widgets.
• Retrieve or update Project data through permitted interfaces.
• Populate and render Data Design content.
• Invoke Cloud Flow for server-side processing.
• Coordinate JavaScript functionality included on the page.

Page Flow supports visual programming blocks and JavaScript code blocks, which can be combined within the same flow.

Visual blocks provide a structured way to implement common actions, while JavaScript code blocks allow specialized logic to be written as part of the flow.

Page Flow and Backend Processing

Page Flow is appropriate for browser-side interaction, presentation, and client-side processing.

It can interact with supported Project data interfaces subject to their access rules. Not every data operation requires a custom server-side workflow.

However, client-side validation must not be treated as a security boundary. When an operation requires protected credentials, centrally enforced authorization, trusted business rules, or processing independent of the browser, use Cloud Flow.

A common pattern is for Page Flow to initiate a request, Cloud Flow to perform protected processing, and Page Flow to update the interface based on the result.

For detailed information, see Page Flow.

Saving, Previewing, and Publishing

Editing, saving, previewing, and publishing are distinct parts of the development workflow.

Saving Changes

Use Save in the Page Editor to retain changes made to the page in the Project's development state.

Saving page changes does not, by itself, publish an updated version of the application.

Previewing a Page

Use Preview to test a page or form from within the Project Editor before publishing.

Preview helps you evaluate:

• Page layout and responsive behavior.
• Page Flow execution.
• Form input and interactions.
• Widget configuration.
• Data loading and display.
• Access-related behavior where applicable.

Preview is part of development and testing. If a page calls data APIs, Cloud Flow, or external services, consider the runtime and data context involved because those operations may have effects beyond the visual preview.

For more information, see Previewing.

Publishing the Application

When the application changes are ready to be released, use Publish Project from the Project Editor's Publish area.

Publishing updates the published application with the current Project development state.

After publishing, use Launch Project to open and verify the published application.

Save, Preview, Publish Project, and Launch Project serve different purposes. Previewing or launching an application does not substitute for publishing its pending changes.

Working with AI Wiz

AI Wiz can help create and modify Pages, Forms, visual layouts, Page Elements, Page Flow, Data Design, JavaScript, CSS, and related frontend functionality.

When requesting a feature, describe the user experience and the Project components it should use. For example, specify whether a page needs a Database table, a Form, a Data Table widget, Data Design, Page Flow, or Cloud Flow.

Components created or modified with AI Wiz remain editable through the corresponding Project Editor tools, allowing you to inspect, refine, and maintain the implementation.

How Pages & Forms Work Together

Consider an event registration application where visitors view event details, register for an event, and authorized administrators manage registrations.

1. Create the event page

Use a Page to display event information, images, availability, and a registration button.

Page Elements provide the layout and content, while Media assets supply event images and branding.

2. Create the registration form

Use a Form to collect attendee details.

A Table-Backed Form may be appropriate when the form primarily creates a Database record. A Custom Form may be used when registration requires a more specialized workflow.

The Form can be opened as a modal from the event page.

3. Coordinate registration through Page Flow

Use Page Flow to respond to registration actions, validate input, update the interface, and initiate data or backend operations.

For example, Page Flow can open the registration form and respond to the result of a submission.

4. Process registration data

Use the Database to store registrations and related information.

If the application needs centrally enforced rules, such as checking registration capacity before accepting a submission, Cloud Flow can perform that processing on the server.

5. Display registration information

An administrative page can use a Data Table widget to show registration records in a table interface.

Alternatively, Data Design can be used to display registrations in a custom card or list layout, populated through Page Flow.

Access rules and authorization checks should ensure that only permitted users can access or modify the relevant information.

6. Test and publish

Use Preview to evaluate the pages, forms, and interactions during development.

When the application is ready, use Publish Project to release the changes and Launch Project to verify the published experience.

This example shows how Pages & Forms brings together visual interfaces, forms, widgets, Page Flow, data presentation, and backend functionality without requiring every feature to be implemented in a single component.

Where to Go Next

The Pages & Forms documentation is organized into the following detailed areas:

• Managing Pages — Create, organize, rename, clone, and delete pages and forms.
• Page Types — Understand the differences between Page, Form, and Structured Page.
• Page Settings — Configure URLs, access, metadata, styling, and page-specific options.
• Page Editor — Learn how to create and edit visual page content.
• Page Elements — Explore the available layout, content, and interface elements.
• Widgets — Configure ready-made interactive components such as Data Tables, AI Agents, payments, and media widgets.
• Data Design — Create visually designed dynamic content using placeholders and runtime rendering.
• Forms — Build Table-Backed Forms, Custom Forms, and reusable input experiences.
• Page Flow — Implement browser-side behavior, events, data operations, and backend interactions.
• Previewing — Test pages and forms before publishing changes.

As your application becomes more sophisticated, these capabilities can be combined with Database and Cloud Flow to build complete, data-driven application workflows.