How Do I Call a Flow or Script on a Standard Page?

Method 1: Editing an Event

During event orchestration on a standard page, write code in the Custom JS Code area to implement the interaction between page widgets and backend APIs (flows or scripts).

The following describes how to edit an event and define the JavaScript code.

On the application design page, select a widget, click Events in the right pane, and click + next to an event.
In the Add Action area, set Builtin Action or Custom Action. For a custom action, customize the JavaScript code logic. You can click on the right of the code area to maximize the JavaScript code page.

Figure 1 Custom JavaScript code
In the template code on the left, choose Service > Flow or click , and copy the code to the code editing area. The preset API is displayed.

Figure 2 Preset API code

Method 2: Defining a Service Model

Define a data model of the service model type. The data model is created based on the input and output parameters of the backend services, and the inputParam and outputParam nodes are generated.

The following describes how to call a backend API (flow or script) for an input box widget by defining a data model of the service model type.

Create a standard page and drag the input box widget to the page. For details, see Creating a Blank Standard Page.
Select the input box widget, choose Properties > Data Binding on the right of the page, and click to set the data source.

Figure 3 Binding a model
On the Select Model page, click New.
In the basic information area, set the model name, select Services for Source, and click Next.

Figure 4 Selecting Services
In the Service Type area, select Flow or Script to be called.
On the displayed page, select a flow or script name and click OK.

Figure 5 Setting a specific service
Click Next. The system generates the default run method. You can click Add Method to add other APIs to be called.

Figure 6 Checking the method
After the setting is complete, click OK to return to the model selection page.
On the Select Model page, select the created model and click OK to set the data source for the widget.

Figure 7 Setting a data source for the widget