Low-Code/No-Code Development with SAP Build Apps

Hands-on Train-the-Trainers Workshop

Joni Liu
Koh Ren Yi
Feb, 2024
PUBLIC
Legal disclaimer

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP.
This presentation is not subject to your license agreement or any other service or subscription agreement with SAP. SAP has no obligation
to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned
therein. This document, or any related presentation, and SAP’s strategy and possible future developments, products, and platforms,
directions, and functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information
in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. This document is provided
without
a warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability, fitness for a particular
purpose, or noninfringement. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no
responsibility for errors or omissions in this document, except if such damages were caused by SAP’s willful misconduct or gross negligence.

All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from
expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates,
and they should not be relied upon in making purchasing decisions.

For all recent and planned innovations, potential data protection and privacy features include simplified deletion of personal data, reporting
of personal data to an identified data subject, restricted access to personal data, masking of personal data, read access logging to special
categories of personal data, change logging of personal data, and consent management mechanisms.

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

Agenda http://tinyurl.com/bdcsk8ez

SAP Introduction

SAP Build Apps Overview

SAP Build Apps Hands-on Workshop

SAP Build Apps Resources

Workshop Session:
Introduce participants to build apps visually and show how they can integrate data into their apps
using SAP Build Apps.

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3

Workshop Pre-requisites

1. Get SAP Business Technology Platform (BTP) Trial account.

Sign-up here: https://developers.sap.com/tutorials/hcp-create-trial-account.html

2. Setup SAP Build Apps on SAP BTP Trial Account (with Booster).
Follow this guide here:
https://developers.sap.com/tutorials/build-apps-trial-booster.html

3. Create an Account on the SAP Gateway (ES5) Demo System. We will need this for 2nd
mission tutorial.
Follow this guide here: https://developers.sap.com/tutorials/gateway-demo-signup.html

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4

SAP Introduction
Enable every enterprise
to become an intelligent,
sustainable enterprise

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6

SAP Build
Create and augment enterprise apps, automate processes, and design business sites, all visually

Compose apps Automate processes Design business sites

SAP Build Apps SAP Build Process Automation SAP Build Work Zone
Build Visually
Integrate Seamlessly
Collaborate Securely
SAP Business Technology Platform

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

SAP Build Apps Overview
SAP Build Apps Features

SAP Build Apps

The world's first professional no-code platform, enabling you to

build apps for all form factors, including mobile, desktop, browser,
TV and others

Drag-and-drop the Use over 400 Create any logic Bring your own data Deploy apps to
user interface built-in formula visually with pre-defined various platforms
design functions integrations

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9

 SAP Build Apps Demo
See how you can quickly build quality apps with
absolutely zero coding required.

Click to check the demo

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10

SAP Build Apps Hands-on Workshop

App makes a HTTP request,

and backend returns supplier
list data as JSON
Backend
App API
[Source System]
Hands-on Workshop Missions

Mission #1 – Create a Barcode Scanner App

Mission #2 – Create IT Order App

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

Hands-on Workshop Missions

Mission #1 – Create a Barcode Scanner App

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13

Mission #1: Step-by-step Guide to Create a Barcode Scanner App

#1 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 SAP Build Apps
Previewer App to scan physical barcodes on food packaging to display calorific information.

#2 Configure Your Application to Open your Device Camera

Configure the logic flow in your application to enable your device to open your camera on demand.

#3 Connect Your Application to a Public API

Connect your application to a public API and then test that it's pulling the right information.

#4 Fetch Data from Public API to Your Application

Configure your application to fetch records from a public API when a food item is scanned, using a Get Record command, which first
needs to be configured.

#5 Display Fetched Data in Your Application

Display data fetched from a public API, such as product names and calorific information, in your SAP Build Apps application.
© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14
Hands-on Workshop Missions

Pre-requisite of Mission #2 – Setup ES5 - SAP

Gateway Demo System Account

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 15

Pre-requisite: Setting up ES5 – SAP Gateway Demo System Account
Step 1 – Do you have an SAP account?

1. You would need an SAP Account to

proceed to the next step. If you already
have a SAP Account, proceed to the
next step.
2. If you don’t have an SAP Account
ready, navigate to: http://www.sap.com
3. Click on the icon as circled by the red
circle on the image on this slide.
4. Proceed to register an account before
proceeding forward.

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 16

Setting up ES5 – SAP Gateway Demo System Account
Step 2 – Registering for ES5, SAP Gateway Demo System account

1. Navigate to this link: SAP Gateway Demo

System - Registration - ES5 (sapdevcenter.com)

2. You should see the image on the left.

3. Fill up the registration form.

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 17

Setting up ES5 – SAP Gateway Demo System Account
Step 3 – Filling up the registration form

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 18

Setting up ES5 – SAP Gateway Demo System Account
Step 4 – Login to SAP NetWeaver

1. Navigate to this link:

sapes5.sapdevcenter.com/sap/bc/gui/s
ap/its/webgui
2. Enter the username and password
from your email.

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 19

Setting up ES5 – SAP Gateway Demo System Account
Step 5 – Change your password

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 20

Setting up ES5 – SAP Gateway Demo System Account
Step 6 – Success!

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 21

Setting up ES5 – SAP Gateway Demo System Account
Step 7 – Additional Information [Optional: Fixes for Errors]

1. SAP Gateway Registration System:

SAP Gateway Demo System - Registration -
(sapdevcenter.com)

2. SAP Gateway Community:

SAP Gateway | SAP Community

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 22

Hands-on Workshop Missions

Pre-requisite of Mission #2 – Configure ES5 endpoint

in your SAP BTP Trial Destination

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 23

