Gateway Markdown/HTML Card
Renders markdown/HTML using the configurable pattern or function with applied attributes or time series values.
Who it’s for
Engineers building a ThingsBoard IoT Gateway dashboard who need a formatted block that names the gateway it belongs to — a header identifying the current gateway, a note summarizing its configuration, an instruction panel that adapts to the device being viewed rather than repeating a generic sentence.
What it does
The Gateway Markdown/HTML card renders markdown or HTML from a pattern that carries live values from the gateway device. The default pattern prints a heading followed by **Current entity**: ${entityName} and **Current value**: ${Random}, so the block names the gateway it is attached to instead of being captioned by hand on every dashboard.
- Markdown for the formatting, placeholders for the data —
${entityName}and${keyName}resolve against the gateway datasource. - HTML works in the same box where markdown is not enough, so a block can mix a list with a table.
- A value function replaces the pattern when the wording has to depend on the data, receiving the data array and returning the markdown to render.
- Custom CSS layers on top of the platform’s default markdown styling, or replaces it entirely.
- The Gateway Markdown/HTML card renders text: it shows no connector state, no logs and no live statistics, which are covered by the dedicated gateway widgets.
How to set up
Data keys
The Gateway Markdown/HTML card takes any number of data keys from the gateway device, addressed by name in the pattern.
| Key | Role | Type | Description |
|---|---|---|---|
| Any | A value referenced from the text | Timeseries | Written as ${key name} in the pattern. Gateway attributes work equally well, and ${entityName} is available without declaring a key. |
Point the datasource at the gateway device, then add the keys the text refers to. An unmatched placeholder renders as literal ${...} text rather than raising an error.
Content
| Setting | Default | Effect |
|---|---|---|
| Use markdown/HTML value function | Off | Switches from a fixed pattern to a function that returns the markdown |
| Markdown/HTML pattern | A heading plus entity name and value | The text rendered, with ${...} placeholders resolved live |
| Markdown/HTML value function | Returns a title and the entity name | Used instead of the pattern when the toggle is on |
How to customize
- To change the wording — edit the Markdown/HTML pattern; headings, lists, tables and links all render.
- To decide the text from the data — turn on Use markdown/HTML value function and return a markdown string.
- To match the dashboard’s typography — turn off Apply default markdown style and supply rules in Markdown/HTML CSS.
- To reference another gateway reading — add its data key and put
${that key name}in the text.
Tips
- Use the card as the header of a gateway dashboard, printing
${entityName}and the connector count. A page that names the gateway it is showing prevents the most common mistake on multi-gateway installations, which is reading the right numbers about the wrong device. - Keep the pattern rather than the function unless the wording genuinely has to branch. Gateway dashboards tend to be maintained by whoever is on shift, and a pattern stays editable by someone who does not write JavaScript.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.