App logic

App logic overview

App logic in Composer apps consists of two main concepts: app state and logic flows.

Most of what happens in a Composer app follows the same pattern:

1. An event is triggered by the runtime or by user interaction, such as Page mounted or Button tapped
2. Attached logic flow functions are run, for example Take photo or Get data record collection
3. The end result is used to change the app state via a logic flow node, for example
   1. Adding the photo taken by the user to an array of photos stored in a page variable named galleryPhotos.
   2. Setting the data fetched from the backend to a data variable named todoItems
4. The change in app state flows to component state through user-defined bindings
5. The UI is re-rendered based on the state change, causing a new photo to appear in a gallery or a list of data to be populated

In real apps, logic flows can obviously be as complex as required, but they all follow the same pattern of event – logic – state change.

Variables state

Variables state is essentially the data that's stored in the device memory during your app's runtime.

It's the same concept as the in-memory variables that are found in any programming language – there's just a lot more predefined and kept up-to-date automatically than you'd get with a fresh program.

Variables state includes things like data your app has fetched from a backend, text inputted by the user to an input field, the current loading state of a page, device operating system, latest geolocation value and so on.

Component state

Component state describes what's going on in your various view components: if a button is visible or not, what the placeholder text in an input field is, what icon to display, the color of a card component's background and so on.

You can think of component state as your HTML DOM node attributes or React component props.

Component state is linked to variables state by binding a component property to a variable. To learn more, please see the binding data guide.

Logic flows

Logic flows consist of a triggering event and attached flow functions. Each event and flow function is represented by a node on the logic canvas, with execution order defined by connecting wires between the nodes.

In the example above, we have a Component tap event that triggers the Scan QR/barcode flow function. This opens a QR scanner dialog. Once the user has scanned a code (or cancelled the dialog), the logic flow continues executing.

The logic flow can branch depending on what happened during the logic flow execution. In the example above, a successful scan proceeds to the Open page flow function, a cancelled dialog shows a Toast, and an error produces an Alert.

Every flow function's description tells you when the different outputs are triggered.

App Logic Canvas

Located at the bottom half of the app builder view, the logic canvas is where you construct your app's logic.

Accessing the logic canvas

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.

Creating logic flows

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.

Connecting logic nodes

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.

Deleting logic 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.

Duplicating logic nodes

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.

Selecting multiple logic nodes

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.

Moving logic nodes

In addition to dragging nodes around with your mouse, you can move the currently selected nodes with the arrow keys.

Snap to grid

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.

Inputs, outputs and wires

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.

Multiple outputs

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.

Flow function properties panel

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.

Description

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.

Input arguments

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.

Output arguments

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.

Action buttons

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

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.

Logic functions

The flow function library panel gives you easy access to the various flow functions you can add to your app. It takes up the bottom half of the left sidebar.

The panel is divided into three tabs.

• Core – core flow functions created by AppGyver, common in most apps
• By me – flow functions created by you for this app
• Added – flow functions added from the Marketplace for this app

Under the tabs, you can access the Logic Marketplace. If flow functions you've added via the Marketplace to your app have new updates to them, a red badge will be shown with the number of pending updates.

Core tab

The core tab contains basic flow functions that are divided into simple categories.

• Navigation – present dialogs and capture user input
  • Open page
  • Navigate back
• Variables – manipulate in-memory variables
  • Set app variable
  • Set page variable
  • Set data variable
• Dialog – show dialogs
  • Toast
  • Alert
  • Confirm
• View - show spinners
  • Show spinner
  • Hide spinner
• Data – work with local and external data resources
  • Get record
  • Get record collection
  • Create record
  • Update record
  • Replace record
  • Delete record
• Device – use device APIs like camera or barcode scanner
  • Scan QR/barcode
  • Take photo
  • GPS location
• Utility – affect how the flow of interconnected function nodes gets executed
  • Delay
  • If condition
• Advanced
  • JavaScript
  • Receive event
  • Trigger event

By me tab

Here, you can see a list of all the flow functions you've created for this app. Read more in the Creating new flow functions guide.

Installed tab

Here, you can see a list of all the flow functions you've added from the Marketplace