Implementing the Logic for Scanning the Barcode

After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Implement the logic for scanning a barcode

Implementing the Logic for Scanning a Barcode

Now that you have your UI laid out, it’s time to make it do something. Before we dive into this lesson, some things to recall from your previous units:

  • Logic is the thing that makes your application actually do things.
  • Logic needs to be defined as a flow of events, actions, and functions.
  • Events are triggers, actions are responses, and functions produce a result.

If you think about the above in terms of the barcode scanner app work-flow, scanning the barcode is the trigger event, the action is that the barcode gets sent to the API, and the API returning the data is the result. Let’s look more closely.

Creating the Barcode Scanning Logic Flow

As we’ve covered before, logic is what actually creates the outcome in our applications. In SAP AppGyver, the visual logic canvas lets you build it out in a sequence.

We call these pieces of logic flow functions, and you can connect them to each other with the attached input and output nodes. You’ll see that, when you select any view component, the default flow function is always component tap, because that’s the most common event we use to trigger native actions in an app. Component tap is when the user physically taps or touches something on the screen.

  1. Select the Scan Barcode button. In the flow function library, you’ll find Scan qr/barcode.
  2. Drop it onto the logic canvas next to the component tap event and use the output node to connect the two.

    To show some data from the barcode scanner, let’s also do the following.

  3. Select the Alert component from the Dialog section and drop it here.

    You’ll see that there are several options for displaying a dialog, and more can be found in the marketplace.

    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.

  4. With the alert component selected, we can head to the properties panel and select this lettered icon.
  5. 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.
  6. 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. Now, it’s time to start working with our main resource for this app, the OpenFoodFacts API.


You’re getting closer to completing your first app! You’ve built the underlying process for how the application should work, for the app to follow the work-flow defined for the user interface. Now, we need to power that with data. Let’s move onto the API, your data resource.

Save progress to your learning plan by logging in or creating an account