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

How it Works

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

Configuration

General

  • Boxed: widget will be displayed with background in dahsboard.
  • About: widget description in Markdown format.
  • Title: widget title. It can be configured to remain fixed in the widget or only be displayed when it receives focus.
  • Toolbar: configures the behavior of the widget bar on the dashboard, allowing you to hide it, hide it when not in use, or leave it always visible.
  • Refresh Frequency: allows configuring the data refresh frequency displayed in the list.
  • Extra actions: allows user to add new specific actions to the widget with your own code.

Extra action config

You can add a new one by pressing the New button.

Once you added a custom action it can be modified later by pressing the name in the list.

In order to remove the custom action click the delete icon button on the right.

In extra actions you can write your own code were you can open other dashboards, entities dashboards or execute wizards.

Extra action code

You can find all available functions and methods in Extra Information

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.

Custom widget evaluate code

Function

Depending of the configuration receives the following parameters:

  • entityData contains the data of the opened entity NOTE: only available when the user opens an entity dashboard template

Example:

{
  "provision.administration.identifier": {
    "_value": {
      "_current": {
        "value": "device_1"
      }
    }
  },
  "provision.administration.organization": {
    "_value": {
      "_current": {
        "value": "organization_name"
      }
    }
  },
  "provision.administration.channel": {
    "_value": {
      "_current": {
        "value": "channel_name"
      }
    }
  },
  "provision.administration.serviceGroup": {
    "_value": {
      "_current": {
        "value": "service_group_name"
      }
    }
  }
}
  • relatedEntities contains an array of entities related to the entity selected. NOTE: only available when the user opens an entity dashboard template

Example:

[{
  "provision.administration.identifier": {
    "_value": {
      "_current": {
        "value": "related_1"
      }
    }
  },
  "provision.administration.organization": {
    "_value": {
      "_current": {
        "value": "organization_name"
      }
    }
  },
  "provision.administration.channel": {
    "_value": {
      "_current": {
        "value": "channel_name"
      }
    }
  },
  "provision.administration.serviceGroup": {
    "_value": {
      "_current": {
        "value": "service_group_name"
      }
    }
  }
}]
  • timeserieData contains info about the timeserie opened by the user
    • config timeserie configuration
    • data timeserie row selected

NOTE: only available when the user opens an entity dashboard template from timeserie table widget

An example:

{
  "config": {
    "identifier": "69281dc43545e97df66c42a1",
    "name": "Battery charge history",
    "timeBucket": 3600,
    "bucketColumn": "bucketEnd",
    "bucketInitColumn": "bucketInit",
    "identifierColumn": "EntityID",
    "retention": 2592000,
    "origin": "2025-11-26T23:00:00Z",
    "context": [
      {
        "path": "provision.device.administrativeState",
        "name": "Administrative state",
        "sort": "true",
        "filter": "YES",
        "type": "string"
      }
    ],
    "columns": [
      {
        "path": "device.powersupply.battery.charge._current.value",
        "name": "Powersupply battery charge Current Value",
        "filter": "NO",
        "type": "number",
        "sort": false,
        "aggregationFunction": "FIRST"
      }
    ]
  },
  "data": {
    "bucketEnd": "2025-12-11T13:00:00+01:00",
    "bucketInit": "2025-12-11T12:00:00+01:00",
    "EntityID": "entity_1",
    "Powersupply battery charge Current Value": 34
  }
}
  • alarmData contains the data of the alarm opened in template
{
  "identifier": "270dd9f9-1396-4660-bb5f-8d8b471e1dcd",
  "name": "activityForbidden",
  "rule": "activityForbidden",
  "description": "Activity detected for an entity with administrative state disabled",
  "severity": "INFORMATIVE",
  "priority": "LOW",
  "organization": "organization_name",
  "channel": "default_channel",
  "entityIdentifier": "A_WORKER_1",
  "subEntityIdentifier": "A_WORKER_1",
  "resourceType": "ENTITY_ASSET",
  "status": "CLOSED",
  "openingDate": "2019-06-27T08:57:36+02:00",
  "closureDate": "2019-06-27T08:57:51+02:00"
}
  • dashboardFilters contains an object with the selected filters in the dashboard. Each property is related to a widget filter-property.

tasksSelected contains a list with tasks selected.

jobsSelected contains a list with jobs selected.

operationNameSelected contains a list with operation names selected.

operationStatusSelected contains a list with operation statuses selected.

operationResultSelected contains a list with operation results selected.

alarmNameSelected contains a list with alarm names selected.

ruleNameSelected contains a list with rule names selected.

alarmSeveritySelected contains a list with alarm severities selected.

alarmStatusSelected contains a list with alarm statuses selected.

Example:

{
  "tasksSelected": [],
  "jobsSelected": [],
  "operationNameSelected": [],
  "operationStatusSelected": [],
  "operationResultSelected": [],
  "alarmNameSelected": [],
  "ruleNameSelected": [],
  "alarmSeveritySelected": [],
  "alarmStatusSelected": []
}
  • callback (optional) function used to send chart data (only when the api/http petitions are promised, use return instead)
callback(van.tags('Custom widget')());

or

return van.tags('Custom widget')({});

Available utils

$api -> use it to create http petitions to OpenGate Api Rest doc

$user -> Logged user

Example:

{
    "email": "email@amplia.es",
    "workgroup": "workgroup",
    "domain": "domain",
    "profile": "profile",
    "countryCode": "ES",
    "langCode": "en",
    "timezone": "Europe/Madrid"
}

$moment -> use it to format date doc

console -> display messages in navigator console

Promise -> allows easy execution of multiple promises

http -> javascript encapsulation of useFetch (Nuxt 4) library doc

van -> vanjs

vanui -> vanjs

echarts -> echarts core library

ecStat -> echarts stats library

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

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

Examples