Skip to main content

Databinding

Databinding is what turns a Widget from a static shape into something that shows your own, live data. This article covers the whole path: where that data can come from, how databinding differs from simply embedding something, and how to bind it to a Widget once you have it.

The real value is separating the design from the data living inside it: build an appealing menu board once, connect it to a datasource, and from then on an updated price list is all it takes — no more hand-editing the Content, and no risk of breaking the design while you do.

Every Widget can be data-bound

The data just has to be the right kind for that Widget — an Image Widget needs a valid image URL, a Google Docs Widget needs a public "Publish to web" link, and so on for each Widget's own Content settings.
The one exception is the Power BI Widget: it embeds a Power BI report directly and can't be data-bound in this sense.

tip

If you already have connected data, you can skip to the databinding steps here.

Databinding is not embedding​

Databinding connects to the data — numbers, text, rows — so you can filter it, combine it, and lay it out with Wallboard's own Widgets (Table, Bar Chart, Text, …).
Embedding brings in the whole rendered item instead — a live page, exactly as it's formatted, not data you can touch.
Learn more: How to Embed External Content, password-protected content, alternative methods, in a separate webview.

A few Wallboard features are easy to mistake for one when they're the other:

Data in Wallboard​

Wallboard datasources come in three families:

  • Internal datasources — a table you manage by hand, inside Wallboard itself: type or paste the data in, and optionally make it editable from a device too. Use this when there's no outside system to pull from at all, or when you just want full manual control. Learn more: Internal Datasources.
  • External datasources — connects Wallboard to an outside system: a spreadsheet, an API, a database, or a dashboard. This is the broad family the rest of this section walks through. Learn more: External Datasources.
  • System datasources — data Wallboard generates about your own setup rather than an outside source: a summary of your devices, a summary of your uploaded Files, or a screenshot of one of your own Contents. Use these when what you want to show is something about Wallboard itself. Learn more: System Datasources.

Where does your external data come from?​

Before you can bind anything, decide how the data gets into Wallboard in the first place. That depends on what the source system can offer.

If the source already has a clean export or API​

Source offersUse this datasourceLearn moreWorked example
A spreadsheet (Excel or Google Sheets), exported or kept up to date by handMicrosoft Excel / Google Sheet datasourceMicrosoft Excel datasource, Google Sheet datasourceCreate a Dynamic Menu using Excel
A free public feed, or any HTTP endpoint that returns JSONJSON datasourceJSON datasource—
The same, but the feed returns XMLXML datasource — Wallboard converts XML to JSON automatically, so you bind it the same way as JSONXML datasourceHow to create content with an XML datasource
A database you can query directlyJDBC datasourceJDBC drivers—
A system that should push data the moment it changes, rather than wait for a scheduleA webhook into an internal datasourceDatasource actionsHotel Inventory and Pricing
A report already built in Power BIPower BI Widget (embed it), or the Power BI datasource (pull it as an image)Power BI widget, Power BI datasource—
Any other dashboard with a shareable URL (Grafana, Tableau, Looker, …)Screenshot datasource — Wallboard regularly captures the page as an imageScreenshot datasource—
Polling or pushing

Spreadsheet, JSON, XML, JDBC and Screenshot sources are refreshed on a schedule that you set on the datasource. A webhook is pushed by the source system instead, so the screen changes as soon as the data does — prefer it for data that changes every few seconds, such as a live counter.

If the source needs authentication​

JSON and XML datasources support the two simplest methods directly, under Connection settings: Authentication (Basic auth) (username and password) and Custom headers (advanced) (for an API key or Bearer token). Cloud Credentials are a separate thing — they handle sign-in for Wallboard's own named integrations (Google, Microsoft, Power BI, …), not for a generic JSON or XML endpoint.

Neither datasource type supports OAuth2 (exchanging a client ID and secret for a short-lived token) or other complex authentication on its own. When the source needs more than that:

  • Check Other credentials first — Cloud Credentials' Other tab ships pre-built authentication for a growing list of named business systems (Ad Astra, EMS, Nexudus, Oracle Cloud OHIP, …). If the source is on that list, this is the proper, self-serve way in: no workflow tool or custom development needed.
  • Otherwise, put a workflow automation tool — such as n8n — in between: it fetches the token, calls the source's API, optionally combines several sources into one, and exposes the clean result on its own webhook address, which Wallboard reads with an ordinary JSON datasource.
  • Or ask Wallboard to build a Custom datasource — a bespoke integration for authentication or coordination that goes beyond what a workflow tool should have to handle.

If there's no structured export at all​

