Updated on 2025-08-15 GMT+08:00

Event Orchestrator Overview

On a standard page, you can use the preset event orchestrator or directly define JavaScript code to implement the interaction between page widgets and backend APIs.

Introduction to Event Orchestrator

Figure 1 Event orchestrator

Event orchestration is an important part of a page. It is used to bear the logic of pages and respond to events, helping users quickly and efficiently implement the functions that need to be displayed on pages.

  • Event behavior area: stores behavior nodes used during event orchestration, including built-in actions (such as opening a page, popping up a page, displaying or hiding a control, scheduled task, submitting a form, and resetting a form) and custom actions (such as obtaining the current widget and page model).
  • Event definition area: operation area for event orchestration. When you type certain characters, the IDE's smart code completion service automatically suggests relevant code, improving your coding efficiency.
    • Event built-in API completion: After you enter context, the system displays the APIs that can be called in the event code.
      Figure 2 Event built-in API completion
    • Model name completion: After context.$model.ref is entered, the model on the current page is displayed.
      Figure 3 Model name completion
    • Flow name completion: After you enter context.flow, the system displays the flow of the current tenant.
      Figure 4 Flow name completion
    • Event name completion: After you enter context.script, the system displays the events of the current tenant.
      Figure 5 Event name completion
    • Service name completion: After you enter context.service, the system displays the API service of the current tenant. After you select an API service name, the service address is automatically completed.
      Figure 6 Service name completion
      Figure 7 Service address completion
    • Huawei OneMobile API completion: After you enter xm, the system displays the APIs in Huawei OneMobile.
      Figure 8 Huawei OneMobile API completion
    • WeLink API completion: After you enter HWH5, the system displays the APIs in WeLink.
      Figure 9 WeLink API completion

Understanding the Event Execution Sequence

On a standard page, you can add multiple actions for an event of a single widget and drag the actions up and down to sort them. As shown in the following figure, the Form Reset and Custom JS Code actions are set for the button widget. When you click this button on the preview page, Form Reset and Custom JS Code are executed in the configured sequence.