Skip to Content

Create an Application with SAP Build Apps

Beginner
10 min.
SAP Build Apps, Beginner, Tutorial, SAP Business Technology Platform, Mobile
Create an application with SAP Build Apps on SAP BTP. The application, created in a browser, can be used with the mobile preview app to scan physical barcodes on food packaging to display calorific information.
You will learn
  • How to create a no-code project with SAP Build Apps
  • How to add and edit visual elements in the SAP Build Apps Composer tool
thecodesterDaniel WroblewskiNovember 14, 2024
Created by
thecodester
November 5, 2024
Contributors
thecodester

Prerequisites

  • Access to an SAP Build Apps system – follow these instructions to install SAP Build Apps on your trial system.
    • For video instructions, see the following:
       
    • For written instructions, do ONLY Step 2 of Set Up Prerequisites for SAP Build CodeJam → YOU ONLY HAVE TO DO STEP 2 (install SAP Build Apps) OF THIS TUTORIAL!!!
  • Download the SAP Build Apps Previewer App on a smart phone or tablet: iOS / Android.

IMPORTANT: Make sure to follow the above prerequisites for installing SAP Build Apps – the booster will install SAP Build Apps and the Cloud Identity Service, as well as assign you the needed roles.

In this mission you will learn how to create a no-code application using the SAP Build Apps Composer tool. The application you create will enable you to scan a barcode on a smartphone and retrieve information from a public API. To do this, you will need to download the Preview app (available through iTunes and Google Play store).

The application you’ll create across the tutorials will read barcodes from food packaging and display information about the product using the Open Food Facts API:

Diagram of scanning a food item from a mobile app

IMPORTANT: Though you can use any SAP Build Apps version, these tutorials are based on a SAP BTP trial account.

  • Step 1

    Yes, no one reads the documentation.

    So you decided to skip the instructions and the prerequisites and set up SAP Build Apps by yourself, like a homeowner thinking they can save money by fixing their own plumbing. Ever see the movie “The Money Pit” with Tom Hanks and Shelley Long. It did not go well.

    The Money Pit

    SAP Build Apps is simple to install, but does require you to use a custom identity provider, so it is worth taking an extra 2 minutes to make sure everything is fine. We have tried to make it as simple as possible by giving you a choice:

    • 2-minute video
    • Written instructions – the written instructions are in a single step – Step 2 – in our SAP Build CodeJam prerequisites tutorial. You only have to do Step 2, Install SAP Build Apps.

    While we’re on the subject of CodeJams, we would like to bring the SAP Build CodeJams to you –- either the beginner workshop or the advanced-topics workshop. If you are interested, see our blog about CodeJams and add a comment that you want to host a CodeJam.

    SAP Build CodeJam
  • Step 2

    1. Open the SAP Build lobby in your trial account by doing the following:

      • Open the SAP BTP cockpit by going to https://account.hanatrial.ondemand.com/cockpit.

      • Click Go to Your Trial Account.

      • Under Subaccounts, click the trial tile.

        Subaccount

      • Under Instances and Subscriptions, click the button next to SAP Build Apps.

        Instance

        This opens the SAP Build lobby.

        SAP Build lobby

    2. Within the SAP Build lobby, click Create.

      Create

      Click Build an Application.

      Create

      Click SAP Build Apps.

      Create

      Click Web & Mobile Application.

      Create

    3. Enter Scanner Application for the project name, and an optional description, then click Create.

      Create

      Your SAP Build Apps project is created, and the default Home page is displayed. Once created, projects can be accessed again at any time from the SAP Build lobby.

      New project

    4. Since we want to create a mobile app, open the device dropdown and select Mobile.

      Mobile
  • Step 3
    Editor

    When working with SAP Build Apps, the majority of your time will be spent in the app builder area. This area allows you to complete key tasks such as, but not limited to, the following:

    • Define your app’s structure and navigation logic

    • Build pixel-perfect user interfaces

    • Create complex logic with visual programming

    • Integrate with external data resources

    • Bind data to your components to create dynamic views, and more

    For more detailed coverage of the features available in the app builder area, view the SAP Build Apps documentation.

  • Step 4

    You’ll now start to create a basic layout for your application, starting with editing text.

    1. Select the Title component (the one that says Headline) by clicking it once.

      Select title

      Click the text to select the text.

      Select text

      Copy-and-paste or type in the following:

      Text
      Copy
      Barcode Scanner
      Paste text

    2. Double-click the Text component to highlight the text, and paste in the following:

      Text
      Copy
      Scan a barcode of a food product using your smartphone
      Text field

      Instead of editing text directly inside a component, you can also set the text using the Content property in the Properties tab to the right. This option is needed if you set the text based on a formula or variable.

    In SAP Build Apps, which type of design element is a Button (i.e., in which group of components is it located)?

  • Step 5

    Next, you’ll need to add a scan button which, when tapped, will open the camera device on your smartphone.

    1. Locate the Button component (found under Core > Forms) and drag and drop this underneath the paragraph/text field.

      Adding a button

    2. Edit the button label by clicking the word Button inside the button and typing Scan.

      Edit button text

    3. Click Save (upper right).

      Save Project

    The application is now saved and available to preview using the preview app on your smartphone.

    What do you need to preview the app on your phone?

  • Step 6

    👉 IMPORTANT: Depending on which SAP Build Apps you are using – with the community edition or SAP BTP trial – you will select different buttons to get started with the preview app.

    • If you are using the community edition, the first thing you do is click the SAP Build Apps tile.

    • If you are using SAP BTP trial (region US20), you will click Other login options.

    The instructions below assume you are using a trial account, but also provide alternatives if you are using an SAP BTP account in region EU10.

    1. Assuming you are using an SAP BTP trial account, open the SAP Build Apps preview app on your mobile device, and click Other login options.

      Open preview app

      Select the US10 region from the dropdown list.

      Select US10

      This will display a pin code.

      Pin code

      If you are using an account in the EU10 region, from the first screen simply click the SAP Build Apps tile and this will display a pin code.

    2. Go back to SAP Build Apps on your desktop, and open the Launch tab.

      Launch

      Click Open Preview Portal.

    3. Enter the pin code, and press Enter or click Confirm pin.

      Alt text

      This will refresh the preview app and display a list of your apps.

    4. Click Open for the Scanner Application project.

      My apps

      Your application starts to run.

      Preview of app
Back to Top
Back to top