Developer documentation

Visual App Builder & Device Workflows

Build 6 includes a plugin-powered graph builder that can assemble UI, logic, API, file, navigation, and native-device steps, preview the connected flow, and export it as a CommonJS plugin.

What is new in build 6

Outcome-led starter hubNew workspaces can open the REST client, Visual App Builder, Device Lab, Text Workflow Studio, Theme Studio, runtime example, or a blank workspace.

Connected graph canvasDrag components from categorized palettes, move nodes, connect named output ports, select a node, and edit its settings.

Preview and acceptancePlay the connected app, follow branches, run API or platform nodes, and use the bundled complete example as an acceptance test.

Portable generated pluginExport a graph as inspectable CommonJS JavaScript, then load the generated plugin into the normal runtime.

Device workflow starterThe Device Lab demonstrates system information, capability inspection, copy-friendly results, and completion steps in one graph.

Live Theme StudioApply blue, purple, light, red, green, yellow, orange, or teal presets and fine-tune individual workspace colours immediately.

Component catalogue

Category	Components
Inputs	`form`, `input`, `textarea`, `checkbox`, `dropdown`, `colorPicker`, `keyValue`
Layout	`card`, `panel`, `section`, `accordion`, `row`, `column`, `tabs`, `divider`, `spacer`
Display	`welcome`, `text`, `selectableText`, `repeater`, `success`, `webview`, `debugConsole`
Actions	`button`, `iconButton`, `modal`, `message`, `openUrl`, `filePicker`
Logic and data	`decision`, `api`, `stateStore`, `ruleEvaluator`, `strategyAction`
Interactive UI	`counterDisplay`, `buttonGrid`, `resetAction`
Device and advanced	`camera`, `nativeAction`

Graph node and edge data

var graph = {
  nodes: [
    {
      id: "check_system",
      componentType: "nativeAction",
      label: "System information",
      x: 240,
      y: 36,
      settings: {
        operation: "systemInfo",
        buttonText: "Run system check",
        outputName: "systemInfo"
      }
    }
  ],
  edges: [
    { from: "intro", to: "check_system", output: "Continue", label: "Continue" }
  ]
};

Node IDs must be unique. componentType must exist in the catalogue. Coordinates are canvas positions. Edges refer to the source node’s named output; decision and API nodes can route through different outputs.

Use the graph primitives in your own plugin

api.ui.append(app, "mainPanel", {
  type: "flowCanvas",
  id: "deploymentFlow",
  height: 540,
  nodes: nodes,
  edges: edges,
  selectedId: selectedId,
  dropCommand: "deployment.drop",
  selectCommand: "deployment.select",
  moveCommand: "deployment.move",
  connectCommand: "deployment.connect",
  emptyText: "Drag a step here"
});

Each command receives the canvas event data in ctx.payload. Persist durable graph changes in plugin data, normalize unknown input before rendering, and keep node IDs stable so Inspect and Recorder can target the generated UI.

Permissions and generated output

The bundled Visual App Builder declares ui.transform, plugin.storage, request.modify, requests.send, and platform.run. A generated plugin should keep only the capabilities required by its nodes. Review exported source and platform operations before enabling it.

The visual builder is implemented with the same public plugin runtime used by other bundled plugins. Internal uiRobot automation is QA-only and is not part of an exported customer plugin.