Event mechanism in logic development-Low-Code Development Platform(Mobi)-阿里云帮助中心

This document describes the event mechanism for logic development. It covers the event types supported by the platform and explains how to configure and execute event handlers. When an event is triggered, it executes a bound action, which is similar to a callback function in programming.

Event types

In the Mobi platform, events are categorized into application events, page events, page component events, frontend function events, and integration operation events. Each event type corresponds to different user actions or system state changes and can trigger the appropriate processing logic.

Application events

Application events are triggered at the application level. The following table lists all application events that the platform currently supports.

Event name	Description
Application initialized (inited)	Triggered when the application finishes loading, but before the page loads successfully. Use this event to initialize data or set a state.

Page events

Page events are triggered at the page level. The following table lists all page events that the platform currently supports.

Event name

Description

Mounted (mounted)

Triggered when the page finishes loading successfully. Use this event to initialize data or set a state.

During application development, press ⌘ (Mac) or Ctrl (Windows) when you switch pages from the page list. This action prevents the page `mounted` event from triggering. This is useful for editing transition pages that have a `mounted` event, as it stops the page from navigating away and becoming uneditable.

Before unmount (willUnmount)

Triggered just before a page unmounts, such as when you switch from the current page to another page in the page list. Use this event to save data, release resources, or manage global state.

Page component events

Page component events are triggered when a user interacts with components on a page. The following table lists common page component events that the platform supports.

Note

The supported event types vary by page component. For more information, see the documentation for each component.

Event name	Description
Click (click)	Triggered when a user clicks a component. Common for components such as buttons and links.
Change (change)	Triggered when a user modifies the input content. Common for components such as input boxes and date pickers.
Focus (focus)	Triggered when a component gains focus. Common for components such as input boxes and date pickers.
Blur (blur)	Triggered when a component loses focus. Common for components such as input boxes and date pickers.
Press enter (pressEnter)	Triggered when the Enter key is pressed within a component. Common for components such as input boxes and multi-line input boxes.

Frontend function events

Frontend function events are triggered by the execution of custom frontend functions. The following table lists all frontend function events that the platform currently supports.

Event name	Description
Success (success)	Triggered after a frontend function executes successfully.
Failure (failure)	Triggered after a frontend function fails to execute.

Integration operation events

Integration operation events are triggered when the application frontend interacts with backend services and external Application Programming Interfaces (APIs). The following table lists all integration operation events that the platform currently supports.

Event name	Description
Success (success)	Triggered after an integration operation executes successfully.
Failure (failure)	Triggered after an integration operation fails to execute.

Event handlers

To respond to specific runtime events, you can add and configure one or more event handlers in the designer. This is similar to the addEventListener mechanism in traditional JavaScript development.

Add and configure an event handler

In the designer, open a specific page, page component, frontend function, or integration operation. Then, add and configure an event handler in the corresponding section of the properties panel.

For example, to add an event handler for a page component, click the + button to the right of Interaction-Event in the properties panel. Click the new event handler entry to open the Configure Event Handler panel and complete the configuration. The following figure shows an example of how to configure an event handler for the click event of a page button component:

Note

Note that event configurations do not always execute in the defined order. For operations that must follow a specific sequence, use the await keyword to ensure an asynchronous operation completes before the next one starts. For more information, see Frontend functions.

Execution of event handlers

When an event occurs, all its corresponding event handlers execute immediately in the frontend browser environment. Each event handler can be considered an independent JavaScript callback function. They are triggered in parallel, with no guaranteed order or timing dependency between them.

Additionally, responding to a single event can trigger new events. This creates an event handling chain, such as "Trigger → Respond → Trigger → Respond → ...". You can use this feature to orchestrate and implement complex, event-based logic flows.

Action types for event handlers

When you configure an event handler, you must select a specific operation, or "action", for the handler to perform when the event is triggered. The following table lists the action types for event handlers that the platform currently supports.

