Outputs

Overview

Every piece of live data an app produces — from the logged-in user’s identity to a table’s currently selected row — surfaces as an output, browsable in a tree on the left-hand side of the app editor. Outputs fall into three groups: app context and state, per-component outputs, and background runnable outputs.

Context and state

App context

The special ctx output exposes read-only information about the current session and app:

• summary: Current app summary
• email: Current user’s email address
• groups: Groups the user belongs to
• hash: URL hash parameters
• mode: Current app mode (editor or viewer)
• query: URL query parameters as JSON object
• username: Current user’s username
• workspace: Current app’s workspace

State

state is a separate, freeform client-side store — unlike ctx, you decide what goes in it. Frontend scripts read and write it directly (e.g. state.foo = 1), which is the usual way to keep a small piece of UI state shared across components without round-tripping through a runnable.

Component outputs

Each component publishes its own outputs in the same tree, under its component ID. A Table component, for instance, exposes selectedRow, selectedRowIndex, search, result, and loading — what a given component exposes depends on the component type.

Containers

Components placed inside a container (tabs, a modal, a list, …) still publish their outputs individually; the container’s branch of the tree simply nests them under it.

Background runnables

A background runnable’s outputs (result, loading, …) show up in this tree the same way a component’s do, even though it isn’t tied to any single component on the canvas.

Connecting inputs to outputs

There are two ways to wire an output into a component’s input: click the connect (plug) icon on the input and pick the output from the tree, or reference the output directly inside an eval, e.g. a.result for the result output of component a.

Setting component values

Call setValue(id: string, value: any) from a frontend script to set a component’s value directly, bypassing its normal input. Avoid combining this with a dynamic default value on the same component — the two will fight each other.

Connection references

Apps run on behalf of their publisher, so by default a viewer can’t substitute their own connection for one used in the app. To let a runnable’s connection input come from the viewer instead, enable “Connections from users allowed” on that input.

Component ID editing

Click a component’s ID in the tree to rename it. IDs may only contain letters and numbers.