Getting started - Creating Flows

Contents

This section of the Getting Started guide will provide a brief example of creating your first flow and executing it.

Procedure

Navigating to the flows page and creating a new flow

The first step is to navigate to the Flows page. Hover over the hamburger menu item in the Structr navigation bar and select Flows.
Once the page is loaded, you can either select an existing flow to edit or create a new one. For the sake of this introduction, we will create a new one.
To create a new flow, enter a name of your choice in the input field and click the Add button.
fig

Using the context menu

A new flow starts out blank and will not have any contents. To start adding new elements, bring up the context menu with a right-click and select an element to add to the flow. The context menu can also be used on existing elements to bring up specific options, such as removing nodes or setting them as the entry point of the flow.
fig

Creating flow elements

For the sake of this demonstration, a simple flow with an Action and a Return element are created. Both of these can be found under the Action Nodes category of the context menu. The first viable start element added to the flow will automatically be marked as such. A start node or flow entry point is indicated by the green coloring of the node header. The start node can be changed by bringing up the context menu on an element, if it is viable a menu item called Set as start node will display.
fig

Editing scripts within elements

To add functionality to the flow, we will add a small StructrScript snippet to query existing users in the database. Left-click the Script text box of the Action element to bring up a code editor and enter the script as shown below.
fig

Connecting flow elements

Now that our Action contains a script, we want it to return it’s result. For this to happen we have to make sure the flow execution does not stop at the Action element. Drag a connection from the Next socket of the Action element to the Prev socket of the Return element to create an execution flow, indicated by the green color of the connection. Our function is now capable of returning something after the Action has been dealt with, but at this point in time, it will return an empty result, because we have not yet connecting data to the Return element. In the same way the first connection was handled, create a connection between the elements DataTarget and DataSource sockets to create a data flow. When a node is being evaluated by the engine, it will try to consider connected data flows and make them available within it’s scripting context in the example of an Action or Return element.
fig

Executing flows

With everything set up, it’s time to test the flow. Use the Run button in the top right corner to let the flow execute and display it’s results.
fig

Graph-Browser

About this article
Last change 2018-09-25
Topics FrontendStructr 3.0