Using Custom Actions to Implement Widget Interactions

Scenario

You can compile JavaScript code to implement the logic function of events without using the built-in actions in the event orchestrator. The platform supports code association when you write JavaScript code, encapsulates some common APIs, and makes typical APIs into templates for you to use.

Built-in template code, including widgets, messages, pop-up windows, pages, forms, tables, and services. When writing JavaScript code, you can directly use the APIs preset in the system. For details about the APIs, see Preset APIs on Standard Pages.
Figure 1 Using the built-in module code

If there is a large amount of code, click in the upper right corner of the code editing area to maximize the code editing page.
Click on the left of a template code event to copy the template code. After copying the code, you can paste it in the code editing area on the right.
Click on the right of a template code event to open the template code for editing. After editing, you can copy the template code. After the template code is disabled, the template code is still the initial code and the content you edit in the template code will not be saved to the template code of the event.

Customizing JavaScript Code to Orchestrate Events

Manually compile JavaScript code to implement the event logic of the button widget. The system supports code association when you manually write JavaScript code. In addition, the system encapsulates some common function APIs and makes typical APIs into templates. You can drag related templates from the left to the event definition area on the right for direct use.

Log in to the application designer by referring to Logging In to the Application Designer.
In the navigation pane, choose Page.
Move the cursor to of the corresponding standard page and choose Edit.
On the standard page development page, select the button widget.
On the Events tab page in the right pane, click next to on-click. The page for adding an action is displayed.
Select Custom Action. In the event definition area on the right, enter the JavaScript code for implementing the event logic. You can also drag related templates from the left to the event definition area, and click Create.

Figure 2 Customizing JavaScript code

The following is an example of the customized JavaScript code:
```
//Current widget
var _component = context.$component.current;
//Current form
var  _form = context.$component.form;
// Reset the form
_form.resetFields();
```
In the custom events of standard pages, some APIs for interacting with BPMs are built in.
- Obtaining variables: context.$BPM.loadVariables(): Promise
- Submitting a task or BPM: context.$BPM.submitTask(variables: {[key: string]: any}): Promise
- Modifying a variable: context.$BPM.putVariables(variables: {[key: string]: any}): Promise
Figure 3 Interacting with a BPM in the event code of the standard page
Return to the standard page development page and click in the upper part of the page to save the page.