Connecting ES5 to your BTP Trial Account
Step 1: Login to BTP Trial Account

Navigate to this link: https://account.hanatrial.ondemand.com/trial/#/home/trial

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 24

Connecting ES5 to your BTP Trial Account
Step 2: Subaccount

Select the sub-account you have created previously in US East (VA) region

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 25

Connecting ES5 to your BTP Trial Account
Step 3: Connectivity

Select under Connectivity - Destinations

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 26

Connecting ES5 to your BTP Trial Account
Step 4: Setting the destination

Select "Create Destination"

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 27

Connecting ES5 to your BTP Trial Account
Step 5: Configuration

Select "New Property", add 3 new additional properties

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 28

Connecting ES5 to your BTP Trial Account
Step 6: Adding in parameters

Fill in the blanks as shown below:

Make sure it is checked!

• Name: ES5_GWSAMPLE Additional Properties

• Type: HTTP
1. AppgyverEnabled
• URL: https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/
• Proxy Type: Internet 2. HTML5.DynamicDestination
• Authentication: BasicAuthentication 3. WebIDEEnabled
• User: [ Fill in your ES5 Account Username]
• Password: [Fill in your ES5 Account Password]
All properties set to true.
• Rest can be left blank, once you are done, click SAVE

• Once saved, refresh SAP Build and it should now work.

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 29
Hands-on Workshop Missions

Mission #2 – Create IT Order App

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 30

 Mission #2: Step-by-step Guide to Create an IT Order
Front End

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 31

STEP 1: Creating the Frontend (Web App) Project

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 32

STEP 2: Renaming the UI

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 33

STEP 3: Authentication with SAP BTP

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 34

STEP 4: Integrating the Authentication

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 35

STEP 5: Authentication Destination and Installation

If you do not see ES5_GWSAMPLE or ES5, it is likely you have not set up ES5 yet or have yet
to connect your ES5 account to your BTP Trial Account. For connection issues, kindly refer
to Slide 30.
Else, skip to Slide 36.
© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 36
STEP 6: Define Data Variables

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 37

STEP 7: Define Page Variables

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 38

STEP 8: Configuring Input Field

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 39

STEP 9: Add List Divider & Item

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 40

STEP 10: Configuring Product List

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 41

STEP 11: Add Primary Label

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 42

STEP 12: Add Secondary Label

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 43

STEP 13: Edit List-item 1 Formula to Filter List

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 44

STEP 14: Create a New Page

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 45

STEP 15: Define Page Parameters

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 46

STEP 16: Define Data Variables

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 47

STEP 17: Back to Home Page

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 48

STEP 18: Configure App Logic

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 49

STEP 19: Page Configuration

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 50

STEP 20: Add More Parameters

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 51

STEP 21: Back to Product Details

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 52

STEP 22: Add First Card Component

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 53

STEP 23: Add First Card Component 2

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 54

STEP 24: Add Second Card Component 1

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 55

STEP 25: Add Second Card Component 2

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 56

STEP 26: Save & Launch

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 57

HOW TO SET UP PREVIEW PORTAL (Mobile/Web Preview)
STEP 1: Select Open Preview Portal STEP 3: Mobile Preview

STEP 2: Preview on web OR Preview on device

Copy paste this

PIN code into STEP 2
• You may choose to preview it on the web or on your phone.
• If you choose to preview it on your phone, download SAP Build Apps and
proceed to STEP 3. You would need to generate the PIN on your phone.

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 58

 Mission #2: Step-by-step Guide to Create an IT Order
Back End

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 59

STEP 1: Creating the Backend Project

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 60

STEP 2: Create New Data Entity

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 61

STEP 3: Add New fields

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 62

STEP 4: Configure Deployment

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 63

STEP 5: Edit Frontend Project and Add New UI Components

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 64

STEP 6: Define Page Variables

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 65

STEP 7: Configure Data Integration

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 66

STEP 8: Update UI Canvas

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 67

STEP 9: Add Input Field

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 68

STEP 10: Add First Button

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 69

STEP 11: Add Text Field

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 70

STEP 12: Add Second Button

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 71

STEP 13: First Button Logic

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 72

STEP 14: Logic – Data entity

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 73

STEP 15: Configure Parameters Mapping

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 74

STEP 16: Add Alert & Second Button Logic

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 75

STEP 17: Save & Launch

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 76

HOW TO SET UP PREVIEW PORTAL (Mobile/Web Preview)
STEP 1: Select Open Preview Portal STEP 3: Mobile Preview

STEP 2: Preview on web OR Preview on device

Copy paste this

PIN code into STEP 2
• You may choose to preview it on the web or on your phone.
• If you choose to preview it on your phone, download SAP Build Apps and
proceed to STEP 3. You would need to generate the PIN on your phone.

© 2023 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 77

SAP Build Apps Resources
 Start your journey today and reap the rewards of
low-code/no-code application development from SAP

Enhanced Maximized speed

ROI and agility Academy

Increased innovation Greater Join the community

adoption collaboration

Example Apps

Accelerated time Reduced total cost

to value of development Visit us at sap.com

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 79

Thank you.
Trainers Contact information:
Joni Liu ([email protected])
Solution Advisor / Presales
SAP Asia

Koh Ren Yi ([email protected])

Solution Advisor / Presales
SAP Asia
Follow us

www.sap.com/contactsap

© 2021 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP
SE or an SAP affiliate company.
The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its
distributors contain proprietary software components of other software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or
warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty
statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional
warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or
any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation,
and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platforms, directions, and
functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason
without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or
functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ
materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, and they
should not be relied upon in making purchasing decisions.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/trademark for additional trademark information and notices.