HTML Value Card

The HTML Value Card widget displays telemetry or attribute data using a custom HTML template. Unlike the standard Value card, it gives you full control over layout, styling, and multi-key data presentation — use it for KPI dashboards, status indicators, or any card where you need formatting beyond a single number.

• Display latest telemetry or attribute values from any entity.
• Insert live values using ${key} placeholders directly in HTML.
• Combine multiple data keys in a single card.
• Style the card with custom CSS scoped to the widget.
• Use any datasource type: Device, Entity alias, Entities count, Alarms count, or Function.
• Apply key filters to count or display only entities matching specific conditions.

1. Open the dashboard in edit mode. Click Add widget in the top toolbar, or click the Add new widget icon in the center of an empty dashboard.
2. In the widget bundle selection dialog, find and click Cards.
3. Select the HTML Value Card widget.
4. Configure the datasource and appearance, then click Add.

On the Data tab, configure what the widget displays:

• Datasource type: Device, Entity alias, Entities count, Alarms count, or Function.
• Target: the device or entity alias to read from.
• Data keys: one or more telemetry keys or attributes. Each key becomes available as a ${key} placeholder in the HTML template using its label.
• Filters: optionally restrict the dataset using key filters, like active = true or battery < 20.

On the Appearance tab, write your card layout in the HTML field. Use ${key} placeholders to insert live values:

Example — display a temperature reading from a device named Smart Device:

Datasource: Device → Smart Device, data key: temperature

<div style="padding: 2px 0 2px 10px; text-align: center;">
    <h3>${entityName}</h3>
    <p style="font-size: 36px;">Temperature: ${temperature:1} °C</p>
</div>

Add custom CSS in the CSS field on the Appearance tab. Styles are scoped to the widget container and do not affect other widgets on the dashboard.

Example — styled temperature card with a dark background:

<div class="temperature-card">
    <h3>${entityName}</h3>
    <p class="temperature-value">Temperature: ${temperature} °C</p>
</div>

.temperature-card {
    background-color: #20232a;
    color: #61dafb;
    border: 6px solid #2196F3;
    border-radius: 12px;
    text-align: center;
}

.temperature-value {
    font-size: 36px;
}

When using a CSS-defined background, set Background color to #FFFFFF00 (transparent) on the Widget card tab so the card CSS background shows through.

On the Widget card tab:

The HTML Value Card supports the Widget header button action — adds a button to the widget header that triggers a configured action when clicked.

Goal: Display the number of currently active devices in a ThingsBoard instance.

Step 1. Add the widget. Open your dashboard in edit mode, click Add widget, select Cards, then choose HTML Value Card.

Step 2. Configure the datasource.

On the Data tab:

• Datasource type: Entities count
• Entity alias: All Sensors — Filter type: Entity type → Device
• Data key: count, label activeDevicesNumber

Add a key filter to count only active devices:

• Filter name: ActiveDevicesFilter
• Key type: Attribute, Key name: active, Value type: Boolean
• Operation: equal, Value: True

Step 3. Configure appearance.

HTML:

<div class='card' id="activeDevices">
    <div class='content'>
        <div class='value'>
            ${activeDevicesNumber:0}
        </div>
        <div class='description'>
            Active devices
        </div>
    </div>
</div>

CSS:

.card {
  width: 100%;
  height: 100%;
  border: 1px solid #E0E0E0;
  border-radius: 16px;
  box-sizing: border-box;
  background: #ffffff;
}

.card .content {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

.card .value {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  color: #0D47A1;
  text-align: center;
}

.card .description {
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
  color: #333333;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (min-width: 960px) and (max-width: 1200px) {
  .card .value { font-size: 2.2em; line-height: 1.2; }
  .card .description { font-size: 0.9em; line-height: 1.2; }
}

Step 4. Configure the widget card. Set Background color to #FFFFFF00 (transparent).

Step 5. Save. Click Add, resize or reposition the widget as needed, then click Save on the dashboard toolbar.

Result: A compact card showing the active device count, updated automatically as device activity changes.

Goal: Display the number of inactive devices.

Follow the same steps as the Active devices counter, with these differences:

Datasource:

• Data key: count, label inactiveDevicesNumber
• Filter name: InactiveDeviceFilter — Key type: Attribute, Key name: active, Value type: Boolean, Operation: equal, Value: False

HTML: replace activeDevicesNumber with inactiveDevicesNumber and the label text with Inactive devices.

CSS: same structure; change .card .value color to #e53935 (red).

Result: A compact card showing the inactive device count, updated dynamically as device activity changes.

Goal: Display the number of devices with a battery level below 20.

Follow the same steps as the Active devices counter, with these differences:

Datasource:

• Data key: count, label lowBatteryDevicesNumber
• Filter name: LowBatteryFilter — Key type: Time series, Key name: battery, Value type: Numeric, Operation: less than, Value: 20

HTML: replace the data key placeholder with lowBatteryDevicesNumber and the label text with Low battery devices.

CSS: same structure; change .card .value color to #F2994A (orange).

Result: A compact card showing the number of devices with battery telemetry below 20, updated automatically.

Card shows no data

Placeholder shows empty or NaN