Logic canvas
Located at the bottom half of the app builder view, the logic canvas is where you construct your app's logic.
You can read more in the app logic section.
By default, the logic canvas is hidden for components that have no custom logic attached to them.
To open the logic canvas, select a component (or the page) and click the Add logic bar at the bottom of the view canvas.
If a component has custom logic attached to it, the logic canvas will open automatically whenever that component is selected.
All logic in a Composer app is built with logic flows: series of interconnected nodes that start with an event node, then proceed through a series of flow function nodes to determine what happens in your app.
There is a unique logic canvas context for every component. Thus, when you have a button selected, you don't see the logic for the page itself or an input field, and so on.
The wires between nodes determine the order of execution: inputs are on the left and outputs on the right.
To connect logic nodes, click and drag a wire from one of the outputs to another node's input.
Alternatively, you can drag a node on top of an existing wire between two nodes, which then causes the connection to be rewired so that the dragged node is run between the two original nodes. (For new nodes, this only works if you've added the node onto the canvas first – you can follow the issue here.)
To delete a wire, you can select it and press the backspace button on your keyboard.
A single output can be wired to trigger multiple nodes.
You can delete a logic node by selecting it and pressing backspace.
You can also click the x icon in the blue node toolbar that appears when you select a logic node.
You can duplicate logic nodes by copying them to the clipboard with CMD+C and pasting with CMD+V (or CTRL+C/CTRL+V in Windows).
You can also click the duplicate icon in the blue node toolbar that appears when you select a logic node.
You can select multiple logic nodes in several ways:
Click and drag a selection rectangle to select the nodes that fall inside it
Select a node, hold shift and then click on another node. All interconnected nodes will be selected.
Select a node, hold CMD (or CTRL on Windows) and click another node. Just the clicked nodes will be selected.
In addition to dragging nodes around with your mouse, you can move the currently selected nodes with the arrow keys.
By holding shift while you move logic nodes either via the keyboard or via your mouse, you can snap the nodes to a grid, producing cleaner layouts.
Every flow function node always has a single input on the left. Event nodes have no inputs, as they are triggered by the runtime instead of as part of a logic flow.
Every logic node has zero or more outputs. After the flow function has been executed, one of the outputs is triggered.
Logic flows are executed in sequence from left to right, starting with an event node and then proceeding through each node.
When a flow function has multiple semantically different outcomes, it usually has multiple outputs.
In the example above, we start with a tap event, then show a QR code scanner to the user. The possible outcomes are as follows:
If the a code is successfully scanned, we continue from the first output, opening a page
If the user cancels the scan dialog, the second output is triggered and we show a toast message dialog to the user
If an error occurs while scanning the QR code (for example, the device has no camera), the third output is triggered
Another good example is the If condition flow function – if the condition given as an input argument is true, the first output is triggered; if not, the second output is triggered.
Like view components, you can configure how a flow function works by selecting it on the canvas. The right-side properties panel changes to show you configuration options.
At the top of the properties panel, you can see and expand a description of what the flow function does. This description also explains when the conditions under which the various outputs are triggered.
Most flow functions take some input arguments, which affect how the function is run. Some input arguments are required and some are optional.
For example, an Alert needs to be given at least a title text to show in the dialog to function properly, but you can also add a message text to show below the title.
Some arguments are required but have a sensible default value, so they are shown under the Optional inputs section. For example, you can give the dismiss button label text for Alert, but it defaults to "OK" – so in most cases, you don't need to worry about that.
There are many different types of input arguments, from pages available in your app to an object with a specific schema.
You can read more in the flow function properties guide.
The properties panel also describes the different output arguments available for use in subsequent flow functions, including their schema.
Output arguments describe results produced by running the flow function, such as data from a backend, a photo taken by the user etc.
When a logic node is selected, there are several action buttons available (some of which might be hidden depending on the selection):
Remove node – deletes the selected node from the canvas
Create a new flow function – turns the selected nodes into a new composite flow function
Show in marketplace – shows the selected flow function in the marketplace
Isolation mode allows you to edit composite flow functions you or others have created. To enter isolation mode, double-click on a composite flow function.
