Overview

Visual scripting system is based on the concept of using graphical elements, which represent functions, operators or variables, and to connect them typically via lines or arrows, to forming relations and build scripts. Instead of having to write code line by line, you do everything visually.

This system is extremely flexible and powerful as it provides the ability to use virtually the full range of concepts and tools, usually only available for developers. Code is more visual and it needs less abstract thinking to be understood. Any integrator, developer can look at it and quickly grasp the flow of logic.

In FloPress, the first node to execute is an event (hook), and then execution flows through the red execution wire from left to right.

In the previous example, the action “admin_notices” is triggered, and then, following the red line, the print component is called. Its input (string) is provided by a dynamic template called “content” that render a html message with dynamic parameters.

Executable vs non-executable

There is two types of functions that can be added to a flow script.

Executable components

• These functions perform actions on your website, such as sending an email, checking a value, saving options …
• Executable functions are chained along the red line that represents the flow of the script.
• Functions are executed once and the return values ​​of these functions are stored during the execution of the script.

Non-executable components

• Functions are executed on the fly and the return values ​​are not stored when the script runs. They are evaluated at each call.
• They can be used in actions, filters, shortcodes and templates.

How to connect components together ?

Click the output connector from a component and then click the input connector from another.

To establish a valid connection, the link must meet certain criteria :

• An input can only be connected to one output and vice versa.
• Two connectors of the same component cannot be connected together. (connectors can be connected only to connectors of other components)
• Connectors must be of the same type (except for mixed).
• Flow connections (red line) are many (outputs) to one (inputs) relations.
• Argument and value connections are one (outputs) to many (inputs) relations.

When these criteria are met, a link can be created. The color of the link corresponds to the output connector.

Executable components can be inserted on the fly. Click on the red output connector and double click on the flow zone. The prompt dialog allow you to pick a new component. The new component would be directly linked to the previous component (only if it’s an executable function / component).

You can also click on the red output connector and drop a component from the right pane. The new dropped component will be automatically linked to the previous component (only if it’s an executable function / component).

Static & dynamic parameters

Arguments of the components can be set statically or dynamically.

Static parameters

For each component, the value can be set statically by editing the component and defining the arguments in the corresponding fields.

Dynamic parameters

If the input connector is linked to another output connector, the value is provided by the linked component.

Dynamic arguments are prioritized over static values. It means that if you set a static value and connect the same connector to another component, it uses the returned value of the connected component and ignore the static value.