Two fallbacks, in order of how reliable they are:

  • Web scraper datasource (an external datasource) — point it at one web page's URL and describe what to extract in plain language; Wallboard loads the page in a real browser (so JavaScript-rendered pages work) and an AI extracts the data. Choose how the result is structured: let the AI decide, provide an example JSON, or use a JSON Schema (with ready-made presets for calendar events, multiple tables or a news/content feed) so the shape stays stable release to release.
    Learn more: Web scraper datasource.

    Web scraper settings panel: Webpage to extract from, Page load wait time, Tell AI what to extract prompt, How to structure the data, Data template, Include link URLs

  • AI datasource (a system datasource, distinct from the Web scraper above) — driven by a prompt rather than a single page: it can optionally learn from other existing datasources (Source datasources) and call built-in tools (Grok Web Search, Gemini Web Search, URL Fetch, Image Analysis, X (Twitter) Search, Google Maps, Image Generation), each switchable ON, OFF or FORCE. It's the most flexible option and the least reliable, since it depends on what the AI finds — reach for it when nothing structured exists, or to combine two unrelated datasources into one.
    Learn more: AI datasource.

    AI datasource settings panel: Tell AI what to extract prompt, How to structure the data, Data template, Source datasources, start of Tool Configuration

    AI datasource Tool Configuration list: Grok Web Search, Gemini Web Search, URL Fetch, Image Analysis, X (Twitter) Search, Google Maps, Image Generation, each On

AI usage counts against a budget

Both the Web scraper and the AI datasource run on AI, counted per customer as an hourly and a monthly token budget; once a customer reaches it, refreshes are blocked until the next window opens.

Plan the refresh interval accordingly — a feed refreshing every minute spends the budget far faster than one refreshing every 15.

Is a spreadsheet enough, or do you need developer help?​

A spreadsheet is usually enough when the data changes a few times a day rather than every minute, people already update it by hand, or the source has no API but can export to a file.

You need help on the source system's side when it's closed with no export or API, uses its own proprietary authentication, or several sources need combining into one feed — a workflow tool or a Custom datasource can solve this, as above. You need help on Wallboard's side when you need interactivity beyond page navigation, custom data transformations, or a visualization no Widget offers.

Need help either way?

Base data path​

Normally, each data-bound Widget connects to a datasource on its own, one Bind to data click at a time. A base data path moves that connection up to the Content itself: set it once there, and every Widget on the Content can simply depend on it instead of picking its own datasource and path.

Why it's useful: build the design once — a menu board, a staff directory, a price list — wire every Widget on it to the base data path, and from then on swapping the data is a single step: point the base data path at a new datasource (as long as it has the same structure) and every Widget updates together. No re-binding each Widget by hand, and no risk of breaking the layout while you do it.

Setting it up:

  1. Open the Content's properties and go to Databinding > Base data path.
  2. Select the datasource you want the whole Content to read from.
  3. On each Widget you want to follow it, open Bind to data (or Bind anything) and turn on Depends on base data path — the Widget then only needs the part of the path below the base data path, not a datasource of its own.

Learn more, with a full worked example: How to connect a template to base data path.

Switching between sources

A base data path swap keeps every binding only between two datasources with the same structure — swap the datasource, refresh the bindings, done. Switching to a Google Sheet or JSON source is a structural change even when the column names look the same, and it breaks every binding: plan to re-check Bind to data and Hide based on on each Widget by hand afterward.

The pivot point​

A datasource is a tree of nested objects and arrays. Binding one value just means pointing at one spot in that tree — but binding a repeating collection means telling Wallboard which level of the tree repeats. The pivot point marks that level: everything at and below it is treated as one row, and that row's shape becomes the template reused for every item in the array. Skip it, and Wallboard has no idea anything should repeat at all.

Base data path picker with the pivot point set at the People array's 0 index

In this base data path picker, the path goes birthday > People > the pivot point (the blue dot, set at 0) > id. Setting the pivot at 0 tells Wallboard that each item in the People array is one row; id is then one field read from inside that row.

The same pivot point mechanic shows up anywhere Wallboard binds a repeating collection — a base data path, a Table Widget, an Image Gallery — though, as the next section covers, the Table Widget's picker adds a second control alongside it.

Databinding Steps​

Binding works differently depending on whether the Widget shows one value or many at once — a Text Widget needs one piece of text, a Table Widget needs a whole array of rows. Both start the same way, then split.

Single-value widgets (Text, Image, Video, …)​

  1. Drag & drop the widget onto your content.
  2. Select the widget.
  3. Go to the Other tab > Bind to data option under the widget's properties.

db1.png

This flow covers every Widget that shows a single piece of data — including the Gauge and Meter Widgets, which each display one number rather than a series.

Select the datasource you created previously from the dropdown. From the appearing dropdowns you can specifically choose which data you would like to display. A single value just needs the one exact spot in the tree — no pivot point to set. For example, if the data is a People array, people.rows.0.name points a Text Widget straight at the name in the first row.

