Widget API Reference

self.onInit = function() {
  let $injector = self.ctx.$scope.$injector;
  let utils = $injector.get(self.ctx.servicesMap.get('utils'));
  let settings = utils.deepClone(self.ctx.settings) || {};

  self.ctx.$scope.myValue = settings.defaultValue || 0;
};

self.onDataUpdated = function() {
  let data = self.ctx.data;
  if (data.length > 0 && data[0].data.length > 0) {
    self.ctx.$scope.value = data[0].data[0][1];
  }
  self.ctx.detectChanges();
};

self.onResize = function() {
  if (myChart) {
    myChart.resize();
  }
};

self.onDestroy = function() {
  if (myChart) {
    myChart.clear();
  }
};

self.typeParameters = function() {
  return {
    maxDatasources: 1,
    singleEntity: true,
    maxDataKeys: 4,
    dataKeysOptional: false,
    datasourcesOptional: false,
    hasDataPageLink: false,
    ignoreDataUpdateOnIntervalTick: true,
    embedTitlePanel: false,
    defaultDataKeysFunction: function() {
      return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];
    }
  };
};

self.actionSources = function() {
  return {
    'rowClick': {
      name: 'widget-action.row-click',
      multiple: false
    },
    'actionCellButton': {
      name: 'widget-action.action-cell-button',
      multiple: true,
      hasShowCondition: true
    }
  };
};

let descriptors = self.ctx.$scope.ctx.actionsApi
  .getActionDescriptors('rowClick');

if (descriptors.length) {
  self.ctx.$scope.ctx.actionsApi.handleWidgetAction(
    null,          // event index
    descriptors[0], // action descriptor
    entityId,       // { entityType, id }
    entityName      // string
  );
}

{
  dataKey: {
    name: 'temperature',    // key name
    label: 'Temperature',   // display label
    type: 'timeseries',     // 'timeseries' | 'attribute' | 'entityField'
    units: '°C',            // configured units (may be empty)
    decimals: 1             // configured decimal precision
  },
  data: [
    [1710000000000, 24.5],  // [timestamp_ms, value]
    [1710000060000, 25.1]   // for time-series: multiple points
  ]
}

{
  type: 'entity',           // 'entity' | 'function'
  entity: {
    id: { entityType: 'DEVICE', id: '...' },
    name: 'My Device'
  },
  entityId: '...',
  entityName: 'My Device',
  entityType: 'DEVICE',
  dataKeys: [ /* DataKey objects */ ]
}

let alarms = self.ctx.defaultSubscription.alarms;
// alarms.data = [ AlarmInfo, AlarmInfo, ... ]
// alarms.totalElements = 42
// alarms.totalPages = 5

{
  id: { id: '...', entityType: 'ALARM' },
  type: 'High Temperature',
  severity: 'CRITICAL',     // CRITICAL | MAJOR | MINOR | WARNING | INDETERMINATE
  status: 'ACTIVE_UNACK',   // ACTIVE_UNACK | ACTIVE_ACK | CLEARED_UNACK | CLEARED_ACK
  createdTime: 1710000000000,
  startTs: 1710000000000,
  endTs: 1710000060000,
  ackTs: 0,                 // 0 = not acknowledged
  clearTs: 0,               // 0 = not cleared
  originator: { entityType: 'DEVICE', id: '...' },
  originatorName: 'My Device',
  details: { /* custom JSON */ }
}

{
  "id": "fieldId",
  "name": "Display Name",
  "group": "Group Name",
  "type": "text",
  "default": "default value",
  "required": false,
  "condition": "return model.otherField == true;"
}

{ "id": "note", "name": "Note", "type": "textarea", "rows": 4 }

{ "id": "alignment", "name": "Alignment", "type": "radios", "direction": "column" }

{
  "id": "deadline",
  "name": "Deadline",
  "type": "datetime",
  "dateTimeType": "date",
  "allowClear": true
}

{
  "type": "constant",
  "color": "#000",
  "rangeList": {
    "range": [
      { "from": 0, "to": 20, "color": "#2196f3" },
      { "from": 20, "to": 30, "color": "#4caf50" },
      { "from": 30, "to": null, "color": "#f44336" }
    ]
  },
  "colorFunction": "if (value > 30) return 'red';\nreturn 'green';"
}

