Apps View

Overview

Apps let you create clean form interfaces for your networks. Present a form to end users — they fill in fields, submit, and the form values are injected as global variables that the network reads. Users never need to see or understand the underlying workflow.

Navigate to the Apps panel in the sidebar (⌘+G → P).

Live NodeFox product capture from the live NodeFox application: the Apps workspace for building end-user forms over existing NodeFox networks.

Live NodeFox product capture from the live NodeFox application: add-app configuration flow with network selection and field mapping setup.

Creating an app

1. Click Create App and give it a name.
2. Select the target network.
3. Add fields — each field maps to a global variable name.
4. Configure field types, labels, placeholders, defaults, validation, and help text.

The app is ready for end users to run the workflow by filling out the form.

The most important implementation detail is mapping clarity. Field names should reflect business intent, while variable names should match what the target network expects at runtime. Teams that keep this mapping explicit avoid a common failure mode where the app UI looks correct but the workflow receives the wrong values.

App-level configuration surfaces

Network-side setup requirement

Apps submit values into global variables. The target network should read those values explicitly:

1. Add Global nodes (Get) near the network entry.
2. Match variable names exactly to app field variable names.
3. Route global outputs into downstream nodes with explicit slot contracts.
4. Ensure the network entry path is eligible/ready for execution on submit.

Field types

Text input

Selection

Date & time

Advanced

Field configuration

Type-specific Config reference

How it works

When a user submits the form:

1. Each field value is written to a global variable with the configured name.
2. The target network runs.
3. The network reads those global variables via Global nodes at the start of the workflow.
4. Results are produced as usual — file downloads, UI artifacts in the chat, API calls, etc.

Apps View operations checklist

Use this checklist when promoting an app for real users:

1. Validate variable-name mappings with at least one test submit.
2. Confirm optional fields are handled safely in-network (no hidden null assumptions).
3. Place Decision/activation controls before high-impact writes.
4. Confirm output behavior (files, chat UI artifacts, API actions) matches user expectations.
5. Verify failure branches return clear user-visible outcomes, not silent stalls.

UI Artifacts

Code nodes can build live-updating dashboards directly in the chat panel. This is especially useful in App workflows where you want to show progress or results to the end user.

The UI system follows a Skeleton + Pulse model: define a layout once with UI.render(), then stream data updates to individual components via UI.update() without re-rendering the whole structure.

// Stamp the layout skeleton
await UI.render(
  UI.Dashboard({ columns: 2 }, [
    UI.Card({ title: 'Progress' }, [
      UI.ProgressBar({ id: 'prog', value: 0 }),
    ]),
    UI.Card({ title: 'Status' }, [
      UI.StatusBadge({ id: 'status', status: 'running', label: 'Processing...' }),
    ]),
  ])
);

// Push updates as the workflow progresses
await UI.update('prog', { value: 50, label: 'Halfway done...' });
await UI.update('status', { status: 'success', label: 'Complete' });

Layout components

Widget components

Interactive components

Append operations

For components that accumulate data over time, use these special keys with UI.update():