Page Flow (in-page)

Page Flow (in-page): what it is

Page Flow is a client-side workflow that executes inside a specific page. It can interact with that page’s components/actions and can return data.

TIP: Use a Page Flow when the workflow belongs to one page and needs to interact with that page’s components/actions.

In-page

Runs in a page Page context

Interactive

Can call page actions Component access

Returns data

Expose results To the page

Use Page Flow when the workflow is page-specific and needs page context.

Great for multi-step UI interactions with branching (confirm, toast, navigate, refresh).

If it grows, keep it readable: name steps and handle errors explicitly.

Define a Page Flow (inline HJSON)

A Page Flow lives inside the page as a dmx-flow script block. It can branch and execute steps sequentially.

Define the flow inline as a `dmx-flow` script block in the page.

Keep it page-specific: it can interact with page variables/components/actions.

Use it to orchestrate multi-step UI flows (confirmations, branching, sequencing).

Html

<!-- Define a Page Flow directly in the page -->
<script is="dmx-flow" id="confirm_delete_flow" type="text/dmx-flow">{
  bootbox.confirm: {
    message: "Are you sure you want to delete this item?",
    then: {
      steps: [
        { toast.show: {message: "Deleting item..."} },
        { delete_api.send: {id: "$param.id", output: true} },
        { items_list.load: {} },
        { toast.show: {message: "Item deleted"} }
      ]
    },
    else: {
      steps: { toast.show: {message: "Cancelled"} }
    }
  }
}</script>

Run it and use results

Run the flow from an App Connect event, then read flowId.data, flowId.running, and flowId.lastError in your UI.

Use `flowId.run({ ... })` to pass parameters into the flow.

Read `flowId.running` to show progress while it runs.

Use `flowId.data` / `flowId.lastError` to update the UI based on outcomes.

Html

<!-- Run the Page Flow from an event -->
<button class="btn btn-danger" dmx-on:click="confirm_delete_flow.run({
  id: item.id
})">Delete</button>
<!— Use status + results —>
<div dmx-show=“confirm_delete_flow.running”>Processing…</div>
<div class=“alert alert-success” dmx-if=“confirm_delete_flow.data && confirm_delete_flow.data.success”>
<span dmx-text=“confirm_delete_flow.data.message”></span>
</div>
<div class=“alert alert-danger” dmx-if=“confirm_delete_flow.lastError”>
<span dmx-text=“confirm_delete_flow.lastError.message”></span>
</div>

Wrap-up

Review what you did and choose a next tour.

Next steps

Pick a related tour to continue.