Issue Linking App Flow to a Page

Wappler General How To
#1

Hi there @teodor…

I’ve started a new project in v6 beta 16 and I’m testing out linking an app flow to a page.

I’ve created a simple page index.php with a data store, and linked that page to the app flow, but when I try to add a run command in the app flow, the data store and other page elements aren’t showing… can you tell me what I have done wrong please?

Thanks!

Antony.

= = = = = = = = = = = = = = =

index.php

<!doctype html>
<html>

<head>
    <base href="/">
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="dmxAppConnect/dmxBootbox5/bootstrap-modbox.min.js" defer></script>
    <script src="dmxAppConnect/dmxBootbox5/dmxBootbox5.js" defer></script>
    <script src="dmxAppConnect/dmxDatastore/dmxDatastore.js" defer></script>
</head>

<body is="dmx-app" id="index">
    <script is="dmx-flow" id="page_flow" type="text/dmx-flow">{
  bootbox.alert: {
    message: "Page Flow",
    title: "Page Flow",
    buttons: {
      ok: {label: "Okay"}
    }
  }
}</script>
    <dmx-datastore id="contacts"></dmx-datastore>
    <div class="container">
        <div class="row" id="r_row1">
            <div class="col text-center" id="c_col1" dmx-on:click="flow1.run()">
                <h1 id="h_heading1" class="text-center display-3">Flow Test</h1>
                <button id="btn1" class="btn text-center btn-primary" dmx-on:click="page_flow.run()">Button</button>
            </div>
        </div>
    </div>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

app_flow.json

{
  meta: {
    options: {linkedFile: "/www/index.php"}
  },
  exec: {
    steps: [
      {
        run: {outputType: "text"}
      },
      {
        bootbox.alert: {message: "App Flow", title: "App Flow"}
      }
    ]
  },
  includeFolders: ["dmxBootbox5"]
}

project_options
project_options1108×676 17 KB

#2

Hey @Antony,

I’m confused…

I think you’re talking about “App Flow” but you describe a “Page Flow”…
If you’re talking about AppFlow the source attribute is missing in your dmx-flowdeclaration src="app/flows/app_flow.json"

Page Flows create a .json file?

#3

App Flows do not have context of what’s on a page. Think of them like Server Connects. You can define params in them and then after adding an App Flow to a page you can pass values into the params for use in the App Flow.

1 Like
#4

(@teodor, I’d appreciate your views on this…)

So within an App Flow, I cannot access elements of an associated page like a Data Store?

I hoped this could be allowed by the linked page… if not, then what is the linked page for? :thinking:

app_flow_linked_page
app_flow_linked_page1144×381 26.7 KB

So to be clear, I want to be able to execute a Run command in the app flow that manipulates the DataStore in the page index.php… but when I try to populate the Run command in the App Flow there are no Actions to select:

app_flow_run_empty
app_flow_run_empty1270×486 36.4 KB

(I have now added reference to the Page Flow to index.php)

<script is="dmx-flow" id="app_flow" type="text/dmx-flow" src="/app/flows/app_flow.json"></script>
#5

That is not possible, as this is not how App Flows work and @kfawcett already explained you how the things work.

#6

Thanks @teodor…

Can you tell me what the Linked Page feature does please?

#7

It does nothing for App Flows, it’s used on Server Connect to import form inputs under Input > $_POST

#8

Thanks @Teodor…

I’m wondering why there is an outstanding bug report from @mebeingken which is asking the same question as I am?

#9

If you just need to have the datastore available in your AppFlow, just pass the datastore as an argument to the AppFlow when you call it on index.php, for example:
app_flow.run( dstore: datastore_id)

Then you can find it under $params in your AppFlow
$params->dstore

First create under $params the desired variable(object) call it the way you want (eg “dstore”) and then when you call it on your index you pick the datastore there)

1 Like