This article will cover the basics of using the Visual Coding window, coding block Config window, and how to build a simple workflow with Visual Coding.
The Visual Coding window can be opened in a number of ways, but most commonly scripts will be trigger by a certain user event or interaction occurring.
In this article, we'll assume you're triggering a script when a UI element is pressed by the end user (like a button, etc.).
In Aquro, this is known as a 'Click Event.' Start by selecting a UI element, and then clicking the Visual Coding button next to the Click Event in its properties pane.
The Visual Coding window contains of two different areas - the Toolbox and Workflow pane.
In the toolbox on the left you will find all the available Visual Coding blocks, and in the Workflow pane you'll see a flowchart representation of your script as you build it.
When you load the Visual Coding Script for the first time you will only see one block in the Workflow - the green start node. This is the first step of your script.
The start node does not do anything, it just indicates the beginning of the script.
Start developing your Visual Code Script by adding your desired Visual Coding block to the Workflow pane by dragging a block out from the toolbox.
Next, connect the start node with the block to set the first step of your workflow. This is done by clicking on the start node and then clicking on the blue area of the block.
When you connect a block from one to another, a configuration window for that block will open up automatically.
Each block contains one blue box that is the block's core. Each may also contain one or more purple boxes, which are the block's possible outcomes. Continue building your script by adding more Coding Blocks and connect them to each other to design the script.
You connect one outcome (purple box) to another block by first clicking on a purple output section from the first block and then clicking on the blue box on the second one. This allows you to branch your script off in different ways based on different outcomes of a block.
For example, a condition.IF block could check user login status and send users to their profile if they are logged in, but to the log in screen if they are not, each of these actions in the script would be branching off from a different outcome of the condition.IF block.
If you want to re-route a connection between two blocks, start by first clicking on the purple box and then the blue box on the manager manager you like to connect it to.
If you would like to remove a connection completely, hold down the SHIFT key and click on the blue box on the manager that connection is pointed at.
To completely remove a block from your workflow repeat the step above (when SHIFT clicking on a block without any connection, the block will be deleted).
Laying out your script's flow is a major part of Visual Coding, but it's far from everything! Equally important is to know how to use the configuration windows for each coding block.
When configuring your Visual Coding blocks, you'll map what values that will be sent to the coding blocks as arguments and what you should do with the return values.
The config window will automatically open when adding a new connection to a Visual Coding script, but you may open the window whenever you like by double clicking on the blue box on the manager.
The config window contains five different elements, with the middle containing the block's core (the blue box).
To the far left: A list of all available values to send to the block
Along the left edge of the core (the blue box): A list of all parameters to this manager
Along the right edge of the core: A list of all return parameters
On the far right: A list of all places you may store the return values
In some Visual Coding blocks, the lists on the right side of the block are not available as that particular coding block does not have any return values.
To map an available input value to a parameter of the block, simply drag the value from the values list and drop it on an argument. All arguments that accept the selected value color-coded.
To remove a mapping from a value to a parameter simply hold down the SHIFT key and then click on parameter.
The list of available properties are automatically populated with values from your project. However, sometimes you may want to create custom values on the fly and map them to parameters in your coding block. This is done by adding a new static value to your app.
To do this, simply click the appropriate button in the top left of the configuration window:
Please note that this will affect all Coding Blocks in the workflow that use this static value.
To modify a value at any time, you can simply double-click it from the left side menu.
The last part of configuring your coding block will be to map the output values to here you want them to be stored.
The values outputted by the block may be stored in different places depending on what type of data the manager returns. Text values may be stored directly into textboxes on your page, properties of data items, and in variables. Data items may be stored into data items, object variables, and so on.
Mapping the output values from the block to one of the available values is very similar to mapping input values described above. Simply drag the output value to the value where you like to store the output value.
To remove an existing mapping simply hold down the SHIFT key and click on the value you would like to remove the mapping to.
Variables can be used to store information temporarily throughout your Visual Coding script, rather than permanently in a database.
For instance this could be useful when one block returns a value that you would like to use in the next block/step in your script.
You can easily add various kinds of variables to send block outputs to by clicking the Add button in the top right corner of the configuration window for a Visual Coding block:
