Skip to main content

Creating Generic Pages

Generic pages are the most widely used page type in page development. Developers add components to blank pages as needed to create page layouts, and configure components and write event logic. This article uses generic pages to demonstrate how to perform componentized page development.

Loading...

To create a page, developers locate UI Pages in the element directory tree, click + and select Generic Page, fill in the page name in the popup form, and click Confirm to complete page creation and automatically enter the Visual Page Editor.

Page inheritance

To reuse an existing page, developers can select the page to inherit in the advanced configuration while filling in the page name.

The new page will inherit all component configurations from the parent page (excluding event logic), and developers can modify these configurations in the new page.

Visual page editor

JitAi provides a visual drag-and-drop page editor for page elements. Developers can drag functional components onto the canvas within the page editor and configure components while writing event logic.

Loading...
Page Editor Overall Layout

The page editor layout consists of four main areas: toolbar, canvas, component configuration panel, and event panel.

The JitAi development framework provides a comprehensive component library. Each component has distinct configuration options and events. Developers can refer to Using Functional Components in Pages to understand the detailed usage of each component.

Integrating AI assistant in pages

Pages support AI assistant integration, providing intelligent dialogue and auxiliary functions to enhance user experience.

Toolbar

The toolbar serves as the quick operations area within the page editor. Developers can use toolbar buttons to add components, switch between compact/loose page modes, enable AI assistants, toggle the element directory tree, toggle the event panel, toggle the component configuration area, preview pages, switch between visual and source code modes, and save page modifications.

Real-time preview

During development, developers can click the preview button in the toolbar at any time to preview page effects in real-time.

Canvas

Developers create page layouts by dragging components onto the canvas.

Loading...
Add Components to Page

To add components, developers click the + Insert Component button on the leftmost side of the toolbar, locate the required component in the popup window (search supported), and drag the component to the canvas while holding the left mouse button. The canvas can accommodate multiple components, and both component positions and sizes can be adjusted through dragging.

Loading...
Component Common Operations on Canvas

Each component features an Events button and a ... button in the upper right corner. The Events button displays the current component's events in the event panel, while the ... button opens the component's context menu with options including hide title, set size, move, generate copy, copy configuration, paste configuration, and delete.

Component configuration area

The component configuration area allows developers to configure component display title, properties, styles, rules, buttons, and other settings.

Loading...
Table Component Configuration Overview

When developers open component configuration in the toolbar, they can view the configuration options for the currently selected component, such as a table's Data Source, Visible Fields, Buttons and more. Clicking other components in the canvas switches to the corresponding component's configuration area.

Event panel

The event panel serves as the dedicated area within the page editor for writing component event logic.

Loading...
Open Event Panel

When developers open the event panel through the toolbar, they can view the configurable events for the currently selected component, such as a table's Click Row and After Row Selected events. Clicking other components in the canvas or selecting components from the list on the left side of the event panel enables configuration of the corresponding component's event logic.

Loading...
Edit Event Logic

Developers can write event logic visually. Event logic supports basic statements, variable declaration and assignment statements, loop iteration statements, conditional statements, return values, breakpoints, and other statement types. Developers can delete, copy, and switch to source code mode for editing statements, with bidirectional synchronization between source code and visual editing modes.

Inserting breakpoints for debugging

Event logic supports breakpoint insertion. Developers can pause execution at breakpoints and examine current variable values, call stacks, and other debugging information.

Component common operations

Duplicating components

When a page requires multiple components of the same type with similar configurations, components can be quickly added by duplicating existing ones.

Loading...
Duplicate Component

Developers click the ... button in the upper right corner of the component and select Duplicate from the popup menu to quickly duplicate the component. The duplicated component inherits the same configuration as the original component, allowing developers to make personalized modifications.

tip

Duplicating components only copies the component's configuration, not its event logic.

Title visibility

Each component's title can be individually configured to show or hide.

Loading...
Title Visibility

When a title is hidden, the Hide Title button automatically changes to Show Title. Clicking the Show Title button restores the title display.

Custom sizing and adaptive layout

Component sizes can be adjusted through both edge dragging and precise configuration settings.

Loading...
Set Component Size

With proportional adaptation selected, components automatically adjust their width based on the browser's page display width while maintaining the original aspect ratio. When custom sizing is selected, developers can specify exact pixel values for component width and height.

Copying and pasting configurations

When working with two or more components of the same type—whether within the current page, across different pages in the same application, or across pages in different applications—configuration copying and pasting enables quick reuse.

Loading...
Copy and Paste Configuration

Developers click the ... button in the upper right corner of the source component, select Copy Config from the popup menu, then click the Paste Config button on the target component to complete the transfer.

tip

Like duplicating components, copying and pasting configurations only transfers the component's configuration, not its event logic. Unlike duplicating components, this method supports cross-page operations.

Moving to layout components

When layout components such as modals, tabs, and collapse panels exist on the page, developers can quickly move other components into these layout containers.

Loading...
Move Component to Other Layout Component

Developers click the ... button in the upper right corner of the component, select Move To from the popup menu, choose the target layout component in the dialog, and complete the move operation.

Deleting from page

Loading...
Delete Component

When a component is no longer needed on the page, developers click the ... button in the upper right corner of the component, select Delete from the popup menu, and remove the component from the page.

Page variables

Page variables store temporary data and enable logic control within function implementations. Both the page's own functions and functions from other page components can access the current page's variables.

Variable declaration

Developers can declare one or more page variables as needed. Variable types support all JitAi data types, including single-line text, multi-line text, date and time, and more.

Loading...
Page Variable Declaration

To declare variables, developers click the Main Page button at the top of the canvas to open the main page's event panel, select Page Variables from the list in the upper left corner of the event panel, and click Main Page - Page Variables in the popup list to access the visual variable declaration interface.

In the page variable configuration interface, developers can click the Declare Page Variable button, select the data type to complete the declaration. Developers can also click the button beside each variable title to modify existing variable names and parameter configurations.

Different variable data types support distinct configuration parameters. For example, text types like Stext and Ltext support character limit configuration.

Getting variable values from request URLs

JitAi supports extracting variable values from request URLs when users access pages. After declaring variables, developers can select the corresponding variables in the Select variables assigned via URL parameters dropdown list, with support for multiple selections.

Page functions

Page functions are custom program logic encapsulated by developers according to business requirements. These functions can be invoked by various component functions and events within the page.

Function declaration

Developers can create new page functions within the event panel and implement their logic.

Loading...
Declare Page Function

To create a function, click the small arrow button in the upper left corner of the event panel, select Page Functions from the list, then click the + Create Function button, enter the function name in the popup dialog, and click Confirm to create the page function.

tip

The platform automatically generates English names based on Chinese function names entered by developers, though developers can manually modify these names.

After creating a page function, developers can add function descriptions, configure parameter lists, set return value types, and implement function logic through either visual editing or full-code mode.

Function management operations

Existing page functions support rename, duplicate, and delete operations.The duplicate function enables quick reuse of existing functions with personalized modifications.

Loading...
Page Function More Operation Buttons

Developers can hover over the button on the right side of each page function title to reveal three operation buttons: Edit, Duplicate, and Delete.

Using page variables and calling functions

Page functions can invoke other page functions within the current page and access page variables.

Loading...
Page Function and Variable Call

In the example above, the TestInvoke function calls the SayHi function and passes the value of the Var1 page variable as an input parameter to the SayHi function.

Page events

After page load

When a page completes loading, the After Page Load event triggers automatically. Developers can use this event to perform initialization operations after page loading, such as retrieving page variable values, calling page functions, displaying prompt information, and more.

Loading...
Page After Load Event

Developers switch to Page Events in the upper left corner of the Main Page event panel to view the current page's event list on the right side. Click the After Page Load tab to edit the After Page Load event logic below.

After page focus

When browser tabs switch to the current page or platform navigation tabs switch to the current page, the After Page Focus event triggers. Developers can use this event to perform operations after the page gains focus.

Loading...
After Page Focus

Developers switch to Page Events in the upper left corner of the Main Page event panel to view the current page's event list on the right side. Click the After Page Focus tab to edit the After Page Focus event logic below.

On page variable change

Each page variable automatically generates an On Page Variable Change event. When a page variable value changes, this event triggers automatically. For example, the variable var1 generates the corresponding event On Page Variable (var1) Change.

Loading...
On Page Variable Change

Developers can edit the On Page Variable (var1) Change event logic within the event panel.

Using page variables and functions in event logic

Within event logic, developers can access the current page's variables and functions.

Loading...
Use Page Variables and Functions in Event Logic

In the example above, the On Page Variable (var2) Change event calls the SayHi function and passes the var2 page variable value as an input parameter to the SayHi function.

Shortcuts

Clearing statements

When page function logic requires complete rewriting, JitAi supports one-click clearing of function statements.

Loading...
Clear Statements

Developers can click the Clear button at the bottom of the function editing interface and click Confirm in the popup prompt to clear all statements in the current function.

The shortcut key Ctrl/Command+Z can undo the clear operation.

Duplicating statements

When reusing and modifying an existing statement, developers can use the duplicate statement function.

Loading...
Duplicate Statement

Developers click the duplicate button on the right side of the statement to create an identical statement below the current one, then modify the new statement as needed.

Dragging statements to adjust position

To quickly adjust the execution order of multiple statements, developers can use drag-and-drop repositioning.

Loading...
Drag Move Function Statement

Developers position the mouse on the target statement line, and when the cursor changes to a hand icon, hold down the left mouse button and drag the statement line up or down to adjust its position.

Deleting statements

When a statement's logic is no longer needed, developers can use the delete statement function.

Loading...
Delete Statement

Developers click the delete button on the right side of the statement to remove the current statement.

Switching to source code and locating statements

While editing function logic through the visual editor, the platform automatically generates corresponding source code. Developers can switch between visual and source code editors at any time.

Loading...
Switch and Locate Statement Source Code

Developers click the </> button on the right side of the statement to switch to source code mode, with the editor automatically locating the current statement. In source code mode, developers can freely modify function logic and click the switch button in the upper right corner to return to visual editing mode.

Keyboard shortcuts

JitAi supports keyboard shortcuts for efficient function editing. Available shortcuts include: Select All (Ctrl/Command + A), Select Multiple Statements (Ctrl/Command + Select Statement), Copy (Ctrl/Command + C), Cut (Ctrl/Command + X), Paste (Ctrl/Command + V), Duplicate (Ctrl/Command + D), Undo (Ctrl/Command + Z), Redo (Ctrl/Command + Y), Delete (Delete), and Quick Add Basic Statement (Select Statement + Enter).

Loading...
Page Function Edit Shortcuts

In the function editing interface, developers can hover over the Shortcuts button at the bottom right to view currently supported shortcut key descriptions.

Calling frontend and backend tools and services

Within frontend page functions and component event function logic, developers can directly invoke backend model CRUD functions and service functions. Both developer-defined functions and functions inherited from parent applications are available for invocation.

Loading...
Call Frontend Backend Tools Services in Page Function

The list above displays various callable targets including variables, backend services, backend data models, AI assistants, page functions, and frontend utilities for feedback reminders, data processing, utility functions, and exception handling. Developers can select targets according to their needs.

Calling backend models and services

Data models encapsulate CRUD operations on database tables, while service functions encapsulate custom business logic. JitAi enables developers to complete backend interface calls through point-and-click selection without writing HTTP interface call code.

Loading...
Call Model in Function

Developers click the Basic Statement button, then click the Please select text in the newly inserted blank statement to display a list of callable targets.

Using the example above, sequentially selecting Data Models - Customer(example) - Get One Record completes the functionality for querying a single department data record.

Calling frontend services

In frontend business function development, developers typically need common functionality such as popup confirmations, feedback reminders, loading indicators, message prompts (error/warning/normal), and log printing. JitAi provides these functions as built-in frontend services for direct use.

Loading...
Call Frontend Service in Function

Developers click the Basic Statement button, click the Please select text in the newly inserted blank statement, sequentially select Feedback - Confirmation Dialog from the popup list, and the platform automatically inserts a statement. Developers then enter the desired text in the parameter input box.

Mobile page editor

JitAi includes built-in mobile adaptation capabilities, enabling mobile page development in the mobile page editor with the same ease as PC page development.

Loading...
Create Mobile Page

Developers can select Mobile as the page terminal type when creating pages (PC is the default).

Loading...
Mobile Page Editor

The mobile page editor maintains functional parity with the PC page editor. Configuration, events, functions, page variables, and other operations remain completely consistent between mobile and PC page editors.

Enabling AI assistant for page

JitAi supports direct integration of AI Assistants within pages, enabling user interaction with AI assistants when accessing pages.

Loading...
Enable AI Assistant for Page

Developers enable the AI Assistant at the top of the page editor, select an AI Assistant from the popup list, and enable the AI assistant for the page.