STEPS TO CREATE BUILT APPS IN SAP

Create an Application with SAP Build Apps

Create an application with SAP Build Apps on SAP BTP. The application, created in a
browser, can be used with the Previewer 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

Prerequisites

• Access to the SAP Build Apps sandbox system. See the SAP Builders group for
instructions for signing up.
• You can instead use your own SAP BTP, as described in Subscribe to the Low-Code /
No-Code Service in SAP BTP or the free community edition of SAP AppGyver,
available at AppGyver.com.
• Download the SAP Build Apps Previewer App on a smart phone or
tablet: iOS / macOS/ Android

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:

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP

The steps provided detail the process using an SAP BTP account within a desktop browser.
It is also possible to replicate many of the steps using a free account from AppGyver.com.

All applications are created, edited, and managed within what we call a project, with one
application created per project. Projects, and their related applications, are not
automatically saved in this service, so care should be taken before closing a browser.

IMPORTANT: Though you can use any SAP Build Apps version, these tutorials are based on
the free sandbox system.

Open allClose all

• STEP 1

Create SAP Build Apps project

1. Open the sandbox lobby.

2. Within the SAP Build lobby, click Create.

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP

Click Build an Application.

Click Web & Mobile Application.

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP

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

then click Create.

Your SAP Build Apps project is created, with the Composer Pro view displayed. Once
created, projects can be accessed again at any time from the SAP Build lobby.

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP
Done

• STEP 2

Understand SAP Build Apps

When working with Composer Pro, 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:

o Define your app’s structure and navigation logic

o Build pixel-perfect user interfaces

o Create complex logic with visual programming

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP
o Integrate with external data resources

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

For more detailed coverage of the features available in Composer Pro, view the SAP
Build Apps documentation.

Done

• STEP 3

Edit app interface

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

Click the existing Headline field and edit the text to read: Barcode Scanner

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP
Click the Paragraph (Text) field and edit the text to read: Scan a barcode of a food

product using your smartphone

Done

• STEP 4

Add scan button

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

To do this, locate the Button component (found under Core > Forms) and drag and
drop this underneath the paragraph/text field.

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP

Edit the Button text to read Scan .

Click Save.

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP

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

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

o Basic

o UI element

o User element

o Forms

o Layout

o Lists

Check answer

• STEP 5

Preview app in previewer

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP
If you are in region US10, then click Other login options instead.

If you are using the community edition, click AppGyver Community Edition and scan
the QR code in the Launch tab.

1. Open the SAP Build Apps preview app on your mobile device, and click SAP
Build Apps.

This will display a pin code.

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP

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

Click Open Preview Portal.

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

https://www.linkedin.com/in/srinivasan-s-420221253/
 STEPS TO CREATE BUILT APPS IN SAP

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.

https://www.linkedin.com/in/srinivasan-s-420221253/
STEPS TO CREATE BUILT APPS IN SAP

https://www.linkedin.com/in/srinivasan-s-420221253/