File Introduction and Example
File Introduction
{widget}.editor.js is the widget attribute definition file, which is responsible for the GUI and logic to be rendered when the widget is in the editing state. {widget} indicates the name of the customized widget. In this example, the file name is EchartsWidgetTemplate.editor.js. The {widget}.editor.js file is loaded only when the widget is in the editing state. The file contains the propertiesConfig and create methods.
File Example
EchartsWidgetTemplate = EchartsWidgetTemplate.extend({ // Widget event configuration item, which defines the widget event structure and description for global variable mapping. eventConfig: { clickSeries: { desc: { zh_CN: "Click Series", en_US: "Click Series" }, fields: [ { name: 'seriesIndex', desc: { zh_CN: 'Series Index', en_US: 'Series Index' }, }, { name: 'seriesName', desc: { zh_CN: 'Series Name', en_US: 'Series Name' }, }, ], }, }, // Classification of the configuration item classfication: [[{ name: 'configuration' }, { name: 'tooltip' }]], // Detailed configuration of the widget. propertiesConfig: [ { config: [ { type: 'dataSetting', mapping: { x: { keyName: 'dataX', keyTitle: { zh_CN: 'X-axis Data', en_US: 'X-axis Data' }, limitNumber: '1', type: 'category', label: 'x', required: true, }, y: { keyName: 'value', keyTitle: { zh_CN: 'Y-axis Data', en_US: 'Y axis Data' }, limitNumber: '1', type: 'value', label: 'y', required: true, }, s: { label: 's', limitNumber: '1', series: [ { type: '', label: '', required: false, }, ], }, }, mock: {}, name: 'EchartsWidgetTemplateConnector', model: 'CommonViewModel', }, ], }, { migrateFrom: 'advancedSettings', headerTitle: { zh_CN: 'Data Mapping', en_US: 'Data Mapping' }, belong: 'configuration', config: [ { type: 'select', name: 'commonProps.emphasisFocus', label: { zh_CN: ''Emphasis Focus', en_US: 'Emphasis Focus' }, value: 'series', options: [ { label: { zh_CN: 'None', en_US: 'None' }, value: 'none', }, { label: { zh_CN: 'Self', en_US: 'Self' }, value: 'self', }, { label: { zh_CN: 'Series', en_US: 'Series' }, value: 'series', }, ], }, { type: 'tab', name: 'commonProps.showLabel', label: { zh_CN: 'Emphasis Focus', en_US: 'Emphasis Focus' }, value: true, options: [ { label: { zh_CN: 'Show', en_US: 'Show' }, value: true, }, { label: { zh_CN: 'Hide', en_US: 'Hide' }, value: false, }, ], }, ], }, { migrateFrom: 'advancedSettings', headerTitle: { zh_CN: 'Tooltip', en_US: 'Tooltip' }, belong: 'tooltip', config: [ { type: 'select', name: 'commonProps.axisPointerType', label: { zh_CN: 'Axis Pointer', en_US: 'Axis Pointer' }, value: 'shadow', options: [ { label: { zh_CN: 'Line', en_US: 'Line' }, value: 'line', }, { label: { zh_CN: 'Shadow', en_US: 'Shadow' }, value: 'shadow', }, { label: { zh_CN: 'None', en_US: 'None' }, value: 'none', }, ], }, ], } ], // Mandatory. This is called only once to create the widget. create: function (cbk) { if (cbk) { this._super(); cbk(); } }, }); // Mandatory. Register the widget. window.Studio.registerWidget('EchartsWidgetTemplate', 'EchartsWidgetTemplate', {});
- eventConfig: configuration item of the widget event description, which is used for global variables.
- classfication: classification of a widget configuration item.
- propertiesConfig: defines the custom configuration on the Widget Property Setting panel.
- create (mandatory): indicates the built-in extension of the widget. The extension is called only once when the widget is created for the first time.
- registerWidget (mandatory): logic implementation of registering a widget.
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