App Connect Flows - using loops etc

After trying out flows a little, I’ve still not managed to get them to work on multiple rows. I have a dynamic table and am simply trying to populate an input in each row. I would have thought it would be something like:

image

… but that doesn’t work but I’m not sure what to select for the repeat. Or perhaps I should use ‘while’. Hopefully there were be some documentation soon, but I would appreciate any suggestions in the meantime.

1 Like

Well the repeat seems fine to me, but within the repeat you are setting the same input field value to 1 over and over again?

Thanks George. I’m glad that’s how the repeat should work - but it’s not working. The bindings panel within the flow editor doesn’t show any options to select columns within the repeat. I added a custom column and that did appear:

image
… so I chose that, but it didn’t work.

I realise this would (should) add 1 in each row. Typically I would want to use expressions and conditions (or it could be just ‘1’) - but I want to try to see how it works in principal first.

Hi Tom,

I think you are confusing the flow repeater with the repeat region in App Connect.

In Flow you are repeating just the data and looping through the records for processing. So you can define what to do with each record and do it.

It takes just the data and repeats it. Has nothing to do with any other components on the page.

You can even handle the data fetching within the flow itself. So you can add there a flow version of Server Connect to get data from a server connect action and process it - without the need to have a server connect component first on your page.

I wasn’t exactly confusing them - I’m only guessing how to use the Flow component. I assumed as it deals with the front end (App Connect) rather than Server Connect, it did have something do to with components on the page (eg dynamic tables).

I’ve now removed the table and Server Connect component, and added a new Server Connect within the Flow Editor:

… but how can I update the data? There is nothing to select here:

@NewMedia I think you are confusing the App Connect Flow actions - they are all client side.
Please read the announcement - all information is in there:

What exactly do you want to update? The Data itself filter etc?

You can use the “Assign” action for it - it creates and assign local variable a value (much like the Sert Value in server connect)

But if you just want to filter and output the data you don’t need to loop through it, just fetch the data, assign it to a variable and apply formatters to it.

When you check the output option on - then the flow action will have a whole new data to be picked from as data bindings on the page

Will Flow actions rely on storing data on the client computer when their session starts?

Such as using HTML5 Web Storage instead of cookies?

Using sessionStorage Objects & localStorage Objects?

Are you now getting into Web Workers in javascript?

There are lots of things I would like to use this for - once I have a vague idea how it works. I was starting with a simple test to add button to update rows in a table. Eg I can add a button like this to add 1 to an input field. I imagine there is a way, using the new Flow feature, to add a button to add 1 to every row - to update all rows in one go:

image

Once I know how to do this, then I can start to the feature properly - eg loop through adding or changing values using conditions etc. I’m guessing this should be possible and simple - but perhaps I’ve misunderstood what the new feature is for.

Perhaps I should leave this until some documentation is available, but it would be nice to get started. I’m sure with just a couple of examples of using loops, things would make sense.

I see, seems there is a bit more explanation of the terminology and internals of App Connect Flow in order, so that you fully understand its working. It will be included in the upcoming docs for App Connect Flow:

Types of App Connect Components

In App Connect you have now two types of components. App Connect DOM Components and App Connect Flow components.

App Connect DOM Components

The App Connect DOM Components are the regular App Connect Components that you can place on your page. They are custom HTML components each having their own data and actions to run.

Those components can either render something on the page, like a form or modal dialog, or be data only like Server Connect and JSON Data Source - that just deliver data to the page for data bindings.

App Connect Flow Components and Actions

Now with the new App Connect Flow in have a whole new App Connect DOM component called App Connect Flow. The component by itself defines a whole workflow to be executed on it’s run action.

Within this Flow component you define a workflow that consist of multiple action steps. Those actions are specific to App Connect Flow and can be executed only within a flow.

The Flow Actions executed synchronous after each other. So this means each new action step runs only when the previous completes.

If an error occurs in a step - the catch below is executed and any actions within it. This way you can control your own flow and error handling.

Next to action steps, you can also add specific Flow components like Server Connect Flow Component, to fetch a server connect data for usage within the flow.

You can also call, from within a flow, an action from an external App Connect DOM component. To do this you use the special flow “run” action. There you can select which component and which action from it to run.

NOTE: The run of external DOM component actions is fully asynchronous within the flow. So the action is triggered queued as DOM update but the flow continues to run. This might result in that your DOM actions are delayed to when your flow is completed.

App Connect Flow Output Data

As each App Connect Flow runs - it can produce data that is placed on the page data under the flow component name and place in HTML.

The produced data is dependent on the executed flow actions and used flow components. Each Flow Action step has a “output” option in its properties, to determine if you want the action step data to be outputted.

