Appearance
Frontend Programming
Frontend programming defines browser-side behavior for ioLoop Project Pages and Forms. Use it to respond to user interactions, validate input, update visible content, work with supported Project data, and coordinate with Backend workflows.
Frontend logic runs in the visitor's browser. It is appropriate for presentation and interaction, but it is not a trusted place to enforce sensitive permissions or store private credentials.
Frontend References
| Reference | Use It For |
|---|---|
| Page Flow Blocks | Find ioLoop-specific visual blocks for events, Page actions, Forms, data operations, and other supported browser-side behavior. |
| Client API | Look up functions available to supported frontend code, including Page content, DOM interaction, Forms, UI, and permitted data operations. |
These are technical references. For guidance on using the Page Flow editor, choosing blocks, and testing behavior, see the Project Editor Page Flow documentation.
Page Flow
Page Flow is the browser-side logic associated with an individual Page or Form. It supports visual programming blocks and JavaScript code blocks within the Page's workflow.
Use Page Flow when a Page or Form needs to:
- Respond to startup events, Button clicks, or other supported interactions.
- Read, update, show, or hide supported Page Elements.
- Work with Form values, validation, and modal workflows.
- Coordinate Data Table Widgets, Data Design, or other supported Widgets.
- Retrieve or update Project data through permitted interfaces.
- Invoke Cloud Flow for server-side processing.
- Update the Page based on the outcome of an operation.
For example, a registration Page can open a Form, validate user input, invoke a Cloud Flow operation when protected processing is required, and display the result.
The Page Flow Blocks reference describes the available ioLoop-specific blocks. It is a reference for supported block behavior, not a step-by-step Page-building tutorial.
Client API
The Client API is the browser-side ioLoop API available to supported frontend code. It provides programmatic access to capabilities that would otherwise be coordinated through Page Flow blocks or other supported frontend interactions.
The generated Client API reference organizes its functions into areas such as:
| API Area | General Purpose |
|---|---|
$io.content | Work with supported Page content. |
$io.db | Perform supported Project data operations. |
$io.dom | Work with supported document elements and interactions. |
$io.form | Work with supported Form behavior and values. |
$io.system | Access supported frontend system capabilities. |
$io.ui | Coordinate supported user-interface behavior. |
Consult each function's reference for its parameters, return values, and execution requirements. The presence of an API area does not imply unrestricted access to every Project resource.
Page Flow Blocks vs. Client API
| Need | Recommended Starting Point |
|---|---|
| Build an event-driven workflow visually | Page Flow Blocks |
| Use ready-made actions for Forms or Page Elements | Page Flow Blocks |
| Express specialized logic in JavaScript | Supported Page Flow code blocks and Client API |
| Look up a function signature or result | Client API |
| Learn the Page Flow editor workflow | Project Editor — Page Flow |
Visual blocks and custom code can be combined where supported. Prefer a straightforward visual workflow when it already expresses the required behavior clearly.
Working with Backend Operations
Frontend programming can request Backend processing through supported Project interfaces, including Cloud Flow.
A common pattern is:
- Page Flow reads the current Page or Form state.
- It validates information needed for the user experience.
- It invokes the appropriate Cloud Flow operation for trusted processing.
- Cloud Flow validates authorization and performs the protected work.
- Page Flow handles the returned result and updates the visible Page.
Client-side validation is useful for immediate feedback, but users can modify browser-side input. Use Database access controls and trusted Backend operations for permissions, protected business rules, and private credentials.
Choosing Your Next Reference
Use Page Flow Blocks when configuring a specific visual block. Use Client API when implementing custom frontend code. For Form-specific lifecycle concepts, see Form Page Flow.
For trusted server-side operations, continue to Backend Programming.