Skip to content
DocsOpen Hub
Build web apps
Build web apps2 min read

Widget reference

On this page

Widgets turn workflow data into useful page interactions. Choose a widget for the data shape and user action, then configure its bindings and states.

Choose the widget#

Widget Purpose Check before publishing
Table Searchable, paginated collections with row actions Collection path, stable IDs, columns, paging, empty state
Form View Display or edit a single record Field types, required values, save contract
Insert Form Modal Create a record in a dialog Defaults, validation, duplicate-submit handling, refresh
Confirm Modal Confirm an action on a selected record Target identity, consequence, cancel behavior
Chart Compare or trend a series Category/value paths, units, missing values
Counter / Chart Counter Show a metric with optional context Numeric value, period, loading and unavailable states
Image View Preview image data Source, alternative text, sizing, failed load
Blank Custom content or behavior Accessibility, responsive layout, data and event contracts

Bind a table correctly#

Given an API response:

json
{
  "result": {
    "items": [
      {"id": 1, "title": "Review request", "status": "open"}
    ]
  }
}

Set the table's data input path to result.items. Define columns using id, title, and status. Configure paging and search to match the API's behavior; a client-side page size does not automatically implement server-side pagination.

Connect row actions#

Pass the selected record's stable ID into the action. For updates or deletes, verify authorization and record ownership in the workflow. After success, refresh the table or update its data so the displayed state matches the server.

Build understandable charts#

Label units and the reporting period. Distinguish a legitimate zero from unavailable data. Check that category labels and series lengths match, and decide what happens when the API returns no points.

Use custom code intentionally#

Prefer a configured widget when it already supports the interaction. When using a Blank widget or custom code, follow the editor's current contract for data, events, and controls. Test keyboard interaction and clean up any event listeners created by the widget.

Need to investigate a problem? Start with troubleshooting