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.

   

   Click Build an Application.

   

   Click SAP Build Apps.

   

   Click Web & Mobile Application.

   

3. Enter:

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

   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. Open the SAP Build Apps preview app on your mobile device, and click Other login options.

   

   Select the US10 region from the dropdown list.

   

   If you are not using a trial account and your account is in the EU10 region, select the EU10 region.

   Click Generate Code. This will display a pin code.

   

2. Go back to SAP Build Apps on your desktop, and click Preview.

   

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

   

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

4. Click Open for the Scanner Application project.

   

   Your application starts to run.