{
  "size": 12,
  "sizeUnit": "px",
  "family": "Roboto",
  "weight": "normal",
  "style": "normal",
  "lineHeight": "1"
}

{
  "id": "labelFont",
  "name": "Label font",
  "type": "font",
  "default": { "size": 14, "sizeUnit": "px", "family": "Roboto", "weight": "500", "style": "normal", "lineHeight": "1.2" }
}

{
  "id": "thresholds",
  "name": "Thresholds",
  "type": "array",
  "items": [
    { "id": "label", "name": "Label", "type": "text" },
    { "id": "value", "name": "Value", "type": "number", "default": 0 },
    { "id": "color", "name": "Color", "type": "color", "default": "#f44336" }
  ]
}

[
  {
    "id": "displayIcon",
    "type": "switch",
    "default": true
  },
  {
    "id": "icon",
    "type": "icon",
    "condition": "return model.displayIcon == true;"
  }
]

let options = {
  type: 'timeseries',  // or 'latest', 'alarm'
  datasources: [{
    type: 'entity',
    dataKeys: [{ name: 'temperature', type: 'timeseries' }],
    entityFilter: {
      type: 'singleEntity',
      singleEntity: { entityType: 'DEVICE', id: deviceId }
    }
  }],
  callbacks: {
    onDataUpdated: () => { self.onDataUpdated(); }
  }
};

self.ctx.subscriptionApi.createSubscription(options, true)
  .subscribe(subscription => {
    // Replace default subscription
    self.ctx.defaultSubscription = subscription;
    self.ctx.data = subscription.data;
    self.ctx.defaultSubscription.update();
  });

if (self.ctx.$scope.customSubscription) {
  self.ctx.$scope.customSubscription.unsubscribe();
}

self.ctx.$scope.customSubscription =
  self.ctx.subscriptionApi.createSubscription(options, true)
    .subscribe(subscription => {
      subscription.timeWindowConfig =
        self.ctx.defaultSubscription.timeWindowConfig;
      self.ctx.defaultSubscription = subscription;
      self.ctx.data = subscription.data;
      self.ctx.defaultSubscription.update();
    });

let $injector = self.ctx.$scope.$injector;
let service = $injector.get(self.ctx.servicesMap.get('serviceName'));

let attributeService = $injector.get(
  self.ctx.servicesMap.get('attributeService'));

attributeService.getEntityAttributes(
  { entityType: 'DEVICE', id: deviceId },
  'SERVER_SCOPE',
  ['firmware', 'model']
).subscribe(attributes => {
  // attributes = [{ key, lastUpdateTs, value }, ...]
});

attributeService.saveEntityAttributes(
  { entityType: 'DEVICE', id: deviceId },
  'SERVER_SCOPE',
  [{ key: 'firmware', value: '2.0' }]
).subscribe(() => {
  // saved
});

let relationService = $injector.get(
  self.ctx.servicesMap.get('entityRelationService'));

let query = {
  filters: [{
    relationType: 'Contains',
    entityTypes: []
  }],
  parameters: {
    rootId: entityId,
    rootType: 'ASSET',
    direction: 'FROM',
    maxLevel: 1
  }
};

relationService.findInfoByQuery(query)
  .subscribe(relations => {
    // relations = [{ from, to, fromName, toName, type }, ...]
  });

// Set a fixed time window
self.ctx.timewindowFunctions.onUpdateTimewindow(
  startTimestamp, endTimestamp
);

let controller = self.ctx.$scope.ctx.stateController;

// Read current state parameters
let params = controller.getStateParams();

// Update state
controller.updateState(stateValue, params);

// Navigate to previous state
controller.navigatePrevState(1);

let broadcastService = $injector.get(
  self.ctx.servicesMap.get('broadcastService'));

// Listen for events
broadcastService.on('my-event', (event, data) => {
  // handle event
  self.ctx.detectChanges();
});

broadcastService.on('toggle-dark-mode', () => {
  // Switch chart colors, update styles, etc.
});