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 namedgalleryPhotos

    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.

App state

App state consist of variables state and component state.

To learn about app state in depth, see the app state guide.

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.

Example logic flow

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.