The Logic Editor is a very powerful tool for creating frontend logic in your application: what happens when I click on this button, what should be done when an app loads for the first time and so on. It utilizes the same editor as Cloud Mesh, with the exception that the code is run in the app instead of on a backend server.
You can open the logic editor by selecting a component (in our case, a button) and clicking the Add Logic button in the Interface Builder.
A blank logic canvas opens with an automatically created input node for the
Tap event. Input nodes are activated when something happens in your app: a page is loaded, an UI component is tapped and so on.
Upon activation, the input nodes execute the logic flow attached to them.
Empty canvas with just the
Tap input node.
Glossary: Logic Node
A logic node means an individual box on the logic canvas. A logic node can either a specialized type, like the input or function nodes, or an instance of a logic component (such as an Alert or Open page node).
To have our
Tap node do something, let's add another logic node to the canvas. You can do this by dragging it onto the logic canvas from the library on the left.
For example, to show an alert when our component is tapped, you can drag the Alert component onto the canvas (which creates a new logic node), attach the
Tap node to it by dragging a wire between the two, and configuring the Alert node by double-clicking it to open the settings panel.
Settings panel for an Alert node
Every node has a
Name property, which is simply the display name of the node on the canvas.
The other properties depend on the node type, and are explained in the rightmost panel. In our Alert node example, we have the following properties:
title: Title text that is shown at the top of the alert dialog.
message: Message text that is shown in the alert dialog.
button: Button title text to dismiss the dialog.
In our example screenshot above, we've changed the property type to be a string from the dynamic
msg. property (more on that later).
Now, with our node configured and wire connected, we can close the logic editor, save changes, publish our app and test our button that shows an Alert dialog.