Create an Application with SAP Build Apps

Yes, no one reads the documentation.

But you need to follow the documentation to set up SAP Build Apps correctly on a trial account. The setup is simple, but it does require a custom identity provider and specific roles, so it’s worth taking an extra 2 minutes to make sure everything is set OK.

If you set up SAP Build Apps properly, skip this step. Otherwise, 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.

ADVERTISEMENT: The Developer Advocates deliver SAP Build CodeJams –- both beginner and more-advanced workshops – and we are always looking for hosts. If you are interested, see our blog about what’s required to host a CodeJam and add a comment there that you want to host one.

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.

     

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

     

     This opens the SAP Build lobby.

     

2. Within the SAP Build lobby, click Create.

   

   If you have other SAP Build tools installed, you may get other options. Still click Create and then click on Create again.

   

   Click Application, and click Next.

   

   Click Frontend, and click Next.

   

   Click Web & Mobile Application, and click Next.

   

3. Name the new app by entering:

   Field	Value
   Name	Scanner Application
   Description	Scanner app for reading food barcodes

   Click Review.

   

   On the Summary page, click 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.

   

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

   

   Your project will now look like this:

   

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:

• Build pixel-perfect user interfaces

• Integrate with external data resources

• Create complex logic with visual programming

• Bind data to components to create dynamic views

• Define navigation

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

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.

   

   Click the text to select the text.

   

   Copy-and-paste or type in the following:

   Text Copy

   Barcode Scanner

   

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

   

   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.

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 > Essentials) and drag and drop this underneath the paragraph/text field.

   

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

   

3. Click Save (upper right).

   

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

1. Click Preview at the top-right of the screen.

   

   You will get a QR code that you will need to scan with the SAP Build Apps preview app.

   

2. Open the SAP Build Apps preview app on your mobile device, and click the big SAP Build Apps button in the middle.

   

   Scan the QR code.

   

   This will generate a 6-character code.

   

3. Back in the preview of the SAP Build Apps project on your desktop, enter the pin code.

   

4. Click Open for the Scanner Application project.

   

   Your application starts to run.