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" },
        },
      ],
    },
  },

* @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" }, []);

Figure 1 Effect

**Table 1** eventConfig description
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.

Figure 2 Assigning a value to a global variable