# Custom Widget

This widget allows to create a full widget by using the van js templating system and echarts

## How it Works

{{< staticImage "ux/CustomWidget/Widget/CustomWidgetMain.png" "Custom widget" >}}

Once the code is entered, the coded form will be displayed on the widget.

This widget is compatible with eCharts library version 6. Multiple examples can be accessed via the following link: [eCharts](https://echarts.apache.org/examples/en/index.html)


## Configuration

{{% ux-widget-configuration %}}


{{< staticImage "ux/CustomWidget/Configuration/CustomWidgetConfigGeneral.png" "Custom widget configuration" >}}

Here, you input the necessary code to obtain the information to be displayed.

The function must always return a van ui object.

Every time the code is updated, it must be evaluated where a preview of the result can be seen.

{{< staticImage "ux/CustomWidget/Configuration/CustomWidgetPreviewEvaluate.png" "Custom widget evaluate code" >}}

### Function

Depending of the configuration receives the following parameters:
{{% ux-widget-param-entitydata %}}

{{% ux-widget-param-relatedEntities %}}

{{% ux-widget-param-timeseriesdata %}}

{{% ux-widget-param-alarmdata %}}

{{% ux-widget-param-dashboardFilters %}}

* *callback* (optional) function used to send chart data (only when the api/http petitions are promised, use return instead)

```javascript
callback(van.tags('Custom widget')());
```
or
```javascript
return van.tags('Custom widget')({});
```

{{% ux-widget-code-utils %}}

**van** -> [vanjs](https://vanjs.org)

**vanui** -> [vanjs](https://vanjs.org)

**echarts** -> [echarts core library](https://echarts.apache.org/examples/en/index.html)

**ecStat** -> [echarts stats library](https://github.com/ecomfe/echarts-stat?tab=readme-ov-file#api-reference)

**openWidget** -> (widgetId[, entityKey, title, extraConf]) -> Opens the selected widget in a modal panel

**openDashboard** -> (workspaceId, dashboardId, newPage) -> Opens the selected dashboard in selected workspace

**openEntityDashboard** -> (entityIdentifier[, organization[user if empty], resourceType['entity.device' if empty] , newPage]) -> Opens the entity's temporary dashboard

**openWizard** -> (wizardId[, wizardData, isEdit]) -> Opens the selected wizard in a modal panel. A list of available wizards will be available to use directly.

### Final code structure build by the application

```javascript
async function main(entityData,relatedEntities,timeserieData,alarmData,dashboardFilters,callback) {
  // YOUR CODE HERE WITH RETURN OR CALLBACK (function is declared automatically)
}
```

### Examples

{{% children sort="weight" depth="10" %}}

---