You can use the flow data then in any data binding on the page. You will see it also in the data binding picker dialog.

Do note that the data will only be available when the flow is run.

4 Likes

Thanks George. There’s a lot of information to digest - but I don’t think I’ll ‘fully understand’ its working until I see some examples.

This issue was raised by someone and it’s good to know this is how it works.

I’m not sure of the implications of this. Could that mean for example that using a ‘run’ action to update a variable could fail if the data has not been retrieved from the server yet?

I’ve selected the Output checkbox, but haven’t yet seen anything to select from the Ouput fields, except ‘Empty list’:

image

… and it’s not possible to type a value manually. I don’t know if it’s a bug or, more likely, I’m doing something wrong.

I still think I’ll need to see some examples before I can make progress. I haven’t had any sucess using dynamic data yet (except for variables).

I’v seen some things in the data bindings, but no column names from the data source:

image

Thanks. I hope the documentation will cover loops and external data. I haven’t got anywhere with that yet and that’s of course pretty fundamental.

The output option works exactly as in server connect. It makes the step data available in the data picker in the app connect steps.
Same for output fields dropdown (works the same as in server connect)

Thanks Teodor. It may work in the same way as server connect, and obviously I’m very familiar with server connect, but so far I haven’t got any data to show up in a bindings panel.

As I mentioned above, I haven’t been able to select any fields from Output fields - it’s always empty. This is after adding a Server Connect step within the Flow Editor:

image

… and choosing Output here:

image

It may be that this new feature is not intended to do what I had hoped - but so far I only have a little idea of what it does. I expect a couple of screenshost or tutorials would clarify matters.

Edit:
I have been able to get data appearing in a bindings panel - using Assign, with a repeat, but it doesn’t look correct:
test.data.qry_fair_list[0].fair_title

In any case, I don’t know how to use Assign. I would expect to be able to select two values: a source value and a destination value - but only one can be selected. (I’m sure it works fine - I just don’t know how.)

After you said that, I was surprised to notice that the UI enables you to put a flow inside a repeat. If you do, the flow will recognise the repeat data source - eg it can loop through the records, storing the total in a variable. This is the sort of thing I imagined it would do, but was expecting it could assign values to inputs too. I’m looking forward to understanding it better.

1 Like

Interesting construction to have a nested flow in a repeat region. It should work but what is the use case to make this useful?

When you originally mentioned the Flow component (or ‘task runner’ as you referred to it then), I imagined it would do what Server Connect does, but on the client side, in App Connect. Eg I imagined it would loop through records in a table (ie table generated in the browser, not a database table), updating variables or changing input values - all client side, before the values would be stored in a database.

There are lots of things I might use this for - eg checking values in each row and displaying a summary in a modal, or populating fields based on expressions from each row. If an invoice is created, I might have buttons to fill a field in each row with certain values (eg sales information, VAT or discount details). I might want to make seletions of a group of records and do something with them (eg store their IDs in an array etc.).

I gave a very simple example in this thread, where I was surprised I couldn’t just loop through a table, populating an empty input field. I expect all this is possible in other ways - I just had in mind something rather different (perhaps ‘task runner’ gave me this idea more than ‘flow’).

Ah I see - well loopts through records is of course possible in flows and that will be indeed one of its best usage. Loop and data manipulation.

I was confused that you want to create multiple flows in a repeat region.

But in a single flow you can take any data source, loop through its records and do something with the data. That is all possible.

It is that if you also perform dom actions in the same flow loop those will be queued for processing afterwards because App Connect is really smart with DOM updates and does them in batches only when necessary.

I didn’t try creating multiple flows in a repeat region - just a single one. But I was surprised it worked at all - that the flow recognised a repeat component rather than requiring a direct link to server connect file.

I can already see that the flow feature will be very useful for creating more sophisticated events/sequences of events, but I think that’s only scratching the surface.

1 Like

@TomD Did you ever get this working (getting the schema for the repeat to show up in the dynamic data bindings for stuff inside the repeat)? I’m running into the same issue with the schema for the repeated array not showing up in the data bindings when the repeat is inside a flow.

I think I probably misunderstood how flows were going to work when they were introduced, and made false assumptions. I expect I shall use them much more in the future but as it is, I haven’t used them extensively.

I’m not sure about the specific issue you mention, but relevant items not appearing in data bindings is one of the most mysterious problems with Wappler. It has always been a problem, with pretty much every version, to different degrees (I’m still using 3.9.9 and it’s an issue). It’s a recurring bug which hopefullly will be fixed one day.

1 Like