How do custom ThingsBoard dashboards for IoT drive business value?

				
					/*
  Room Status Tile (ThingsBoard CE widget)
  Reads the latest telemetry key "room_status" and renders a color-coded tile.
  Expected values (case-insensitive): VACANT | OCCUPIED | CLEANING | ALARM
  Works with any string – unmapped values fall back to UNKNOWN.

  Authoring tips for the article:
  - The widget demonstrates Level 2 customization: custom HTML/CSS/JS,
    live reaction to telemetry, and configurable labels/colors via settings.
*/

let els = {};
let classes = {
  VACANT:   { text: 'VACANT',   textCls: 'state-vacant',   dotCls: 'dot-vacant' },
  OCCUPIED: { text: 'OCCUPIED', textCls: 'state-occupied', dotCls: 'dot-occupied' },
  CLEANING: { text: 'CLEANING', textCls: 'state-cleaning', dotCls: 'dot-cleaning' },
  ALARM:    { text: 'ALARM',    textCls: 'state-alarm',    dotCls: 'dot-alarm' }
};
const UNKNOWN = { text: 'UNKNOWN', textCls: 'state-unknown', dotCls: 'dot-unknown' };

function normalize(v) {
  return (v || '').toString().trim().toUpperCase();
}

function clearStateClasses() {
  const all = ['state-vacant','state-occupied','state-cleaning','state-alarm','state-unknown'];
  const dots = ['dot-vacant','dot-occupied','dot-cleaning','dot-alarm','dot-unknown'];
  all.forEach(c => els.text.classList.remove(c));
  dots.forEach(c => els.dot.classList.remove(c));
}

function render(statusRaw, ts) {
  const key = normalize(statusRaw);
  const cfg = classes[key] || UNKNOWN;

  clearStateClasses();
  els.text.textContent = (self.ctx.settings.labels && self.ctx.settings.labels[key]) || cfg.text;
  els.text.classList.add(cfg.textCls);
  els.dot.classList.add(cfg.dotCls);
  els.footer.textContent = ts ? `Updated: ${new Date(ts).toLocaleString()}` : '';
}

/* ThingsBoard widget lifecycle */
self.onInit = function () {
  els.text   = document.getElementById('status-text');
  els.dot    = document.getElementById('status-dot');
  els.footer = document.getElementById('tile-footer');

  // Allow custom label overrides from settings (optional)
  // Example in Settings JSON:
  // { "roomLabel": "Room 101", "labels": { "VACANT": "READY", "OCCUPIED": "IN USE" } }

  // Initial state (before data arrives)
  render('UNKNOWN', null);
};

self.onDataUpdated = function () {
  // Access default subscription for latest telemetry
  const sub = self.ctx.defaultSubscription;
  if (!sub || !sub.latestData || !sub.latestData.room_status) {
    render('UNKNOWN', null);
    return;
  }

  // latestData.<key> is an object with { ts, value }
  const latest = sub.latestData.room_status;
  render(latest.value, latest.ts);
};

self.onResize = function () {};   // Not needed, but part of the API
self.onDestroy = function () {};  // Cleanup if you add timers/listeners

/* Expose user settings in the widget editor (optional but nice for Level 2) */
self.getSettingsSchema = function () {
  return {
    schema: {
      type: 'object',
      properties: {
        roomLabel: { title: 'Room label', type: 'string', default: 'Room 101' },
        labels: {
          title: 'Custom status labels',
          type: 'object',
          properties: {
            VACANT:   { type: 'string', default: 'VACANT' },
            OCCUPIED: { type: 'string', default: 'OCCUPIED' },
            CLEANING: { type: 'string', default: 'CLEANING' },
            ALARM:    { type: 'string', default: 'ALARM' }
          }
        }
      }
    }
  };
};

/* Declare expected data keys so the user can bind telemetry without coding */
self.getDataKeys = function () {
  return [
    // Latest telemetry key that drives the tile
    { type: 'latest', name: 'room_status', label: 'Room status', required: true }
  ];
};
</key>