Tell us what you think

We want to create the best possible experience for our learners. Your feedback helps us to improve the experience for everyone.

SAP Learning Journey

Implementing the No-Code Logic Flow

Objectives

After completing this lesson, you will be able to:

Dissect the anatomy of a logic flow
Build the app logic flow
Work with bindings
Bind data variables to UI components

Introduction: Implementing the No-Code Logic Flow

Now that you have your UI laid out, it’s time to make it do something. That’s where logic comes into play. Logic is the thing that makes your application actually do things.

Logic is fundamentally based on business rules that are set to produce an outcome, and the requirements for those should be well understood during the planning process. Business rules are the specific ways of operating that arise from your business and are closely related to software requirements.

Defining the logic of your application is about applying all the rules and requirements to make the app work accordingly, and is one of the longer and more involved aspects of the application development process.

Dissecting the Anatomy of Logic Flows

To ensure that business rules are appropriately met by the application, the supporting logic needs to be defined as a flow of events, actions, and functions. Events are triggers, actions are responses, and functions produce a result.

Logic flow can be simple or branching, and used to customize any kind of behavior in an app.

Build the App Logic Flow

Now, let’s develop the logic for your Barcode Scanner App. SAP AppGyver Community Edition provides the visual logic canvas that lets you build it out piece-by-piece in a sequence.

These consecutive pieces of logic are called flow functions, and you can connect them to each other using input and output nodes.

Work With Bindings

A data variable coming from your data resource is just a piece of information. It doesn’t yet have a display in the UI of your app, so we need do do anther step in order to put it on the screen. That step is called creating a binding between a data variable and a UI component, in order to show our barcode data in the dialog text box.

Prerequisites

Bind Data Variables to UI Components

Next, we need to set a binding that shows our barcode data in the dialog text. Remember that bindings can be used to create a link between a piece of data and a UI component.

With the alert component selected, we can head to the properties panel and select this lettered icon.
Select Output value of another node, then select Scan QR/barcode. We only have one option here for QR barcode content, so select that one and save.
Now we can open the camera and scan a barcode, and the numbers from the scanned barcode are displayed in the Alert dialog box.

We’ve got our barcode scanner up and running with the logic!

Prerequisites

Next lesson