Frontend

The Frontend area is where you build and manage the user-facing experience of an ioLoop Project. It includes the pages people visit, the forms they complete, the media they see, and the JavaScript and CSS assets that customize how the application looks and behaves.

Frontend development in ioLoop can be visual, code-based, AI-assisted, or a combination of these approaches. You can design pages visually, configure forms, add Page Flow logic, include custom JavaScript or CSS, and use AI Wiz to help create or revise frontend functionality.

Frontend Sections

The Frontend menu contains three main sections:

• Pages & Forms — Create and manage pages, forms, page settings, visual layouts, and Page Flow logic.
• Media — Upload and manage images and other public files used by the Project's frontend.
• Code — Create and manage JavaScript and CSS assets that can be included in individual pages or across the Project.

These sections work together to build the application experience. Pages & Forms defines the interface, Media supplies visual assets, Code provides reusable styling and functionality, and Page Flow coordinates browser-side interactions.

For custom frontend development using browser-standard HTML, CSS, JavaScript, imported HTML, Head Additions, third-party libraries, and ioLoop APIs, see Standards-Based Frontend.

Standards-Based Frontend

ioLoop frontends run in the browser using standard HTML, CSS, and JavaScript.

The visual editor and Page Flow provide structured product tools for building interactive experiences, but a Project is not limited to the built-in Page Elements or visual blocks. You can import HTML, edit supported imported content visually, include custom JavaScript and CSS, load supported third-party libraries through Head Additions, and use ioLoop APIs where appropriate.

This makes it possible to build simple visual pages, Page Flow-driven interfaces, or custom SPA-style Pages within the same frontend model.

Pages & Forms

Pages & Forms is the main workspace for creating and managing the visible parts of your application.

Pages define what users see and interact with, while forms collect user input. Page settings control details such as URLs, titles, metadata, access rules, included code assets, and other page-level behavior.

Depending on the application you are building, you can create experiences such as:

• Content and application pages for websites, dashboards, portals, and interactive interfaces.
• Forms for collecting user input, processing submissions, and interacting with application data.
• Structured page layouts with organized and reusable page sections.
• HTML-based pages for custom page experiences requiring greater control over markup and presentation.

The available editing and configuration options depend on the page type and its supported capabilities.

Pages can be simple or highly interactive. A basic page may only need visual content and settings. More advanced pages can combine Page Flow, JavaScript and CSS assets, database operations, Cloud Flow calls, and integrations.

Each page can also have its own Page Flow, allowing its behavior to be configured alongside its structure and settings.

Page Flow

Page Flow is the client-side logic associated with an individual page. It is configured within Pages & Forms and runs in the user's browser to coordinate page-level behavior.

Use Page Flow for interactions such as:

• Responding to button clicks and other user actions.
• Initializing page behavior when a page loads.
• Validating form input before submission.
• Showing messages, dialogs, or conditional interface states.
• Reading from or writing to supported Project data interfaces.
• Calling supported APIs.
• Invoking Cloud Flow through supported request patterns.
• Coordinating custom JavaScript functionality included on the page.

Page Flow supports visual programming blocks and JavaScript code blocks, including combinations of both within the same flow.

Visual blocks provide a structured way to implement common operations. JavaScript code blocks allow specialized logic to be written directly within the flow. Both approaches can be used together to build more sophisticated behavior.

Page Flow vs. JavaScript Assets

Page Flow JavaScript code blocks and JavaScript assets managed under Code serve related but different purposes.

• JavaScript code blocks in Page Flow contain logic executed as part of the page's configured flow. They are useful for page-specific operations and processing within visual workflows.
• JavaScript assets in Code contain browser-side code maintained separately from Page Flow. They are useful for reusable functions, shared utilities, custom widgets, and more extensive frontend behavior.

Page Flow can call functions provided by included JavaScript assets. JavaScript assets can also implement their own browser-side behavior when appropriate.

For interactions primarily managed through Page Flow, keeping event coordination within the flow and reusable implementation details in Code assets can make the application easier to understand and maintain.

When to Use Cloud Flow

Page Flow is best suited for logic that belongs to the user interface.

When an operation requires protected credentials, centrally enforced business rules, sensitive authorization checks, or execution independent of an active browser session, use Cloud Flow instead.

Page Flow can initiate supported backend operations while Cloud Flow performs the corresponding trusted server-side processing.

Media

Media stores public files used by the frontend of your Project.

Use Media for images and other assets that pages, forms, styling, or Project settings need to reference. Common examples include logos, illustrations, photographs, icons, and social sharing images.

Media assets can be used in places such as:

• Page content and visual layouts.
• Page metadata and social sharing images.
• Project branding and logos.
• CSS backgrounds and image references.
• Custom interface elements.

Media files are intended for frontend-accessible content. They should not be treated as protected storage for confidential documents, credentials, or private user information.

If your application needs user-uploaded files stored as part of application data, those may belong in the Database through file fields or in backend file workflows, depending on the application's design.

Code

Code is where you create and manage reusable JavaScript and CSS assets for the frontend.

Code assets extend what can be accomplished through visual editing and Page Flow. They provide a place to maintain custom styling, helper functions, specialized interface functionality, and other browser-side code.

Common uses include:

• CSS styles shared by multiple pages.
• JavaScript helper functions called from Page Flow.
• Custom widgets and interface behavior.
• Formatting, validation, and transformation utilities.
• Shared client-side configuration.
• Page-specific functionality that is easier to maintain as a separate asset.

JavaScript Assets

JavaScript assets provide reusable or specialized browser-side functionality.

They can contain helper functions invoked by Page Flow, custom interface logic, event handling, or other client-side behavior that is better maintained outside individual flow code blocks.

CSS Assets

CSS assets define custom styling for pages and interface components.

They are useful for maintaining consistent appearance across multiple pages, implementing specialized layouts, and keeping reusable styling separate from page content.

Including Code Assets

Code assets can be included at the Project level or on individual pages, depending on where they are needed.

• Project-level inclusion makes an asset available broadly across the Project's pages.
• Page-level inclusion allows an asset to be loaded only on the pages that require it.

The inclusion configuration determines where an asset is loaded. How its JavaScript functions, variables, or CSS rules interact with other frontend components depends on the asset's implementation and the browser environment.

Frontend Implementation Model

The frontend combines page structure, browser-side logic, reusable code, and media assets to create an interactive application.

These components have distinct responsibilities but are designed to work together.

How Frontend Components Work Together

Consider a registration form that collects attendee information for an event.

1. Pages & Forms defines the interface

A page provides the registration experience, including event information, input fields, a submission button, and confirmation messages.

Page settings determine how the page is accessed, its metadata, and which code assets are included.

2. Media provides visual resources

The page uses images from Media, such as an event banner, logo, or illustrations. These assets can also be referenced by custom CSS.

3. Code provides reusable functionality and styling

CSS assets control the presentation of the registration interface. JavaScript assets can provide reusable validation helpers, formatting functions, or specialized user interface behavior.

4. Page Flow coordinates the interaction

When the visitor submits the registration form, Page Flow can validate the input, display feedback, and initiate an operation through a supported Project data interface or Cloud Flow workflow.

Page Flow can also invoke JavaScript helpers from the Code assets included on the page.

5. Backend services process trusted operations

If registration requires protected processing, Cloud Flow can validate the request, enforce business rules, update the Database, or communicate with an external service.

Page Flow can then update the interface based on the operation's result.

Choosing Where to Implement Functionality

Not every page requires every frontend component.

A simple informational page may use only visual content and Media assets. An interactive application page may rely heavily on Page Flow. A more specialized interface may use extensive JavaScript and CSS assets.

The general approach is to use each component for its intended responsibility:

• Pages & Forms defines the interface and page configuration.
• Page Flow coordinates browser-side interactions and application behavior.
• Code supplies reusable or specialized JavaScript and CSS.
• Media provides public files used by the interface.
• Cloud Flow, when needed, provides trusted server-side execution.

This allows frontend functionality to grow incrementally without requiring every part of an application to be implemented in the same way.

Frontend and Backend Boundaries

Frontend logic runs in the user's browser. This makes it appropriate for interactive interfaces, but it also means frontend code and browser-accessible data should not be treated as trusted or secret.

Understanding this boundary helps determine where application functionality should be implemented.

Frontend Responsibilities

Use frontend tools for:

• Presentation and user interaction.
• Page initialization and interface state.
• Form validation and user guidance.
• Browser-side formatting and data transformation.
• Calling supported Project APIs and backend workflows.
• Data operations permitted through supported frontend interfaces and applicable access rules.

Frontend validation improves the user experience by catching input problems early, but it should not be relied upon as the application's security boundary.

Backend Responsibilities

Use backend tools for:

• Protected credentials and secrets.
• Server-side authorization and access enforcement.
• Business rules that must be enforced centrally.
• Sensitive external service operations.
• Webhooks and background tasks.
• Processing that must run independently of an active browser session.

Cloud Flow provides server-side execution for these operations.

Connecting Frontend and Backend Logic

Frontend functionality can interact with Project data through supported APIs, subject to the applicable data access rules.

Not every data operation requires a custom Cloud Flow workflow. However, operations involving privileged access, protected credentials, or business rules that must be enforced centrally should be handled through trusted backend logic.

A common implementation pattern is:

1. Page Flow collects input and performs browser-side validation.
2. Page Flow initiates a supported Cloud Flow operation.
3. Cloud Flow validates and authorizes the request, performs the required processing, and interacts with the Database or external services.
4. Page Flow handles the response and updates the user interface.

This separation allows the frontend to remain responsive while sensitive operations are performed on the server.

Working with AI Wiz

AI Wiz can help create and modify frontend components, including pages, forms, visual layouts, Page Flow logic, and JavaScript or CSS assets.

Because AI Wiz works with the Project's editable components, you can inspect and refine its changes through the Frontend tools or continue making improvements with AI Wiz.

This allows AI-assisted development and direct editing to be used together throughout the Project's development lifecycle.

Where to Go Next

Start with Pages & Forms to create pages, forms, and interactive experiences, including their Page Flow logic.

Use Media to manage images and other public frontend assets, and Code to create reusable JavaScript and CSS.

When your frontend requires server-side processing, protected integrations, or centrally enforced business rules, explore Backend and Cloud Flow.

You can move between these areas as your application develops, combining visual editing, Page Flow, custom code, and AI-assisted development to build and refine the user experience.