Getting and Displaying the Food Product Data

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • Get and display the food product data

Getting and Displaying the Food Product Data

In the previous lesson, we successfully integrated the OpenFoodFacts API and set up the data resource. The next thing we need to do is fetch the data and get it to display in our user interface.

Some things to remember from previous units before diving into this lesson:

  • Variables are used to store values, this can be anything, from numbers, to text, to complex data.
  • Bindings can be used to create links between data and update our UI.
  • Formulas can also be applied to control many different aspects of our application, including the text.

Let’s get building...

Fetching the Data

  1. Go back to the view canvas, and choose the Scan Barcode button.
  2. In the logic canvas, delete the Alert node.
  3. From the flow function library, choose Get Record and connect it to the Scan flow function.

    There is only one data resource now, so in the Properties panel, it is automatically bound to openfoodfacts. The Barcode resource ID that we created earlier also shows up, but to pass the barcode data, we need to bind it.

  4. Open the binding editor by selecting the binding icon under Barcode.
  5. Choose Output value of another node and then Scan QR/barcode.
  6. Under Select node output, select QR barcode/content and save.

The get record flow function should now be able to fetch data for any barcode we scan. However, to display the data, we’ll need to have a place to store it temporarily. This is where data variables are useful.

Using a Data Variable to Store the Data

The next step is to create a data variable. Data variables are a special type of variable that is connected to a specific data resource that we’ve set up. In this case, it’s the OpenFoodFacts API.

  1. On the panel above the view canvas, switch from View to Variables.

    Showing in the left panel are the different types of variables available.

  2. Choose Data variables and select Add data variable.
  3. Since we have already created our data resource, there is only one available. Select OpenFoodFacts.
  4. Select the variable and in the right column and change the name to FoodFact without any spaces.
  5. Change the variable type to Single data record.

    This is because the data we’re requesting from the API represents a single product.

    With the data variable still selected, you can see in the logic canvas below there’s already some default logic. In this case, the logic is set up to fetch new data every 5 seconds. This default logic is useful when working with certain types of data sources, but for our app, we only want the data to show after we’ve scanned a barcode.

  6. Select all the default logic flows, except for the first two Events, and delete them.

    The default logic can be restored at any time by selecting Reset data variable logic from the right column again. Our data variable is now ready, so choose Save and then go back to the view canvas, where we'll put it to use.

  7. Select the Scan Barcode button, and open the logic canvas.
  8. From the library, add the set data variable flow function.
  9. Connect it to the Get record node.

    With the Set data variable flow function selected, you can see it has the FoodFact data variable set, but we also need to set the value it’s assigned to.

  10. Select the binding icon under Inputs and Data.
  11. Choose Output value of another node, then Get record.
  12. Select Record again and save.

Now our logic flow works like this:

  1. The Scan Barcode button is tapped.
  2. The scanner node activates the camera, and the user scans a barcode.
  3. The get record node uses the barcode data to make a request with the OpenFoodFacts data resource.
  4. The data returned from the API is stored in the data variable.

Our logic for getting the data is ready to go! For the last section, we’ll look at how to display it.

Working with and displaying the data

Now that we’ve got our logic and data set up, we’ll go back to working on the user interface, where it’s going to display. The data we fetch from OpenFoodFacts is going to be stored in the FoodFact data variable we created, so the next step is getting it to show up on the user interface.

  1. Select the top paragraph. Remember from the app demo, this is where the product name appears.
  2. On the Properties panel, under Content, select the binding icon.
  3. Select Data and Variables, Data variable, and then FoodFact.

    Here, it shows all the properties in the data returned by the API. Remember when we set the schema from our API response in the data resource? Now, you can see where all that information is available to use.

  4. Scroll down and select the product_name property. We can also see in the preview box a sample from the API data. Save your data.

    After saving, we can test this out on the Preview App.

  5. Open the barcode scanner and scan a product.

    Now you can see the product name is displayed! We’re almost there. Let’s add the calorie information next.

  6. Select the lower paragraph and complete the same steps to create a binding.
  7. Choose the binding icon, Data and Variables, Data variable, and then FoodFact.
  8. Scroll down to the Nutriments section, where you see many options.
  9. Choose Energy-kcal_100g.
  10. Save your work and use the Preview App to test it again.

    The calories are displayed, but only as a number. If we want it to show that this is the number of calories per 100g, we can manipulate the text a little using formulas.

  11. Select the second paragraph and open up the Content binding editor again.
  12. Choose Formula. The default formula includes our data variable.
  13. Select the formula to open the editor.
  14. Add the following formula exactly as written below:

    "calories per 100g: "+data.FoodFact.product.nutriments["energy-kcal_100g"]

    When entering formulas, make sure that the text connecting your data variable matches exactly with your name for the data variable. For example, if your variable is named ‘FoodFact’ then it must be entered exactly this way into the formula editor. You can verify what your variables are named by checking the variable view.
  15. Under the Suggestions, choose Enter. We can see in the example results how it will display.
  16. Save the formula, and use the Preview App to test again.

    In the preview, you see that, if you haven’t scanned a barcode, it says undefined. This can be cleaned up just a little more. So let’s add one last touch. It would make more sense to only show the text when there is data to show, so we can change that with one more formula.

  17. With the second paragraph selected, open Advanced Properties.

    Here, we see the Visible property. This controls whether the selected component is displayed or not. By default, it’s set to true, meaning it is visible.

  18. Selected the binding editor for Visible and choose Formula.
  19. Enter the following formula and save.

    IF(data.FoodFact.product.nutriments["energy-kcal_100g"], true, false)

    We need to test if there is any data stored, so we are using an IF formula function, which returns a value based on the existence of another element. If there is data, then a true value is returned, and if there isn’t, then a false value is returned.

Summary

This lesson covered one of the most complex areas of app development, which is working with data. We managed to retrieve data from OpenFoodFacts and with these last two formulas, manipulated it to make sense on our user interface. Just like that, we’re all finished with building our first mobile app in SAP AppGyver — great job! In the next and final lessons, we’ll test it out and see how this all works together.

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