App Flow (isolated)

App Flow (isolated): what it is

App Flow is a reusable client-side workflow that runs isolated from the page. It processes actions and data, and returns results back to the caller.

TIP: Think of an App Flow as a client-side function: call it, wait for results, then update the UI.

Isolated

No direct page access Inputs/outputs

Reusable

Call from many pages Same behavior

Returns data

Expose results To your UI

Use App Flow when you want a reusable workflow with inputs and outputs.

Keep it pure: treat it like a function (parameters in, results out).

If you need database or protected logic, call a Server Connect Action from the App Flow.

Calling an App Flow from a page

You connect a page to an App Flow using a Flow component, then run it from events.

The flow runs isolated, but it can receive parameters and return results.

Use a Flow component with `src` to point to your App Flow JSON.

Pass inputs with `dmx-param:*` (or via `run({...})`).

Use `flowId.run(...)` from an event to execute the flow.

Html

<!-- Connect a page to an App Flow (external flow file) -->
<script is="dmx-flow" id="product_search" type="text/dmx-flow"
  src="app/flows/products/search.json"
  dmx-param:category="category_filter.value"
  dmx-param:search_term="search_input.value"></script>
<!— Trigger it from a page event —>
<form id=“search_form” dmx-on:submit.prevent=“product_search.run()”>
<input id=“search_input” type=“text” placeholder=“Search products”>
<select id=“category_filter”>
<option value="">All Categories</option>
<option value=“electronics”>Electronics</option>
</select>
<button type=“submit”>Search</button>
</form>

Results and status

When you run an App Flow, use its status and data in your UI.

Use `flowId.running` to show loading/progress.

Read results from `flowId.data` after the run completes.

Handle failures via `flowId.lastError` (and branch your UI accordingly).

Html

<!-- Progress + results -->
<div dmx-show="product_search.running">Loading...</div>
<div dmx-if=“product_search.data”>
<pre dmx-text=“product_search.data”></pre>
</div>
<div class=“alert alert-danger” dmx-if=“product_search.lastError”>
<span dmx-text=“product_search.lastError.message”></span>
</div>

Wrap-up

Review what you did and choose a next tour.

Next steps

Pick a related tour to continue.