Action type	Description	Configuration parameters
Control component	Controls the behavior of components on a page, such as showing, hiding, enabling, or disabling a component.	Component: The ID of the target component. Method: The method to execute on the component.
Integration operation	Invokes an integration operation, such as executing a database SQL query or accessing an external HTTP API.	Integration: The ID of the target integration operation. Parameters: The parameter object to pass to the integration operation, for example, `{{ {param1:input1.value,param2:input2.value} }}`.
Frontend function	Invokes a frontend function.	Frontend function: The ID of the target frontend function. Parameters: The parameter object to pass to the frontend function, for example, `{{ {param1:input1.value,param2:input2.value} }}`.
Manage timer	Invokes a timer.	Timer: The ID of the target timer. Method: The method to execute on the timer. Parameters: The parameter object to pass to the timer, for example, `{{ {param1:input1.value,param2:input2.value} }}`.
Set variable	Updates the value of a variable that is visible within the current scope.	Variable: The ID of the target variable. Value: The value to set for the target variable.
Execute script	Executes a custom frontend JavaScript script.	Script code: The complete code content.
Show message	Displays a message notification box on the page that disappears automatically after a short time. This provides immediate feedback to the user.	Content: The message content. Type: Info / Success / Warning / Error Duration (seconds): The time in seconds before the message automatically disappears.
Show notification	Displays a notification box on the page to provide feedback on operation results or important information.	Title: The title text of the notification. Description: The detailed description of the notification. Type: The notification type. Info / Success / Warning / Error. Position: The position where the notification is displayed. Top / Top Left / Top Right / Bottom / Bottom Left / Bottom Right. Duration (seconds): The duration for which the notification is displayed.
Go to page	Navigates to a specified page to implement in-app page navigation.	Page: The ID of the target page. Query object: The URL query parameters to include with the navigation, in JSON object format. Hash string: The URL fragment identifier to include with the navigation, in string format. Target window: Current Window / New Window / Parent Window / Top-level Window.
Go to URL	Navigates to a specified external URL.	URL: The target URL. Expressions are supported. Target window: The target window to open the link in. Current Window / New Window / Parent Window / Top-level Window.
User logon	Triggers the user logon process to guide users through identity authentication, such as when converting an anonymous user to a logged-on user. For more information, see Convert an anonymous user to a logged-on user.	No parameters
User logoff	Logs off the currently logged-on user and clears the user session.	No parameters
Invoke user flow	Triggers a user flow operation from within an event handler. Use this to invoke a configured user flow integration operation, such as retrieving an integration flow instance or completing a user task. For information about how to configure a user flow, see User flow operations.	Target operation: The ID of the target user flow. Select a created user flow operation. Input parameters: The parameter object to pass to the user flow, for example, `{{ {param1:input1.value,param2:input2.value} }}`.
Trigger Tongyi Tingwu real-time stream	Starts the Tongyi Tingwu real-time speech recognition stream ingest. This converts real-time speech input into text output. You must first create a real-time task and obtain an ingest URL through a Tongyi Tingwu integration operation before you can start. For information about how to configure a Tongyi Tingwu integration operation, see Tongyi Tingwu real-time stream.	Target operation: The ID of the target Tingwu real-time stream. Select a created Tingwu real-time stream operation. Input parameters: The parameter object to pass to the real-time stream, for example, `{{ {param1:input1.value,param2:input2.value} }}`.
Stop Tongyi Tingwu real-time stream	Stops the Tongyi Tingwu real-time speech recognition stream ingest, ending the real-time transmission of audio data. After your speech-related task is complete, you must stop the real-time stream first. Then, use the stop real-time task operation in the Tongyi Tingwu integration to stop the real-time task. For information about how to configure a Tongyi Tingwu integration operation, see Tongyi Tingwu real-time stream.	Target operation: The ID of the target Tingwu real-time stream. Select a created Tingwu real-time stream operation. Input parameters: The parameter object to pass to the real-time stream, for example, `{{ {param1:input1.value,param2:input2.value} }}`.

Advanced configuration for event handlers

In addition to basic configurations, event handlers support the following advanced configuration options. These options provide more fine-grained control over the event handling logic.

Configuration option	Description	Configuration parameters
Execution condition	Allows you to specify that the event handler executes only under certain conditions.	Conditional expression: Must return a Boolean value. `true` means execute, and `false` means do not execute.
Debounce	Used to limit the number of executions for frequently triggered event handlers. This reduces unnecessary operations.	Debounce wait time (ms): The event handler executes only if the event is not triggered again within this wait time.