You can optionally apply special formatting to your values here if you want them to appear different from your original dataset.

Info!

Before saving, remember to check if your data is displayed correctly in the preview window in the upper right.

db2.png

Multi-value widgets (Table, and similar list-driven widgets)​

Table Widget​

A Table Widget doesn't bind one value — it binds a whole array at once, so its Data picker has extra steps the single-value flow above doesn't, and needs two separate controls set at the same row, not just the one pivot point described above.

  1. Select the Table Widget, then Bind to data the same way as above.

Widget properties panel, Other tab, with the Bind to data entry point highlighted under Data

  1. In the Data picker, select your datasource, then keep navigating down the tree — e.g. into rows — until you reach the array of items the table will draw from.

  2. At the row-index level (the dropdown showing 0), set both controls:

    • Click the table icon to the left of the dropdown — this tells Wallboard to use that row's shape as the column template for every row in the array, which is what the widget actually renders.
    • Click the blue dot on the tree to its left — this sets the pivot point, telling Wallboard which level repeats (see The pivot point above).

Data picker for table data, with the table icon and the pivot point both set at the row-index level

Skip either control and the table is empty

Both have to be set at the same level. Without the table icon, Wallboard has no column names to show even once a pivot point is set — if a table looks empty or has no columns after binding, this is the first thing to check.

  1. Switch to the Select Columns tab. Toggle Visible on for each column you want to display, and relabel or resize them as needed.

Select Columns tab, showing column labels, width and the Visible toggle switched on

At least one column must be set Visible

The table icon and pivot point only make the columns available — if nothing is toggled Visible on the Select Columns tab, the Table Widget renders empty even though the binding itself is correct.

  1. Save, and check the preview — every row should now be populated.

Learn more: Table Widget, worked example: Create a Dynamic Menu using Excel.

Media Widget​

A Media Widget behaves a lot like a Table Widget — pick the datasource, navigate down to the array that should repeat, and set the pivot point the same way (see The pivot point). The one difference: there's no Select Columns tab, because a Media Widget uses a predefined template of fields instead of custom columns.

Data picker for binding data on a Media Widget, with the pivot point set and the predefined fields listed below it

If the datasource already has fields with the matching names (such as description), Wallboard automatically populates the corresponding Media Widget field — Creator, Title, Description, Original URL, Publish date, Media, Media background, Font color, Schedule. An automatically-matched field stays editable, but can't be cleared manually.

If the source doesn't use those names, nothing is auto-filled: pick the matching dropdown by hand for each field you need, pointing it at whichever piece of data should fill that slot. A manually-set field, unlike an auto-matched one, can be cleared again.

Field visibility on the canvas is controlled separately, through Partial Display on the widget's Main tab, not in this picker.

Chart Widgets​

Most Chart Widgets plot a whole series at once — Column, Bar, Line, Area, Pie and Pyramid all bind this way. They set the pivot point as above, but the pivot alone is not enough: a chart plots numbers, so the path has to continue past the pivot, down to the specific numeric field you want charted.

Not every chart is multi-value

The Gauge and Meter Widgets each display one number, not a series, so they bind like any single-value Widget — point them at one spot in the tree, with no pivot point and no label column. See Single-value widgets above.

The Power BI Widget can't be data-bound at all — it embeds a finished report rather than reading data, as covered in Databinding is not embedding.

With the pivot point and chart icon set at the repeating level but nothing selected below it, the chart has no values at all — note the empty Bound value for chart data panel on the right:

Chart data picker with the pivot set at row 0 but no field selected below it, and an empty bound value panel

Select the numeric field on the dropdown below the pivot, and the panel fills with the values the chart will plot:

Chart data picker with a numeric field selected below the pivot, bound value panel listing the plotted numbers

So the full sequence is:

  1. Select the path down to the number you want the chart to show, going through the repeating row — e.g. rows > 0 > Price.
  2. Click the chart icon next to the row containing 0, and set the pivot point there. This is the deepest level the number and its label have in common, and it tells the chart that every row is one bar or slice, not only the first one.
  3. At the bottom of the picker, under Column to use as label, select the field that names each data point — for example Name.
Reading the Bound value panel

The preview lists each data point as label – value. If the left-hand side is blank and only numbers show, the numeric field is bound but Column to use as label has not been set yet. If the chart shows only one bar, the chart icon is most likely on the wrong row — move it to the row containing 0.

There is no axis-name setting

Charts have no field for naming an axis. The only text you control is the per-point label, set by Column to use as label above; the widget's own Labels menu changes only the font, size, style and rotation of those labels on both axes. Axis titles are not exposed in Wallboard.

Tip!

If you have further questions please do not hesitate to contact us at [email protected]. Happy editing!