Alibaba Cloud Document Center: Find the Documentation for Your Needs

An index.js file is the main entry file of a widget. This topic describes common functions in the file.

For more information, see the example widget.

Common functions


Function	Description
`render(array: data)`	Provides a default rendering method. After a widget is initialized, its rendering logic is called to pass data as input parameters. This function supports re-rendering, which generates the same rendering effect from the same input data.
`updateOptions(object: config)`	Updates the widget settings. This function receives updated `config` settings as the input parameters.
`emit(string: event_name, object: value)`	Triggers an event. The input of `value` is an object.
`resize(int: width, int: height)`	Resizes a widget. This function is called when you drag a widget to resize it.
`clear()`	Deletes a widget. This function is called when you delete a widget.
`destroy()`	Destroys a widget. This function is called when you destroy a widget.
`require(*)`	This function supports .js or .html files.
`getThemableConfig(themeConfig)`	Allows you to configure themes. When you configure the theme for a widget, this function is called and returns the mapping between the theme and widget configurations. In addition, you can use theme configuration items in `themeConfig` to configure the theme. Before you call this function, you must use the `supportTheme` field to declare whether a widget supports theme configurations. If you set this field to `true`, the widget supports theme configurations. For more information, see getThemableConfig(themeConfig).

getThemableConfig(themeConfig)

The getThemableConfig(themeConfig) function is used to configure a theme for a widget by using themeConfig and return the mapping between the theme and widget configurations.

The following example describes how to call the getThemableConfig(themeConfig) function.

getThemableConfig: function(themeConfig) {
 if (! themeConfig) return null;
 const themeMap = {
 color: themeConfig.textColor,
 bgColor: palette[0]
 }
 return themeMap;
}

Sample configurations in themeConfig

{
  "bgColor": "#202020",        // The background color.
  "textColor": "#FFFFFF",     // The text color.
  "axisColor": "#FFFFFF",    // The axis color.
  "assistColor": "#FFFFFF", // The color of the auxiliary information.
  "palette": [             // The color palette.
    "#85A5FF",
    "#597EF7",
    "#2F54EB",
    "#1D39C4",
    "#10239E",
    "#061178",
    "#030852"
  ]
}