Implementation of Custom Widget Events
The interaction between widgets includes the customized events and response actions of widgets. This section describes how to implement the customized events of widgets. A custom event is triggered when a user operates a widget (for example, selecting an option from a drop-down list box).
Registering a Custom Event
The customized event is registered in the eventConfig configuration item in the {widget}.editor.js file. The following uses the global_SelectWidget widget as an example:
- Define events in the global_SelectWidget.editor.js file.
eventConfig: { sendSelect: { desc: { zh_CN: "Select Choose", en_US: "Select Choose" }, fields: [ { name: "selectValue", desc: { zh_CN: "Select Choose", en_US: "Select Choose" }, }, ], }, },
- Register the event in the init hook in the global_SelectWidget.js file.
* @params thisObj: widget instance, which is equivalent to "this". * @params "sendSelect": Event key value. * @params {"zh_CN": "Select Choose", "en_US": "Select Choose"}: Event description, which is internationalized. * @params []: empty array, fixed format (not used by internal widgets). */ Studio.registerEvents(thisObj, "sendSelect", { "zh_CN": "Select Choose", "en_US": "Select Choose" }, []);

Field |
Type |
Description |
---|---|---|
sendSelect |
String |
Key value of a custom event. |
desc |
Object |
Chinese and English descriptions of a custom event. |
fields |
Array |
Content exposed to global variables in a custom event. |
Triggering a Custom Event
- In the global_SelectWidget.ftl file, listen to the change event of el-select.
<el-select v-model="selectConfObj.selectValue" :disabled="selectConfObj.disabled" :popper-append-to-body="false" @change="search" :multiple="selectConfObj.multiple" :clearable="!selectConfObj.multiple" collapse-tags @visible-change="visibleChange" :filterable="selectConfObj.multiple? false: selectConfObj.searchDisabled" :filter-method="match" :placeholder="selectConfObj.placeholder" popper-class="selectWidget" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :title="item.label"> </el-option> </el-select>
- In the global_SelectWidget.js file, trigger the custom event.
search: function () { var params = { ...WidgetTools.dataTrans.getDataByKeyAndVal( this.selectConfObj.options, 'value', this.selectConfObj.selectValue, ['label', 'value'], ), selectValue: this.selectConfObj.multiple ? JSON.stringify(this.selectConfObj.selectValue).slice(1, -1) : this.selectConfObj.selectValue, }; thisObj.triggerEvent('sendSelect', params); },
Global Variable
When a widget triggers a custom event, a value can be assigned to the global variable. Each object in the fields array stores the detailed configuration exposed to the global variable.

Field |
Type |
Description |
---|---|---|
name |
String |
Key value. |
desc |
Object |
Field description, which needs internationalization. |
Fields exposed to global variables must be defined in the event triggering parameter, for example, Figure 3.
Feedback
Was this page helpful?
Provide feedbackThank you very much for your feedback. We will continue working to improve the documentation.See the reply and handling status in My Cloud VOC.
For any further questions, feel free to contact us through the chatbot.
Chatbot