8/29/2024

SAP Build Apps - Service Guide

Generated on: 2024-08-29 17:41:24 GMT+0000

SAP Build Apps | Latest

PUBLIC

Original content: https://help.sap.com/docs/BUILD_APPS/431746e4c663458aa68d9754b237bfc6?locale=en-

US&state=PRODUCTION&version=Latest

Warning

This document has been generated from the SAP Help Portal and is an incomplete version of the official SAP product
documentation. The information included in custom documentation may not re ect the arrangement of topics in the SAP Help
Portal, and may be missing important aspects and/or correlations to other topics. For this reason, it is not for productive use.

For more information, please visit the https://help.sap.com/docs/disclaimer.

This is custom documentation. For more information, please visit the SAP Help Portal 1
 8/29/2024

What Is SAP Build Apps?

SAP Build Apps enables anyone to develop fullstack applications in a visual way.

SAP Build Apps is a low-code development platform to create apps for the Web and native mobile use. As an evolution of SAP
AppGyver, it now includes backend capabilities. Business users can con dently build enterprise-grade apps that work seamlessly
across all operating systems – all without writing a single line of code. Professional developers will reduce coding effort in the
creation of complex data models and business logic and enjoy a signi cant boost in productivity.

Features
Build intricate user interfaces

Build web and mobile applications in drag-and-drop fashion using a large library of customizable user interface components,
logic ows, and formulas for data transformation. Co-create with your team members and preview the changes in real time.

Persist data and run application logic

Create no-code application backends using the built-in cloud functions capabilities. Craft solutions to be used standalone or
together with your existing SAP data models.

Integrate to SAP and other systems

Connect your app to your no-code backend with one click. Integrate modern APIs in minutes or consume data from the cloud or
SAP systems using SAP BTP Authentication and Destinations.

Environment
This service is available in the Cloud Foundry environment.

Overview Graphic
- Build intricate user interfaces

This is custom documentation. For more information, please visit the SAP Help Portal 2
 8/29/2024

- Persist data and run application logic in the cloud

- Seamlessly integrate to SAP and other systems

This is custom documentation. For more information, please visit the SAP Help Portal 3
 8/29/2024

- Drag-and-drop user interface

What's New for SAP Build Apps

2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

This is custom documentation. For more information, please visit the SAP Help Portal 4
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud SAP Build You can now use the updated Info only General Changed Tech
Apps Foundry Apps Build service, which comes with Availability
a better look and feel, and an
improved user experience. See
Build and Deploy Web
Applications

SAP Build Cloud Web & Mobile You can search each BTP Info only General Changed Tech
Apps Foundry Destinations catalog separately Availability
and group the destinations by
type of endpoint. See SAP
Systems.

SAP Build Cloud Web & Mobile You can create a project version Info only General Changed Tech
Apps Foundry by releasing the project. See Availability
Release a project.

SAP Build Cloud Web & Mobile You can see if the selected Info only General Changed Tech
Apps Foundry component has logic by the dot Availability
in the tool bar. You can also see
the logic indicator in the tree next
to the element.

SAP Build Cloud Web & Mobile You can change the layout Info only General Changed Tech
Apps Foundry direction of a container in the Availability
toolbar by choosing the vertical
or horizontal arrow.

SAP Build Cloud Web & Mobile Info only General Changed Tech
We have enhanced the
Apps Foundry Availability
OData Con guration tab
to support de ning
additional URL
parameters for all CRUD
operations. You can now
use the Query
Parameters parameter
in the Data ow functions
such as Get records, Get
record collection, or
Create record to provide
values for those
parameters.

We have added a new

Fields parameter to
the Get records or Get
record collection ow
functions, to allow you to
specify which elds to
be returned in the
response.

SAP Build Cloud Web & Mobile You can edit texts on the UI Info only General Announcement Tech
Apps Foundry canvas directly by double Availability
clicking on it.

This is custom documentation. For more information, please visit the SAP Help Portal 5
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Web & Mobile The SAP BTP authentication is Info only General Changed Tech
Apps Foundry now enabled by default when you Availability
create a new application. For
more information, see the SAP
BTP Authentication section.

SAP Build Cloud Backend You can export your data in the Info only General Announcement Tech
Apps Foundry data browser of the backend Availability
editor as an excel le.

SAP Build Cloud Web & Mobile The AppGyver Community Info only General Announcement Tech
Apps Foundry Edition has been officially Availability
renamed as SAP Build Apps, free
edition and the AppGyver
branding has been retired. The
free edition experience remains
the same and is a separate
offering from the BTP Free Tier
version. For more information,
see the SAP Build Apps
commercial update and free
edition blog post.

SAP Build Cloud Mobile Fixed currentUser Info only General Changed Tech
Apps Foundry system variable to work Availability
on mobile.

SAP Build Cloud Web & Mobile Changed the default Info only General Changed Tech
Apps Foundry theme to SAP Morning Availability
Horizon for all new
applications.

SAP Build Cloud Web & Mobile Released the SAP Build Info only General Announcement Tech
Apps Foundry Library integration Availability
feature, enabling the
native use of Processes
in SAP Build Apps.

SAP Build Cloud Web & Mobile Accessibility Info only General Announcement Tech
Apps Foundry improvements to the UI Availability
elements.

This is custom documentation. For more information, please visit the SAP Help Portal 6
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Mobile Improved user Info only General Announcement Tech
Apps Foundry experience of the SAP Availability
Mobile Services feature:

The system now

automatically
checks if the
connected
destinations are
compatible with
the Mobile
Services.

Building your app

is no longer
possible if
Mobile Services
are not
con gured, but
required.

SAP Build Cloud Mobile Enabled SAP Mobile Info only General Announcement Tech
Apps Foundry Services Availability

SAP Build Cloud Web & Mobile Corrected the order of Info only General Announcement Tech
Apps Foundry component versions in Availability
the Marketplace.

Improved the operation

speed of Preview.

SAP Build Cloud Web , providing access Info only General Announcement Tech
Apps Foundry toCurrent logged-in Availability
user's information is now
available via a system
variable in web
applications.
systemVars.currentUser

Improved the completion

speed of Web builds.

SAP Build Cloud Backend Enabled Visual cloud Info only General Announcement Tech
Apps Foundry functions user Availability
authorization feature.

Visual cloud functions

are now available for
consumption from
applications deployed to
SAP Build Workzone.

This is custom documentation. For more information, please visit the SAP Help Portal 7
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Backend Added "Pause" and Info only General Announcement Tech
Apps Foundry "Delete" deployment to Availability
Visual cloud functions.

Enabled the use of Visual

cloud functions in
applications deployed to
SAP Build Workzone.
More information

SAP Build Cloud Web & Mobile Removed the Delay ow Info only General Announcement Tech
Apps Foundry function from the logic Availability
canvas of any new
"Collection of records"
and "Single record" type
data variables.

This is custom documentation. For more information, please visit the SAP Help Portal 8
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Preview SAP Build Apps mobile Info only General Announcement Tech
Apps Foundry preview upgraded to Availability
version 4.9.11.

Enabled mobile preview

support for SAP
Authentication and SAP
Destinations.

Enabled mobile support

for sample data.

Fix for “Internal property

change” event not
triggering from repeated
composite component.

Fix for marker list with

formula binding and app
crash issues with
“Embedded map view
(beta)” component.

Fix for failing to open

regular page from modal
page.

Fix for ow functions not

working properly when
navigation menu is
disabled.

Fix for true/false value in

nested object not getting
changed via checkbox.

Fixes for component

opacity functionality.

Fix for Lottie animation

having a white
background.

Fix dropdown's initial

value "Select option" not
working.

Fix for text decoration

color and decoration
style issues.

Fix for showing remaining

audio loops and playing
audio from a cached le.

This is custom documentation. For more information, please visit the SAP Help Portal 9
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Web & Mobile Building native iOS Info only General Announcement Tech
Apps Foundry applications for App Availability
Store release or local
testing is now available
in SAP Build Apps.

SAP Build Apps is now

available to try out for
free with an SAP BTP
Trial Account.

SAP Build Cloud Web & Mobile Changed the product Info only General Announcement Tech
Apps Foundry icon to SAP Build Apps. Availability

Updated and reworked

all videos in the
onboarding wizard. The
videos now support
viewing subtitles,
transcript, and enable
Picture-In-Picture. You
can hide and unhide the
onboarding wizard in the
Help tab of the top
toolbar.

SAP Build Cloud Web & Mobile Android builds are now Info only General Announcement Tech
Apps Foundry available in the build Availability
service.

The use of Sample Data

is now enabled for all
data resources.

This is custom documentation. For more information, please visit the SAP Help Portal 10
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Preview SAP Build Apps runtime Info only General Changed Tech
Apps Foundry upgraded to version 4.9.7 Availability

Web Preview Bug Fixes:

Fixed Multiline
input eld getting
unwanted default
values.

Fixed page
variable bindings
breaking if a
page has a "Show
Spinner" ow
function.

Fixed the page

title showing as
"Global Canvas"
in MTAR web
builds.

Add
customization for
the "Slider"
component's
color.

Fixed incorrect
font for the page
title.

Fixed font 72 not

showing in the
Chart
components.

Fixed current
user info not
being shown in a
deployed app.

SAP Build Cloud Web & Mobile Greatly improved Info only General Changed Tech
Apps Foundry performance of the App Availability
Builder.

Improved guidance in the

build service. The build
is now blocked until all
the required settings are
in place.

Added the Visual cloud

functions data import
feature.

This is custom documentation. For more information, please visit the SAP Help Portal 11
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Web & Mobile The currently logged in Info only General Changed Tech
Apps Foundry user information is now Availability
available via system
variables in formula
binding.

Improved build error

messages in the Build
Service UI.

Fixed a response mapper

issue in SAP BTP
Destinations integration.

Fixed on-premise type

destinations giving an
HTTP 500 error when
deployed to Launchpad.

SAP Build Cloud Web & Mobile Renamed the rst page Info only General Changed Tech
Apps Foundry to 'Home Page' instead Availability
of 'Empty Page' for new
applications.

Fixed an issue with

application import from
the Build Lobby.

SAP Build Cloud Web & Mobile SAP Systems integration now Info only General Announcement Tech
Apps Foundry supports on-premise Availability
connectivity for S/4HANA and
ECC systems (with a
prerequisite: SAP NetWeaver
Version 7.31 or higher).

SAP Build Cloud Authorizations Complete administrative Info only General Announcement Tech
Apps Foundry privileges have been added to Availability
the role RegistryAdmin. If you’ve
been assigned this role, you can
view and perform any actions on
all projects, regardless of project
level authorizations.

SAP Build Cloud Web & Mobile Released new chart Info only General Announcement Tech
Apps Foundry components. Availability

Added $expand
capabilities to OData.

This is custom documentation. For more information, please visit the SAP Help Portal 12
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Web & Mobile Info only General Changed Tech
Fixed embedded map
Apps Foundry Availability
view component.

Added preventing
behaviour for nesting
recycler views.

Re ned several tooltips

and icons.

Withdrew Remove page

button from page
properties.

Increased timeout for

SAP System integration
and BTP REST API.

History now includes a

user identi er for better
collaborative
development.

Fixed iFrame component

showing as "missing
comp." in preview.

SAP Build Cloud Backend Fixed occasional browser Info only General Changed Tech
Apps Foundry crashing. Availability

Formula editor styling

corrections.

SAP Build Cloud Web & Mobile Info only General Changed Tech
Improved error output in
Apps Foundry Availability
the app builder.

Fixed icons not

displaying in the View
Component panel.

Regrouped items in the

Style tab.

SAP Build Cloud Web & Mobile Improved user guidance Info only General Changed Tech
Apps Foundry for app and page Availability
variables.

Fixed styling issues with

the Icon component.

Fixed the Help tab.

SAP Build Cloud Preview Introducing support for Recommended General Announcement Tech
Apps Foundry previewing SAP Build Apps Availability
projects with PIN code. SAP
AppGyver Classic and AppGyver
Community Edition projects can
be previewed with QR code or
PIN as before.

This is custom documentation. For more information, please visit the SAP Help Portal 13
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Web & Mobile Fixed composite Info only General Changed Tech
Apps Foundry component's internal Availability
property not triggering.

Fixed the "Initial render

index" property for the
Recycler View
component.

"Preview PDF" ow
function now has
navigate back
functionality.

Fixed application
crashes on Android

Exiting the video player

now returns the screen to
portrait.

Data variables now

refresh when application
is in background.

SAP Build Cloud Backend Fixed various styling Info only General New Tech
Apps Foundry issues. Availability

Added the ability to copy

visual cloud functions
projects in lobby.

SAP Build Cloud Web & Mobile An issue with SAP Info only General New Tech
Apps Foundry Authentication has been Availability
resolved.

The width of custom

component property
elds has been
increased.

Labeling for the Logic

Canvas has been xed.

Unsaved changes are

now stored in the local
storage.

Resolve an issue with

applications failing to
save.

SAP Build Cloud Build Lobby Reworked the "Create a Info only General Changed Tech
Apps Foundry sample To-Do Availability
application" template.

This is custom documentation. For more information, please visit the SAP Help Portal 14
 8/29/2024

Technical Environment Title Description Action Lifecycle Type Line

Component Busi

SAP Build Cloud Web & Mobile Added 'Export' and Info only General New Tech
Apps Foundry 'Replace' functionality to Availability
the UI.

Enable launchpad
deployments for projects
built with MTAR output.

SAP Build Cloud Build Lobby Enable import/export Info only General New Tech
Apps Foundry functionality for SAP Availability
Build Apps projects.

SAP Authentication is
now required for cloud
functions integrations.

SAP Build Cloud Backend Release of the backend cloud Info only General New Tech
Apps Foundry capabilities for SAP Build Apps. Availability

SAP Build Cloud Cloud Release of the frontend Info only General New Tech
Apps Foundry FoundryWeb capabilities for SAP Build Apps. Availability

Best Practices: A Strategic Approach to SAP Build Apps

Who is this guide for?

This guide’s purpose is twofold: to teach about basic application development principles and steps to take before starting
development, and to explain the best practices in applying those principles in SAP Build Apps.

This guide is meant for both citizen developers and pro developers looking to use SAP Build Apps to develop an app they already
have an idea for. It doesn't teach the basics of how to use SAP Build Apps, but rather talks about best practices and how to
mitigate problems down the line. For learning about the basics of how to use SAP Build Apps, see this learning journey .

Is SAP Build Apps the right tool for my application?

Before getting started with developing an application using SAP Build Apps, you should make sure it's the right tool for your
needs.

1. Check that SAP Build Apps meets your security requirements. See our feature scope description for more information.

2. Check that you can access the data you need for your application with SAP Build Apps, and if you need additional services
to get the data you need into SAP Build Apps. See our pages about integrations with SAP systems in general and using
SAP BTP REST APIs.

3. Check that the features you require are available with SAP Build Apps. You can explore these in our documentation, the
discovery center or explore these in the product itself. Alternatively, contact our support to learn more.

Tip

Make sure to use the resources in your organization and nd out who the stakeholders of your application are. Is there an IT administrator
who can provide you with the required access rights and perhaps a new BTP destination or action you would need for this application? Are
there designers that you could utilize for help with making a good user experience for your application?

This is custom documentation. For more information, please visit the SAP Help Portal 15
 8/29/2024

Start out right, de ne your requirements

In all application development, having a good understanding of the problem is crucial to developing an application that will solve
the problem. To gain that understanding, it's important to de ne what is required from your application.

Answering the following questions will help:

Who are the users of your application?

What task are your users trying to accomplish when they use your application?

What are they currently using to accomplish this task?

What are the steps required for them to accomplish this task?

Example

Let’s say you oversee approving expense reports and are developing an application for your coworkers to submit expense reports.

In this scenario, you're familiar with the requirements of an expense report and know the tool your coworkers currently use for expense
reporting. You can easily list that an expense report application would need to have the ability for the users to take or upload a picture or a
pdf receipt, and which elds the application user would be required to ll before proceeding with submitting an expense report. You would
be familiar with the language used in the current tool and able to use it in the new application, so that your users would know what each
eld they need to ll means.

However, if you aren't one of the intended end-users of the application, ask them about the exact requirements of the task they must
accomplish.

Principles of good application development

There are certain principles in application development that should be followed for the application that is produced to be
objectively good. When these principles aren’t followed, the application hinders the users’ completion of the task they’re seeking
to do, and it might end up not getting used.

Usefulness Usability Maintainability

Is this app effective at solving a problem Is using this app easier than what the users Is the app maintainable by other people in
that the users have? are currently doing? your organization?

If not, they'll have no use for this If not, they'll continue doing what they're If not, it will grow outdated quickly or even
application. currently doing rather than use a new never be taken into use.
application for it.
A useful app provides an effective way for A maintainable app is structured and
the users to solve a problem or concern A usable app is easy and intuitive for the named in an understandable way, and
they have. user to use to complete the task they have. fellow developers can easily know where to
look when they need to change something. It
Don't try to solve a multitude of problems in If usability and user experience are
also follows the DRY (Don’t Repeat Yourself)
one application, as it will grow huge. When unfamiliar topics to you, it’s recommended
principle.
an app grows huge, it's much more likely to to get a designer or consultant involved in
become difficult to use (that is, worsens designing the experience for the Consistency is key in maintainability, and
usability) and difficult to maintain (that is, application. consistency requires a plan of how the app
worsens maintainability). functionality is structured.
Implement error prevention and handling as
Thus, when rst developing your you go. Prevent users from taking actions
application, aim for a minimum viable that would cause them to end up in
product instead of adding functionalities erroneous states in the app, but if there's an
the users may not need or use. More error, communicate about it clearly.
functionalities can be added later, if
deemed necessary.

This is custom documentation. For more information, please visit the SAP Help Portal 16
 8/29/2024

DRY (Don’t Repeat Yourself)

The Don’t Repeat Yourself (DRY) principle is a core principle of all software development. Its aim in traditional pro-code
development is to reduce duplicated code or functionality. When there's duplicated code or functionality, there may be bugs or
inconsistencies in the application if one implementation of the functionality slightly differs from another. Also, whenever
changes are made to the application, these need to be applied in all the spots where the duplicated code exists, instead of the
change being done in one place and then applying everywhere it's used.

The same principle applies to no-code development as well. If functionality is duplicated in different parts of the application, it
becomes more error-prone and difficult to maintain.

In SAP Build Apps, DRY is especially relevant for the logic of the application. See the Logic section for more information.

Dynamic vs. Static content

One important concept that drastically reduces the amount of work you have to do to create and maintain your app and the
number of pages your app will have is dynamic vs. static content. To better understand the difference between dynamic and
static content, consider the following example.

Example

Imagine an app that has a catalogue of products. You want the app to show a list of products, and when the user clicks or taps on a
speci c product name, they're taken to a page where more information about the product is given. Let’s say that you have 100 products in
your catalogue.

If you were doing this app with static content, you would create a separate page for each of the products and manually type or copy-paste
content for each product on their page. This means you would have 100 product details pages in your app, and the one list page. This app
would very quickly become unmaintainable, as to change the information of some of the products or the layout for all the product details
pages, you would have to do a lot of manual work on separate pages to do this.

With dynamic content, you would store the information of the products in a database and show that in the application dynamically. You
would have one list page and one product details page. When the user would click or tap on a product name on the list, you would pass the
identi er of that product onto the product details page, and then fetch the information for that product onto the product details page and
show it dynamically. This way you would be able to maintain the information about your products in one place (your database) and any
layout changes would only need to be done once.

Designing your application

Even though it’s easy to quickly create apps with SAP Build Apps, taking the time to properly design your application before
jumping into the implementation will pay off in the long run. Without a plan and a design for your application, there's a risk that
you end up with something unusable and unmaintainable, or you'll have to do major rework of the application sooner or later to
get it to be usable and maintainable. Thus, properly planning and designing your application is crucial for success.

Using the requirements gathered from the potential users, plan a rough structure for your application. This involves forming an
idea of what pages your app will need to have, what approximately happens on each page, and how the user moves through the
application. You might study existing applications that do similar things and note their design and ow for ideas for your own
application. To learn more about sketching out ideas, see this course .

Example

A basic design for an expense application would probably need at least the following pages:

Login pages (if BTP authentication is used, there's no need to customize these)

Home or dashboard page, which would show the user’s currently open expense reports and recent history of expense reports

This is custom documentation. For more information, please visit the SAP Help Portal 17
 8/29/2024
Page for creating a new expense

There could be additional pages, such as a settings page or a page that lists the user’s expense report history, but those may not be
strictly necessary for a minimum viable product.

Once you have your pages roughly planned, check that your app is not growing too large. A good rule of thumb is that if you have
much more than 20 pages planned for your application, it is likely that you are trying to do too many things in one application or
are thinking of pages with static content instead of dynamic content.

If your pages are constructed with dynamic content and you still have more than 20 pages planned for your application, consider
reducing features or splitting functionality into several applications. Building an application with considerably more than 20
pages is likely to be difficult to use and maintain, and it may suffer from performance issues. However, there's no hard limit on
this from the SAP Build Apps side, and if you're con dent in your approach and have considered the implications, you may
proceed.

Finally, it's important to keep in mind that application development isn't a linear process, and at any point in time you might
discover that your users have some requirements that you weren't previously aware of. It's a good idea to keep validating your
designs with your users so that you can make several small adjustments early in the process instead of a major change later.
Whenever there are some new requirements, evaluate their importance - which of them are crucial and which of them would be
nice to have, but the app would still be functional without. Once this is done, check that SAP Build Apps still meets the crucial
requirements of your app.

Developing your application

So far, we have mostly discussed application development on a generic level. In this section, you'll learn how to apply these
learnings in practice when developing applications with SAP Build Apps.

Variables, application state and scope

Earlier in this guide we talked about the importance of dynamic content for the performance and maintainability of your
application. A key concept for achieving this in practice are variables, which are values that can change based on application
logic or user input.

There are several different types of variables with different use cases in SAP Build Apps, such as data variables, theme
variables, translation variables, system variables, page parameters and a component’s internal variables. In this section, we
focus on the two different general use type of variables called app variables and page variables. Understanding when to use
which will improve your and your team’s experience as developers of the application and improve the maintainability of the
application in general.

Tip

When naming your variables, use names descriptive of their purpose to increase the maintainability of your app. for example, if you have a
page variable that determines whether a spinner is visible, naming it showSpinner will make it easier to understand what that variable is
used for.

Some types of variables come pre-de ned and pre-populated, such as system variables with information about the user’s device
and theme variables with information of how the current theme affects all the shown components. Some variable types have
very speci c purposes – a translation variable contains text content in various languages and a page parameter is used to pass
a value, usually an identi er for data, between two pages.

The purpose of variables is to store the state of the application. The application state contains all information the app has available on
the end-user’s device and information on what is currently going on in the application as the end-user uses it. More on state in SAP Build
Apps here.

This is custom documentation. For more information, please visit the SAP Help Portal 18
 8/29/2024
App and page variables, however, can contain any type of information you as a developer would like to store for use in various
places in the application. Whether or not you need the information on one page or on several pages is the difference between
whether you should be using a page variable or an app variable. This de nes the scope that the information is needed in, either
on the scope of a page or in the scope of the whole application. The information in a page variable is only available on the one
page, and the information in an app variable is available from all pages in the application. Consider the following examples:

The end-user’s input from a dropdown or input eld (usually page scope)

Whether to show or hide a component or components on a page (page scope)

Is the app being run against test or production environment (app scope)

Whether the app should be in dark or light mode (app scope)

Always keep a variable in the minimal scope you can. If you put everything in app variables, information will be available on
pages where it isn't needed, and you as a developer will quickly end up in a situation where nding the right variable to use
becomes difficult. As a rule of thumb, if you start having more than 20 or 30 app variables in your application, something isn't
ideal. It can be that your application is growing too large, you're storing more information in app variables than you would need,
or that you aren't structuring the information into variables in a sensible way.

What is meant by the last point is that if you've related information you want to store, consider storing it in an Object or List
type app variable, which can hold multiple properties instead of separate variables. As the setting of a List or Object is more
complex than a simple variable such as Text, Number or True/false, which type should be used needs to be considered case-by-
case.

Example

If you have user-speci c settings you want to store in the application (such as language, whether the app is in light or dark mode etc.),
storing these in an Object would make sense, as you would probably edit them only on one page (the end-user’s settings page), but would
read them from several places.

Navigation In Mobile Applications

Most applications have more than one page, and as such, how the end-users navigate between pages is relevant to their usage
of the app. For more information on the concepts relevant to navigation and the different options for navigating different pages,
see this document.

Since page and data variables are page speci c and it's possible to navigate back and forth between pages or even open the
same page several times, the effect of navigation on page variables should be considered when creating logic for a page. To
understand how these values are work in various navigation scenarios, you need to be familiar with the concept of a navigation
stack.

Example

A navigation stack can be described as a pile of pages. Consider that your application opens onto page A as you come into the app, e.g. a
dashboard page. On page A, the end user clicks or taps on a button that opens another page, page B, e.g. a list of expenses. On page B,
they tap on another button that opens a third page, page C, e.g. a page to create a new expense in. Now there are three pages in the
navigation stack: A, B, and C.

This is custom documentation. For more information, please visit the SAP Help Portal 19
 8/29/2024

All pages currently in the navigation stack keep their existing state, so if you navigate back to a previous page in the stack, the
page, and data variables aren’t reset to their initial values. Note also which events are triggered when a page is rst opened
and when it's returned back to, as that may be relevant for your app’s logic as well. This is explained in detail here.

However, if you open a page several times in the navigation stack, that is, you use the “Open page” ow function to open the
page two or more times, each of those pages will have their own instances of the page and data variables.

Example

Consider a page A where you have a page variable called “counter”. Its initial value is 0. On page A you increment this value to 1. Then a
button is pressed that opens page A again. The navigation stack is now pages A(1) and A(2).

Page A(2) that was opened, has 0 as the value of page variable “counter”, as 0 is its initial value, and the value hasn't been incremented on
that instance of that page.

Other situations where page and data variables are reset are when that page is removed from the navigation stack.

Example

A page can be removed from the navigation stack in two main ways: navigating back from it or by replacing it with a different page.

For example, if the navigation stack includes pages A, B and C, and “Navigate back” is used on page C, page C is removed from the
navigation stack.

This is custom documentation. For more information, please visit the SAP Help Portal 20
 8/29/2024

The same applies if “Replace page” is used on page C to replace it with page D. Then the navigation stack would include pages A, B, and
D.

Logic
Your application’s logic de nes how your app works and reacts to being interacted with. For more on what application logic is,
when it's triggered and how it works, see here.

There are several best practices for implementing logic that will make the app more maintainable and less prone to errors,
which improve usability. In short, these are the following:

1. Placing logic in relevant and easy-to- nd places

2. Using events to follow the DRY principle

3. Implementing error handling

The rst two principles are closely interlinked. If you have logic that could be called from several places, you should use an event
that can be triggered anytime the logic is run. You may need to use page or app variables to get the correct inputs for the logic.
Where you should place this event and the type of variable depends on whether you need to use the same logic on one page
(page variable, on the root of that page) or several pages (app, on Global canvas).

The general rule is that you should always place reusable logic on a page’s main logic canvas, that is, the logic canvas that opens when
you open the page or navigate to “Page Layout” from the UI tree.

Example

A typical scenario of logic that would need to be called from several places on one page is refreshing a list of data when changes are
made.

The automatically refreshing, looping logic that is added when a new Collection-type data variable is added to a page looks like this:

This is custom documentation. For more information, please visit the SAP Help Portal 21
 8/29/2024

However, let’s say that for the expenses application you want to only refresh this data once, and then only when the end-user creates a new
invoice. In that case, you would move this logic from the data variable’s logic canvas to the page’s logic canvas and add a receive event
ow function to set up the logic like this:

Now, this event can be called from any Trigger event ow function on that page. For maintainability, it’s recommended to give the Receive
event a more descriptive name, such as “Refresh data”. This event could now be triggered from when an end-user successfully creates a
new invoice.

Also, you might need to repeatedly run some logic every couple of seconds In these cases, unless the need for the continuous
running is only while the user is on a speci c page, you should place that logic on the Global canvas. The Global canvas is always
active in the background, and due to that, events and logic on the Global canvas are always accessible in the app.

Error handling
When implementing logic in your app, the best practice is to take any possible error states into account as you go. Proper error
handling won't only help the user understand what might have gone wrong, but also safeguard your data from inconsistencies
because of improper inputs or removals of data. This applies to everything your user can do in the app and has implications for
both the application User Interface and logic ows created on the Logic Canvas.

Example

Let’s take the example from before with the logic that uses a page variable called showSpinner to hide and show a spinner when the logic
is running.

This is custom documentation. For more information, please visit the SAP Help Portal 22
 8/29/2024

In this logic when the save button is pressed, the rst thing that happens is that the page variable showSpinner is set to true, and when
creating a record succeeds or fails, that is set to false again. Thus, the showSpinner variable can be used to modify the UI to both show
the end-user that an action is on-going by for example, showing a spinner, and it can be used to prevent errors by disabling buttons and
inputs from being changed while the action is on-going.

In addition, if something goes wrong in the record creation, this logic triggers a toast that will tell the user what went wrong. Logic could
also be added to add to a page variable the error message and then display in the UI.

For more ideas about error handling, see the UX design section.

Debugging
If your app logic isn't working as expected, you need to gure out what is going wrong in the logic to nd out how you might x it.
This troubleshooting is called debugging.

By default, if the problem you're experiencing is happening in the web preview, you should always use that as the platform to do
the debugging against, as your browser natively provides you with tools for debugging applications. These are called your
browser’s developer tools. Out of these tools, you'll usually use the Network and Console tabs.

The Network tab is useful for when a request to your backend is failing, such as when your app is trying to create a record but
gets an error. In the Network tab you can see the request your application sends and the response it gets. The request is
especially helpful in guring out whether some of your data may be in the wrong format, for example, a number is passed as a
text. The response gives you the more detailed error message your backend is returning.

The Console tab contains all the logs your application is producing. Some of these are generated automatically, but for
debugging purposes, it's useful to produce your own logs. You do this by using the Debug log ow function. As you use Debug
log, in most cases you should use a formula to construct the log you want to output with values from relevant variables or
outputs of other ow function nodes. While debugging, in cases of more complex logic it may be useful to indicate what part of
your logic gets executed. Although the debug logs are only for the developers of the application, keep them informative to
increase the maintainability of your application.

Note

The logs created by Debug log are only available on the client and don't end up on a server anywhere.

Debug logs by your application are also accessible from the standalone versions of your application, so before publishing your
application, make sure to not leave any Debug logs that would undermine the security of your app should your end-user go to
inspect the logs in their browser’s developer tools.

Tip

The Debug log ow function can produce different types of logs, and different types of logs appear differently in your browser’s Console
tab. The types are info, log, warn, and error.

This is custom documentation. For more information, please visit the SAP Help Portal 23
 8/29/2024
If the error you're trying to debug only appears on mobile or only appears in the standalone version of your application,
debugging is less convenient.

On Android, you can use the Debug log ow function, but to access the logs, you'll need to have Android development tools
installed and run adb logcat.

On iOS, you'll need to use either Toast or Alert ow functions instead of the Debug log ow function.

When debugging standalone versions of the app, since it will take time to build a new version, add an excessive amount of
different debugging information before building, so you may nd out as much as possible with one iteration.

User interface
The user interface (UI) of your application contains everything your end-user sees and interacts with. The way information is
displayed and the responses that the UI gives to the user’s interactions determine the user’s experience in your app. As such, a
basic understanding about UX, UI design or design thinking will bene t you in your app development. If you don't have such a
background, it's recommended to ask your manager for any available resources in either learning about these topics or utilizing
a UX designer’s help.

General usability
For the sake of general usability, there are two things that should be considered while developing a user interface.

1. Let the user know about the current state the app is in

2. Prevent errors by not allowing the end-user to take invalid actions

You can let the user know about the current state of the app by showing spinners when something is loading or a process is
running, and indicating when that process is nished with the user interface updating or using a Toast ow function. You can use
components like the Progress Bar to indicate progress in a multi-step process. You should also visualize erroneous states like an
input not being correct.

As for preventing errors, as covered in the error handling section, you can prevent user errors by e.g. disabling buttons until the
end user has given sufficient input. Other ways of preventing user errors are giving the user enough information on what they're
doing and not allowing actions before relevant data has been loaded.

Theming
When making your app’s user interface and working with components, whenever you go to change something on the Style tab,
please consider the maintainability and consistency of your app. Your app will be more maintainable and consistent if you use
theme variables and style classes appropriately.

When you do changes to styles, always use a value from a theme variable instead of a static value. This way if you need to adjust
the theming later, you can do it by adjusting the value of the theme variable under the Theme tab, instead of having to do
changes individually to each place you used a static value at.

If you apply changes to a style class that may be used elsewhere, either overwrite the style class or create a new style class.

This is custom documentation. For more information, please visit the SAP Help Portal 24
 8/29/2024

Primitive and composite components

There are two different types of view components that can be used in SAP Build Apps: primitive components and composite
components. As their names try to suggest, primitive components consist of a single component directly mappable to a
compiled component in the end application. Composite components are composed of many primitive components.

If you're using ready-made components from the marketplace and don't need to customize them, the differences between
primitive and composite components don't matter. However, it's good to know that you can customize any composite
component to any extent by opening it in component template editor mode. In this mode, you can edit the internal logic of the
composite, rearrange the components in it or add new input properties. If you only want to change the styles of the component,
you can enter the style editor mode by double-clicking on the component whose styles you want to modify.

If you want to do changes that require using the component template editor to only some of the instances of that composite
component in your app, you need to duplicate the template, that is, make another composite component out of it. You can nd
this option under the Installed tab.

This is custom documentation. For more information, please visit the SAP Help Portal 25
 8/29/2024
In general, if you can use a ready-made composite component with or without tweaks, you should, as UI building is quicker by
using existing components than building everything from scratch with primitive components. As for creating your own
composite components - that is possible. However, it's recommended for more advanced users. If you want to learn more about
creating and editing composite components, see here.

Teamwork
When developing an application that is intended to be used for a long time, its maintainability is key. Even if you're working on an
app alone, eventually others will maintain the app as well. Follow the instructions in the implementation section to keep the
structure of your app as clear as possible, so others can understand and work on the app as well as easily as possible.

Decide on the naming conventions that you'll use in your app for variables and components. Use descriptive names, such as
“Submit button” or “Header container” or “showSpinner”. For variables, pick either camel case (showSpinner) or snake case
(show_spinner), and use it consistently. SAP Build Apps’ existing variables use camel case.

Tip

Establish a shared place where you make notes and share information about the application’s on-going development, any known issues, or
blockers there are, and any work-arounds implemented. Use this place to share the original designs and plans for the app and decisions
made on naming conventions, and so forth.

Multiple developers working on one application

To set up several developers to work on one application, refer to this page.

When working on one app concurrently, make sure that everyone is familiar and agrees with the principles of good application
development. Check-in regularly with team members and keep the place where you share information up to date.

In SAP Build Apps, whenever two or more developers are working on one application at the same time, we recommend working
on different pages. This is because changes on a page don't appear in real time for other developers, and as such can cause
saving con icts and lost work.

Application Plans
SAP Build Apps service subscription provides two types of application plans: free and standard.

The type of plan you choose determines pricing, conditions of use, and resources. Learn about the plan details in the Discovery
Center .

Each subaccount can have only one subscription instance. You can use different plans in separate subaccounts.

Standard
Productive use-ready plan that includes all capabilities of SAP Build Apps. Additionally ensures enterprise support via SAP
Support .

Free Plan Restrictions

Number of builds: two successful builds per app per platform.

Cloud runtime: only development runtime available; no production use.

This is custom documentation. For more information, please visit the SAP Help Portal 26
 8/29/2024
Support: only community support is available for free service plans and these aren't subject to service level agreement
(SLA).

SAP BTP Trial

SAP Build Apps is available in BTP Trial account. You can explore and try SAP Build Apps for the period of your trial. It shares the
same restrictions with the free plan.

Upgrading to the Standard Plan

1. Create a new BTP subaccount and subscribe to SAP Build Apps standard plan.

2. Export your project(s) from the Build Lobby of the Free plan subaccount and import them to the newly created one. Read
more in "Migrate to SAP Build Apps".

3. After you have migrated all projects you can unsubscribe from the Free plan and optionally delete the old subaccount.

Prerequisites
Learn about the prerequisites for subscribing to SAP Build Apps.

1. Get an SAP BTP Account.

2. Create a Subaccount.

3. Enable Cloud Identity Services.

Get an SAP BTP Account

See the Getting a Global Account section on the SAP Business Technology Platform documentation to create an account.

Create a Subaccount
Navigate to the Cockpit and log in with your account.

In your Global Account, click Create to create a new subaccount dedicated for development with SAP Build Apps. You can
alternatively use an existing subaccount, but make sure that it's located in a valid region. All available regions can be found on
the SAP Build Appsdiscovery center page . Currently they're: AWS US10 (cf-us10) and EU10 (cf-eu10).

First, enter a Display name for your subaccount. You may notice that the Subdomain is auto-generated. Choose a supported
'Region' (Discovery center ). Upon entering all required data, click Create.

This is custom documentation. For more information, please visit the SAP Help Portal 27
 8/29/2024

Cloud Identity Services

 Note
This step is optional in case you will be subscribing with a Get started with SAP Build Apps Booster.

SAP Build Apps uses SAP's Cloud Identity Services for user authentication. Thus, it is necessary to enable the following service
for your Global account.

In your subaccount, navigate to the 'Entitlements' tab and click Con gure Entitlements → Add Service Plans. Search for Cloud
Identity Services and select the default (Application) plan for "User Management and Authentication". Press Add 1 Service
Plan and save the newly con gured Entitlements.

This is custom documentation. For more information, please visit the SAP Help Portal 28
 8/29/2024

Next, navigate to the Service Marketplace from the left-side menu and look for Cloud Identity Services. Choose it from the list
and click Create to make a new instance.

In the "New Instance or Subscription" window, choose default for the 'Plan' and either Productive or Test for the 'Service type'.
Click Create and wait for an email to arrive. After getting an email to your address used to sign up for BTP, follow the
instructions there to activate your tenant. Afterwards, it's best to wait for at least 20 minutes to allow for full provision.

Creating an instance of Cloud Identity Services in a particular subaccount provides a tenant that can be used in any subaccount
within your global account. This means that you aren't required to enable a new Cloud Identity Services instance every time you
want to subscribe to SAP Build Apps.

Please note that SAP Build Apps only supports the OpenID authentication method. Using SAML results in a subscription failure.
You can migrate from your SAML Trust to OpenID to enable the use of SAP Build Apps with an existing set of users.

What's Next?
1. Read the Automatic Con guration article to subscribe with a booster.

a. If you don't have access to your global account, or booster isn't available to you, use the Manual Con guration
method.

2. After enabling the SAP Build Apps service, make sure to Con gure User Roles.

This is custom documentation. For more information, please visit the SAP Help Portal 29
 8/29/2024
This image is interactive. Hover over each area for a description. Click highlighted areas for more information.

Please note that image maps are not interactive in PDF output.

Booster: Automatic Con guration

Learn to subscribe to the new SAP Build Apps service with a booster.

 Note
Make sure that you've ful lled all the prerequisites

To automatically subscribe, navigate to the Boosters tab in your Global account and search for Get Started with SAP Build Apps.
At the moment, there are two boosters available: "Detailed Account Setup" and "Quick Account Setup". Choose Quick Account
Setup if you're new to the SAP BTP platform, or haven't set up a subaccount for SAP Build Apps yet. Detailed Account Setup
gives you more control over the setup process and allows you to use an already created subaccount.

Click Start on the booster of your choice to begin the setup. For instructions on using the Detailed Account Setup, follow the
instructions below.

In 1 Check Prerequisites, verify that all elds are green. In case the Checking for global entitlements fails, make sure that you
have a valid BTP subscription.

This is custom documentation. For more information, please visit the SAP Help Portal 30
 8/29/2024

In 2 Con gure Subaccount, choose a previously created subaccount in the rst eld. Additionally double-check the Plan of SAP
Build Apps.

In 3 Add Users make sure that you have your custom tenant address (provided by Cloud Identity Services) selected in the
Custom Identity Provider for Applications eld.

This is custom documentation. For more information, please visit the SAP Help Portal 31
 8/29/2024

Your booster should result in success with the following message:

What's Next?
Continue to Con guring User Roles to enable full access to the service.

This image is interactive. Hover over each area for a description. Click highlighted areas for more information.

Please note that image maps are not interactive in PDF output.

Manual Con guration

This is custom documentation. For more information, please visit the SAP Help Portal 32
 8/29/2024

 Note
Make sure that you've ful lled all the prerequisites.

If you've already completed the instructions from Booster: Automatic Con guration, continue to Con guring User Roles.

Enable the Service

Step 1: In your Global Account, choose the Entity Assignments tab. Click the options helper menu.

This step can alternatively be done within the subaccount. To do so, navigate to the Entitlements tab and skip over to Step 3 of
this document.

Step 2: Select your subaccount in the pop-up window.

Step 3: You should now see all entitlements, available for that subaccount. To add SAP Build Apps, rst, click Con gure
Entitlements, then Add Service Plans.

This is custom documentation. For more information, please visit the SAP Help Portal 33
 8/29/2024

Step 4: In the new window, search for SAP Build Apps and choose your purchased plan from options of the right.

Application Plans:

Free

Standard

Extensions:

Additional Capacity Units

Additional Active Users

After adding the service plan, click Save and after a moment, you should see SAP Build Apps in your entitlements.

Step 5: Navigate to "Trust Con guration" view in your subaccount and Establish Trust to your Cloud Identity Services tenant
address.

Optionally, edit the Default identity provider via a pencil icon and disable Available for User Logon. Otherwise, you are
presented with an identity provider selection screen every time you access SAP Build Apps. In that case, choose your tenant
address to gain access.

Step 6: In your subaccount, navigate to the 'Service Marketplace' and search for "SAP Build Apps".

This is custom documentation. For more information, please visit the SAP Help Portal 34
 8/29/2024

Step 7: After choosing SAP Build Apps from the search results, verify that your plan is visible in the 'Application Plans' columns.
In case everything is correct, proceed with Create button on the top-right corner.

Step 8: After a few moments, SAP Build Apps will be available in the 'Instances and Subscriptions' on your subaccount:

Step 9: Follow instructions in the Con guring User Roles section.

Step 10: Proceed with the next section to enable SAP Build Apps Runtime Destination, required for visual cloud functions
integration.

This is custom documentation. For more information, please visit the SAP Help Portal 35
 8/29/2024

Con gure an SAP Build Apps Runtime Destination

 Note
This step is only necessary for manual con guration.

1. Open the subaccount used for developing with SAP Build Apps and navigate to "Destinations" in the "Connectivity" tab.

2. Click "New Destination" to start the set up process.

3. Con gure the destination with the following exact inputs:

Field name Value

Name SAP-Build-Apps-Runtime

Type HTTP

Description

URL* https://<subaccount_subdomain>.cr1.<BTP_landscape_id >.apps.build.cloud.sap

Proxy Type Internet

Authentication NoAuthentication

Additional Properties HTML5.ForwardAuthToken = true

* For URL, substitute the <subaccount_subdomain> and <BTP_landscape_id> with your subaccount's domain and ID of
your subaccount region (landscape) respectively. Your Subdomain can be found in the Overview tab, while the Landscape ID
could be seen while creating a subaccount in Prerequisites. Note that the ID should be entered without the cf- part.

4. Click 'Save' to enable the destination and verify connectivity via the 'Check Connection' button. A green checkmark with a
"404: Not found" message implies success.

What's Next?
Continue to Con guring User Roles to enable full access to the service.

This image is interactive. Hover over each area for a description. Click highlighted areas for more information.

This is custom documentation. For more information, please visit the SAP Help Portal 36
 8/29/2024

Please note that image maps are not interactive in PDF output.

Con guring User Roles

In order to be able to access SAP Build Apps, navigate to the "Role Collections" view from the "Security" tab. From here follow
these steps:

1. Press the Add button to create a new role collection.

Enter a name for your group.

2. Choose the newly created group and click Edit to modify its properties.

3. In your Cloud Identity Services tenant, you're able to create User Groups. If you want to synchronize that group with your
BTP user role collection, follow this procedure:

In "User Groups" choose Custom IAS tenant and enter a desired group name, matching the exact group name from the
tenant.

4. Add BuildApps and Registry roles according to your needs. BuildAppsAdministrator gives full control over SAP
Build Apps applications. RegistryAdmin provides an ability to view and perform any actions on all projects, regardless of project
level authorizations.

It's of best practice to create several role collections with different permissions.

This is custom documentation. For more information, please visit the SAP Help Portal 37
 8/29/2024

5. Lastly, you can add users by email in the Users section. Make sure to choose the Cloud Identity Services tenant as the Identity
Provider. Alternatively, users can be added via the "Users" tab of the "Security" section in the left-side menu.

This concludes the subscription process. You can access SAP Build Apps from Instances and Subscriptions.

This image is interactive. Hover over each area for a description. Click highlighted areas for more information.

Please note that image maps are not interactive in PDF output.

Activate Your SAP Build Apps Package

An SAP Build Apps package is available with your RISE with SAP and GROW with SAP offerings at no additional cost.

Prerequisites
To take advantage of the package, you need access to an SAP BTP account with RISE with SAP and GROW with SAP.

Procedure
1. First navigate to SAP BTP Cockpit, on the left-hand side from the menu list click on “Boosters”.

This is custom documentation. For more information, please visit the SAP Help Portal 38
 8/29/2024

2. Once the Boosters overview page opens, in the search eld type “SAP Build Apps” and under Get started with SAP Build
Apps, click the “Start” button.

3. Once the three green boxes show “Done”, that means the test has been completed successfully. Click on “Next” at the
bottom of the page to proceed forward.

This is custom documentation. For more information, please visit the SAP Help Portal 39
 8/29/2024

4. You can choose if you want to create a new sub-account or use an existing one. In this example, we will choose the “Create
subaccount” scenario. Click on “Next” to con gure the account.

5. On this page you select the standard plan and assign the quota for this subaccount. Then click on “Next”.

This is custom documentation. For more information, please visit the SAP Help Portal 40
 8/29/2024

6. You can add the users who will access SAP Build Apps, administrators, and developers. You can always add or edit users later.
Once you assign your users, click on “Next”.

7. In the last step you can review the summary of your setup. Once you con rm all information is accurate, click on “Finish”.

This is custom documentation. For more information, please visit the SAP Help Portal 41
 8/29/2024

8. To get the service up and ready for you, the booster will then start the deployment process which can take up to ve minutes.

9. Once the process is complete, the following window will pop up. Press on “Navigate to Subaccount”.

This is custom documentation. For more information, please visit the SAP Help Portal 42
 8/29/2024

10. In the subaccount on the left-hand side of the menu click on “Instances and Subscriptions”. You get now an overview of the
activated services, and you can move directly to the application by clicking on the icon in the red box.

This will take you to the solution’s main lobby where you can build an enterprise application without any coding prior experience.
Let the fun begin!

Create an SAP Build Apps project

Projects are created from the SAP Build Lobby. The Lobby can be accessed from the SAP BTP Cockpit.

This is custom documentation. For more information, please visit the SAP Help Portal 43
 8/29/2024

From the SAP Build Lobby, click Create. From the pop-up window choose Build an Application.

 Recommendation
In case Build an Application is unavailable for you, please follow this guide to subscribe to SAP Build Apps.

Build Apps - Web & Mobile

To create an SAP Build Apps - Web and Mobile project, choose Web & Mobile Application from the two options.

Enter a Name and Description for your project. Click Create to open the app builder.

Build Apps - Backend

For an Build Apps - Backend project, choose Application Backend.

Click Create after entering a Name along with a Descrption to open the Cloud Functions.

Migrate to SAP Build Apps

This is custom documentation. For more information, please visit the SAP Help Portal 44
 8/29/2024
Migrate your projects from the old SAP AppGyver development environment.

Export Your SAP AppGyver Project

SAP AppGyver Community Edition

1. Open the application listing view.

2. On the desired application tile, click the download button to export your project.

SAP AppGyver Classic

Export your project in the Lobby by clicking the three-dot menu.

Import Your Project to SAP Build Apps

Projects exported from SAP AppGyver Classic

Import your project via SAP Build Lobby by clicking the import button next to Create.

Choose a le on the local machine and press Import.

 Note
In order to migrate a project within the same Build Lobby, delete the AppGyver classic app before importing the MTAR le.
Beware that deleting a project is an irreversible action. To avoid having to delete the app, import your project in a different
This is custom documentation. For more information, please visit the SAP Help Portal 45
 8/29/2024
subaccount.

Projects from SAP AppGyver Community Edition

1. Create an empty application.

2. In the top-right side of the screen, locate a three-dot menu. Open it and click Replace.

Upload the .gpg le received during the export process and click Replace.

 Recommendation
Beware that the following action replaces the current app with the imported one, discarding all changes. It's strongly advised
to create a new application for the import.

Guidelines
1. Projects exported from SAP AppGyver Classic or Community Edition can be imported into SAP Build Apps.

2. Projects exported from SAP Build Apps can only be imported back into the same version. Version downgrading isn't
supported.

Introduction

About SAP Sales Cloud and SAP Service Cloud Version 2

SAP Sales Cloud and SAP Service Cloud Version 2 offers a robust set of capabilities to engage in meaningful customer
conversations and deliver the right impact every time. It uses SAP's Business Technology Platform (BTP) to help:

Provide meaningful connections with speed of service

Propose quick solutions

Offer a modern and customizable interface

With SAP Service Cloud Version 2, the service agents have customer information at their ngertips. Using the collaboration
tools and knowledge base, the agents can quickly address customer issues. Agents can stay up to date on the latest service
requests, comments, discussions, and decisions online. Service Cloud Version 2 automatically assigns tasks to a case based on
the relevant attributes to help and guide service agents through complex processes. Extensibility allows partners to extend the
software platform without having to modify the original codebase. As a result, you can add to the base functionality of the
system, thereby offering new capabilities and outputs.

This is custom documentation. For more information, please visit the SAP Help Portal 46
 8/29/2024

About This Integration

With SAP Build Apps, we can easily integrate apps into the customer service process directly within the SAP Service and Sales
Cloud Version 2 solution.

Examples of typical use cases:

Create customer surveys and forms

Capture customer feedback

Create customer loyalty programs

Automate customer onboarding process

Automate order processing and ful llment

Monitor customer satisfaction and engagement

Create virtual assistants to provide support

Analyze customer data to identify trends and growth opportunities

By leveraging the power of SAP Build Apps to build extensions, companies can create powerful customer experiences that help
to drive long-term customer loyalty and satisfaction.

Prerequisites
Please note that you're only entitled to use the SAP Build Apps Base package without additional costs under the following
Terms and Conditions .

Setup SAP Build Apps with SAP Sales Cloud and SAP Service
Cloud Version 2
Learn to set up the integration in the following steps:

1. Subscribe to SAP Build Apps

2. Setup iframe con guration

3. Download BTP Destination Trust certi cate

4. Open a support ticket

5. Import provided destinations

6. Next steps

Subscribe to SAP Build Apps

In case you haven't yet, please follow this guide to subscribe to SAP Build Apps. We recommend subscribing via the booster.

 Restriction
Only standard edition of SAP Build Apps is supported for the SAP Sales Cloud and SAP Service Cloud Version 2 integration.
Please do not open a support ticket if you are using the free tier subscription.

In case the entitlements are unavailable, please get in touch with your SAP BTP Account Manager. Read the Prerequisites
section to learn more about the requirements your account must meet to qualify for this integration.

This is custom documentation. For more information, please visit the SAP Help Portal 47
 8/29/2024

Setup Iframe Con guration

Your new subaccount should be automatically provisioned with a Cloud Foundry space. If not , select “Enable Cloud Foundry” in
the Overview tab and then click Create Space.

Follow the steps to create a new service in Cloud Foundry and download the service key:

In your subaccount view, navigate to the Spaces tab in the Cloud Foundry section.

Click on your space's name to open it. Create a new one in case there are none.

From the left-side panel, open the Instances tab and click Create.

This is custom documentation. For more information, please visit the SAP Help Portal 48
 8/29/2024
In the Service eld, choose Authorization and Trust Management Service and apiaccess for the Plan. Enter a desired Instance
Name and click Create.

Once the instance is created, click on it to reveal a side panel. Under the Service Keys section, click Create.

Choose any Service Key Name and click Create.

This is custom documentation. For more information, please visit the SAP Help Portal 49
 8/29/2024

You should now see a new service key appear. Click on its name to see the credentials.

Press Download to save the service key in JSON format on your local machine. This is needed later.

This is custom documentation. For more information, please visit the SAP Help Portal 50
 8/29/2024

 Tip
To authorize a user to make app deployments and publish new or existing mashups, they must be a member of the Cloud
Foundry organization and a space manager. These can be con gured in:

Cloud Foundry > Org Members > Add Members

Cloud Foundry > Spaces > (your space) > Members > Add Members

Download BTP Destination Trust Certi cate

In the subaccount view, go to Destinations underneath the Connectivity tab. Click Download Trust to save the trust certi cate.

Open a Support Ticket

Raise an incident on the component CEC-CRM-CZM requesting the tenant con guration and include the following information
by using the Remote Logon Depot :

SAP Sales Cloud v2

Base URL (for example: https://my1000xxx.au1.crm.cloud.sap)

Username and password of an admin user (don't use SSO for this)

SAP Build Lobby URL (for example: example.eu10.build.cloud.sap/lobby)

SAP BTP Subaccount

Destination trust certi cate from step 2

Cloud Foundry service key JSON le from step 3

 Restriction

This is custom documentation. For more information, please visit the SAP Help Portal 51
 8/29/2024
Do not provide the mentioned credentials in the incident directly! Follow the How to add logon credentials (S-user ID and
password) to the Customer Remote Logon Depot for a support case article for more information

Import Provided Destinations

You need to import 2 destinations in SAP BTP Cockpit. The destinations are attached to the support incident by the ticket
handler as text (.txt) les called: Mashups and SAPServiceCloudDiscovery.

The "SAPServiceCloudDiscovery" destination is used in your apps to make requests to Service Cloud v2.

The "Mashups" destination is used internally by the integration.

To import the destinations, navigate to the Connectivity tab and click Import Destination. Choose the provided text le and
save the con guration.

Next Steps
Read more about all consumable APIs for the SAP Sales Cloud and SAP Service Cloud V2

The integration is available via the application launcher:

This is custom documentation. For more information, please visit the SAP Help Portal 52
 8/29/2024

Deploying apps to SAP Sales Cloud Version 2

In SAP Build Apps, open the Launch tab and Open Build Service.

Click Build underneath the Web App section.

Choose MTAR as the File type, latest runtime for the Client runtime version and set a version higher than the previous one in
the Version eld. Click Build to start the build process.

This is custom documentation. For more information, please visit the SAP Help Portal 53
 8/29/2024

 Note
At this point, make sure you have added an attribute IsSAPSalesAndServiceCloudMashup with the value true to the
Mashups destination that was shared with you during the onboarding process.

Once the build nalizes, click Deploy MTA.

In the newly opened modal, click Authorize BTP Deployments and log in to your SAP Account.

This is custom documentation. For more information, please visit the SAP Help Portal 54
 8/29/2024

Choose the same Organization and Space as you've used in the previous set of instructions.

Once the deployment is complete, you'll see an option to publish your mashup. Choose an existing one or select Create new
mashup.. and click Publish Mashup.

This is custom documentation. For more information, please visit the SAP Help Portal 55
 8/29/2024

Your app should now be available at the link provided by the UI. The published mashup can be found under Mashup Authoring on
the Service Cloud v2 settings page, and it's available to use in the “Start Adaptation” mode.

Onboarding new users to SAP Build Apps

Refer to this page to learn how to con gure User Roles.

To allow new users access to your SAP Build Apps instance linked to your SAP Sales Cloud tenant, please verify that the criteria
is met in each case:

Identity Provider: user exists and the Subject Name Identi er matches.

SAP Sales Cloud: user exists, it's linked to a Business User and has the right Business Roles.

SAP BTP Cockpit: assign the “BuildApps_Developer” Role Collection for the custom IdP user.

For app deployments: the user is a member of the Cloud Foundry organization and is a member of the space where the
application is being deployed.
This is custom documentation. For more information, please visit the SAP Help Portal 56
 8/29/2024

Common Subscription & Access Issues

This article guides you through the common subscription and access issues associated with SAP Build Apps, providing you with
necessary and practical solutions.

Unauthorized Error
Understanding SAP Build Apps Claim Requirement

The SAP Build Apps system relies on speci c claims to be present in the ID token issued to it. These claims, or user-speci c
data, include: email, given_name, family_name, and groups. These are automatically available and correctly populated if
the Cloud Identity Services user store is used.

If you're experiencing an unauthorized error, when the trying to access an application, the critical application to check is the
design time, named “SAP Build Apps” in your Cloud Identity Services settings. The problem usually occurs when a custom
Identity Provider, such as AzureAD or another third-party IDP, is used as the primary data source, with Cloud Identity Services
con gured to act solely as a proxy.

Additionally, SAP Build Apps requests the Subject Name Identi er (SNI, or “sub” in JWT) to be the user’s email address as a
fallback. However, some custom IDPs may be con gured to ignore this request, rendering the SNI fallback ineffective. Which
turns out to be the exact reason for the "unauthorized" error.

In such cases, depending on your speci c use case, choose one of the approaches below:

Cloud Identity Services as a Full Proxy, No User Store

If Cloud Identity Services is acting as a full proxy without an enabled user store, the claim mapping must be done at the
Corporate Identity Provider section, using the Enriched Attributes function. You can refer to SAPs enrich assertion attributes
guide for more details.

For instance, if the IDP is sending the user email in a SAML claim called “userEmail”, a mapping from that claim to “email” can
be con gured as follows:

Attribute = email, Value = ${userEmail}

Cloud Identity Services User Store Enabled

This is custom documentation. For more information, please visit the SAP Help Portal 57
 8/29/2024
If the Cloud Identity Services user store is enabled but some attributes aren't populated from the custom IDP, the mapping for
the attributes should be done at the Cloud Identity Services Application level. You can nd the necessary steps in SAPs
con gure default attributes guide. The mapping should be done under “Default Attributes” -> “Custom Attributes”.

Upgrade to SAP Build Apps Standard Edition

Learn how to upgrade from free tier to standard plan in SAP Build Apps

Export Your SAP Build Apps Projects

1. Export all your SAP Build Apps and backend projects manually from the SAP Build Lobby using the Export button:

2. In addition, export any existing application data and make notes of any custom role collections you might have created.

Delete the Service Instance

Delete the free service plan instance for SAP Build Apps in your SAP BTP subaccount. This action also deletes the related
Identity Authentication Service (IAS) app and existing user roles, associated with the subaccount.

This is custom documentation. For more information, please visit the SAP Help Portal 58
 8/29/2024

 Tip
Wait at least 30 minutes to make sure the deletion process is nalized, before proceeding with the next step.

Subscribe to SAP Build Apps Standard Edition

After the free service plan instance deletion is completed you can subscribe to standard edition. Follow the steps described in
the Booster: Automatic Con guration guide and make sure to choose the standard edition (service plan) when con guring the
booster.

 Tip
If you encounter an issue with the booster setup, check for any error messages. If your booster con guration has failed
because the deletion of the free edition was not yet completed, you might need to delete the failed instance and restart the
booster con guration.

Import Your Projects

1. Import a downloaded Build Apps project using the import button next to Create:

2. Then choose the desired le on the local machine and select Import.

3. Repeat the process for all of your exported projects.

4. Make sure to deploy all of your backend projects after importing.

5. Import respective application data (if needed).

6. If you have created your custom role collections, you'll need to update these (if any).

7. If your application is deployed on SAP Build Work Zone you should re-establish the trust dependency between SAP Build
Work Zone and SAP Build Apps

When the free edition instance is deleted, the related Identity Authentication Service (IAS) app also gets removed. After
subscribing to the standard edition you should also add a new SAP Build Work Zone dependency to the newly created IAS

This is custom documentation. For more information, please visit the SAP Help Portal 59
 8/29/2024
app. For more information how to establish dependency between SAP Build Work Zone and SAP Build Apps, see Deployed
Applications.

Related Information
Check our video to learn how you can upgrade from free tier to standard plan in SAP Build Apps.

Disclaimer: The below video is not part of the SAP product documentation. Please read the legal disclaimer for video links
before viewing this video.

Upgrade from Free Tier to Standard Plan in SAP Build Apps

Introduction

What Is the App Editor?

The App Editor, or SAP Build Apps - Web & Mobile is the core part of SAP Build Apps. It allows you to:

De ne your app's structure and navigation logic.

Build pixel-perfect user interfaces.

Create complex logic with visual programming.

Integrate with external data resources and SAP systems.

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

Create a New Project

This is custom documentation. For more information, please visit the SAP Help Portal 60
 8/29/2024
From the Build development lobby, click Create. From the pop-up window, choose Build an Application.

 Recommendation
In case Build an Application is unavailable for you, please follow this guide to subscribe to SAP Build Apps.

To enter the app editor, choose Web & Mobile Application from the two options.

Enter a Name and Description for your project. Click Create to open the app builder.

Release a project
You can create a version of an project by releasing the project.

Prerequisites
You have created and saved a project in the app editor, see Introduction.

Procedure
1. In the app editor, choose Versions.

2. Choose New version and Release.

When you release a project for the rst time, the version number is set to 1.0.0.

When you release a version of a project that is already released, select one of the following:

Contains only patches to indicate bug xes. It updates the third digit of the version number.

Contains minor changes to indicate small modi cations. It updates the second digit of the version number.

Contains signi cant changes which may impact dependant projects to indicate important modi cations. It
updates the rst digit of the version number.

This is custom documentation. For more information, please visit the SAP Help Portal 61
 8/29/2024
Add a release note to your new project version.

Results
You have released a new version of your project. You can now:

Choose Open version to open the project version in view mode. You cannot make any changes in the view mode. To add
changes, choose Versions in the app editor and Open editable version.

To open the preview of the version from the view only mode, choose Launch Open preview portal Open web preview
Settings open preview .

Choose Back to listing, to see all saved versions of your project.

You can deploy a version or transport it to a different environment, see Build and Deploy Web Applications.

Component Properties

Description
With the component properties panel, you can set what kind of data and other content your UI components display, con gure
how they function and de ne how they're bound to app data. When you select a component, the right sidebar shows the
component properties panel.

Property Categories
Not all properties work the same way. To understand how properties work, you should get familiar with the three property
categories:

Display

Input

Con guration

In addition, components have style properties, which are con gurable under the Styles tab.

Display Properties
Display properties de ne what kind of data a component displays or otherwise uses: for example, a text component's Content
property.

They're "read-only" in the sense that the component itself doesn’t provide a way to change the property when the app is
running, unlike input properties. As an exception, ow functions and data bindings can still change a display property during app
runtime, but the ow is still "one-way".

Display properties aren't always present: for example, a text input's Placeholder is only shown when its Value input property is
empty, that is, nothing has been written (or programmatically set) into the text eld.

Examples (Component/Property Name)

This is custom documentation. For more information, please visit the SAP Help Portal 62
 8/29/2024
Text / Content

Image / Image URL

Icon / Icon name

Dropdown / Dropdown options

Text input / Placeholder

Input Properties
Input properties contain data just like display properties, but their value can be directly manipulated by the component itself,
without additional logic: for example, a text input's Value property.

While input properties can be given an initial value via the properties panel, the user can directly change them when the app is
running. For example, they can tap to focus on a text input and write in it, changing its Value property.

An input property can even be hidden from the view. For example, the Value property of the Date Picker component contains an
ISO 8601 formatted date string of the picked date. This is useful for saving to database, but not something you want to directly
display to the user.

Typically, input properties are used together with data binding, so that changes in the value are propagated to, e.g., a variable
that can then be used elsewhere in app logic.

Changes in input properties also trigger onChange events on the component.

Example Properties
Text eld / Value

Slide / Value

Toggle switch / Toggled.

Checkbox / Checked

Con guration Properties

Con guration properties tell the component how it should function: for example, a button's Disabled property. They're often
booleans (true/false) or enumerable values (that is, lists of prede ned options), but they can be any relevant data type.

Lastly, they (like all component properties) are dynamic, in the sense that if a con guration property is changed during app
runtime by a ow function or a data binding, the component reacts accordingly. A typical use case is changing the Visible
property to hide or show components.

Examples
Any UI component / Visible

Button / Disabled

Text input / Multiline

This is custom documentation. For more information, please visit the SAP Help Portal 63
 8/29/2024
Slider / Maximum value

Setting Properties
When you select a UI component, the properties panel shows a list of its properties. Note that some properties might be hidden
inside the expanding Advanced section. Every property has a title and an info icon. Hovering your mouse on the info icon shows
additional information on how that property works.

Property Binding Types and the Binding Editor

To con gure a property, you need to enter the binding editor and select an appropriate binding type. There are four categories
for value types:

Static value – set via the properties panel, won't change during runtime unless explicitly overridden with the Set
component property ow function.

Data and Variables - dynamic binding to a variable

Formula – dynamic binding to a formula

Component property – binding to a component property (such as the value of an input eld)

By default, the value type is always a static value of the appropriate type, e.g. static text for Content or static true/false for
Visible.

Property Schemas
Every property has a schema, which de nes what values are accepted. The schema can be as simple as "any text or number
value" for a text component's Content, or as complex as "a List of Objects with properties label and value, whose values are
type text" for a Dropdown component's Dropdown options.

Composer prevents you from selecting incompatible values as bindings, and will display them as "incompatible". For example,
you can't choose a page variable of the List type for a text component's Content or bind a text value to Repeat with.

Setting the Property Value

The property value type determines what kind of input is available on the properties panel for setting the actual value of the
property.

Static Values
For static values, an applicable input is shown.

Type Input

Text Text input

Number Number input

True/false Dropdown to select between True and False

This is custom documentation. For more information, please visit the SAP Help Portal 64
 8/29/2024

Type Input

Object Binding editor for binding an Object

List Binding editor binding a List

Icon Icon picker

Image Text input for an external URL, plus a button to select an image
from the asset library

Page Id Binding editor, dropdown of available pages

Formula functions

For a formula function, an input eld is shown. Clicking it opens the binding editor.

Preview Value
When a UI component property is bound to a dynamic value (that is, a formula function or a linked value), you can set a preview
value for it. If present, the preview value is what will be rendered on the UI Canvas.

This is helpful if your binding is e.g. appVars.currentUser.age, but your UI only has space for a short number.

Display Name
You can set a custom display name for the component using the Display name property.

This has no effect on app runtime, but helps tidy up your page structure, especially when using the layout tree.

Repeat With
This is a special property that allows you to make the selected UI component repeat itself in the UI based on type source data.
For example, a typical use case is rendering a list based on an array of data fetched from the back end.

Creating and editing view components

You can create new, reusable view components by turning a Container into a composite component. Select it via the navigation
tree and click convert to a new component. After a con rmation dialog, the component template editor is opened for your
newly-created composite component.

This is custom documentation. For more information, please visit the SAP Help Portal 65
 8/29/2024

Using the component template editor

The component template editor essentially lets you edit the structure and properties of a composite component in isolation
from the rest of the page. To signify this, the rest of the UI is faded out with a translucent stripe pattern.

For any composite component, there's three things to consider:

Structure, i.e. how the composite component's child components are laid out

Properties, i.e. what properties are available for the user to con gure after they've dragged it onto the canvas
This is custom documentation. For more information, please visit the SAP Help Portal 66
 8/29/2024
Internal logic, i.e. what logic is run inside the composite instance, either automatically as part of the component's life
cycle or in reaction to user interaction

Events, i.e. what events the composite component can trigger via its internal logic

Structure
Creating the structure for your composite works the same way in isolation mode as outside it: you drag components to the
canvas and de ne their properties and styles. Nested containers can be used to do more complex layouting.

The only difference is the root container for the layout. Outside Isolation mode, the root of your component structure is the
page itself, while in isolation mode, it's the root of the composite component.

Styling composite components

A composite component can be thought of as a "card" that can be added to any part of your page layout. As such, the style
properties available for composite component instance, when selected on the main canvas, include only properties like margin
and width, i.e. things that affect the "boundaries" of the composite component.

Conversely, when editing the composite component root inside isolation mode, you can set style properties like padding and
background color that affect things inside the composite component boundaries.

Properties

Start by providing an Introduction and writing a short description for the component in the Description tab:

This is custom documentation. For more information, please visit the SAP Help Portal 67
 8/29/2024

Con guration and two-way properties

Con guration properties are used to bring in data and values for the component to use, such as the keyboard type of an input,
or options list for a dropdown.

A component cannot modify its regular con guration properties from the "inside". An exception is a property set to use two-way
binding. In this case, both changes in bound data and user interaction with the component can change the property, such as an
input eld's Value.

Inside isolation mode, properties de ned here are available via the Composite component internal property binding type.
Regular con guration properties are read-only in isolation mode, while two-way bound properties can be set with the Set
internal property ow function.

Output values
Component output values are a way for the component to "broadcast" data to the rest of the app.

For example, a le upload component could have its "Upload progress" available as an output value.

You cannot bind anything to output values, but they are available via the Binding Editor, so you can use them in formulas or as
direct bindings. In isolation mode, output values can be set with the Set output value ow function.

This is custom documentation. For more information, please visit the SAP Help Portal 68
 8/29/2024

Passing output values outside the component

In the composite component editor, choose a part of the component that you want to return an output and attach a 'Set output
value' ow function. Add a 'Trigger event' function at the end that points to an event.

Select a desired output value and bind it to "Object with properties" → "Item in repeat" for each of the elds. "Item in repeat" is
applicable to components repeated with data. Use a different binding method, depending on your desired output.

This is custom documentation. For more information, please visit the SAP Help Portal 69
 8/29/2024

Exit the composite component editor and select your composite component. Attach a 'Set page variable' (or any other data-
related ow function) to an event chosen in the beginning. Bind its value to a formula: self.OutputValue.field, where
OutputValue shall be substituted with the actual name and field with the desired eld. While editing the formula, you will
see all available options.

Private variables
Private variables are only usable in isolation mode. They can be used to write and read data throughout the component's
internal lifecycle, without making that data available from the "outside" when using the component in an app.

This is custom documentation. For more information, please visit the SAP Help Portal 70
 8/29/2024
Private variables can be set with the Set private variable ow function in isolation mode.

Sharing your component

To share your component, nd it in the BY ME tab above the components and use the Copy to clipboard option.

You can now share the text content with other people, or use it in another application.

Import a component
To import a component in your app, open the Marketplace and paste the shared text content in the Search input eld.

 Note
Only add a component if it comes from a trusted source! If in any doubt, do not perform this activity!

Choose ADD TO APP button and the new component will be available in the BY ME tab.

Data Components

This is custom documentation. For more information, please visit the SAP Help Portal 71
 8/29/2024
Data components are one of our most powerful features yet. They allow you to build highly reusable components with data-
related logic built in, eliminating the need for app-level data variables. You can use data components together with different
data resources and in different apps, and even download/publish them to the marketplace to make them available for other
people to use. Public data components can be found using #data-adapter tag in the view components section of the
marketplace.

Some examples of data components include:

A form component that creates records to a data table.

A selectable list component that syncs the selection information to a data table.

A widget type component for listing from and creating records to a data table (used in this article as an example)

How Does a Data Component Work?

What sets data components apart from regular components are data adapters that act as an abstraction layer between the
component's internal logic and a data resource in the app. Installed component's adapter can be connected to any data
resource with compatible elds and operations; for example, a con gured REST API or the on-device storage of a mobile phone
con gured by you.

When connected to a data adapter, the data resource can then be used with private data variables or data ow functions inside
the component. Data ow functions let you work with data inside the component similarly than you would on the page logic
canvas: you can create new records, list or get existing records, update and delete them. Similarly to data variables in the page
context, private data variables are used in the component context to hold single or list type values that are compatible with the
schema of the connected data resource.

Mapping the Data Component

Upon installing a data component, you'll notice a property that can be mapped to a data resource. Mapping is a binding type
that lets you assign one list of objects to another. It's used in the Data adapter con gurator to connect data resource elds (i.e
internal storage) to data adapter elds.

To map your data resource to a data component, nd the property on the 'Properties' tab and press "Con gure" under the
adapter name. From there, simply drag-and-drop the available elds from the data resource to match the adapter schema on
the right. You can alternatively use a formula, by clicking the formula binding button to the right of the eld.

This is custom documentation. For more information, please visit the SAP Help Portal 72
 8/29/2024

The data component is now ready to be used with your data resource.

Data Adapters & Private Variables

Data Adapters

A data adapter works as a connector between the data component and a data resource in the app. By using the adapter, the
component can perform operations on the connected resource via its internal data ow functions.

The adapter schema can be xed, requiring a certain number of elds with xed types, or arbitrary, specifying only accepted
eld types and a minimum/maximum number of elds.

Fixed data adapter - A data adapter schema that expects the connected data resource to have a certain number of elds
with known types. Arbitrary data adapter schema - A data adapter schema that allows a exible number of elds. The
minimum and maximum number of elds and accepted eld types can be set when creating the adapter.

Private Variables

This is custom documentation. For more information, please visit the SAP Help Portal 73
 8/29/2024

A private data variable only exists within the context of a single data component. It works together with the data adapter
similarly to a data variable working together with a data resource. The value of a private data variable can be set with the ʻSet
private data variable’ ow function in Component template editor. Similarly to data variables, private data variables come in
two types: List of objects and Single object.

Creating a Data Component

To showcase the data component creation process, in this article we are creating a simple shopping list data component that
will be capable of listing and adding grocery items.

Creating the UI
The rst step to create a data component is to con gure a 'Container' view component with the desired UI elements. These
may include, for example, list items or text to display data, and input elds and buttons to create or update data based on user
input.

See the image below for the canvas look and the layout tree of the Shopping list:

Every view component is placed in a single container, which is going to be transformed into a data component. In the layout tree,
you may notice another container titled 'List'. The purpose of this container is to store repeated content, more speci cally the
shopping list that is going to be populated via the input elds.

This is custom documentation. For more information, please visit the SAP Help Portal 74
 8/29/2024
A new data component can be created by rst pressing 'Create new component' in the main Container's properties sidebar.
From here, switch to the 'Properties' view via the toggle switch on the top right and navigate to the 'Data' tab. After converting
the component to a data component via the dedicated button, you'll be presented with two con gurable properties: 'Data
adapters' and 'Private data variables'.

Creating a Data Adapter

When creating a new data adapter, you're required to name it via a 'Data resource key' that is going to de ne the adapter in the
component. Set a title and add a description for further clarity, especially if you intend to publish the component for external
use.

To create a xed data adapter, you need to set 'Schema type' to "Fixed". You can then add a certain number of properties with
certain types that you expect the connected data resource to have.

For our shopping list example, let's create a data adapter called Groceries with the properties id, name and quantity .

Lastly, you need to con gure the operations required from the data resource that will be connected to your data adapter, which
will depend on your needs in the component. If you aim at retrieving and creating data like in the example, LIST and CREATE
are your choices.

The arbitrary schema is more exible and can be used in scenarios where the expected number of elds isn't known
beforehand, for example in tables. You can still set some limits for the expected eld structure. These include allowed eld types
and a minimum and maximum number of properties. Under the 'Any of the following types' eld, you can set allowed types with
the 'Property value type'. You can allow multiple types by pressing 'Allow another type' at the bottom of the widget. The
'Operations' con guration is done similarly to the xed adapter type.

This is custom documentation. For more information, please visit the SAP Help Portal 75
 8/29/2024

Creating Private Data Variables

To create a private data variable, enter a 'Data variable key' as a unique identi er. In the 'Data adapter' eld, select your
previously created data adapter and set the type appropriate to your requirements.

In the Shopping list example, we need two private data variables: one List of objects for all groceries and one Single object for
adding the items.

You can create as many data adapters and private data variables as you need to match your needs, especially with more
sophisticated data components that interact with multiple data resources.

Data Variable Bindings in the UI

Upon creating one or more data adapters and variables, we need to the data component's UI needs to be bound to them. In
other words, we need to attach the view component parts to the data, so that it will be displayed upon running the application.

This is custom documentation. For more information, please visit the SAP Help Portal 76
 8/29/2024
The created private data variables are located under 'Component properties' -> 'Composite component data variable' in the
binding editor. Since in the example we've created a list of entered groceries, we can repeat the list Container view component
with the "List of groceries" variable. That way, any entry in the list will be displayed in the app.

After repeating the Container, bind the components inside of it with the repeated items by using the 'Data item in repeat'
binding type:

In order to be able to add new entries to the list, we've to bind the input eld's 'Value' to a speci c property of the 'Single object'
data variable. That way, we can use that variable to add new data.

Component Logic
Now we've the view components and variable bindings in place, but the logic ows for interacting with the data resource and
populating the variables still need to be implemented.

In our example, the data component will execute logic ows in two different scenarios:

1. Initializing the groceries list when the component is mounted

2. Creating a record and updating the list whenever a grocery item is added.

This is custom documentation. For more information, please visit the SAP Help Portal 77
 8/29/2024
The logic for initializing the component with data will be attached to the 'Component mounted' event, so it will be executed as
soon as the component becomes visible. The create and update logic is attached to a Button component on the view canvas.

Overall, the data adapter acts as a medium between a con gured Data source and the private data variables that are
responsible for storing the entered data. Refer to the diagram below for a clearer representation:

Initializing the Component

While in the Component template editor, begin by con guring an initializing event on the logic canvas of the data component.
You can do so by editing a default event or dragging the 'Receive event' ow function onto the canvas and setting it to trigger at
"Component mounted".

Next, attach a 'Get record collection' ow function located in the DATA section to the event and set its 'Resource name' to the
Data adapter created earlier. To populate the list that the grocery items get repeated from, use a 'Set private data variable'
function from the VARIABLES section.

Set the chosen 'Private data variable' to the list variable created previously, and set its 'Assigned value' to 'Output value of
another node' -> 'Get record collection' -> 'Get record collection Collection of records'.

This ow allows us to fetch the data via the adapter to perform operations on the data and upon retrieving, set it to a private
data variable for displaying further in the component.

Finally, we need to attach one more event to the beginning of the ow to be able to account for live changes in the data. Drag a
'Receive event' ow function on the canvas and set its 'Event source' to Fired from "Trigger event". We are now able to execute
the logic from elsewhere in the component by using a 'Trigger event' ow.

The component logic canvas should now look the following way:

Updating the Data

The second step is to con gure logic for the view component responsible for updating the data when a new grocery item is
added. Following the example from earlier, a button would be an appropriate one for updating the shopping list with the entered
data.

Without exiting the component template editor, attach a 'Create record' ow to the event. This ow function is responsible for
pushing the data from private variables to the adapter. Thus, attach the data adapter as its 'Resource name' and bind your
Single-object private data variable as its 'Record'. As the positive output, add a 'Set private data variable' ow function and
assign its 'Private data variable' again as the Single-object variable (NOTE: Here you're required to set it using its 'Data variable
key' con gured earlier). Leave the 'Assigned value' to be an empty "Custom object". Lastly, drag a 'Trigger event' ow function
This is custom documentation. For more information, please visit the SAP Help Portal 78
 8/29/2024
onto the canvas and attach it to the end of the logic chain. The 'Triggered event' should be set to Fired from "Trigger event",
which will allow us to execute the logic of the initializing function and update the data adapter.

The purpose of this logic chain is to connect the private data variables responsible for storing temporary input from the Input
eld and the data adapter. The entered data is passed to the data source and stored there using the adapter.

The component's logic is now con gured and you can exit the Component template editor.

Final Words
At last, after con guring everything, you can preview your app and interact with the data component! The shopping list
component that was presented as an example is now capable of adding new items by entering the name and quantity in the
right eld and pressing the button.

As con gured, the name will appear on the far left and the quantity on the far right. Upon closing and re-opening the app on the
same device, the data will stay the same, as it is stored in the on-device storage resource that has been connected to the
component.

We hope that after this tutorial you feel con dent in building your own data components – feel free to use the example here as
a basis for any customizations to match your desired design!

Charts
Charts is a set of view components that perform as interactive data visualization tools. They allow you to better understand and
predict current and future data.

This is custom documentation. For more information, please visit the SAP Help Portal 79
 8/29/2024

 Note
At the moment, only web is supported. Further platforms will be added in the future.

For charts on mobile, please use the D3.js / Google Charts component.

Chart types
Line Chart

A line chart is a visual representation of data that uses multiple points, linearly connected in chronological order. The Y axis
represents the vertical part of the coordinate system, while X is the label for the points on the axes.

In the 'Chart Data' property, every list entry represent a singular point on the Y axis.

Bar Chart

Bar chart has vertical bars running throughout the length of the Y axis, with the labels shown at the bottom. For the chart data,
X represents the bar name, whereas Y - its value. The bar size is automatically adjusted relative to others.

Pie Chart

This is custom documentation. For more information, please visit the SAP Help Portal 80
 8/29/2024
A pie chart is a circular chart that is divided into portions, each of which's label indicates a percentage. On the graph, each
portion visually represents a single entry relative to the total provided data. While entering the data, use X values to provide the
portion's name, and Y to set the value. The relativity is calculated automatically.

Area chart

Area chart is much like a line chart, however its lled with color underneath. Same as before, a single list entry represent Y axis
and its label.

Properties
Area/Line shape

Determines whether the area or line of the chart is displayed linearly, or approximated to cardinal or step shapes.

Animate

Controls whether the chart is animated upon opening a page.

This is custom documentation. For more information, please visit the SAP Help Portal 81
 8/29/2024

Sort data & Sort order

Sort the chart data based on data point Y value. In the left part of the image below, you can see a default (unsorted
con guration), where as the right part sorts the data in a descending order. Furthermore, sorting by descending order
practically reverses the chart.

Allow zoom

Enable the chart to be scrolled in via a mouse or a trackpad gesture.

Data label style & Axis display

'Data label style' lets you choose between displaying labels as a text, or as a tooltip (shown on hover).

'Axis display' controls the visibility of axes. You can display all, or X & Y individually. The axis text is controlled via the 'Y(X) axis
label'.

This is custom documentation. For more information, please visit the SAP Help Portal 82
 8/29/2024

Chart area padding

Chart area horizontal/vertical padding can be used to adjust the placement of the visualized data in relation to the axes.

Grid lines & styles

'Display X(Y) axis grid lines" determines whether horizontal (vertical) grid lines are displayed in the background of the chart.

'Grid line style' determines whether grid lines will appear as solid or dotted.

Accessibility label

Text used for accessibility features, such as screen readers.

Layout tree
The Layout tree is located at the bottom of the right sidebar. It shows you the exact structure of your UI components on the
current page.

You can use it to:

Select UI components

Choosing a UI component on a layout tree will also highlight it on the view canvas.

Move UI components around

Dragging the components along the layout tree will also move them along the canvas.

Add new UI components via drag-and-drop

The layout tree makes it particularly easy to add new components to a speci c place in an already existing UI.

Edit composite components

This is custom documentation. For more information, please visit the SAP Help Portal 83
 8/29/2024
The layout tree treats composite components as a single component, and displays all the content within only in
the Component editor. This way, your layout is clearer and allows for better navigation.

Scroll View

Description
Scroll view is a layout container that is used to make scrollable views. In other words you can have multiple interactive
components in a single line. Below you can see an example of a con gured Horizontal scroll view component. You can scroll left
and right, revealing more elements.

Building the layout

Start by placing a scroll view component in the desired place on the canvas. Additionally, drag a Container component inside of
it. This container serves as a base for the list item. Now, place anything you want to be present in a single item of the scroll view
inside that container. For this guide, we'll use an Image and Title view components. The layout tree should look the following
way:

This is custom documentation. For more information, please visit the SAP Help Portal 84
 8/29/2024

Next, to make the Scroll view Horizontal, navigate to the properties tab and set the 'Horizontal scroll' to "True". On the Layout
tab, set the 'Layout' to be horizontal as well. If you want to make the Scroll view component vertical, simply reverse the
instructions and set everything to follow the vertical format.

When it comes to container con guration, you're free to customize it the way you want your items to look like. In case you want
to achieve the same result as presented in the example, set the container layout to vertical and align both Image and Title to
the center. Your component should then look like this:

Repeating the Scroll View List Item

Next, we'll need some data to repeat the list item from to nalize our scroll view. For that purpose, we can use a variable to
store image URLs and text. In this tutorial, we’ll use a page variable. If you want to populate the scroll view with data from a
data resource, you can use a data variable instead.

To create a page variable, navigate to the Variables view in Composer and open the 'Page variables' tab. Click on 'Add page
variable' and enter a name. Set the 'Variable value type' to be a 'List' and 'List item type' to be 'Object'. That way, the variable
becomes a list of objects.

This is custom documentation. For more information, please visit the SAP Help Portal 85
 8/29/2024

To complete the page variable setup, we need to add properties to our list that are going to correspond to the elements in our
list view. Practically, you will have to add a property for each item in the container. Since in this guide we have con gured an
image and a title, let's add them as the properties like so:

Lastly, we have to bind the list item properties to our view components. Navigate back to the view canvas and select the
container. In the Properties tab, bind its 'Repeat with' to the page variable you've created.

The Title's 'Content' should now be attached to current.name. As for the image, make its 'Source' current.image.

In current.image, substitute the "image" with the property from your object list. The image property should be set to 'image
URL' in the page variable.

Populating the Scroll View with Data

To make the scroll view work, we have to populate the list of objects with an actual data. We will do so by using a 'Set page
variable' ow function. You are free to attach it to any event, but in this guide we'll use the 'Page focused' event to populate the
data once the page is opened.

This is custom documentation. For more information, please visit the SAP Help Portal 86
 8/29/2024

Make sure that the 'Variable name' in the 'Set page variable' ow function is set to the page variable we created. For the
ʻAssigned value,’ use the ʻList of values’ binding type in the binding editor and add some names and image URLs to the list.

Advanced Data Binding

If you've prior experience in programming, you can bind the assigned value to a formula in Javascript object format. Kindly nd
an example below:

[{"id": "0","title": "Orange","image": "<url>"},{"id": "1","title": "Apple","image": "<url>"},{"id"

Following formula is presented in the javascript object format. You can see the name of the variable property and its value being
presented in the "property": "value" format.

Soft Tabs
Soft tabs that allow you to switch between different content on a page in your app.

Example Context
In many apps, you've more information on a page than ts the screen. There are many ways to tackle this problem, and one is to
use "soft tabs" – a tab bar that sits under the navigation header and allows you to change between different tabs of
information.

In our ctional example, our page has three distinct sections: Info, Log, and Attachments. We want to create a UI that allows us
to switch between these tabs, showing different content for each.

Creating the Tabs Component

First, drag in a Row container, increase the number of cells to 3 from the Style properties tab, then add Paragraph elements to
each tab and give them appropriate content.

This is custom documentation. For more information, please visit the SAP Help Portal 87
 8/29/2024

Adding a Page Variable

Next, we want to add a page variable to track our selected tab. Go to variables editor from the switch above the canvas and
create a String type selectedTab page variable. Give it a default value of info – the other two possible values are log and
attachments.

Showing Active Tab

Next, we want to make the cell bottom border color be dynamic based on the selected tab.

For each of the three cells, set border style to solid , bottom border width to 2. Then, make the border color dynamic with the
formula:

IF(pageVars.selectedTab === "info", theme.$smartColorPalette_app.warning, theme.$smartColorPalette_

The condition is different for each of the tabs – pageVars.selectedTab === "log" and pageVars.selectedTab ==
"attachments", respectively.

Since we set the default value to be info, the rst tab should be selected when we preview our app.

Switching Tabs
Next, add a Set page variable node to each cell's tap event, which sets the selectedTab page variable to the correct value for
tapped tab, e.g. info.

Showing/hiding Tab Content

Finally, we add three containers for each of our tabs. The containers will for now just have an appropriate title label.

We then set the Visible property to be dynamic based on the selected tab, using the same condition as for the active tab, e.g.
pageVars.selectedTab === "info".

That's it! Now, the selected tab is highlighted and the appropriate containers show/hide based on the selection.

Full screen background

Learn to set a custom full-screen background for your app in SAP Build Apps.

Introduction
You can to build applications with custom background images, enabling endless design possibilities.

This is custom documentation. For more information, please visit the SAP Help Portal 88
 8/29/2024

Image as a background
To set a full-screen background for your application:

1. In a page's Style tab, enable Stretch to the viewport height. Check Disable scrolling and Safe Area. Clear values for
padding as well.

This is custom documentation. For more information, please visit the SAP Help Portal 89
 8/29/2024

1. Add a Container component and give it a background image. The given container is now the main layout of your
application. In the Layout tab, set the 'Width and Height' to be "Advanced". Bind the height and width to the following
formulas accordingly:

systemVars.dimensions.viewport.height
systemVars.dimensions.viewport.width

This is custom documentation. For more information, please visit the SAP Help Portal 90
 8/29/2024

Optionally, inside the container, add a Scroll View, and set its height and width to the same formulas. Add any components you
want to make scrollable inside the scroll view.

Translation Variables
Translation Variables allow you to de ne variables within your app, which change their value depending on the app's language.
This functionality provides a powerful and easy-to-use solution for multilanguage app development. With this, you can ensure
your app is accessible and user-friendly to a global audience.

 Note
You must be subscribed to the enterprise version of SAP Build Apps to be able to use the translation variables.

To create translation variables, switch to the 'Variables' view by toggling a slider located at the top right of the view canvas.
From the options available on the left, select 'Translation variables'.

This is custom documentation. For more information, please visit the SAP Help Portal 91
 8/29/2024
Once in the 'Translation variables' view, you will need to de ne all the languages your app is going to support. To do this, use the
drop-down labeled 'Add another language' and select the languages you want to include.

You also have the option to choose a fallback language. This is the language the translation variables will default to in case the
phone's language is not supported by your app.

To add a new translation variable, click the 'Add Translation' button. Enter a unique 'Translation name' which will act as the
identi er for the variable. Then, ll in all the translations for the languages you have chosen to support.

This is custom documentation. For more information, please visit the SAP Help Portal 92
 8/29/2024
To use the translation variables in your app, drag a Title component onto the canvas and select it. You will notice a translation
icon in the input eld for the 'Content' property. Click on this icon to con gure the translation. Note that translation variables
are not exclusive to the Title component and can be used anywhere where text input is required.

In the con guration pop-up will appear. In the 'Translation key' eld, select the translation variable you want to use and click 'Use
Translation'.

You can change the language of the app either by changing your phone's language or using a ow function 'Set current
language'. For example, you can attach this function to a button and set the 'Supported language' property to the desired
language. This enables you to implement a language selection feature in your app.

This is custom documentation. For more information, please visit the SAP Help Portal 93
 8/29/2024

Once your con guration is complete, you can preview your app. The screenshot below shows an example where two buttons are
used to switch between English, Finnish, and Swedish.

The key to successful multilanguage development is thoughtful planning and thorough testing. Make sure to test your app
thoroughly in all supported languages to ensure the correct variable values are being used.

Visual cloud functions

Learn about integrating Visual cloud functions in the Integration to the App Editor article.

SAP Systems
This is custom documentation. For more information, please visit the SAP Help Portal 94
 8/29/2024
BTP Destinations enable you to use SAP Systems as the Data resource in SAP Build Apps. Because of a direct connection to the
SAP Authentication services, the integration does not require access con guration.

SAP BTP Authentication

SAP BTP authentication allows you to utilize BTP Integrations and access data from other SAP systems. In addition, it
contributes to the security behavior of the app.

 Note
By default, SAP BTP authentication is enabled when you create a new application.

For SAP BTP authentication to work for mobile users, you also have to enable SAP Mobile Services following the
instructions in the SAP Mobile Services guide.

To allow the authentication process to function properly, an additional page is automatically added to your app. It includes all the
necessary components and precon gured authentication logic. The page will open if an unauthenticated user accesses the app.
Once the user successfully logs in, the initial screen will be closed automatically.

If you want to con rm that SAP BTP authentication is enabled, navigate to the Auth tab.

 Note
If you want to remove the SAP BTP authentication, you have to disable it in the Auth tab, delete the authentication page,
and uninstall the Authenticate with SAP BTP and Dismiss initial view ow functions from the Logic canvas.

Adding Data Endpoints

Choose the Data tab, Add Integration and BTP Destinations. You must de ne additional metadata of your connection to include
it here:

This is custom documentation. For more information, please visit the SAP Help Portal 95
 8/29/2024

BuildApps.Enabled = true

You can further categorize your connection with the metadata BuildApps.ApiType. We currently support REST and OData
type like

BuildApps.ApiType = odata

 Note
You must enter lowercase strings in the implementation, for example odata and rest.

Connections with api type OData are grouped under OData destinations in the listing below. It is also ltered out from the
classic BTP REST entity modal select.

The connections with api type 'rest' are removed from the listing below and only visible in the classic BTP rest entity modal. You
also must con gure your connections with HTML5.DynamicDestination = true for approuter dynamic routing support.
You must enter the tags BuildApps.Enabled and HTML5.DynamicDestination mentioned above in additional properties
sections of every destination con guration in the SAP BTP Cockpit. If your destination requires the CSRF token to be passed,
additionally add the following tag:

BuildApps.RequiresCsrf = true

Example Case 1: Integrate with S/4HANA Cloud

The S/4HANA instance should include a IsCatalog = true metadata prop to be available.

Choose 'catalog_onpremise_basic (S/4HANA Cloud)' from the list of options and look for 'Bank' via the Search bar above.

Click 'Browse Data' to enter data visualization view.

This is custom documentation. For more information, please visit the SAP Help Portal 96
 8/29/2024

Here, you can optionally add or modify data entries before installing the integration. To add a new entry, click on the 'New
Record' button in the top-right corner. Fill in the elds and press on 'Save Record'. To Delete a record, scroll to the bottom of
the properties and press 'Delete'. Upon nalizing the con guration, close the view.

Click 'Install Integration' and 'Enable Data Entity'.

This is custom documentation. For more information, please visit the SAP Help Portal 97
 8/29/2024

Example Case 2: Direct OData Integration

Choose 'Northwind' from the list of services.

Select 'Products' from the 'Data entities'

Optionally Add/Modify data via the 'Browse Data' view. Click 'Install Integration' and 'Enable Data Entity'.

This is custom documentation. For more information, please visit the SAP Help Portal 98
 8/29/2024

Using the BTP Integration

The easiest way to use the con gured BTP Integration is to use a Data Component. Install a 'Basic list' from the Component
Market. You can do so by searching it via the name ('Basic List'), or the sharing token: B04nyWpatmoJ7P4YrEq2Mw.

Upon installing, you nd it under the Installed tab above the Component Market. Drag it onto the UI canvas.

This is custom documentation. For more information, please visit the SAP Help Portal 99
 8/29/2024

In the Properties tab on the right, click Con gure to enter a Data Component con guration view. It allows you to map the elds
of the component with the elds from the installed integration without having to enable data variables nor con guring any logic.

Begin the con guration by choosing a Data resource. In this case, 'Products' refers to the OData integration, and 'MasterData'
is S/4HANA.

Here, connect the Data Resource elds on the left to Component elds on the right via dragging them to a desired location.
Note, that only elds of the same data type (i.e text or number) can be connected.

This is custom documentation. For more information, please visit the SAP Help Portal 100
 8/29/2024

In the 'Properties' tab, set the required 'Authentication' eld to 'Object with properties', and set 'Authentication type' to be
public:

This is custom documentation. For more information, please visit the SAP Help Portal 101
 8/29/2024

Save and Exit the con guration via the breadcrumb button in the top-right corner. Preview the app and you should be presented
with the data.

Additional Content
Check out the Using BTP Authentication and Destinations with SAP Build Apps blog on SAP Community!

SAP Build Library

SAP Build Library enables seamless integration with other SAP Build products, enhancing your application's functionality.

 Tip
Using the SAP Build Library integration requires basic understanding of building applications and using data resources. We
highly advise to complete the onboarding wizard, found at the bottom of the screen within SAP Build Apps, as well as check
out Best Practices: A Strategic Approach to SAP Build Apps article.

Prerequisites
1. Subscribe to SAP Build Process Automation. Read the Initial Setup for more information.

2. Create at least one Business Process and release it.

3. In the SAP Build Lobby, publish your released version to the library.

Important Notes
SAP Build Apps can only access the latest published version. Make sure to always publish newest version of your process
to the library.

Only processes with an API Trigger are visible in the SAP Build Library. If your process uses a Form Trigger or Event
Trigger, it can't be integrated with SAP Build Apps.

In case you have an instance of SAP Build Process automation setup, the integration will not work unless
BuildApps.Enabled property was added to the Process Automation service destination (technical name:
sap_process_automation_service_user_access). For mobile, MobileEnabled is additionally required. Follow the steps
below to add the mentioned properties:

1. Navigate to the Destinations tab in the SAP BTP Cockpit.

2. Find the SAP Build Process Automation Service destination.

3. Click Edit and enter a new property MobileEnabled with a value of true, as well as BuildApps.Enabled with true.

This is custom documentation. For more information, please visit the SAP Help Portal 102
 8/29/2024
4. Save the destination.

Integration Process
1. Navigate to the Auth tab and enable SAP BTP Authentication.

2. Switch to the Data tab and click Add Integration. Choose SAP Build Library from the 3 options.

3. You should now see a list of all published processes. Select the process that you want to integrate by clicking on its tile.

4. In this screen, you're able to see all process actions, inputs/outputs, and process details. Click on Enable Process to
integrate the process.

Flow Functions
Interacting with the integrated process is performed using Flow Functions. In the table below, nd a list of all of them, along with
their purpose:

Flow Function Name Action

Get process attributes Retrieves the attributes associated with a speci c process.

Retrieve instances Returns all instances of a process.

Trigger process Starts the process execution.

Update Instance Updates a speci c process of an instance.

Get process attributes

Inputs:

Process - Choose a process to get its attributes.

Instance ID - A unique identi er (ID) of the process instance you want to get the attributes from.

Retrieve instances

Inputs:

Process - Pick a process to retrieve instances from.

id - Process ID.

status - Status of the process.

subject - Description of the process.

projectId - ID of the project.

startedAt - Time of the process trigger.

startedBy - Filter by instances launched by a speci c user.

businessKey - Business Key.

completedAt - Time of process completion.

Each process may have a different set of lters, apart from ones described above.

Trigger process

Inputs:
This is custom documentation. For more information, please visit the SAP Help Portal 103
 8/29/2024
Process - Pick an integrated process that you would like to trigger.

Other - All other inputs are dynamic and depend on the elds de ned in your process. Build Apps will automatically
detect the input types.

Update Instance

Inputs:

status - Pick a status to the change the instance to.

cascade - Indicate whether you want the whole cascade of work ows to be updated.

Process instance ID: ID of the instance to update.

Sample Integration
Given the following process called "Leave Request". It has an API trigger con gured, expecting these four inputs:

EmployeeName

enddate

LeaveType

NoOfDaysLeave

startdate

The logic of this process follows a pattern of automatically approving all requests that are smaller than 3 days
(NoOfDaysLeave) and the type of the leave is either Medical Leave and Annual Leave. If the duration is larger that 3 days, it
generated a Leave Approval form that needs to be con rmed by an external user.

After publishing the process, it can now be integrated to SAP Build Apps. First, follow the Prerequisites and the Integration
Process to nd your process via Build Apps and check that all Inputs and actions are recognized correctly. In the following case,
all inputs match the ones de ned before, and we can proceed further by enabling the process:

This is custom documentation. For more information, please visit the SAP Help Portal 104
 8/29/2024

Next, for ease of development, create a page variable called inputs of type object. In that variable, add all inputs from the
process inputs.

After that, you can create a User Interface for your application. In the case of this tutorial, we're adding 5 Input elds and
binding their Value eld to the inputs variable's keys accordingly.

This is custom documentation. For more information, please visit the SAP Help Portal 105
 8/29/2024

Next, choose the button element in the UI and open the Logic canvas, found at the bottom of the screen. Drag the Trigger
process function on the canvas and connect it to the Component tap event. Doing so, will create a logic where a process is
triggered when a user presses the button.

On the right side, con gure the properties for the ow function:

In the Process property, choose the name of your process, in this case Leave Processing.

Assign each other property to the inputs variable, the same way as with Input elds.

On the image below, you can see a complete con guration.

This is custom documentation. For more information, please visit the SAP Help Portal 106
 8/29/2024

Next, to able to see the result of triggering the process, for instance the status, we can use the Set page variable ow function.
By attaching it to the top exit of the Trigger process function, we're able to access the return value of the trigger. Create a new
page variable of text type and assign the output of the Trigger process function to it:

Click on the binding icon (box-shaped icon under the Assigned value property).

Choose the Output value of another node.

Click Trigger process and choose a eld to bind. For this tutorial, choose status.

This is custom documentation. For more information, please visit the SAP Help Portal 107
 8/29/2024

Lastly, save the application and preview the application. Enter mock data in the Input elds and click the button to trigger the
process. In a moment, you should see the status of the process appear below.

In the SAP Build Lobby, we can additionally con rm that the process was successfully triggered with the exact inputs that we
entered in the app.

This is custom documentation. For more information, please visit the SAP Help Portal 108
 8/29/2024

OData Integration

Introduction
Open Data Protocol (OData) is an open protocol that makes it easy and standardized to create and use queryable,
interoperable REST APIs. OData helps you focus on your business logic while building RESTful APIs without having to worry about
the approaches to de ne request and response headers, status codes, HTTP methods, URL conventions, media types, payload
formats and query options.

Adding a New Resource

You can add a new OData integration via the 'Data' tab. Choose 'OData integration' by clicking the 'Add Data Resource'.

This is custom documentation. For more information, please visit the SAP Help Portal 109
 8/29/2024

You're presented with the initial con guration screen. Here, you need to choose the desired Authentication type and the enter
the OData Base URL. As an example, you can use a OData.org test destination:
https://services.odata.org/v4/TripPinServiceRW/. Click 'Verify URL' to connect to the destination.

Upon connecting, you're presented with the available data entities in the left-side menu. You can enable and disable them
accordingly. Choose one or more desired destinations and click "Save Data Resource". It's of best practice to create a new data
resource for every entity, unless you want to combine data between both.

This is custom documentation. For more information, please visit the SAP Help Portal 110
 8/29/2024

From here, you can start using your OData destination in your app via Data Variables or Data Components.

Query Methods

OData supports several request methods, similar to REST API. The basic request is "list" (Get record collection). By choosing a
desired method from the menu, you can perform advanced tests and modify the request to your requirements.

All available methods correspond to logic ow functions in the following way:

list: Get record collection.

retrieve: Get record.

create: Create record.

This is custom documentation. For more information, please visit the SAP Help Portal 111
 8/29/2024
update: Update record

delete: Delete record.

Con g

The Con g tab allows you to append a query to the destination. Query values are set in the 'Identi ers' eld in the 'Test' tab.

Test

This is custom documentation. For more information, please visit the SAP Help Portal 112
 8/29/2024
Before nalizing the OData integration, make sure to test the destination with mock data.

Conditions
Enables output ltering. Supports following methods:

Equal: Compares provided string with the property value. Displays entities with matching values.

Not equal: Ignores entities that contain the provided value string.

Less: Displays entities with a value less than provided.

Greater: Displays entities with a value more than provided.

Maximum: Limits the value to be no more than the provided one.

Minimum: Limits the value to be no less than the provided one.

Equal (case sensitive): Same as 'Equal', but is case-sensitive.

Not equal (case sensitive): Same as 'Not equal', but is case-sensitive.

Selected Fields
Allows you to include only the chosen elds in the output.

Search
Provided input is used as a search string for property values inside an entity.

Page Size & Page Number

Allows you to divide returned data into pages (groups). The Page Size de nes the number of entities in a single page, while
Page Number outputs the value of a generated page.

Schema

This is custom documentation. For more information, please visit the SAP Help Portal 113
 8/29/2024

After running a single test, you should see the response schema in the 'Schema' tab. It contains a full list of available properties,
along with their types.

REST API Direct Integration

Introduction to REST APIs

SAP Build Apps enables you to create applications on multiple platforms such as iOS, Android, and Web. Most apps need some
way to store data when the app isn't running. The data can be stored on the device itself or in an external back end, accessible
over the Internet. A common architecture for Internet services is a front end - back end model, in which an app acts as the front
end handling user interactions, while a back end stores and processes data. As it's typical that a front end (or multiple front
ends) will use a different technology stack from that of the back end, there needs to be an easy standard way to communicate
between the two. This communication in today's applications is typically achieved through the use of REST APIs.

This is custom documentation. For more information, please visit the SAP Help Portal 114
 8/29/2024

In more detail, what happens is that an app can make a HTTP request to a remote REST API, which then processes the
request and as a response returns data. The Data is typically returned in the reader-friendly JSON format. Here's an
example of a JSON data response:

{
"name": "Justin",
"lastname": "Oliver",
"salary": 3400,
"married": true,

"phoneNumbers": [
{
"type": "home",
"number": "1111 0000"
}
],

"email": "[email protected]"
}

Apps, such as ones you build with SAP Build Apps, can access this data after fetching it from an API, and they can also send data
back to an API. This is the basis for how all integrations with SAP Build Apps apps work.

Rest API as a Data Resource

A REST API direct integration type data resource essentially tells SAP Build Apps how a speci c, JSON-format HTTP REST API
can be accessed. It de nes things like a base URL, headers, query parameters, available methods, schemas, and so on. You can
create new external data resources and edit existing ones via the Data button in the top toolbar. The resource con guration is
split into base con guration and method con gurations for GET collection, GET record, POST, PUT/PATCH, and DELETE.

Base Con guration

Resource ID
This is the unique ID for the resource in your app. Good convention is to have the ID be camel case with an initial capital letter,
for example, SalesforceLeads.

This is custom documentation. For more information, please visit the SAP Help Portal 115
 8/29/2024

Short Description
A short description of this resource, shown if this resource is published in the marketplace.

Resource URL
This is the base URL shared between all methods. For example, if the path to getting a single Salesforce lead would be
https://api.salesforce.com/v2/leads/1234, where 1234 is the lead ID, your base URL would be
https://api.salesforce.com/v2/leads/. The base URL should always be con gured with a trailing slash.

Path Variables
Path variables are used to make parts of the URL dynamic. A path variable must always be linked to the base URL by including it
inside curly braces at the appropriate place in the URL. For example, to make the v2 part of the Salesforce API URL above
dynamic, you would change the base URL to https://api.salesforce.com/{apiVersion}/leads and then add a path
variable apiVersion . Path variables are always dynamic – if you wanted to set a static path variable, you should just write the
value in the URL itself.

Headers
HTTP headers to be included in every API call made to this external resource.

Query Parameters
Query parameters to be included in every API call made to this external resource.

Method Con guration

You can con gure each method for your RESTful resource separately. Switch between methods via the left panel.

Enabling a Method
Initially, all methods are disabled. To enable a method, toggle the switch near the upper-right corner of the screen.

Relative Path
This is the relative part of the URL for the current method that will be appended to the base URL when the method is called. For
example, for a traditional RESTful resource, the relative path for a GET record method would be just the record ID as a path
variable, that is, {id}.

Response Key
The JSON response from an API might include the actual data we're interested in inside a subkey of the main response object.
The response key de nes this subkey as a dot-separated path.

This is custom documentation. For more information, please visit the SAP Help Portal 116
 8/29/2024
For example, if our JSON response for a Salesforce lead was something like:

{
"data": {
"lead": {
// actual lead data here
}
}
}

We would then de ne our response key to be data.lead.

Path Variables
Path variables work just like in the base con guration, they just target the Relative path instead of the Base URL. For example,
the GET record method would likely have a id path variable.

Headers
Extra HTTP headers to be included whenever the current method is called.

Query Parameters
Extra query parameters to be included whenever the current method is called. For example, a search or limit query
parameter would only make sense when con gured exclusively for the GET collection method.

Testing Methods
Methods can be tested via the Test tab. After getting a successful response, you can auto-detect and set the method schema
from the response with the Set schema from response button.

Method Schemas
The Schema tab lets you con gure schemas for the speci c method.

SAP BTP Destination REST API

SAP Build Apps' BTP Destinations REST integration allows you to interact with SAP systems in a familiar CRUD method (create,
read, update, and delete). Create a new Data entity in the SAP Build Apps classic data entities section of the DATA tab.

This is custom documentation. For more information, please visit the SAP Help Portal 117
 8/29/2024

Base Con guration

Base is a settings tab that allows you to con gure your data resource for every single request. Every BTP Destination REST API
integration shall start with making sure that Base is con gured correctly.

Data resource name

Choose any desired name that allows you to distinguish this data resource from others.

BTP destination name

Choose your BTP destination from the drop-down menu. In case some are missing, check out SAP Systems article for more
information.

Data resource description

Write a description for the resource, to be displayed in the Data tab card.

This is custom documentation. For more information, please visit the SAP Help Portal 118
 8/29/2024

Resource schema

De ne a resource object that is used as a template for every request. Every new eld is added as a new JSON key. Fields can
have a speci c le type, including list, allowing you to send a list of objects inside your request. Refer to the next image as an
example, where a valid Resource schema is presented with its JSON equivalent.

Common request headers

De ne HTTP headers sent with every request.

Additional Inputs

Additional inputs supported by the resource.

Available Methods
List of all methods with corresponding REST API terminology:

list - GET

retrieve - GET

create - POST

update - PATCH

replace - PUT

delete - DELETE

Executing a Request

Con g

This is custom documentation. For more information, please visit the SAP Help Portal 119
 8/29/2024
Relative path and query allow you to de ne a speci c location on the OData destination. Leave it blank in case your URL
is already pointing to the correct destination.

With Request headers, you can add HTTP headers relevant to this speci c request.

Request body mapper and Response mapper allow you to prede ne the schema for the request and response of this
method.

Test

Click Run Test to execute a request.

If the request is successful, Autodetect schema from response becomes click-able. Use to automatically map the
response into the schema used later in developing the application.

Schema

If you chose to autodetect schema in the previous tab, here you'll see the response schema as an object. This gives you a
great overview of the elds and their types.

Use Cases
Learn to integrate SAP Build Proces Automation to your project.

SAP Build Process Automation

In this guide, we provide step-by-step instructions for connecting SAP Build Apps and SAP Build Process Automation (SBPA),
allowing you to seamlessly combine their functionalities and take advantage of the bene ts of both. Whether you're a developer
looking to enhance your project or a user looking to expand your capabilities, this guide provides the information you need to
successfully integrate these platforms.

 Caution
The following article describes an outdated way of integrating SAP Build Process Automation. For the new native integration,
check out SAP Build Library.

Subscribe to Relevant Services

1. Booster: Automatic Con guration

2. Subscribe to SAP Build Process Automation

Create an SBPA Instance

First, we need to create an SAP Build Process Automation instance to access the API trigger. Creating a new instance
generates unique credentials, needed to access SBPA.

In the subaccount view, navigate to Instances and Subscriptions via the menu on the left. Here, click Create ( ) to
create a new instance. Con gure the elds as follows:

Service: SAP Build Process Automation

Plan: standard - instance

Runtime Environment: Cloud Foundry

Space: Assigned automatically

Instance Name: Any name

This is custom documentation. For more information, please visit the SAP Help Portal 120
 8/29/2024

After a short while, your newly create instance should appear in the Instances section. Using the three-dot menu, click on
Create Service Key.

After the key is provisioned, open it and take note of the following elds:

1. clientid

2. clientsecret

3. url

These values are needed later in the "Destination Con guration" section. It's of good security practice to generate one key per
destination to avoid reusing them.

Create an Invoice Approval Process

This is custom documentation. For more information, please visit the SAP Help Portal 121
 8/29/2024
Next, we can create the SAP Build Process Automation project. For this guide, we're going to be using the Create an Invoice
Approval Process template available in Build Lobby. Feel free to use your existing project, but keep in mind that this may affect
later instructions, especially the input eld names and request schema.

After installing the template, navigate to the Get Invoice Details tab and Remove the "Invoice Request Form" from the Trigger
tile.

Click anywhere on the canvas and choose Input, then Con gure from the right side tab.

Here add four inputs: FileName, FolderName, EmployeeName, EmployeeEmail. Make sure they're all String type. Save your
entries.

This is custom documentation. For more information, please visit the SAP Help Portal 122
 8/29/2024

On the Trigger tile, click the plus sign (+) and choose New API Trigger in the API eld.

 Recommendation
You may notice that some of the action tiles now have a red circle in the top-right corner. If that is the case, click on each tile
and modify the highlighted values with the recently created inputs. This happens because the old bindings from the "Invoice
Request Form" are discarded.

Finally, release and deploy your project. During the deployment of the Process, Select No trigger creation.

Once the deployment is nished, go to Monitor –> Manage –> Process and Work ow instances via the SAP Build Lobby's top
bar. Copy the ID of the process that would be used to trigger your process. If you're using the template, choose Get Invoice
Details. You will need this ID while con guring the request in SAP Build Apps.

Destination Con guration

To ease the integration to SAP Build Apps, we can con gure a BTP destination. This is important since Build Apps BTP
Integration automatically performs authentication for every request, removing the necessity to provide credentials every time.
Return to your subaccount view and navigate to the Destinations tab. Click New Destination and ll in the elds:

This is custom documentation. For more information, please visit the SAP Help Portal 123
 8/29/2024
Name: Any desired name

Type: HTTP

Description: Any description

URL: https://spa-api-gateway-bpi-eu-prod.cfapps.eu10.hana.ondemand.com/public/work ow/rest/v1/work ow-

instances

Proxy Type: Internet

Authentication: OAuth2ClientCredentials

Use mTLS for token retrieval: Off

Client ID: Paste the clientid noted previously

Client Secret: Paste the clientsecret noted previously

Token Service URL Type: Dedicated

Token Service URL: url/oauth/token, where url is the one noted earlier from the service key

Token Service User: Blank

Token Service Password: Blank

Additionally, enable the following Properties:

BuildApps.Enabled

HTML5.DynamicDestination

WebIDEEnabled

Your con guration should look similarly to the image below. Save your entries and check the connection with a button located
below the elds. Proceed with the next steps if you see a green checkmark.

 Recommendation
If your subaccount is located in the US region, modify the URL to have us10 instead of eu10.

REST API Integration in SAP Build Apps

This is custom documentation. For more information, please visit the SAP Help Portal 124
 8/29/2024
Create a new SAP Build Apps project or open an existing one. Open the Data tab and create an SAP BTP Destination REST API
integration data entity.

In the BTP destination name, choose your destination created earlier. Next go to list tab and click Run Test in the test tab. You
should get a 200 or 201 response code to check that the destination was connected successfully. Otherwise, verify your
con guration in the Destinations tab.

In the Base tab scroll to Resource schema section. Here, we can con gure the request body JSON in a visual way. Use the larger
+ ADD NEW button to create two entries: context (Object) and de nitionId (Text). Next, using the smaller button add object
properties: lename (Text), foldername (text), employeemail (Text) and employeename (Text).

Refer to the image below for an expected result:

This is custom documentation. For more information, please visit the SAP Help Portal 125
 8/29/2024

Navigate to the create tab to con gure the Process triggering event. Bind the Request Headers to a list of values and enter the
following:

Header name: Content-Type

Header value: application/json

Go to the TEST tab, enter desired values* and click RUN TEST. You should get an OK (201) response, indicating that the
work ow has initialized.

*instanceId should be the process id noted earlier.

This is custom documentation. For more information, please visit the SAP Help Portal 126
 8/29/2024

You've now successfully integrated SAP Build Process Automation to SAP Build Apps. You can use this data resource together
with data-related ow functions like Create record or Get record collection.

Further Reading
Here are some amazing resources that will help you further with the integration:

How to call SAP Build Process Automation APIs from SAP Build Apps

SAP Build demo at SAP TechEd: How we did it

SAP Build Process Automation API Reference

Binding Data
A key concept in the App Builder is the ability to bind component properties to data stored in variables. The basic use case is
binding a property directly to a variable. For example, you can bind a Title component's Content property to your
CurrentCar.brand data variable. Bindings are resolved automatically. For example, whenever you fetch new data from the
back end and store it to your data variable using the Set data variable ow function, the component updates to show the new
data.

If you're familiar with React, you might be wondering where you should de ne your state management logic. In the App Builder,
this is all handled internally. There's no need to de ne anything – you just bind your data, and once the bound variable changes,
your component state updates too.

Binding Component Properties

This is custom documentation. For more information, please visit the SAP Help Portal 127
 8/29/2024

To bind a component property value directly to a variable, click the binding icon to the left of the value input eld, this opens up
the binding editor.

From the binding editor you can choose the binding type, for example a page variable (under 'Data and Variables'). In case your
bindings are type-speci c: if your page variable is type true/false and the component property is expecting type Text, then the
binding editor indicates the page variable as "incompatible".

Formulas and Incompatible Types

Formulas show a warning if they resolve to a type that's incompatible with the current property binding. Similarly, a warning is
shown if the formula result type is unknown, such as when accessing a property of an object without explicit schema, since such
a property can be "anything".

This is custom documentation. For more information, please visit the SAP Help Portal 128
 8/29/2024
However, you can still bind incompatible data to properties via formulas – you can just ignore the warnings and click OK, and the
binding will be resolved normally in the runtime. This isn't advised, and passing incompatible data to a component (or a ow
function) can cause issues.

To remove the binding, use the binding editor to select one of the static value types (Text or Number).

Binding Component Styles

Component style properties can be bound directly only to theme variables.

To bind a style property, click the link icon next to the value input eld, and pick the desired option from the dropdown. The input
eld changes to show the calculated value of the theme variable as a placeholder text.

To remove the binding, click the link icon again and select Default value (unset).

Binding Formulas
A powerful feature of the App Builder is an ability to bind formulas to component properties.

For example, you might have dates in ISO 8601 format in the data that's coming in from your back end, e.g. 2019-11-
28T15:00:39.442Z stored in pageVars.lastPurchaseAt. To display this in a nice format in the app, you can select
Formula from the binding editor, and write:

FORMAT_DATETIME_LOCAL(pageVars.lastPurchaseAt, "MM/DD/YYYY HH:mm"),

Which results in your UI displaying 11.28.2019 17:00.

This is custom documentation. For more information, please visit the SAP Help Portal 129
 8/29/2024

Formula bindings are recalculated automatically when any of the dynamic parameters change. Thus, whenever you update your
lastPurchaseAt page variable, your UI will automatically update accordingly.

Formulas can be used in style bindings, too – for example, you could use systemVars.runtime in your formula to render
different styles if the app is running on native vs. mobile.

Preview Value
Below a bound value for a component property, there's another input that lets you enter a preview value.

The preview value is rendered on the view canvas only, and is useful when you want your view to look as close as possible to
what the actual app will look like during runtime. The label is bound to a page variable, but UI will display "Finland":

Emptying the preview value shows the binding key or formula directly on the view canvas, e.g. current.name or
AVERAGE(pageVars.prices) .

Repeated Components
A component can be set to repeat itself based on your app data via the Repeat with component property.

This is custom documentation. For more information, please visit the SAP Help Portal 130
 8/29/2024
By default, the Repeat with property is set to Not repeated, so only a single instance of the component is rendered.

To make the component repeat, change the value type to one of the available options. You can repeat from a List, a formula that
resolves to a List of Objects, or any dynamic variable whose type is a List of Objects.

Runtime vs. View Canvas

The number of repeated components during app runtime is based on the length of the List: one component instance is rendered
for every object in the List.

In the view canvas, however, repeated components always render three extra instances, overlaid with blue stripes, to denote
that "here will be some number of repeated items".

If the source List is empty, no components are rendered during runtime.

Like other bound properties, repeated components react to changes in the source binding: adding an item to the source List
causes an additional component to be rendered.

Currently Repeated Property Value

A repeating component has a new special value type available for its properties: Currently repeated property value.

This is custom documentation. For more information, please visit the SAP Help Portal 131
 8/29/2024

For each rendered instance of the repeated component, this property type resolves to a different value, based on which item in
the source array is the "current" one.

For example, if you're repeating from an array of countries/regions where the country object has a name eld, and you bind your
repeated list component to display. Currently repeated property value name, the rst list item shows the rst country/region's
name, the second one the second country/region's name, and so forth.

Choosing the Bound Field

After selecting this value type, the value input changes to a dropdown where you can choose one of the elds in the repeated
array's schema.

For example, if you were repeating an array of countries/regions from the RestCountries data resource (available on the
marketplace), you would see elds like name and nativeName and alpha2Code.

This is custom documentation. For more information, please visit the SAP Help Portal 132
 8/29/2024

Usage Within Formulas

Currently repeated property values are available under the repeated.current namespace in formulas.

Usage Within Flow Functions

When a component is repeating, any ow functions run in its context also have the currently repeated property values available.

Thus, if you're repeating a list of data from the back end, you can easily pass the ID of the selected record to a new page by
passing current.id as a page parameter via the Open page node.

Nested Repeats
If the objects in your source array contain another array of objects, you can create a nested repeat.

This is custom documentation. For more information, please visit the SAP Help Portal 133
 8/29/2024
The steps to do this are:

1. Repeat a container.

2. In the repeated container, select a child component.

3. For the child component's Repeat with property, choose Currently repeated property value as the value type.

4. Set a Repeat as key, such as currentLanguage .

5. Choose a key that contains an array of objects, such as languages when repeating countries/regions

Now, a new binding option appears in the context of the nested-repeated component, which is Currently repeated property
value of 'currentLanguage', or whatever you named your Repeat as.

The nested repeat values are available in formulas under the repeated namespace, e.g.
repeated.currentLanguage.nativeName.

Data Variables
A data variable, similar to a page variable, only exists in the context of the current page. The main feature is that it gets its
schema from the data resource it points to, and it comes with included default logic.

Using Data Variables

After you've con gured a data resource via the Data section in the global toolbar, you can add a new data variable via the
Variables con gurator, accessible via the switch at the top of the view canvas, and then selecting Data variables from the menu
on the left.

You can add a new data variable onto the current page by clicking the Add data variable button and choosing a data resource
from the dropdown.

Data Variable Name

Name used to reference the data variable in the Composer UI and elsewhere. For example, a data variable with the name
RestCountries would be referenced by data.RestCountries in formulas.

It's good practice to name your data variables so that their type can be inferred, e.g. CurrentRestCountry for a single data
record type variable.

Data Variable Type

There are three types of data variables:

Collection of data records – matches the GET (ALL) route of a REST API direct integration, and gives you a collection of
data records, represented as an array of objects

Single data record – matches the GET (ONE) route of a REST API direct integration, and gives you a single data record,
represented as an object

New data record – initializes an empty data variable, useful when creating, e.g., a form to create records into the back
end

This is custom documentation. For more information, please visit the SAP Help Portal 134
 8/29/2024
Don't change the data variable type after you start using it, as that can lead to issues.

Data Variable Properties

A data resource can also de ne some dynamic properties that can be con gured when using a data variable. Some of them are
required (can't be left empty) and some are optional.

For example, a Single data record type data variable would typically require some kind of ID property, so that the back end
knows which record to fetch. This would be a required property.

Similarly, a Collection of data records type might give you an option to de ne a search query, or limit/skip parameters for
pagination – it all depends on the connected data resource.

Data Variable Logic

A data variable comes with default logic that determines how it populates itself with data from the back end.

You can view this logic by selecting the data variable and clicking the Add logic button at the bottom of the screen.

Here we can see the relationship between the data variable and the data in the back end.

We rst fetch the data from the back end via the Get record collection ow, at which point the data exists just as an output
argument of the node. If we didn't have any subsequent nodes, the ow execution would terminate and the data would just be
thrown away.

However, we then use the Set data variable ow function to set the data to the variable. This makes it available to be used in
view component bindings or as inputs of other logic nodes.

This is custom documentation. For more information, please visit the SAP Help Portal 135
 8/29/2024
As we can see above, the Set data variable node uses the Output of another node binding type to use the data fetched by the
previous node.

For a Single data record type data variable, the logic is similar, but instead a single record is fetched with the Get record ow
function.

For a New data record type data variable, the logic simply initializes the data variable to an empty object when the page
mounts.

Data Variable Properties in the Logic Canvas

The same properties that can be con gured for a data variable via the sidebar are available in the Get record collection or Get
record nodes – in fact, changing properties in the sidebar for the data variable itself sets them for the ow function nodes
under the hood.

Changing the Logic

The data variable's logic canvas is just a contextual place to handle data loading logic. If you wanted to, you could remove all the
nodes here and reimplement the logic in your page's root canvas, and the effect would be the same.

This also means that all ow functions can be used here, and you can construct as complex logic as you like.

For example, you could sort your data before setting it to the data variable by using a formula instead of the direct Output of
another node binding.

Or if your Get record node's output would be an object with two properties that each contain an array, you could de ne two
page variables with the correct schema and set them separately of one another.

You can always reset back to the default logic with the Reset data variable logic button, available in the properties panel when
the data variable itself is selected.

Schema Editor
Schema editor is an environment for de ning the Resource Schema of a Data resource or a Data Component.

Data Resource
Schema editor is a dedicated environment for de ning the Resource Schema of a Data resource. You can add, edit, and delete
elds your data resource can accept and preset the allowed types to specify the expected values. You nd yourself using the
schema editor while con guring On-Device storage, creating a Firebase/Firestore connection, or creating Data Components.

This is custom documentation. For more information, please visit the SAP Help Portal 136
 8/29/2024

Via the "ADD NEW" button you can add new entries. Upon clicking, you should be presented with a pop-up screen displaying eld
types to choose from.

There are six eld types:

1. Text - A text string

2. Number - Integer or a number with a oating point

3. True/False - Boolean

4. List - A list of objects

5. Object - A single object with an unde ned quality

6. Any value - Removes a strict type de nition; Field can take any value.

This is custom documentation. For more information, please visit the SAP Help Portal 137
 8/29/2024

You can delete a eld via clicking the "Delete" button at the bottom of its properties.

You can show an example for each property via the "Show Examples" button on the top-right corner. It's always useful to verify
the correctness before using a Resource.

Data Component Schema

In Data Components, schema can be xed, requiring a certain number of elds with xed types, or arbitrary, specifying only
accepted eld types and a minimum/maximum number of elds. Therefore, the schema editor differentiates in its con guration
method.

Fixed Schema Editor

This is custom documentation. For more information, please visit the SAP Help Portal 138
 8/29/2024

The Fixed schema adapter is con gured the same way as the Data Resource one. Use the "Add New" button to add new entries
and choose the appropriate type from the popup.s

Arbitrary Schema Editor

The eld con guration for an arbitrary adapter stays similar to the xed one. It has fewer options, as an arbitrary adapter is
meant to scale with the provided data. What stands out is a mandatory eld for required number of elds. Here you can limit
the number of elds that an adapter can take by setting the 'Maximum' value.

Pages

This is custom documentation. For more information, please visit the SAP Help Portal 139
 8/29/2024
Pages are the main structure for what you see and interact with in a SAP Build Apps app. Your app will most likely have multiple
pages, so you can move between them to access different functionalities You can read more about this in the navigation guide.

The app builder has a single page open at any given time. You can change the active page and create new ones via the
dropdown on the left side of the global toolbar.

Page Structure
Every page has a base container component called Page layout, which acts as the parent for all the other components on the
page. It always has a horizontal layout direction and by default, some padding to make it nice to just drag-and-drop some
components in.

The base container can be selected in three ways:

clicking on an area on the view canvas not occupied by another view component

clicking the grey area around the view canvas

clicking the Page layout item in the layout tree

When the base container is selected, you can con gure properties and styles for the page as a whole.

Global Canvas
Global canvas is a page that exists in the context of the whole app. Here, you can edit all variables that exist within your app and
create app-wide logic.

Page Properties
When the page is selected, there are several properties that can be viewed or edited via the properties panel in the right
sidebar.

Name
Human-readable name for the page. Used in, e.g., property dropdowns where a page can be selected \(such as when using the
Open page ow function\) and in the page selection menu. By default, this is also what is shown in the navigation bar when this
page is open.

Short Description
Description of the page, intended for instructing other developers of the purpose of the page.

ID
Internal ID for the page. Corresponds to the index in the SAP Build Apps URL in your browser. While this is the actual value used
by internal APIs, in most cases, this value is resolved for you automatically, and you don't have to worry about it.

This is custom documentation. For more information, please visit the SAP Help Portal 140
 8/29/2024

Show Spinner on Page Load

If toggled on, the page shows a centered spinner instead of page content until the Hide spinner ow is called. This can be useful
when, e.g., navigating to details page that loads some data from the Internet, allowing you to provide direct feedback for user
interaction without showing a broken UI.

Page Styles
The Style tab gives you access to the following style properties.

Padding
Used to set the padding for the base container on your page. Bound to the $paddingPageHorizontal and
$paddingPageVertical theme variables by default.

Background Color
Background color for the page. Bound to the $colorBackground theme variable by default.

Disable Scroll
If checked, you can't scroll the page on mobile. This is useful if you want to create your own scrollable section with the Scroll
view component.

Stretch to viewport height

If checked, the base container grows to ll the whole viewport. This is useful if you want to position a component at the botto,
e.g., m of the screen with absolute position.

Disable Safe Area

Before the 'notch' design, introduced by Iphone X, UI layouts would go edge to edge on the screen, taking up all available space.
However, with the new design Apple had to introduce the 'safe area', which is a feature that restricts the edges of View
Components so they don’t get clipped by the rounded corners and notch of the iPhone X. In SAP Build Apps, disabling the safe
area allows the UI layout to take out all possible space on the screen.

Sample Data
Sample Data is a powerful feature designed to streamline your testing and debugging work ows by providing a means to
generate and use mock data in any data resource.

The primary purpose of Sample Data is to enable developers to quickly and easily generate and use mock data for testing and
debugging purposes. This feature helps you:

1. Speed up the development process by reducing the need to wait for actual data from external sources.

2. Ensure that your application logic and UI components work as expected with a wide range of data inputs.

3. Protect sensitive data by avoiding the need to use real data for testing and debugging purposes.

This is custom documentation. For more information, please visit the SAP Help Portal 141
 8/29/2024
Furthermore, using sample data doesn't require any modi cations to the existing app logic, since it temporarily overrides all
real data in preview. See Using Sample Data for more information.

Enable Sample Data

Sample data becomes available once a data resource has been enabled. For instance, once you integrate your Visual cloud
functions project. You may notice a new button: Browse Sample Data. For other resources, like REST API integration, Sample
Data can be accessed by clicking the three dots icon in the top right corner of the data tile.

Visual cloud functions, On-Device storage, BTP Destinations:

SAP Build Apps classic data entities:

In Visual cloud functions and BTP Destinations, Sample Data editing is speci c to the selected data entity. In other integrations,
like API, the sample data is applicable to the whole data resource.

Browse Data
The Sample Data data browser uses the same functionality as Visual cloud functions. You can sort or search through your
entries and add new ones with the New Record button.

This is custom documentation. For more information, please visit the SAP Help Portal 142
 8/29/2024

Creating Records
Creating new records within Sample Data is the same as in real data. Simply ll in all of the elds and click Save Record. Your
entries are now available to be used within Preview.

Navigation
Navigation for your app can be con gured via the 'Navigation' section of the global toolbar at the top. You can use Built-in
navigation, or create a custom navigation list for your app.

Built-in navigation
This is custom documentation. For more information, please visit the SAP Help Portal 143
 8/29/2024

Navigation header bar

This section con gures if the navigation header bar at the top of the app should be enabled or disabled for all pages.
Additionally, you can decide if you want to show the current page's name in the header bar or a static text.

It is currently not possible to add buttons to the navigation bar, apart from the system native back button that appears.

Navigation menu
This section de nes the native navigation menu for your app.

By default, the navigation menu is enabled. If you disable it, you need to de ne the single initial page for your app.

The navigation menu is different depending on the platform:

Native iOS/Android – horizontal tabs at the bottom of the screen

Web browser – vertical tabs on the left side of the screen

For each navigation menu item, you can con gure icon, tab name and page the tab points to.

You can change the order of the menu items via drag-an

Styling the navigation elements

Navigation header bar and tab bar colors are determined by the theme variables under the Native theme group.

Navigating between pages

You can use the Open page ow function to navigate to a new page.

The Parameters property lets you pass data to the newly opened page – the values set in the ow function will be available as
page parameters in the opened page.

Going back
To navigate to the previous view, you can use the native back button on mobile, or the browser back button in web.

Alternatively, you can call the Navigate back ow function.

To go back multiple pages, you can use the optional Number of pages input argument.

Navigation stack
Composer navigation operates on the concept of a navigation stack.

A navigation stack has a root page, on top of which additional pages can be opened. Calling Navigate back on the root page
does nothing.

This is custom documentation. For more information, please visit the SAP Help Portal 144
 8/29/2024
In a mobile app that has tab navigation, every tab has its own navigation stack. Thus, switching between tabs preserves the
state of each tab.

On web, the navigation stack exists – if you switch to a new tab and try to use Navigate back it fails – but the native navigation
history tracks across tabs. Thus, switching from tab A to tab B and clicking the browser native back button brings you back to
tab A.

To go back to the root of the navigation stack, there's the Navigate back to root ow function.

Setting target page dynamically

In some cases, you might want to choose the target page dynamically. For example, you have a repeated list, but clicking an
item in the list should navigate to a speci c page depending on the item type.

However, since the selected page ID determines what parameters can be passed to the opened page, it's not possible to set a
dynamic target page with a single Open page ow function – that would mean the schema of the parameters object would be
completely dynamic, which is not something we want to encourage.

Instead, what you want to do is use an If condition current object (in the case of a repeated iitem), and then have two
separate Open page nodes that each open a different page.

Custom navigation
To use custom navigation instead of the built-in navigation in your app, you can create a ow function to split the logic into two
paths depending on e.g. a eld of the navigation list that works with a navigation component in the app.

Creating a navigation list

owNavigation lists can be created using the "Custom navigation" page of the Navigation tab.

Your app can have one or several navigation lists, where you can choose to include any pages from your app and pick icons for
them. You will be able to use the de ned lists with components that have a navigation type con guration property. They will
not appear in the built-in navigation.

You can add items to a list using a button on the bottom right. Every item has an icon property, allowing you to choose an icon
from a library; a 'Tab name' which de nes a label name, and 'Page' that stores the page that will be used with that item. Here is
an example of a list with three con gured items in it:\

This is custom documentation. For more information, please visit the SAP Help Portal 145
 8/29/2024

Creating a navigation component

Components with a navigation type property can be used together with your app's navigation lists to create custom
navigation in the app.

The navigation property type is a list of objects with page_name, font_icon_name, page_uid and title properties. It
can be bound to a navigation list de ned on the Navigation tab. The property type only exists for components, not for variables.

How to create a custom navigation component for your app

First, create your custom navigation component's layout by placing a single Container on the view canvas. Choose the created
container and follow the "Convert to new component" in the Properties bar to turn the container into a custom component.

This is custom documentation. For more information, please visit the SAP Help Portal 146
 8/29/2024

While in the component editor, switch to 'Properties' view and add a navigation type property for the component:

This is custom documentation. For more information, please visit the SAP Help Portal 147
 8/29/2024

Without exiting the component editor, drag a new container inside the navigation component and put an 'Icon' and 'Text' view
components into it. Adjust the container layout to your preference.

Choose the created container and repeat it with the navigation property you just created. You can do so by selecting 'Repeat
with', then choosing 'Component properties' -> 'Composite component internal property'. You should now see several copies of
the container. Use the "Open page" ow function on the "Component tap" event of the navigation item (2nd container) to make
the component functional. "Page to open" property should automatically bound to current.page_uid. Bind the text's
content and icon's name to current.title and current.font_icon_name respectively. Lastly, exit the Component
Template Editor and bind your app's custom navigation list to the component you just created to make it work.

This is custom documentation. For more information, please visit the SAP Help Portal 148
 8/29/2024

NOTE: Remember to add your custom navigation component on each page of the app where you want it to be visible!

Toolbar
The global toolbar is located at the top of the app builder UI. It gives you access to resources and tools that have to deal with
the context of your entire app.

UI Canvas
Switch to the UI canvas from any other section of the toolbar.

Launch
The launch section gives you access to the following resources:

Preview your app

Access the SAP Build Apps preview app for the various supported platforms.

Build your app

Con gure build settings and create stand-alone binaries and web deployments for your app.

Theme
The theme section gives you access to the following resources:

Colors

Create or edit content palettes used in component styling.

This is custom documentation. For more information, please visit the SAP Help Portal 149
 8/29/2024

Theme variables

Theme variables contain the default settings for a theme. You can customize the existing variables or you can also add new
ones.

Fonts

The font manager allows you to manage the fonts available in your app, as well as add new ones.

Navigation
The navigation section lets you con gure the native navigation menu for your app, as well as how the top navigation header bar
works.

Data
The data section lets you create and manage your app's data resources.

Auth
You can enable authentication for your app in this section.

Help
The help section contains links to useful resources about SAP Build Apps.

Marketplace
The Marketplace can be accessed via the Left sidebar or the Logic canvas. It allows you to nd and install view components, ow
functions, and data resources, made by the SAP Build Apps team.

Search
This is custom documentation. For more information, please visit the SAP Help Portal 150
 8/29/2024

The Search eld is located at the top of the Marketplace modal. The results are automatically refreshed upon entering a query.

The search algorithm includes descriptions and matches partial strings, making it possible to nd the desired content from
unexact searches.

In addition to the eld search, you can use the 'Search page'. It provides more search options:

Filter by item type

Below the search eld, you can lter results to a speci c item type. The available types are:

All - Displays all available items in the marketplace.

View component - Shows UI elements only.

Flow function - Logic functions.

Filter with tags

This is custom documentation. For more information, please visit the SAP Help Portal 151
 8/29/2024

You can also lter results by tags. Choosing a tag adds it to the search. You can unselect active tags by clicking the X symbol
next to them. Each item type has its own set of tags, so changing the active item type changes what tags are available.

Adding Items to Your App

To add a Marketplace item to your app, click the Install button. Depending on the item type, it's available in one of the following
ways:

This is custom documentation. For more information, please visit the SAP Help Portal 152
 8/29/2024

View component

The component is available via the Installed tab of the view component library for the current app.

Flow function

The ow function is available via the Installed tab.

Data

The added data connector is available in the Data section, accessible via the top bar. There, you can con gure required inputs,
such as API keys.

Application logic

App logic overview

This is custom documentation. For more information, please visit the SAP Help Portal 153
 8/29/2024
App logic in SAP Build Apps consists of two main concepts: app state and logic ows.

Most of what happens in a SAP Build Apps follows the same pattern:

1. An event is triggered by the runtime or by user interaction, such as Page mounted or Button tapped

2. Attached logic ow functions are run, for example Take photo or Get data record collection

3. The end result is used to change the app state via a logic ow node, for example

a. Adding the photo taken by the user to an array of photos stored in a page variable named galleryPhotos.

b. Setting the data fetched from the backend to a data variable named todoItems

4. The change in app state ows to component state through user-de ned bindings

5. The UI is re-rendered based on the state change, causing a new photo to appear in a gallery or a list of data to be
populated

In real apps, logic ows can obviously be as complex as required, but they all follow the same pattern of event – logic – state
change.

Variables state
Variables state is essentially the data that's stored in the device memory during your app's runtime.

It's the same concept as the in-memory variables that are found in any programming language – there's just a lot more
prede ned and kept up-to-date automatically than you'd get with a fresh program.

Variables state includes things like data your app has fetched from a backend, text inputted by the user to an input eld, the
current loading state of a page, device operating system, latest geolocation value and so on.

Component state
Component state describes what's going on in your various view components: if a button is visible or not, what the placeholder
text in an input eld is, what icon to display, the color of a card component's background and so on.

You can think of component state as your HTML DOM node attributes or React component props.

Component state is linked to variables state by binding a component property to a variable.

Logic ows
Logic ows consist of a triggering event and attached ow functions. Each event and ow function is represented by a node on
the logic canvas, with execution order de ned by connecting wires between the nodes.

This is custom documentation. For more information, please visit the SAP Help Portal 154
 8/29/2024

In the example above, we have a Component tap event that triggers the Scan QR/barcode ow function. This opens a QR
scanner dialog. Once the user has scanned a code (or cancelled the dialog), the logic ow continues executing.

The logic ow can branch depending on what happened during the logic ow execution. In the example above, a successful scan
proceeds to the Open page ow function, a cancelled dialog shows a Toast, and an error produces an Alert.

Every ow function's description tells you when the different outputs are triggered.

App Logic Canvas

Located at the bottom half of the app builder view, the logic canvas is where you construct your app's logic.

Accessing the logic canvas

By default, the logic canvas is hidden for components that have no custom logic attached to them.

To open the logic canvas, select a component (or the page) and click the Show logic for <Page Name> bar at the bottom of the
view canvas.

This is custom documentation. For more information, please visit the SAP Help Portal 155
 8/29/2024

If a component has custom logic attached to it, the logic canvas will open automatically whenever that component is selected.

Creating logic ows

All logic in a SAP Build Apps is built with logic ows: series of interconnected nodes that start with an event node, then proceed
through a series of ow function nodes to determine what happens in your app.

There is a unique logic canvas context for every component. Thus, when you have a button selected, you don't see the logic for
the page itself or an input eld, and so on.

The wires between nodes determine the order of execution: inputs are on the left and outputs on the right.

Connecting logic nodes

To connect logic nodes, click and drag a wire from one of the outputs to another node's input.

Alternatively, you can drag a node on top of an existing wire between two nodes, which then causes the connection to be
rewired so that the dragged node is run between the two original nodes.

To delete a wire, you can select it and press the backspace button on your keyboard.

A single output can be wired to trigger multiple nodes.

Deleting logic nodes

You can delete a logic node by selecting it and pressing backspace.

This is custom documentation. For more information, please visit the SAP Help Portal 156
 8/29/2024
You can also click the x icon in the blue node toolbar that appears when you select a logic node.

Duplicating logic nodes

You can duplicate logic nodes by copying them to the clipboard with CMD+C and pasting with CMD+V (or CTRL+C/CTRL+V in
Windows).

You can also click the duplicate icon in the blue node toolbar that appears when you select a logic node.

Selecting multiple logic nodes

You can select multiple logic nodes in several ways:

Click and drag a selection rectangle to select the nodes that fall inside it

Select a node, hold shift and then click on another node. All interconnected nodes will be selected.

Select a node, hold CMD (or CTRL on Windows) and click another node. Just the clicked nodes will be selected.

Moving logic nodes

In addition to dragging nodes around with your mouse, you can move the currently selected nodes with the arrow keys.

Snap to grid
By holding shift while you move logic nodes either via the keyboard or via your mouse, you can snap the nodes to a grid,
producing cleaner layouts.

Inputs, outputs and wires

Every ow function node always has a single input on the left. Event nodes have no inputs, as they are triggered by the runtime
instead of as part of a logic ow.

Every logic node has zero or more outputs. After the ow function has been executed, one of the outputs is triggered.

Logic ows are executed in sequence from left to right, starting with an event node and then proceeding through each node.

Multiple outputs
When a ow function has multiple semantically different outcomes, it usually has multiple outputs.

This is custom documentation. For more information, please visit the SAP Help Portal 157
 8/29/2024

In the example above, we start with a tap event, then show a QR code scanner to the user. The possible outcomes are as
follows:

If the a code is successfully scanned, we continue from the rst output, opening a page

If the user cancels the scan dialog, the second output is triggered and we show a toast message dialog to the user

If an error occurs while scanning the QR code (for example, the device has no camera), the third output is triggered

Another good example is the If condition ow function – if the condition given as an input argument is true, the rst output is
triggered; if not, the second output is triggered.

Flow function properties panel

Like view components, you can con gure how a ow function works by selecting it on the canvas. The right-side properties panel
changes to show you con guration options.

Description
At the top of the properties panel, you can see and expand a description of what the ow function does. This description also
explains when the conditions under which the various outputs are triggered.

Input arguments
Most ow functions take some input arguments, which affect how the function is run. Some input arguments are required and
some are optional.

For example, an Alert needs to be given at least a title text to show in the dialog to function properly, but you can also add a
message text to show below the title.

Some arguments are required but have a sensible default value, so they are shown under the Optional inputs section. For
example, you can give the dismiss button label text for Alert, but it defaults to "OK" – so in most cases, you don't need to worry
about that.

There are many different types of input arguments, from pages available in your app to an object with a speci c schema.

Output arguments
This is custom documentation. For more information, please visit the SAP Help Portal 158
 8/29/2024
The properties panel also describes the different output arguments available for use in subsequent ow functions, including
their schema.

Output arguments describe results produced by running the ow function, such as data from a backend, a photo taken by the
user etc.

Action buttons
When a logic node is selected, there are several action buttons available (some of which might be hidden depending on the
selection):

Remove node – deletes the selected node from the canvas

Create a new ow function – turns the selected nodes into a new composite ow function

Show in marketplace – shows the selected ow function in the marketplace

Isolation mode
Isolation mode allows you to edit composite ow functions you or others have created. To enter isolation mode, double-click on a
composite ow function.

Logic functions
The ow function library panel gives you easy access to the various ow functions you can add to your app. It takes up the
bottom half of the left sidebar.

The panel is divided into three tabs.

Core – core ow functions created by SAP Build Apps, common in most apps

By me – ow functions created by you for this app

Added – ow functions added from the Marketplace for this app

Under the tabs, you can access the Logic Marketplace. If ow functions you've added via the Marketplace to your app have new
updates to them, a red badge will be shown with the number of pending updates.

Core tab
The core tab contains basic ow functions that are divided into simple categories.

Navigation – present dialogs and capture user input

Open page

Navigate back

Variables – manipulate in-memory variables

Set app variable

Set page variable

This is custom documentation. For more information, please visit the SAP Help Portal 159
 8/29/2024
Set data variable

Dialog – show dialogs

Toast

Alert

Con rm

View - show spinners

Show spinner

Hide spinner

Data – work with local and external data resources

Get record

Get record collection

Create record

Update record

Replace record

Delete record

Device – use device APIs like camera or barcode scanner

Scan QR/barcode

Take photo

GPS location

Utility – affect how the ow of interconnected function nodes gets executed

Delay

If condition

Advanced

JavaScript

Receive event

Trigger event

By me tab
Here, you can see a list of all the ow functions you've created for this app. Read more in the Creating new ow functions guide.

Installed tab
Here, you can see a list of all the ow functions you've added from the Marketplace

This is custom documentation. For more information, please visit the SAP Help Portal 160
 8/29/2024

Events
Triggered by the user, an event allows to execute ow functions. Events are the foundation of App Logic in SAP Build Apps.

Event categories
Events fall under the following categories.

App lifecycle events

Page lifecycle events

Component events

Variable events

Other events

Custom events

Event schema
Currently, events do not expose their schema to Composer fully, so while there's a de nite schema to the data available in the
eventValue output of an event node, you need to manually utilize it via formulas, e.g. writing
outputs[:id].eventValue.params to access the parsed parameters of the App brought to foreground via URL event.

App lifecycle events

App lifecycle events have to deal with the running application as a whole.

App loaded
Available on the global canvas. Executed when the app has started and is ready to start executing logic.

Page lifecycle events

The following events happen in the context of a single page.

Page mounted
Executed once when the page is added to the navigation stack, either by being the root page or via the Open page ow function.

Refreshing a page in the browser or navigating directly to a route also causes the Page mounted event to be red.

Page focused
Executed when the page becomes focused, including the following conditions:

This is custom documentation. For more information, please visit the SAP Help Portal 161
 8/29/2024
The page is pushed to navigation stack with Open page

The page is the topmost in the navigation stack of a tab the user switches back to

A page above the page is popped from the navigation stack (via e.g. Navigate back or native back button)

Page blurred
Executed when the page becomes blurred, i.e. loses focus.

Page nav bar item clicked

Executed when an item in the navigation header bar is clicked. The event value contains the clicked button's index.

Component events
The following events happen in the context of a single component.

Component tap
Executed when the component is tapped/clicked by the user.

If there are logic nodes attached to the tap event, a tap animation is played when the component is tapped.

This event is available for all view components.

Component onChange
Executed when the component's input value changes, e.g. the user nishes typing a new value in an Input eld or a new option is
selected in a dropdown.

Event value contains the new input value.

Component onFocus
Executed when an input component becomes focused, e.g. the user selects an Input eld.

Component onBlur
Executed when an input component is blurred, i.e. loses focus.

Custom events for composite components

Composite components can de ne custom events.

This is custom documentation. For more information, please visit the SAP Help Portal 162
 8/29/2024
Custom events should always map to actual primitive component events inside the composite, linked via the Trigger event
node.

For example, a product card composite with Add to cart and Change variant buttons could have events Add to cart button tap
and Change variant button tap, allowing whoever's using the composite to wire the desired logic correctly without having to edit
the composite component itself.

Flow functions
The ow function library panel gives you easy access to the various ow functions you can add to your app. It takes up the
bottom half of the left sidebar.

The panel is divided into three tabs.

Core – core ow functions created by SAP Build Apps, common in most apps

By me – ow functions created by you for this app

Installed – ow functions added from the Marketplace for this app

Under the tabs, you can access the Logic Marketplace. If ow functions you've added via the Marketplace to your app have new
updates to them, a red badge will be shown with the number of pending updates.

Core tab
The core tab contains basic ow functions that are divided into simple categories.

Navigation – present dialogs and capture user input

Open page

Navigate back

Variables – manipulate in-memory variables

Set app variable

Set page variable

Set data variable

Dialog – show dialogs

Toast

Alert

Con rm

View - show spinners

Show spinner

Hide spinner

Data – work with local and external data resources

Get record

This is custom documentation. For more information, please visit the SAP Help Portal 163
 8/29/2024
Get record collection

Create record

Update record

Replace record

Delete record

Device – use device APIs like camera or barcode scanner

Scan QR/barcode

Take photo

GPS location

Utility – affect how the ow of interconnected function nodes gets executed

Delay

If condition

Advanced

JavaScript

Receive event

Trigger event

By me tab
List of all the ow functions you have created for this app youself.

Installed tab
List of all the ow functions you have added from the Marketplace.

Adding ow functions via the library panel

To add ow functions onto the canvas, simply drag and drop them in.

Trigger Event

Introduction
Global canvas is a page that exists in the context of the whole app, meaning that logic that is present here can be accessed
from all points within the app. With that in mind, we can optimize repetitive logic execution for our app and abstain from
con guring the same ow multiple times.

This is custom documentation. For more information, please visit the SAP Help Portal 164
 8/29/2024

Con guring the Global Canvas

Navigate to the Global Canvas and open the Logic canvas.

Select an unused 'Event' function or drag a new one from the 'Advanced' section of the ow functions tab. In its 'Properties' tab,
change the 'Event source' to be "Fired from "Trigger event"". Expand the 'Advanced' dropdown below and choose a name for
your event. It is of best practice here to choose an easily recognizable name.

If done correctly, your event should look a similar way:

From here, everything that you attach to this event will be a part of it, and thus, will be 'callable' from elsewhere in the app. For
instance, you can attach a 'Delete record' ow function that removes all entries on the local database:

This is custom documentation. For more information, please visit the SAP Help Portal 165
 8/29/2024

It isn't possible to use app variables and app parameters here, as they exist only within the context of a speci c page.

Calling the Logic

To use the con gured logic somewhere else, you need to add a "Trigger event" ow function anywhere in your app and set the
'Triggered event' property to be the name of your logic on the global canvas.

For instance, attaching the trigger event to Button's 'Component tap' creates a button that empties the local storage every
time it is pressed:

Furthermore, this logic can be reused as much as needed via the 'Trigger event' ow function with the same settings.

Custom JavaScript
Execute advanced data operations using the custom JavaScript ow function.

Sometimes you need more than just the ow and formula functions that are available. In these situations, you can use the
JavaScript node, found in the "Advanced" section of the ow function library. It allows you to write custom JavaScript code to
perform as complex logic.

This is custom documentation. For more information, please visit the SAP Help Portal 166
 8/29/2024
To use it, drag-and-drop it onto the logic canvas, then double-click it to open the JavaScript node con guration modal.

To understand how the JavaScript function node works, we need to cover the following topics:

Inputs – how to bring data from your app state into the function execution context

Outputs – how to describe what data is available after the function has completed its execution

Function syntax and execution – what code can be written and how it is run during app runtime

Inputs

The function box runs in isolation from the rest of the app context, so we need to explicitly de ne the data we want to bring in
and work with. This is done in the inputs section on the left side of the modal. To add a new input property, write its name in the
Add new property eld and click the plus icon. Existing properties can be removed via the x icon.

After adding an input property, you need to de ne where it gets its value. You do this identically to how you con gure Flow
function input properties: selecting the value type and then the value itself. The input values are available in the function
execution context under properties of the inputs object.

This is custom documentation. For more information, please visit the SAP Help Portal 167
 8/29/2024

In the example above, there is a single input called 'mainInput', de ned as 'static text'. It is also possible use a formula function,
an app variable, the output of another ow function as the value for an input argument.

Input values are static

Input values are always evaluated to a static value when the JavaScript function execution begins. They are never dynamic
references to the value's original source.

For example, let's say we have a long-running JavaScript function where an input argument is bound to a page variable and that
page variable changes before the function's execution is completed, the value available via the inputs object remains as the
"snapshot" taken at the beginning of execution.

Outputs
Output arguments de ne what comes out of your JavaScript function node. Like all values in Composer, they have a schema,
which is de ned via the section on the right.

This is custom documentation. For more information, please visit the SAP Help Portal 168
 8/29/2024

To add a new output argument, type its key into the Add new property eld and click the plus icon. To remove an output
argument, click the x icon.

Data is passed to the output arguments as-is, so it is up to you to ensure your JavaScript function doesn't output data that's
different from the expected schema.

Multiple outputs
In many cases, we want our node to have multiple outputs, so we can trigger different logic ows depending on the result. For
example, we could have a complex regex matcher in our JavaScript function, and then trigger the rst output if the match is
successful, and the second one if it is not. To make multiple outputs available, change the Number of outputs value at the top of
the Outputs section.

This is custom documentation. For more information, please visit the SAP Help Portal 169
 8/29/2024

As the number of outputs increases, the value of out put arguments will increase too. You need to explicitly de ne what output
arguments are available in each of the outputs. This is useful so that e.g. an error object will only be available in the second
output when an error has occurred, and the successful result will only be available in the rst output.

This is custom documentation. For more information, please visit the SAP Help Portal 170
 8/29/2024

Function syntax and execution

When your JavaScript function node is triggered in ow logic, the code written in the middle of the con guration modal is
executed.

Let's look at the following example code:

const filteredEmployees = inputs.rawEmployees.filter((employee) => {

const firstName = employee.firstName.toLowerCase();
const lastName = employee.lastName.toLowerCase();
const searchString = inputs.searchString.toLowerCase();

return firstName.includes(searchString) || lastName.includes(searchString);

});

return { filteredEmployees };

All ES6 features are supported, from arrow functions to object destructuring and so on.

Any input values you've de ned are available as properties of the inputs object, e.g. inputs.rawEmployees and
inputs.searchString in the code above.

Here, we run a filter function on the inputs.rawEmployees array, checking if our search string matches either the rst
name or last name of the employee.

Once we've got the data we want to output, we terminate the function execution with the standard JavaScript return
statement. What we return should always be an object whose properties match what we've de ned for our output arguments.

In the code above, we use ES6 Object Property Shorthand to return an object whose filteredEmployees property contains
the ltered data.

Multiple outputs
By default, the return statement triggers the rst output. To trigger another output, you need to pass in an array of the format
[index, returnObject] where index is the index number of the desired output (starting from 0) and returnObject is
an object whose properties match the output arguments de ned for the given output.

For example, to return an error object in the second output:

const message = "An error occurred!";

return [1, { errorMessage: message }];

It is not possible for one JavaScript function node execution to trigger multiple outputs.

Exposed JavaScript APIs

Some JavaScript APIs such as fetch and moment are currently exposed in the runtime context.

Our upcoming plugins feature will allow you to de ne React Native and web plugins for your project. Once de ned, their
JavaScript interfaces can be made available inside a JavaScript node, allowing you to code your app-speci c implementation
logic directly in Composer.

This is custom documentation. For more information, please visit the SAP Help Portal 171
 8/29/2024

Async/await
The execution context is wrapped inside an async function, so you can use the await keyword on the root level directly.

Below is an example where we also implement error handling with try-catch:

const { url } = inputs;

try {
const response = await fetch(url);
const json = await response.json();
return { json };
} catch (err) {
const error = {
code: "unknownError",
message: "Something went wrong.",
rawError: err,
};

return [1, { error }];

}

Error handling
If a JavaScript node throws an uncaught error, the logic ow execution stops. Thus, it is generally best if your code handles any
potential errors on its own, with a separate output for the error case.

If you want, you can even get in the habit of constructing error objects with speci c structure and error codes like the default
ow functions do.

Converting to a ow function

You can convert one or more JavaScript nodes (and other ow functions) to a custom ow function by selecting them and
clicking Create a new ow function from the properties panel. Any input/output arguments are mapped as input/output
arguments of the newly created ow function, so everything will work out of the box.

The JavaScript node itself is moved inside the ow function – you can see the converted structure by opening your newly
created ow function in isolation mode by double-clicking it.

Pull to Refresh
This is custom documentation. For more information, please visit the SAP Help Portal 172
 8/29/2024
Con gure Pull To Refresh behavior for your application and add custom response.

Currently native iOS and Android apps have baked-in support for pull-to-refresh. This means when you drag to scroll a page
down past its top edge, a spinner appears. If you scroll down low enough and then release your drag, an event is triggered,
allowing you to e.g. fetch new data.

Using it's simple: simply drag in a Receive event node from the core logic components; In the "Properties" tab set the Event
source property to Pull-to-refresh triggered, and connect some logic to it.

Once you've the event node on the page canvas with some attached logic, Composer will automatically enable pull-to-refresh
functionality for that page.

At the moment, the spinner spins for a set amount of time and you can't con gure how it looks.

File uploads
Upload les to a desired location using the 'Upload les' ow function.

You can nd the 'Upload les' ow function in the ow function marketplace.

To use it you need:

1. A le object or a list of le objects. For example Take photo and Pick les ow functions output such objects.

2. Use a formula binding with the Upload les function to attach "uploadUrl" property to each of the le objects.

This is custom documentation. For more information, please visit the SAP Help Portal 173
 8/29/2024

[ SET_KEY( outputs["Pick files"].files[0], "uploadUrl", "http://uploadurl") ]

This is custom documentation. For more information, please visit the SAP Help Portal 174
 8/29/2024

UX Design
UX design is the process of creating products (digital or physical) that are practical and usable.

Introduction
UX stands for User Experience, referring to how people interact with an application. UX Design de nes how users feel about
their interaction with the app.

Value. Does this product give me value?

Function. Does this product work?

Usability. Is it easy to use?

General impression. Is it pleasant to use?

In this article, we are going to explore several UX Design practices that will improve the user experience for apps made with
SAP Build Apps.

User behaviour
When publishing your application, you can expect a large variety of users. Thus, it becomes unreasonable to assume that
everyone will follow the 'intended' path with your application and adopt your way of thinking. Fortunately, there are practices
that allow you to mitigate the consequences of user misbehaviour, or simply guide them through the app.

Double-clicking
When using the 'Open page' ow function together with the 'Component tap' event, you intend that the user will only press a
component once. But as experience has shown, that is not the case. Double or even triple-tapping the component will lead to
page opening itself multiple times with a short delay.

To prevent pages from opening more times than required, you can use a 'Throttle' ow function between the actions to
temporarily disable the ability to use the logic. With the con guration seen in the image below, it becomes impossible to open a
page multiple times, no matter the amount of clicks:

User Avatars
When building user pro les, you may nd yourself needing a placeholder user avatar - Identicon. It is a great UX practice to put
default user avatars for people who have not yet uploaded one.

This is custom documentation. For more information, please visit the SAP Help Portal 175
 8/29/2024
There are many avatar generators online, but for this guide we are going to be using Robohash. It generates a random robot
avatar from a provided string. In your app you can use a speci c string, like user ID, or simply randomize it.

To make a unique avatar, bind an Image component's 'Source' to a formula:

"https://robohash.org/" + RANDOM_NUMBER_BETWEEN(1, 9999999) + ".png";

Here, RANDOM_NUMBER_BETWEEN(1, 9999999) will generate a random number between one and ~10million, returning a
unique avatar. To bind to a speci c existing data, simply change the RANDOM_NUMBER_BETWEEN to a desired value, for instance
an app variable.

The robohash originally comes in a large format, but you can resize the image to be pixel-perfect via the 'Layout' tab's 'Exact
size':

This is custom documentation. For more information, please visit the SAP Help Portal 176
 8/29/2024

With that, you can create beautiful designs:

Input validation
In this tutorial we'll show you how to validate and visualise an Input eld continuously while user is typing. We'll also show you a
way to do the validation only after user has interacted with the app in some speci c manner, e.g. taking the focus away from the
Input eld or pressing some Button ("Con rm", "Next page", etc.)

User input can be validated based on plethora of things by using our wide range of Formula functions. For example password
length and number staying within limits can be validated this way.

Here we will build an Input eld that will validate and visualise if what user has typed is an email or not. We'll also show you a
couple of examples to change the input to be validated based on other criteria.

Building a basic input

First, open Primitives section of UI component sidebar on left and drag an Input to canvas.

This is custom documentation. For more information, please visit the SAP Help Portal 177
 8/29/2024

We'll use the Primitive version instead of a ready Input eld component to have more exibility with the style properties of the
component without the need to convert the Input eld into a Container and con guring some properties.

Next we need to bind something as the value of our Input, so create a new Page variable called input_value in the 'Variables'
tab on the canvas. Then navigate back to the input eld and choose the value of the Input to be input_value from the
Properties sidebar on right.

Now the input_value variable will dynamically change depending on what the user types to the Input in the app. Furthermore,
as we want user to write an email to the input, you can change the Keyboard type to email-address from Input Properties
tab like so:

This is custom documentation. For more information, please visit the SAP Help Portal 178
 8/29/2024

Basic visualisation
A quick and easy way to visualise the validity of input_value is to use Formula functions with the Input styles.

To do so, go to the Style tab on right, while you have the Input eld selected on the canvas and press Edit.

From there, navigate to Border con guration tab and change 'Border color' binding type to Formula. (See screenshot below).
Set 'Border style' to a preferred type and paste the string below to the Formula:

IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(IS_EMAIL(pageVars.input_value), "limegreen", "re

This is custom documentation. For more information, please visit the SAP Help Portal 179
 8/29/2024

If you're not seeing the 'Border' section it means you're using the Input component from 'Forms' category rather than the
'Primitives' category. In this tutorial we're using the Input from 'Primitives'.

This Formula outputs a color based on input_value. It outputs a light gray color if the input_value is empty, a lime green if
the input_value is an email and red when it's not, but has some text.

Now you can preview your app and try typing some emails to the Input. The Input bottom border will immediately re ect the
validity of what you've written.

Other validation possibilities

There are many other things than just email that can validated through Formulas this easily. Here's a few example Formulas
that you can try out by replacing the Formula that you just added to de ne Border color:

Long enough password

IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(LENGTH(pageVars.input_value) >= 10, "limegreen",

Modify the number '10' in the formula to set the minimum password length.

Numeric input value is between certain values

IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(NUMBER(pageVars.input_value) >= 100 && NUMBER(pa

Modify the numbers '100' and '10000' to set up the number boundaries.

Input contains a certain string

IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(CONTAINS(pageVars.input_value, "test"), "limegre

This is custom documentation. For more information, please visit the SAP Help Portal 180
 8/29/2024
Modify the "test" string to set a text to check for.

Input is one of speci c values

IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(IS_IN_ARRAY(["only", "these", "values", "are", "

IF(IS_EMPTY(pageVars.input_value), "lightgray", IF(IS_IN_ARRAY_BY_KEY([{property: "only"}, {propert

Validating only after speci c interaction

If you don't want your Input eld to continuously show the validity of the user's input, but rather want to highlight the invalid
elds for example when user takes the focus away from the Input eld or presses a Button to con rm their choices / inputs, we
have to create another variable that the Border color Formula should follow.

So, create another Page variable input_state with type Text and select it to allow only speci c values.

This is custom documentation. For more information, please visit the SAP Help Portal 181
 8/29/2024
Make sure that the Initial value of input_state is default. Then, it's time to change the Formula that de nes the Border color
of the Input eld. Change it to this:

IF(pageVars.input_state === "valid", "limegreen", IF(pageVars.input_state === "invalid", "red", "li

If you run the app now, the Border color won't change based on user's input. To make that happen we need to change the
input_state to correspond the situation.

Drag a Set page variable Flow function to Input's logic canvas. Use the Flow function to set input_state Page variable based
on this Formula:

IF(IS_EMPTY(pageVars.input_value), "default", IF(IS_EMAIL(pageVars.input_value), "valid", "invalid"

Again we check if the input value is an email or not, but of course many other validity tests would also work.

Here we want to show the validity of input value after user has nished typing and when they change the app's focus away from
the input eld. So, connect the Set page variable Flow function to onBlur event of the Input.

Now the Border color should change based on input value only after the app's focus is no longer on the Input eld.

You can adjust the speci c moments when the Border color should change in many ways by using the different events available.

The input_value and input_state variables can also be used outside the scope of the Input eld. For us this allows a
possibility to show a speci c Icon to indicate the input validity. So, let's drag an Icon to the canvas.

Then we need a couple of Formulas to make the Icon match the input validity. First de ne the Icon name on the Properties tab
with this Formula:

IF(pageVars.input_state === "valid", "check-circle", "exclamation-circle")

We want to show the Icon only when input_state is valid or invalid, not when it's default. So, from Advanced section
of the Properties tab bind the Visible property to this Formula:

pageVars.input_state !== "default"

Lastly, use this Formula to de ne the Icon's Text color on Style tab's Typography section:

IF(pageVars.input_state === "valid", "limegreen", "red")

Now the icon will appear with a correct appearance when user nishes writing in the Input eld. Only thing to do now is to
change the design a little to place the Icon to a better spot.

Drag a Row to canvas. Then move the Input into the Cell #1 and the Icon to Cell #2. Then select the Cell #2 and change related
Cell width to 40px. This will assure that the Input eld won't stretch back-and-forth depending on if the Icon is visible or not.

This is custom documentation. For more information, please visit the SAP Help Portal 182
 8/29/2024

By default the Icon will stay close to the input on left, but we want it to stay far on right. So change the Cell #2 to align items
right.

Lastly, the Icon looks to be aligned to the top of the Row, but we want it to stay in the middle. So select the Row and align its cell
content to middle.

Deep Linking
Deep linking is the practice of building links that take users straight to a Web site or an app. Additionally, they're used to direct
users to speci c in-app locations, saving users the time it would take them to nd those pages themselves and vastly improving
the user experience. This can be done by de ning a unique URL scheme that the application can understand. In SAP Build Apps,
deep linking allows you to execute any business logic depending on the web address link.

Let's explore an example of pre lling user data using deep linking. Create an SAP Build Apps project to get started.

Page Setup
Open your SAP Build Apps application and follow these steps to create a page parameter:

1. Switch to the Variables view with a slider

This is custom documentation. For more information, please visit the SAP Help Portal 183
 8/29/2024
2. Click the Page Parameters tab

3. Click Add Parameter

4. Enter a name in the properties view on the right

Switch back to the View Canvas and bind the Title's Content to the newly created page parameter:

Con guring Logic

The logic needs to be created on the Global Canvas, as it will then be the logic executed on app launch. Click on the current
page's name and select Global Canvas from the list.

This is custom documentation. For more information, please visit the SAP Help Portal 184
 8/29/2024

Open the Logic Canvas from the bottom and drag an If condition onto the canvas. Connect and App launched event to the newly
added node. Next, select the If condition and bind the Condition property to the following Formula:

IS_EMPTY(LOOKUP(QUERY_PARAMETERS_OBJECT(systemVars.initialUrl),"name"))

Here, we want to check if the parameter name is not present in the URL. This formula returns true if name isn't present and
false otherwise.

Next, attach an Open page ow function to the second output of the If condition. Leave the rst one untouched, as we don't
want to execute any logic ithere is's no URL query parameter in place. Your logic should look the following way:

Click on the Open page ow functions and choose False for "Open in modal?", Empty page for "Page" and bind the "name"
parameter to the following formula:

LOOKUP(QUERY_PARAMETERS_OBJECT(systemVars.initialUrl),"name")

The page will now open with the value of name parameter passed from the URL.

Preview

This is custom documentation. For more information, please visit the SAP Help Portal 185
 8/29/2024
The deep linking in now ready to be tested. Open the Launch tab navigate to the preview portal. Select your app from the list
and you should now see the Empty page open.

In your browser, append ?name=Jake to the end of the URL and click Enter on your keyboard. Observe how the title appears
with the word Jack:

From here, you can modify the formula and connect any ow function according to your needs. Additionally, you can include
multiple query parameters via

?name=Jake&lastname=Smith&age=25

Theme

The theme editor, accessible from the top menu, allows you to select and customize themes for your app.

Font Manager
In the font manager, you can manage and upload your own custom fonts to be used in your app.

This is custom documentation. For more information, please visit the SAP Help Portal 186
 8/29/2024

Colors
The theme system is built on background colors and content palettes. The content palettes each implement the semantic
colors for most common use cases.

For example, in the image below we've selected the 'App background' background color. Under it, we can see the content palette
for this background color. We can also see that the semantic colors vary depending on the background color. For example for the
'Primary background' on the very right, the 'Neutral' color is white instead of gray.

So, instead of dealing with individual colors for individual components and elements, the theme system allows you to work with
content palettes, backgrounds, and semantic colors to specify your theme in a controlled way.

The advantages of this theme system become clear when we switch background colors on the UI canvas.

To begin with, we've the icon component with color set to 'Primary '. Which on the default background shows as blue.

This is custom documentation. For more information, please visit the SAP Help Portal 187
 8/29/2024
In the second image, we've changed the background color to 'Primary background'.

This has the foreground components automatically following the content palette for 'Primary background' in which
'Primary' color is white.

Custom Palettes
You're also able to create both custom background colors and custom palettes. Both can be created in the theme tab by
duplicating an existing background color or palette.

This is custom documentation. For more information, please visit the SAP Help Portal 188
 8/29/2024

The custom palette is now available in the color dropdown menu:

Theme Variables

This is custom documentation. For more information, please visit the SAP Help Portal 189
 8/29/2024
Theme variables contain the default settings for a theme. You can customize the existing variables or you can also add new
ones.

Introduction
Full-stack developers, those who can work with both frontend and backend are able to build entire applications by themselves.
Typically, but not always, you needed separate skill sets to work on either side, different programming languages or at least
different approaches. With visual cloud functions, we introduce a way to visually create a cloud-deployed backend for your front-
end SAP Build Apps app. Every no-code developer can now become a full-stack developer.

Create A visual cloud functions Project

From the Build development lobby, click Create. From the pop-up window choose Build an Application.

 Recommendation
In case Build an Application is unavailable for you, please follow this guide to subscribe to SAP Build Apps.

This is custom documentation. For more information, please visit the SAP Help Portal 190
 8/29/2024

For Build Apps - visual cloud functions, choose Application Backend.

Click Create after entering a Name along with a Descrption to open the Cloud Functions.

User Interface Overview

Cloud Functions are powered by a native UI, consisting of two main views: Entities and Deployments. Use the interactive image
below to explore the core elements by hovering over them with the cursor pointer.

This image is interactive. Hover over each area for a description. Click highlighted areas for more information.

Please note that image maps are not interactive in PDF output.

Table of Contents
1. Entities

2. Deployments

3. Version Control

4. Data Browser

This is custom documentation. For more information, please visit the SAP Help Portal 191
 8/29/2024
5. Functions

6. Integration to App Builder

7. Troubleshooting

Entities
A data entity describes the eld structure (schema) of data present in the system. Every data entity can be compared to a
database table, containing several elds.

Generally, every data entity de nition consists of:

Human-readable name (Entity title)

Summary (Entity description)

Technical key (Entity ID)

There are two types of data entities:

Native entity - basic building block of your visual cloud functions project. It represents a single collection of data,
categorized by elds.

Extended data entity - expands the native entity by allowing you to modify data taken from the native entities
using formula expressions. They enable you to hide desired elds, establishing end-to-end data privacy between the app
and cloud. Furthermore, with extended entities, data transformations can be performed on the cloud side, easing the
app process.

Native Entity
Creating a new entity

You can create a new native entity by pressing the ADD NEW ENTITY on the Entity Canvas.

Upon entering the entity de nitions, you will be presented with two tabs: Entity and Field con guration. In the rst tab you can
change the Title and ID of your entity, or delete it. Deleted entities can be recovered via 'History' between deployments. If you
deploy the project after deleting the Entity, all of its data will be permanently deleted.

This is custom documentation. For more information, please visit the SAP Help Portal 192
 8/29/2024

In 'Con gure elds' you can see an overview of all data elds with their names and types. To create a new eld, press the ADD
NEW button above all present elds. Here, you are required to enter a "Field title" and choose a "Field type" appropriately. (It is
important to assign types carefully, to prevent compatibility issues while using the data within the App Builder).

Here is a technical list of all available eld types:

Display name PSQL JSON

Text text string

Number numeric number

Boolean boolean boolean

Date date string with format

Date/Time timestamptz string with format

UUID uuid string with format

List array array

This is custom documentation. For more information, please visit the SAP Help Portal 193
 8/29/2024
Every created eld is editable, enabling full future control in case of required data type changes. To modify a eld, choose it in
the Con guration view and select the new "Field type" from the menu on the right. Changes will take effect after you redeploy
the project. Take note that if you want to create a new non-nullable eld for an existing entity, you have to rst clear the entity
data in the Data Browser, undeploy and redeploy the project.

A 'Nullable' eld can be empty. In other words, it is not required.

Extended Entity
To create an extended entity, you need to have a native entity present in your project. Choose a Native entity you would like to
"extend" and choose 'Create extended entity' from the 3-dot menu. Enter the Extended Entity de nitions in the pop-up screen.
An entered ID should be unique, while Titles can be reused. The native entity data elds are used by the extended entity as is –
you can only hide or change the display name of a eld. Field type and technical key cannot be edited.

In the eld con guration view, you can toggle chosen views on and off. Turning a eld off makes it invisible to the app builder,
allowing you to avoid exposing unwanted data to the user. Despite that, hidden elds can still be used as source data, for
instance a hidden ISO format timestamp can be replaced with a human-readable format time and date text in a visible eld.

This is custom documentation. For more information, please visit the SAP Help Portal 194
 8/29/2024

Virtual Fields
Virtual elds utilize the Formula Language to reference and transform data from the actual elds of the base entity.

All elds created within the extended entity are virtual. When creating a new eld, apart from the basic entity de nitions, you
are able to con gure an initial value for the virtual eld.

In order to reference the data elds using a Formula, use a fields.XYZ structure, where XYZ is the Field ID of a desired eld.
Note that the entered formula should return the same data type as the set Field type.

This is custom documentation. For more information, please visit the SAP Help Portal 195
 8/29/2024
Both Field type and Virtual eld value can be modi ed at any given point in the eld con guration view.

Functions
A core feature of visual cloud functions is the ability to de ne functions that execute visually de ned logic ows.

Creating and Managing Functions

Functions can be created and managed via the Functions tab at the top toolbar, which opens a list view where each function is
shown as a card.

New functions can be created via the button at the top-right corner. Upon creation, a name and an optional description must be
provided. The name and description can be edited afterwards, and the function can be deleted.

Logic Canvas
The logic canvas is a way to visually construct and con gure the logic ow of a function. The logic canvas for a function always
has a Start execution node on the left edge, and one or more success and error nodes on the right. As the function
implementation is built up, additional logic nodes are added between the start and nish nodes, forming the logic ow of the
function as a network/graph of potential execution paths.

This is custom documentation. For more information, please visit the SAP Help Portal 196
 8/29/2024

Input Parameters
A function's input parameters are de ned inside the Start execution node. At the bottom of the selected node, click + INPUT
PARAMETER to add a new parameter.

Clicking it opens a modal to de ne a new input parameter, which has the following properties:

name – human-readable name of the input parameter, such as Voucher ID

description – short description of how the input parameter affects the function's executed logic

type – determines if the input is text, number, true/false

required – a function node results in an error if a required input parameter is missing

technical key – a machine-readable key used by formulas to access the input value this parameter resolves to

After the input parameter is created, it is shown under the node title and can be selected to edit it or delete it.

This is custom documentation. For more information, please visit the SAP Help Portal 197
 8/29/2024

De ning Outcomes
A function's outcomes are de ned by the success node on the right side of the canvas. When the node is reached, the function
execution is considered nished, triggering the corresponding outcome in the parent execution context.

To add a new outcome, at the bottom of the selected node, click + OUTPUT VALUE button. It opens a modal to de ne a new
output value, which has the following properties:

name – human-readable name of the output value

description – short description of what the output value contains

value – de ned as a formula that gets evaluated when the success node is triggered

technical key – a machine-readable key used by formulas to access the output value in subsequent logic

This is custom documentation. For more information, please visit the SAP Help Portal 198
 8/29/2024

De ning the Logic Flow

De ning the logic ow and thus the implementation for a function begins by using the + action button in the center of the
canvas to select and add the rst logic node. A node can be deleted from its action menu at the top-right corner.

After it appears on the canvas, the logic node requires some con guration, depending on its type: Retrieve record or Update
record.

Con guring a function node

To con gure a function node, you must rst provide its con guration options, such as the data entity targeted by a Retrieve
record function, as this selection can affect the actual input parameters and output values of the node. After this, the function's
input parameters are revealed.

By clicking on Input parameters, the formula editor is opened. In the case of input parameters whose type is an object or list,
the formula editor is initialized with a sample formula.

In the formula editor, input values of the currently open function are available under the inputs namespace. outcomes of
previous nodes' output values are available under the outputs namespace.

Once the con guration options required input parameters are set, the node is ready to be used.

This is custom documentation. For more information, please visit the SAP Help Portal 199
 8/29/2024

Executing the Cloud Functions

The same way as Entities, logic Cloud Functions need to be enabled as a data resource. The following allows the use of a special
ow function: Execute cloud function.

You can nd the previously mentioned function in the 'Data' section of the ow functions list. The Cloud function property
de nes which function to execute, while Function input parameters allow you to con gure the inputs entered in function's Input
Parameters.

This is custom documentation. For more information, please visit the SAP Help Portal 200
 8/29/2024

Execute cloud function ow function has two outputs:

Port 1: Successful output that returns an object with de ned output values.

Port 2: Error object that describes the point of failure.

The successful output object can be used in after-connected ow functions via a formula reference:

outputs["Execute cloud function"]

Roles
 Caution
Make sure to read the Visual Cloud Functions User Authorization article before proceeding further as it contains important
information required for the steps ahead.

In Visual cloud functions user authorization, roles are a way of grouping speci c access permissions together. Each role can be
assigned a set of permissions that dictate what actions a user with that role can perform on a data entity. Those include:

1. List: This permission allows a user to get all records in a data entity.

2. Retrieve: This permission allows a user to get a speci c record in a data entity.

3. Create: This permission allows a user to add a new record to a data entity.

This is custom documentation. For more information, please visit the SAP Help Portal 201
 8/29/2024
4. Update: This permission allows a user to modify an existing record in a data entity.

5. Delete: This permission allows a user to remove an existing record in a data entity.

Create a New Role

1. Navigate to the Roles tab in the Visual cloud functions editor.

2. Click on the Add Role button

3. Provide a name for the role, along side with a description.

This is custom documentation. For more information, please visit the SAP Help Portal 202
 8/29/2024
4. Select the permissions that you want to associate with the role in the Data entity access tab.

5. Click on the Save App button to save the new role.

6. Navigate to the Deployments sections and deploy your application.

Managing Existing Roles

All created roles appear in the left-side panel, sorted by the creation order. You can choose a role by clicking on it. Once a role is
selected, you can modify its permissions in the Data entity access tab or rename the role in the Properties tab.

In case of any modi cations, make sure to save your app and deploy it. None of the changes take effect before a successful
deployment is done.

Users
Manage individual users' access to data by assigning speci c User Roles. Each role comes with a prede ned set of permissions,
giving you control over what each user can view or edit.

 Tip
Before accessing the Users tab, you need to create at least one role and deploy your project rst.

In the Groups section, you can streamline the role assignment process by assigning a role to a group of users in Cloud Identity
Service.

Custom Attributes allows you to assign roles based on custom elds, de ned in the Cloud Identity Service.

Assigning Roles
1. Navigate to the Users tab.

This is custom documentation. For more information, please visit the SAP Help Portal 203
 8/29/2024

2. Click on the Add User button to add a user. In the User eld enter an e-mail or an ID of a user. In case you want to add
several, simply separate their e-mails by a comma. With a dropdown below the Role eld, choose a role you want to
associate with one or more entered users.

3. Click "Create" to add the users.

4. Select the role that you want to assign to the user.

5. Click on the "Save" button to assign the role to the user.

6. Use the Submit button to apply your changes.

The user will now have the permissions associated with the assigned role when interacting with data entities.

Adding Groups
1. In the Users tab, open the Groups section.

This is custom documentation. For more information, please visit the SAP Help Portal 204
 8/29/2024

2. Click on the Add Group to add a group. Enter a name in the Group Name eld, matching the name in the Cloud Identity
Services. Choose a role that is applied to all members of the group.

3. Click Create to apply your changes.

4. Use the Submit button to apply your changes.

Adding Custom Attributes

1. In the Users tab, open the Custom Attributes section.

This is custom documentation. For more information, please visit the SAP Help Portal 205
 8/29/2024

2. Click Add Custom Attribute. Under the Role eld, choose a role to associate with the attribute. Enter a name for the
attribute in the Attribute eld and its value under Value. Click the Add Value button to apply a value. The name of an
attribute serves as an identi er, while the value contains the actual data. For instance, if you want to assign a role,
depending on a user's location, you could create an attribute called "Country" while entering one or more speci c
country names into the value eld. Note that the name of an attribute should match one de ned in the Cloud Identity
Services.

3. Click Create to create the attribute.

This is custom documentation. For more information, please visit the SAP Help Portal 206
 8/29/2024

4. Use the Submit button to apply your changes.

Managing Existing Entries

At any point, you can add, modify, or remove existing entries. To add a new entry, follow the instructions above.

To add a new role to an existing user/group/attribute, click the + (plus button) next to existing entries.

To delete, use the delete icon on the right side of an entry.

 Caution
Remember to always submit your changes by clicking the Submit button in the top-right corner.

Deployments
Navigate to the "Deployments" view by choosing the appropriate option on the top bar.

What Are Deployments?

In software development, deployment refers to the process of making a project available for external use. Deployment process
in visual cloud functions publishes the latest version to be used in the app builder.

Every change made between versions is documented by visual cloud functions in the project History. Always be sure to Save the
application before considering making a deployment, as all deployments are done from the latest saved version.

Deployments Interface Overview

This is custom documentation. For more information, please visit the SAP Help Portal 207
 8/29/2024

The 'Deployments' view consists of one main element: Deployment card. Here, you can review all changes made between the
saved version and the previous deployment. You can also see the status of the current deployment, along with the timestamp.

Deployment Card
At the bottom of the deployment view, you can see whether the current version contains breaking changes. Breaking changes
are recognized as actions that may intervene with app functionality, such as Entity removal. Press "REVIEW AND DEPLOY" when
you are ready to deploy the project.

This is custom documentation. For more information, please visit the SAP Help Portal 208
 8/29/2024

In the pop-up view, you can see all actions in detailed. Upon reviewing them, press "DEPLOY TO DEVELOPMENT".

After a few moments, your visual cloud functions project will be live.

Change Types & Error Handling

Non-Breaking changes

This is custom documentation. For more information, please visit the SAP Help Portal 209
 8/29/2024

A non-breaking change is not expected to cause issues with your application and most likely introduces new resources: such as
new entities, new data elds, or new data browser entries.

Breaking changes

On the other hand, breaking changes, are ones that will most likely introduce issues in your current version of the application.
Deleting used elds or entities are recognized as a breaking change and alerted before the deployment.

Delete Deployment
In case your current deployment needs to be permanently made unavailable, you can Delete it. To do so, choose the "Delete
deployment" action in the three-dot menu in the deployment card. Beware, that deleting a deployment also deletes all data
stored in the data entities.

In a few moments, your deployment will transfer into the "Deleted" state.

This is custom documentation. For more information, please visit the SAP Help Portal 210
 8/29/2024

Pause Deployment
If you want to make a deployment unavailable without deleting all of the associated data, you can Pause it. Any paused
deployment can be resumed later on whilst preserving its previous state. Choose the "Pause deployment" action under the
three-dot menu to pause your deployment.

This is custom documentation. For more information, please visit the SAP Help Portal 211
 8/29/2024

Data Browser
In visual cloud functions, all Entities support visual data browsing, with options to view, modify, and delete data directly in the
data browser. To access the data browser, click on the three-dot menu on the top right of an entity card, and choose "Browse
data".

Since the Entity "Users" was recently created, there's no data to be displayed, outputting the "No records found" message. To
add data to the Entity, press the "NEW RECORD" button on the top right.

This is custom documentation. For more information, please visit the SAP Help Portal 212
 8/29/2024

Here, you can con gure all data elds created previously. After lling the entities, click "SAVE RECORD" to populate the Entity
with data.

Returning back to the previous view, you can now see the data present in the data browser.

Data Import
The data import feature allows you to input large assets of data without having to manually type in every entry. In order to begin
the import process, click the Import Data button found in the middle of the screen. The button additionally appears in the top-
right corner, in case you happen to have data entries already.

This is custom documentation. For more information, please visit the SAP Help Portal 213
 8/29/2024

After clicking the button, you'll see a pop-up screen used for uploading the dataset.

Make sure to use the download empty template feature to get an auto-generated template that uses data elds present in the
entity:

This is custom documentation. For more information, please visit the SAP Help Portal 214
 8/29/2024
Fill in the elds with desired data, upload the le via the pop-up and click Import. After a moment you'll see all the previously
entered data in the Data Browser:

Version Control
Your visual cloud functions project keeps track of all changes made in the History tab. It enables version control, and allows to
roll back changes that need to be discarded.

New changes
Any substantial change is re ected as a node in the History view. For the most part, that includes creating and deleting entities.
Any changes made to entity elds are attached to the respective entity node.

Every node is additionally accompanied with a timestamp that can be revealed by hovering over the time label.

This image is interactive. Hover over each area for a description.

Please note that image maps are not interactive in PDF output.

Reverting back
By using the LOAD VERSION button, you can seemingly revert to any past change. Please note that reverting only modi es the
locally saved version. Re-deploy your project if you want the roll back to be re ected externally as well.

This is custom documentation. For more information, please visit the SAP Help Portal 215
 8/29/2024
Furthmore, any changes made before a roll back are saved as a history node, allowing you to restore the discarded changes.

Unsaved changes
You can discard any unsaved changes in the History tab before saving a project. That removes a necessity to manually revert
any changes before the saved versions.

Integration to the App Editor

This is custom documentation. For more information, please visit the SAP Help Portal 216
 8/29/2024

Authentication
All visual cloud functions projects are protected from unauthorized access both in development and integration processes.
Developers with existing access must enable SAP Authentication to have access to the VCF Integration.

To do so, navigate to the 'Auth' tab and click on 'Enable Authentication''SAP Authentication' from the three options and con rm
your choice in a popup.

Connecting Your VCF Project

Deployed visual cloud functions can be used in SAP Build Apps as data integrations. Navigate to the 'Data' tab on the Global
Toolbar and choose ADD INTEGRATION.

Next, choose CLOUD FUNCTIONS as the desired option.

 Recommendation
If you don't see the VCF integration, verify that your user account is entitled to have access, or double-check that your SAP
Authentication has been enabled successfully.

Finally, choose the project from the list. You can recognize it by the name and version in the card.

This is custom documentation. For more information, please visit the SAP Help Portal 217
 8/29/2024

From the left side, you can choose which Entities you want to enable in the application. When previewing the Entity, you can see
the con gured elds, and even browse data via the "BROWSE DATA" button. To enable a particular Entity, press "INSTALL
INTEGRATION" from the top-right corner, followed by "ENABLE DATA ENTITY".

Using the Data

Data components

This is custom documentation. For more information, please visit the SAP Help Portal 218
 8/29/2024
Data components are highly reusable components with data-related logic built in, eliminating the need for app-level data
variables.

Most data components can be installed from the marketplace, for instance: 'Basic List'. After placing in on the view canvas,
navigate to the "Edit Con guration" view.

From there, choose your connected destination and drag-and-drop data elds accordingly. Once con gured, your data is visible
in the application preview:

Data variable

Data Variable is a variable that gets its value from a data resource/integration and exists only in the context of a single page. To
add a new data variable, switch to the 'Variables' view and navigate to the 'Data Variables' tab on the left.

Press the 'Add data variable' button and choose your VCF project from the dropdown. In the Properties tab on the right, set a
name for your variable, along with choosing the type. For Data Entities, 'Collection of data records' is the usual type. You can
optionally enable Filtering, Ordering, and Paging for your variable via the appropriate bindings.

This is custom documentation. For more information, please visit the SAP Help Portal 219
 8/29/2024

You can use the data variable via a Formula binding like so:

data.UsersVariable[0].name

Where UserVariable is the name of the data resource and name is the name of the data eld.

Executing the Cloud Functions

The same way as Entities, logic Cloud Functions need to be enabled as a data resource. The following allows the use of a special
ow function: Run cloud function.

This is custom documentation. For more information, please visit the SAP Help Portal 220
 8/29/2024
You can nd the Run cloud function function in the 'Data' section of the ow functions list. In case the functions is missing, check
the Installed tab. The Cloud function property de nes which function to execute, while Function input parameters allow you to
con gure the inputs entered in the function's Input Parameters.

Execute cloud function ow function has two outputs:

Port 1: Successful output that returns an object with de ned output values.

Port 2: Error object that describes the point of failure.

The successful output object can be used in after-connected ow functions via a formula reference:

outputs["Execute cloud function"]

Deployed Applications
You can use Visual cloud functions in your application deployed to SAP Build WorkzoneSAP Cloud Identity Services for Identity
Provisioning in Workzone. To learn more, see Switch to SAP Cloud Identity Services - Identity Authentication.

Follow the steps described below with your SAP BTP/SAP Build Work Zone Admin team:

1. Enable Cloud Identity Services in Work Zone

Start by navigating to the SAP Build Workzone site manager and choosing Settings. Click the checkbox and choose Enable.

This is custom documentation. For more information, please visit the SAP Help Portal 221
 8/29/2024

Please note that the change needs to be done for each SAP BTP subaccount where SAP Build Apps applications are being
deployed to.

2. Establish dependency between Work Zone and Build Apps

Navigate to your SAP Cloud Identity Services dashboard and choose the Applications & Resources tab. On the left-side panel
choose SAP Build Workzone, standard edition. Scroll down in the newly opened tab and click Dependencies and Add.

In the Dependency Name eld, enter sap-build-apps-api.

In the Application dropdown, choose SAP Build Apps followed by your subaccount name. For example, "SAP Build Apps
(MySubaccount)".

In API, choose SAP Build Apps backend projects.

3. Create a new build and deployment of all of your applications that you have previously deployed.

Troubleshooting Deployed Web Applications

Internal Server Error

This is custom documentation. For more information, please visit the SAP Help Portal 222
 8/29/2024
In case you're unable to access data from Visual cloud functions after deploying your application, it's likely that there has been
an error made during the setup process described above. To verify a potential error, rst, navigate to the HTML5 Applications
tab in your SAP BTP Subaccount. Find your app and click the Error Log icon to see the error.

For instance, lling out the API Dependency form incorrectly results in a failed POST request to the data entity in your Visual
cloud functions project. In the screenshot below, you can see the following error: "No consumed apis matching provided
resource parameter found". This error means that the API Dependency name was entered incorrectly. Here, the name was
written as sap-build-apps-apis instead of the required sap-build-apps-api.

Troubleshooting
This is custom documentation. For more information, please visit the SAP Help Portal 223
 8/29/2024
Common issues and errors, encountered while using SAP Build Apps Cloud Functions. Make sure to contact Support, in case an
issue persists after following the solution steps.

Problem 1: Failed to Load the Project

Solution: In case you see this message after using Cloud Functions for quite a while - simply reload the page. In other cases, rst
try logging out and back into your SAP account via the pro le button in the top-right corner.

Your BTP Subaccount Does Not Have the Correct "SAP-Build-Apps-Runtime"

Destination Set Up.
Also applies to "Error Loading Data" in the data browser.

Solution:

1. Open the subaccount used for developing with SAP Build Apps and navigate to "Destinations" in the "Connectivity" tab.

2. Click "New Destination" to start the set up process.

3. Con gure the destination with the following exact inputs:

Field name Value

Name SAP-Build-Apps-Runtime

Type HTTP

Description

URL* https://<subaccount_subdomain>.cr1.<BTP_landscape_id >.apps.build.cloud.sap

Proxy Type Internet

Authentication NoAuthentication

Additional Properties HTML5.ForwardAuthToken = true

* For URL, substitute the <subaccount_subdomain> and <BTP_landscape_id > with your subaccount's domain and ID of
your subaccount region (landscape) respectively. Your Subdomain can be found in theOverview tab, whole the Landscape ID can
be see during step 2. Note that the ID should be entered without the cf- part.

This is custom documentation. For more information, please visit the SAP Help Portal 224
 8/29/2024
4. Click 'Save' to enable the destination and verify connectivity via the 'Check Connection' button.

Deployment is not ready for preview.

In case you are seeing the following message while trying to access the data browser, navigate to the Deployments tab and
make a new deployment.

Formula functions

Introduction
Formula functions, or simply, Formulas, are expressions that allow you to build algorithms in your app. They follow the same
concept as the Excel "spreadsheet" formulas, and borrow the context-aware functionality from them.

With formulas, you can perform any transformation with relevant data such as the device and system info, GPS location, sensor
values, data properties and the application state. For instance: calculate a distance between two coordinates, convert date eld
to a local format, predict future values based on historical data, calculate interest rates on a mortgage, con rm the total price
when checking out a shopping cart, and many more.

Formulas are one of the component binding types, meaning that you can use formulas almost anywhere in the app. To bind a
'Text' component value to a formula, press the binding icon on the Properties tab and choose "Formula" as the desired binding
type.

This is custom documentation. For more information, please visit the SAP Help Portal 225
 8/29/2024

Using formula functions

Upon choosing "Formula" as the binding type, you will be presented with the formula preview in the raw format, and a eld for
the preview value on the view canvas. Click on the rst eld below "Formula" to open the formula editor.

This is custom documentation. For more information, please visit the SAP Help Portal 226
 8/29/2024

As was mentioned before, formulas are context aware, meaning that they can dynamically output results of their expression.
Under 'Example results' you can see the output of the formula. Every expression is additionally validated, eliminating possible
errors and alerting you beforehand, if the formula is wrong. On the screenshot below, you can see an app variable with a value of
123 added with an integer 1, producing 124 as a result.

Formula operators
Arithmetic operators +, - , *, and / Logical operators ||, && and ! Comparisons ==, === , != , !== , < , <= , > and >=
Remainders % Conditionals <condition> ? <true value> : <false value>

Escape character: \\ To escape the backslash in JavaScript, use two backslashes: \\\\

Formula types
This is custom documentation. For more information, please visit the SAP Help Portal 227
 8/29/2024
There two types of formulas: static (Variables) and dynamic (Functions). Static ones are used to interact with static data,
ranging from pre-set app variables to system variables fetched from the device. Functions, on the other hand, allow the
execution of complex actions and dynamic generation of output based on provided input.

Below you will nd an introduction for each Formula sub-type along with usage examples.

Variables

Adhering to Variable Naming and Referencing Conventions

In order to ensure optimal usability and minimize confusion, it's crucial to adhere to the correct variable naming and referencing
conventions. Speci cally, when naming variables, it's recommended to avoid using space characters as this requires a different
referencing method. For instance, if a data variable is named as "Job List", it must be referred to as data["Job List"]
instead of the more straightforward data.JobList syntax. This is because the space character in the variable's name
necessitates the use of square brackets [] and quotes to correctly refer to the variable. To promote simplicity and consistency
in code, consider adopting a naming convention that avoids spaces, such as CamelCase (e.g., JobList), which allows for direct
referencing like data.JobList.

App Variables
Purpose

Read/Modify App Variables.

Usage (Substitute {name} with an appropriate name.)

appVars.{name}

Example

IF(IS_EQUAL(appVars.appVariableOne, true), "Variable 1 is true", "Variable 1 is false")

Explanation: IF function creates an IF-statement that checks if the App Variable "appVariableOne" is equal to "true" via the
IS_EQUAL function. In case, it is "true", then the formula outputs the rst string. If it is "false", then the second one is
outputted.

This is custom documentation. For more information, please visit the SAP Help Portal 228
 8/29/2024

Data Variables
Purpose

Read/Modifty Data Variables.

Usage

data.{name}

Example

IS_EMAIL(data.usersList[0].email)

Explanation: Data variable usersList has a eld called email. By using the IS_EMAIL function, we are able to verify, whether or
not the email entry of that data variable is a valid email address. A "true" output indicates that that the entry is indeed an
email.

Page Parameters
Purpose

Read/Modify Page Parameters.

Usage

params.{name}

Example

CAPITALIZE(params.pageParameterOne)

Explanation: By using the CAPITALIZE function, we are able to capitalize every word in the page parameter
pageParameterOne.

This is custom documentation. For more information, please visit the SAP Help Portal 229
 8/29/2024

Page variables
Purpose

Read/Modify Page Variables.

Usage

pageVars.{name}

Example

LENGTH(pageVars.pageVariableOne)

Explanation: The LENGTH function returns the number of characters in the page variable pageVariableOne.

This is custom documentation. For more information, please visit the SAP Help Portal 230
 8/29/2024

Selected component properties

Purpose

Interact (Read/Modify) with component's properties.

Usage

self.{property}

Example

IF(IS_EQUAL(self.visible, true), "Component is visible", "Component is not visible")

Explanation: By using the IF and IS_EQUAL functions, we verify if a component is visible. If the formula determines that the
component is visible, it will return "Component is visible". Otherwise, "Component is not visible" will be the output.

Sensor variables
Purpose

Interact with data gathered by device sensors, i.e accelerometer.

Usage

sensorVars.{name}

Example

ROUND(sensorVars.accelerometer.latestValue.x + sensorVars.accelerometer.latestValue.y)

This is custom documentation. For more information, please visit the SAP Help Portal 231
 8/29/2024
Explanation: sensorVars.accelerometer.latestValue.x provides the value for acceleration along the X axis, while
sensorVars.accelerometer.latestValue.y gives the Y axis. By using the mathematical expression + (plus) we are
nding their sum. The ROUND function will round the result to the rst decimal.

System variables
Purpose

Interact with the device's system data, i.e active browser or phone model.

Usage

systemVars.{name}

Example

"You are using " + systemVars.browser.browserCodeName + " browser."

Explanation: By using the plus sign (+), we are able to use device's browser name in a sentence. It will appear differently
depending on the user.

This is custom documentation. For more information, please visit the SAP Help Portal 232
 8/29/2024

Theme variables
Purpose

Interact with the application's theme variables.

Usage

theme.${name}

Example

COLOR(theme.$smartColorPalette_app.negative)

Explanation: theme.$smartColorPalette_app.negative gets the current 'negative' color pre-set in HEX format. The
COLOR function converts it into an RGB color.

This is custom documentation. For more information, please visit the SAP Help Portal 233
 8/29/2024

Functions

Bitwise
A bitwise formula function operates on a number at the level of its individual bits.

BIT_NOT(10) = -11 Performs logical negation on each bit, forming the complement of the given number.

BIT_AND(14, 9) = 8 Binary operation that takes two numeral representations and performs the logical AND
operation on each pair of the corresponding bits.

BIT_OR(14, 9) = 15 Performs the logical inclusive OR operation on each pair of corresponding bits.

BIT_XOR(14, 9) = 7 Performs the logical exclusive OR operation on each pair of corresponding bits.

BIT_SHIFT_{direction}(number, shift) In a left shift, binary zeros are shifted in on the right; in a right
arithmetic shift, the sign bit is shifted in on the left,

Color
Collection of functions that work with colors.

Examples

RGB(0, 128, 250)

This is custom documentation. For more information, please visit the SAP Help Portal 234
 8/29/2024
You can use the RGB function to generate 16777216 possible colors using the Red, Green and Blue color system.

SATURATE("rgb(0, 128, 250)", 50)

Saturates (increases intensity and clearness) a color by provided percentage. Takes color in RGB or HEX as input.

Date
Enables interaction with dates and time.

Examples

NOW()

Returns current date and time in YYYY-MM-DD HH:MM:SS format.

FORMAT_DATETIME_LOCAL(NOW(), "DD-MM-YY HH:MM")

This is custom documentation. For more information, please visit the SAP Help Portal 235
 8/29/2024
Formats the date time into human-friendly format. Gives posibility to omit unnecessary elds and change the order in a desired

way.

Engineering
Collection of engineering functions. Currently contains only variations of the Bessel function.

Bessel function

A set of mathematical functions systematically derived by the German astronomer Friedrich Wilhelm Bessel during an

investigation of solutions of one of Kepler’s equations of planetary motion. Bessel equation:

Financial
Perform various nancial manipulations.

Example

FUTURE_VALUE(0.5, 12, 1000)

Calculates an annuity investment's future value, where 0.5 is the interest rate, 12 the number of payments, and 1000 the
contribution amount per period.

List
Perform operations with lists.

This is custom documentation. For more information, please visit the SAP Help Portal 236
 8/29/2024
Example

COUNT(data.usersList)

Returns a number of items in a given list. In this case, a data variable is the list.

Math
Library of mathematical expressions and methods.

Examples

FACTORIAL(6)

Calculates a factorial of the provided number

RANDOM_INTEGER_BETWEEN(1,100)

Randomizes a number between provided integers

This is custom documentation. For more information, please visit the SAP Help Portal 237
 8/29/2024

`w

Object
Represents available JavaScript Object methods.

Examples

LOOKUP(appVars.object, "name")

Reads the value of the "name" property of Object appVars.object.

SET_KEY(appVars.object, "name", "John")

This is custom documentation. For more information, please visit the SAP Help Portal 238
 8/29/2024
Sets the "name" parameter's value to "John". Overrides the previous value.

Statistical
List of operations used in statistical mathematics.

Examples

PERMUTATIONA(5, 3)

Returns a number of permutations ( ${n} P{r}$ ) for given inputs.

COMBINA(5, 3)

Returns a number of combinations ( ${n} C {r}$ ) for given inputs

This is custom documentation. For more information, please visit the SAP Help Portal 239
 8/29/2024

Text
Text-based operations.

Examples

APPEND_URL_PARAMETERS("https://appgyver.com/", { href: "#" })

Appends the given URL parameter (href: "#") to the URL text (https://appgyver.com/)

REPLACE_ONE_REGEX("AppGyver Documentation 20:00 @ 01.01.2022", "[a-zA-Z]+" , "SAP Build

Apps")

Uses a Regex expression to substitute a text/numerical string. Use a Regex generator in case you are unfamiliar with the
pattern language.

This is custom documentation. For more information, please visit the SAP Help Portal 240
 8/29/2024

Utility
Selection of various programming utility functions, for instance IF-Statements or Base64 encoders.

Examples

ENCODE_BASE64("Hello world!")

Encodes the provided text string into Base64.

FILENAME_IS_IMAGE("cat.svg")

This is custom documentation. For more information, please visit the SAP Help Portal 241
 8/29/2024
Checks if the given text has a le extension that belongs to an image.

Cryptography
Cryptography uses mathematical techniques to transform data and prevent it from being read or tampered with by
unauthorized parties. That enables exchanging secure messages even in the presence of adversaries.

Examples

RIPEMD160("My secret password")

Calculates the RIPEMD160 hash of the provided text. The return value is a 160-bit hash encoded as a text with 40 hexadecimal
digits.

SHA256("Hello world")
This is custom documentation. For more information, please visit the SAP Help Portal 242
 8/29/2024
Calculates the SHA256 hash of the provided text. The return value is a 256-bit hash encoded as a text with 64 hexadecimal
digits.

Movie Ticket Booking App

Introduction
"Movie Ticket Booking App" was created by one of the community members Vignesh Rajendiran. The application includes
everything you would want to see in a booking app: movie listing, choosing a seat, and viewing your past reservations. A
combination of stunning design and remarkable functionality makes this application a solid example of what can be made with
SAP Build Apps.

Used Systems
Frontend: SAP Build Apps (AppGyver)

Backend: OMDb API, QR code API

Video Demonstration
Disclaimer: The below video is not part of the SAP product documentation. Please read the legal disclaimer for video links
before viewing this video.

We couldn't verify the security of your

connection.
Access to this content has been restricted. Contact your internet service provider for
h l please visit the SAP Help Portal
This is custom documentation. For more information, 243
 8/29/2024
help.

How was this made?

Check out the blog post to see the development process in detail:

https://blogs.sap.com/2022/06/08/movie-ticket-booking-app-using-sap-appgyver/

Plants4Future – Intelligent gardening

Introduction
"Plants4Future – Intelligent gardening" was created by one of the community members Patrizia Rossi. The application allows
you to identify a plant by taking a picture of it or entering its name manually. Plants are then added to a virtual garden alongside
information about it. This way you can keep up with your plants in the smartest way.

Used Systems
Frontend: SAP Build Apps (AppGyver)

Backend: Plant.ID, Queensland Open Data

Video Demonstration
https://www.youtube.com/watch?v=9uFY3lQ-zvk

Disclaimer: The below video is not part of the SAP product documentation. Please read the legal disclaimer for video links
before viewing this video.

This is custom documentation. For more information, please visit the SAP Help Portal 244
 8/29/2024

How was this made?

Check out the blog post to see the development process in detail:

https://blogs.sap.com/2022/06/10/plants4future-intelligent-gardening-with-sap-appgyver-no-code-challenge/

All-In-One Travel App

Introduction
"All-In-One Travel App" was created by one of the community members Aocheng Yang. The app helps you with basic needs and
provides essential information about a country you are travelling to.

Used Systems
Frontend: SAP Build Apps (AppGyver)

Backend: SAP Conversational AI, ExchangeRates Data & RestCountries API (found on SAP Build Apps marketplace),
OpenWeatherMap, CountriesNow, and WikiAPI.

Video Demonstration
https://www.youtube.com/watch?v=hzy2fmow-Jo

Disclaimer: The below video is not part of the SAP product documentation. Please read the legal disclaimer for video links
before viewing this video.

How was this made?

Check out the blog post to see the development process in detail:

https://blogs.sap.com/2022/06/08/all-in-one-travel-app-with-appgyver-sap-no-code-challenge/comment-page-1/#comment-
629734

This is custom documentation. For more information, please visit the SAP Help Portal 245
 8/29/2024

Stores and Attachments

Introduction
"Stores and Attachments" was created by one of the community members Sebastiano Marchesini. This app eases the process
of archiving documents and pictures for a company undergoing retail store developments. All while ensuring these documents
and pictures are accessible to multiple users.

Used Systems
Frontend: SAP Build Apps

Backend: Mock API, Google API (found in the SAP Build Apps Marketplace)

Video Demonstration
https://www.youtube.com/watch?v=ClptZK8HdXc

Disclaimer: The below video is not part of the SAP product documentation. Please read the legal disclaimer for video links
before viewing this video.

How was this made?

Check out the blog post to see the development process in detail:

https://blogs.sap.com/2022/06/07/stores-and-attachments-appgyver-solution-low-code-no-code-challenge/

REST API Tester App

Introduction

This is custom documentation. For more information, please visit the SAP Help Portal 246
 8/29/2024
Sometimes static documentation is simply not enough to showcase the power of your API. Or you may nd yourself needing a
simple, yet clever API tester for quick queries. With SAP Build Apps, you can build a Dynamic REST API Tester, suitable for both
cases. It utilizes Composer's API Integration feature to dynamically get data from the endpoint. App's unique design allows you
to change Query parameters and get new results within seconds.

See the application demo below:

This is custom documentation. For more information, please visit the SAP Help Portal 247
 8/29/2024

Building the UI
It is generally a good practice to intialize an app build by con guring the User Interface (UI). This way, it is much easier to plan
the variables and app logic beforehand.

Header

We initialize the header by placing a single Container: Header* view on the canvas. In the 'Layout' properties tab, set the
"Layout" to "Vertical" and align components horizontally to the middle. This way, every component added to the container will
appear below the previous one and will be aligned to the middle of the screen. Lastly, just fy children components to the middle
to prevent elements from appearing lower/higher next to each other.

*Note: 'Header' is a custom name identi er used in the image. Later in the guide you will see similar notation.

To be able to put an icon next to text, we need to drag a new Container: Title into the Container: Header. It is best to use the
Layout tree for arranging the components within a Container. In the "Layout" tab of the Container: Title, set the layout to
Horizontal to make components appear next to each other. Drag a Title and Icon view components inside the container and set
their content to desired values (i.e "REST Countries V2" and the Globe icon).

This is custom documentation. For more information, please visit the SAP Help Portal 248
 8/29/2024

To nalize the header, drag two additional Text components as 'App Description' and 'API Description' and set their content to
desired de nitions. For both, it is important to align the text to "center" in the 'Layout' tab, and set the 'Width and Height' to
"Fit Content":

If done correctly, your header should look similar to the following; You are free to make any customizations, depending on your
ideas.

This is custom documentation. For more information, please visit the SAP Help Portal 249
 8/29/2024

Request Entry
One of the core concepts of Composer is component reusability. Since the UI utilizes repetitive containers, we can focus on
creating one and later on simply copying it the required amount of times. Below you can nd a UI breakdown for a single copy-
friendly entry:

Below you will nd a detailed guide for each element highlighted in Red:

1
The Container 'Request' holds two elements: 'Request type text' eld wrapped in a Container ('Request type border'), and the
'Path' text. Similarly to the Header con guration, set the Layot of the 'Request' Container to be horizontal, and align
components to the middle.

We wrap the 'Request type text' into a container, so that we can apply various styles. For instance, set a Positive colored border,
representing the 'GET' request.

This is custom documentation. For more information, please visit the SAP Help Portal 250
 8/29/2024

2&3
Below the 'Request' Container, we can add a Text eld ('Description') and a Button ('Test Button'). The Description contains
information about the request, and the Test Button is used to open the Request-Response eld.

In order to achive a more compact and responsive button style, we can set the 'Width and Height' to be "Fit content". You may
notice that the button will automatically change its size depending on the label. Align the button to the right.

4
Container 'Testing eld' consists of two sub-containers: 'Properties' (4) and 'Response' (5).

This is custom documentation. For more information, please visit the SAP Help Portal 251
 8/29/2024

Using a Title component, we can title the Testing Field. As before, to be able to put two components next to each other, we add
a Container: 'Response' and set its layout to Horizontal. In this case, we put a Text 1 and Input Field 2 view components inside of
it. As a styling option, we can again use 'Padding' to adjust the Input Field to an appropriate size:

Lastly, we con gure the Container: 'Response' by placing a Title and a Text component 4 within a Container: 'Response
Container' 3 . In this case, using a Container opens various styling options, for instance, a Border.

At this point, the UI con guration is concluded, and will not be changed later.

Adding Data

This is custom documentation. For more information, please visit the SAP Help Portal 252
 8/29/2024
Next step in app creation is con guring a data endpoint. Since this app is meant for API testing, a REST API data resource is our

choice.

Data Resource

For every REST API Data Resource, you are required to con gure a 'Resource ID', that is going to represent the Data endpoint in
the app. In the 'Resource URL', place the base URL of the API. In the REST countries example, it is
https://restcountries.com/v2.

Next, navigate to the 'Get Record (GET)' tab to con gure the GET request entry for the tester. Add /alpha/{code} to the
'Relative path' in order to nish the request URL. Since our tester is dynamic, it is necessary to be able to change the request
URL with the UI. To achieve that, we can use a 'URL placeholder'. Simply create one with the 'Label' and 'Key' set to "code" in
order for {code} in the URL to be bound to its value.

This is custom documentation. For more information, please visit the SAP Help Portal 253
 8/29/2024

It is important to uncheck the 'Is static' and 'Is optional' properties of the URL placeholder, to make it mandatory for the API
request.

Finally, we need to test the API connection via the 'Test' tab. Enter any valid value (i.e "FI") for the URL placeholder and click
"Run Test". If the request was successful, you should see 'Status: OK' in the top right corner, and 'Set Schema From Response'
button should become available. Press that to nalize the Data Resource con guration.

Data Variable
Upon making the Data Resource, you are should continue by creating a Data Variable that is going to hold the value of the
Response. Navigate to the 'Variables' view, then choose 'Data Variables'. Click on 'Add Data Variable' and choose your Data
Resource from the drop-down. In the image below, the 'Rest Countries' resourceID has been changed to 'SearchViaCode', as it is
a good practice to have name every data resource according to its purpose.

This is custom documentation. For more information, please visit the SAP Help Portal 254
 8/29/2024

On the right, in the 'Properties' tab, con gure a name for your data (in our case, countryRecordViaCode). Set the 'Data
variable type' to 'Single data recourd', since our API is using 'Get Record (GET)'.

You may notice a 'Required property' titled "Country code". This is the URL placeholder con gured before. In order to be able to
dynamically edit the code from the UI side, we need to bind it to a Page Variable. Navigate to the 'Page Variables' tab on the left
and create a page variable titled "countryCode" with a 'Variable value type' to be "Text". Return to the 'Data Variables' view and
bind the created page variable via 'Data and Variables -> Page Variable -> countryCode'.

This is custom documentation. For more information, please visit the SAP Help Portal 255
 8/29/2024

Page Variable
Variable con guration is nalized by creating a "True/Flase" Page Variable that is responsible for showing and hiding the
Request-Response eld in the UI.

Connecting data to UI
After con guring all required assets, we are now able to connect them to the UI.

To enable the dynamic changing of the URL Placeholder, bind the created Page Variable (countryCode) to the 'Value' property
of the Property Input. Since Page Variables natively support two-way binding, the value of the countryCode will be immediately
changed upon any user input.

This is custom documentation. For more information, please visit the SAP Help Portal 256
 8/29/2024

Next, we want Response Text to display the data from the API. Thus, we need to bind its value to the Data Variable created
earlier. At this point, you can bind it directly to the data variable and have the data displayed in the raw format. However, to
achive a clearer output, we can use formula binding and style the output in any way we desire. Below you can nd a formula
function used in the app demo to create a clean and dynamic output:

"Name: " + data.countryRecordViaCode.name + "\nCapital: " + data.countryRecordViaCode.capital + "\n

By using the mathematical sum expression (+), we are able to append data from the data variable to a static string. "\n"
indicates to begin the next entry starting from a new line.

Con guring Logic

To able to hide and show the 'Testing Field', we need to con gure logic that will do so on Button click.

First, bind the 'Visible' property of the 'Testing eld' to the true/false Page Variable created previously. This way, the visibility of
the component will depend on the value of the Page Variable. For instance, setting testingFieldVisibility1 to false will hide the
component and only display the Button and the Description.

To be able to control visibility with the 'Test Button', we can use the 'Set page variable' ow function attached to the
'Component tap' event. This way, the change will occur every time the button is pressed.

This is custom documentation. For more information, please visit the SAP Help Portal 257
 8/29/2024

To 'reverse' a value of the testingFieldVisibility1 we can use the following formula as binding for the 'Assigned value':

IF(IS_EQUAL(pageVars.testingFieldVisibility1, false), true, false)

By using the 'IF' statement, we verify whether or not the Page Variable testingFieldVisibility1 is equal to false. In case it is, we
set it to 'true'. Otherwise, it is set to 'false'. This way we reverse the value of the variable every time the check is executed.

Testing
Open the app in Preview and test the logic con gured a moment ago.

In the 'Testing eld', upon entering a country code, you should see the 'Response' eld change.

This is custom documentation. For more information, please visit the SAP Help Portal 258
 8/29/2024

It may take a several seconds for the response to appear. To make it happen faster, we need to reduce the API call delay. To do
so, navigate to the 'Data Variables' view and open the Logic canvas. Select the 'Delay' utility ow function and change 'Time to
wait' to a desired value.

Making a lot of requests to a public API may result in rate limiting and affect the app's capabilities. It is adviced to not decrease
the delay below 1 second.

Extension: Design suggestions

As was stated before, the 'Entry' UI component is highly reusable. Upon copying it, you can much faster add new entries without
having to create them from scratch. Below you will nd some inspirational entries for Entry design.

This is custom documentation. For more information, please visit the SAP Help Portal 259
 8/29/2024

Web App Preview

Preview your SAP Build Apps web app project in real time. All changes are re ected immediately.

1. Open the Preview Portal via the Launch section of the top toolbar.

2. Click Open web preview.

3. Click Open on the desired application's tile.

Mobile App Preview

Preview your SAP Build Apps Mobile Application in real time. All changes are re ected immediately upon project save.

1. Open the Preview Portal from the Launch tab located in the top toolbar.

2. On your mobile device, install the SAP Build Apps Preview for iOS or Android . Open it and choose SAP Build Apps from
the two tiles.

 Note
This is custom documentation. For more information, please visit the SAP Help Portal 260
 8/29/2024
By default, a PIN code is generated for the Europe Frankfurt (EU10) landscape. In case your subaccount is using US East
(US10), proceed to Other login options, choose SAP Build Apps US10 from the Edition drop-down and click Generate code.
Continue with the instructions further.

3. You should now see a temporary PIN code. Take note and come back to the preview portal in your browser. Note that the PIN
code timeout is 5 minutes.

4. Enter your code in the input eld and press Con rm pin. In a moment, you're presented with a success message.

This is custom documentation. For more information, please visit the SAP Help Portal 261
 8/29/2024

5. You're now logged in. Click on any application tile to preview it.

 Note
For details on Open Source Legal Notices (OSNL) for Free and Open Source Software (FOSS) see, Free & Open Source
Notices for Android and Free & Open Source Notices for IOS .

Using Sample Data

To start using the Sample Data con gured in the Data Browser, open the Preview Portal and nd a tile associated with your app.
Applications con gured with Sample Data have the Open button substituted by Settings.

Clicking Settings opens a con guration popup that allows you to enable and disable all instances of Sample Data or reset them
to the default state. Enable the desired entries and click Open Preview to preview your application with Sample Data enabled.

This is custom documentation. For more information, please visit the SAP Help Portal 262
 8/29/2024

Build and Deploy Web Applications

Building an app that you can deploy on SAP Build Work Zone. Alternatively, you can download it as a compressed folder for
deployment on your Cloud Foundry environment or for other web app deployments.

SAP Build Work Zone Deployment

Con guration

To create con guration, select New Con guration button to enter the con guration view and choose SAP Build Work Zone as a
target platform.

Enter a name for the new con guration, choose the desired image asset set and then select Create.

Initiate a Build

Select your con guration.

This is custom documentation. For more information, please visit the SAP Help Portal 263
 8/29/2024

Enter your project's build version number and choose the latest runtime version. Select Build to start the build process.

Deploy the build

In order to deploy the build, you must meet the following prerequisites:

Verify a working subscription to the Launchpad Service. Rerun the SAP Build Apps booster in case you're missing it.

Enable Cloud Foundry Environment for the subaccount used for developing with SAP Build Apps. Your user account shall
be a member of the Cloud Foundry organization and a manager of the space where the application will be deployed.

If you've subscribed to SAP Build Apps without using the booster, make sure you have an instance of SAP Build Work
Zone standard edition.
This is custom documentation. For more information, please visit the SAP Help Portal 264
 8/29/2024
Once the build is done, a button titled Deploy becomes available. Select it to enter deployment con guration view.

Then, provide the required API Endpoint, organization name and space, and select Continue

Cloud Foundry Deployment

 Tip
See Getting Started in the Cloud Foundry Environment on the SAP Business Technology Platform documentation.

Before making the deployment:

Take note of the Cloud Foundry's API Endpoint, Org name and Space.

Install the Cloud Foundry Command Line Interface (cf CLI).

Deployment script

Execute the following series of commands in your terminal. Substitute <org_name> with the Org name, <space_name> with
Space and <api_endpoint> with API Endpoint. Lastly, use your lename instead of the app.mtar

cf install-plugin multiapps
cf api <api_endpoint>
cf login
cf target -v -o "<org_name>" -s "<space_name>"
cf deploy app.mtar

Accessing your app

In the SAP BTP Cockpit, navigate to HTML5 Applications and click the app name to see your deployed web app.

This is custom documentation. For more information, please visit the SAP Help Portal 265
 8/29/2024

Web App Deployment

Con guration

To create con guration, select New Con guration button to enter the con guration view and choose Web as a target platform.

Enter a name for the new con guration, choose the desired image asset set, and save it.

Initiate a Build

Select your con guration.

Choose the latest runtime version and enter your project's version number. Select Build to start the build process and save the
newly created ZIP le.

This is custom documentation. For more information, please visit the SAP Help Portal 266
 8/29/2024

Local Testing
The following method allows you to launch your web application locally for testing. Note: Integrations and other data resources
may not work with this method.

Begin by building your application with the ZIP output. Once nished, download the build and placed in a desired location on your
system. Unpack the ZIP le.

With your system terminal, navigate to the unpacked application and execute the following commands:

npm install -g npx

npx serve

Here, we rst install npx, which executes npm packages. Then we use serve to launch a local server, displaying our web
application. Use Ctrl+C to stop the server.

This is custom documentation. For more information, please visit the SAP Help Portal 267
 8/29/2024

Android Builds
Building an Android app with SAP Build Apps in APK or AAB format.

Supported Versions
SAP Build Apps builds require Android SDK to be version 34 or higher. This change sets the minimum supported device
version to Android 14.

Prerequisites
You have con gured required image assets for your app. For more information, check out the Image Assets and iOS
Usage Strings guide .

If your app is using any SAP BTP Connectivity features, you have to activate SAP Mobile Services. For more information,
check out the SAP Mobile Services guide.

Con guration
To create con guration, select New Con guration button to enter the con guration view and choose Android as a target
platform.

Enter the name of the new con guration and set the required con guration settings:

This is custom documentation. For more information, please visit the SAP Help Portal 268
 8/29/2024

App Description

Display Name

This is the name for your app shown under the app icon in the device home screen, as well as in settings and other
places.

Package Identi er

This setting de nes the unique package identi er for your binary APK package. It must be in reverse domain
format, for example, com.mycompany.myapp.

URL Scheme

A URL Scheme enables the user to launch your app via a hyperlink from an external app or website. For example,
if you try to open Google Maps via your phone's browser, you will be presented with a prompt asking if you want to
open the app instead.

De ne the URL scheme via this universal format: scheme://.

Target File Type

APK

This is custom documentation. For more information, please visit the SAP Help Portal 269
 8/29/2024
Android's installable, executable format for apps. It is used best for testing and P2P app sharing.

AAB

Android App Bundle is only for publishing and contains the entire program code of the Android app. It cannot be
used to install apps on Android devices but is used to optimize the size of a build.

Since August 2021, Google Play is requiring new apps to be published with the Android App Bundle (AAB).

Certi cates

The keystore le is used to securely and uniquely sign your app binary, so that e.g., other apps can't pretend to be an
update for your app. For example, submitting an update to Google Play requires that the new app binary has been signed
with the same keystore le as the original build. To generate a keystore le, the easiest way is to use the Java keytool
(you need to install JDK for this). Lowest supported SDK version is 34!

Run the following command in your Terminal or Command Prompt (replacing my-app-name appropriately).

keytool -genkey -v -keystore my-app-name.keystore -alias my-app-name -keyalg RSA -keysize 2048

You have the following elds:

Keystore File

Upload your my-app-name.keystore le here.

Keystore Password

Enter the password you gave when generating the keystore.

Alias Name

Enter the alias name (my-app-name in the above example)

Alias Password

Unless you set a separate alias password, this is the same as the keystore password

Image Assets

Image assets include the application icon, launch screen and noti cation badges.

Plugin Management

 Note
This option is only available when there is a plugin used in your app.

Provide required additional settings to your plugins that are needed for them to work correctly.

Screenshots and Screen Recording

The FLAG_SECURE option is enabled by default. This con guration aims to protect sensitive information by disabling
screen recording and preventing app content from appearing on screenshots. To learn more, see Android FLAG_SECURE
documentation .

Initiate a Build
Select your build con guration.

This is custom documentation. For more information, please visit the SAP Help Portal 270
 8/29/2024

Enter the required build con guration settings and start the new build.

Build Version Number

Semantic version number for the current build, for example, 1.0.0. Shown in device settings and other places.

Version Code

This is custom documentation. For more information, please visit the SAP Help Portal 271
 8/29/2024
Internal version code for the app, given as an integer, for example, 10000. When you publish an update to your app in
Google Play, its version code must be higher than previous version codes.

Runtime Version

The version of the SAP Build Apps builder to compile your application.

Image Assets and Permissions

Check out the Image Assets and iOS Usage Strings guide.

SAP Mobile Services

SAP Mobile Services authenticates your mobile users with Cloud Identity Services and provides access to Integrations and SAP
BTP services in your built mobile applications.

Read more about the con guration process in the SAP Mobile Services guide.

Android Distribution
The APK package generated by the Build service is essentially the same as you would get building an app with Android Studio
manually.

You can install it on your device with an USB cable, upload it somewhere and share it as a direct-download link, publish it via
Google Play or use a mobile app management solution to manage distribution.

Additional Notes
Why is the le size of Android builds so big?

Our Build service produces what is called fat binaries . In short, the binary includes optimized support for several different
processors. This makes the size of the build to be large even when the app is only a one page application. If you have built an
AAB and intend on uploading your app to Google Play, this fat binary will be processed by Google Play in such a way that the
app your users download includes only the support for the device they are using. Thus the app size each user downloads and
installs is smaller than the original AAB le. Please check out this guide by Google Play on how to see the actual download
and install size of your application.

For APK, we aim to provide an option to build only a generalized apk to reduce the le size alongside the fat APK version
available currently.

Google PlayStore: Private Applications

Please note that SAP Build Apps doesn't support private applications in the Google Store.

IOS Builds
Build iOS applications using SAP Build Apps for App Store release or local testing.

Prerequisites
You have con gured required image assets and permissions for your app. For more information, check out the Image
Assets and iOS Usage Strings guide.

This is custom documentation. For more information, please visit the SAP Help Portal 272
 8/29/2024
If your app is using any SAP BTP Connectivity features, you have to activate Mobile Services. For more information, check
out the SAP Mobile Services guide.

To build iOS apps, you need to enroll in the Apple Developer Program . The Apple Developer portal at
https://developer.apple.com/account will then let you generate and con gure many of the required assets, including:

iOS distribution certi cate (.p12)

Bundle identi er

Provisioning pro le (.mobileprovision)

Con guration
To create con guration, select New Con guration button to enter the con guration view and choose iOS as a target platform.

Enter the name of the new con guration and set the required con guration settings:

App Description

This is custom documentation. For more information, please visit the SAP Help Portal 273
 8/29/2024
Display Name

This is the name for your app shown under the app icon in the device home screen, as well as in settings and other
places.

Package Identi er

The unique package identi er for your app. It should follow the reverse domain format (for example,
com.mycompany.myapp.production and must match the bundle identi er registered in the Apple Developer
portal.

URL Scheme

External iOS/Web Apps can use this URL scheme to integrate with your app and provide a more seamless
experience for the user. For example, a user can launch your app by clicking a link directed at the URL scheme (in
the same manner as clicking an iTunes link launches the iTunes app and plays the song speci ed in the link). De ne
the URL scheme via this universal format: scheme://.

Target File Type

App Store

Build the app to be published to Apple App Store.

Ad Hoc

Ad hoc distribution allows you to send the app to the test devices you have registered on the Apple Developer
portal without the use of Apple TestFlight.

Certi cates

You have the following elds:

iOS Distribution Certi cate

The required distribution certi cate is a P12 le, which can be made in your Keychain by selecting to export your
Apple distribution certi cate (.cer) and its private key. Make sure you generate both App Store Provisioning
pro le and iOS Distribution certi cate, required to make builds with Build Service. Note that you must set a
Distribution certi cate (.p12 le) password.

iOS Distribution Certi cate Password

The password is set when the distribution certi cate P12 le was created.

App Store Provisioning Pro le

An App Store provisioning pro le (.mobileprovision) generated for the app in the Apple Developer portal. Must
match the registered package identi er and the iOS distribution certi cate.

Ad Hoc Provisioning Pro le

The pro le created in the Apple Developer portal.

Image assets

Image assets include the application icon, launch screen and noti cation badges. For more information, check out the
Image Assets and iOS Usage Strings guide.

Plugin Management

 Note
This option is only available when there is a plugin used in your app.

Provide required additional settings to your plugins that are needed for them to work correctly.

Initiate a Build
This is custom documentation. For more information, please visit the SAP Help Portal 274
 8/29/2024
Select your build con guration.

Enter the required build con guration settings and start the new build.

This is custom documentation. For more information, please visit the SAP Help Portal 275
 8/29/2024
Build Version Number

Version number of your application. Every new build should have a higher version number to correctly track the changes
in the application.

Short Version Number

Semantic version number for the current build, for example, 1.0.0.

Runtime Version

The version of the SAP Build Apps builder to compile your application.

Image Assets and iOS Usage Strings

Check out this Image Assets and iOS Usage Strings guide.

Mobile Services
SAP Mobile Services authenticates your mobile users with Cloud Identity Services and provides access to Integrations and SAP
BTP services in your built mobile applications.

Read more about the con guration process in the SAP Mobile Services guide.

iOS Distribution
The main way to distribute an app for testing is to set it up on App Store Connect and use Apple's Transporter app to
upload your build.

 Tip
If you encounter an issue where an iOS binary built with the SAP Build Apps fails to process in App Store Connect if it's
uploaded via the Transporter app without Xcode installed. Installing Xcode resolves the issue and allows the Transporter app
to be used normally.

After the build is done processing, you can use Apple's TestFlight service to distribute it to members of your Apple Developer
organization.

If you submit your app to Apple's Beta Review, you can also generate a public link to join your app's beta testing.

Once you're happy with your app, you can send it to Apple for actual review. After getting accepted, your app will be available on
the public App Store.

Finally, you can use Apple Business Manager to limit your app's access to just to your organization, or to speci c users via
download codes.

Image Assets and iOS Usage Strings

Learn about the Image assets and con gure the permissions for your app built with SAP Build Apps.

Image assets

App icon

This is custom documentation. For more information, please visit the SAP Help Portal 276
 8/29/2024
The app icon is shown on the device's home screen, in different parts of the operating system and in App Store/Google Play.

You can read more about app icons in Apple's App Icon documentation and Google Play icon design speci cations

Launch screen
The launch screen (sometimes called splashscreen) is a full-screen image that appears immediately when your app starts up. It
is Apple's intention that the launch screen helps make your app feel fast and responsive. As such, it should represent static
parts of your app's initial UI, so that when the app actually launches, the transition will be seamless.

That said, many apps show a logo or similar on the launch screen.

Composer only supports static PNG images for the launch screen. This means a separate image is required for all supported
screen sizes.

Noti cation, Spotlight, & Settings icons

You may choose a custom image as a noti cation icon for your app and the icon that will appear in the device's settings.

Speci cally for IOS you can pre-con gure the icon that will appear in the Spotlight search feature. Note that you are required to
submit 3 sizes to account for different screen resolutions.

On iOS:

The image will be centered/cropped based on the orientation and screen size, but not beyond the red max boundary area.

This is custom documentation. For more information, please visit the SAP Help Portal 277
 8/29/2024
You can read more about the launch screen and view a list of required screen sizes in Apple's Launch Screen documentation
and Google's Material Design launch screen documentation.

iOS Usage Strings

Permissions for iOS builds are con gured automatically, but you should check and modify the 'Usage strings' according to how
your app makes use of the requested permissions.

SAP Mobile Services

SAP Mobile Services authenticates your mobile users with Cloud Identity Services and provides access to Integrations and SAP
BTP services in your built mobile applications.

Prerequisites
To be able to use SAP Mobile Services, verify that you have Subaccount entitlements of at least 1 unit for Mobile
Services, resources plan.

For all SAP BTP destinations (SAP Systems) that you want to use in the built application, you need to add a
MobileEnabled property with a value true to them.

Additionally, verify that the SAP-Build-Apps-Runtime destination has the MobileEnabled property as well.

This is custom documentation. For more information, please visit the SAP Help Portal 278
 8/29/2024

Enable SAP Mobile Services

1. In SAP Build Apps, enable SAP BTP Authentication in the AUTH tab and Save your application.

2. Open the LAUNCH tab, choose Open build service, and select Enable SAP Mobile Services.

3. To obtain the information required in the next Mobile Services authentication page, you can navigate to your BTP Cockpit
Subaccount. In the left-side menu, choose Overview and nd the Cloud Foundry Environment section. Take note of the API
Endpoint, Org Name, and Name values.

4. Navigate back to the Mobile Services authentication page and ll in the values noted in the previous step.

After choosing an API Endpoint, make sure to Login with BTP.

Choose the Organization name from the dropdown, along with the Space name.

You can nd a visual example of a correctly lled con guration in the following screenshot:

SAP BTP Cockpit overview tab (left) and SAP Mobile Services con guration (Right).

5. Select Continue and wait for the process to succeed without closing the tab.

Troubleshooting
Organization and Space names

This is custom documentation. For more information, please visit the SAP Help Portal 279
 8/29/2024
In case you don't see Organization and Space names in the dropdowns, that implies that you don't have the appropriate user
roles to see them. Request your SAP BTP Cockpit administrator to assign you Cloud Foundry developer and manager roles.

App failed to create

In case you get the message "App creation failed with error code **CREATE_FAILED**" or similar, you will need to access the
**SAP Mobile Services Cockpit** to nd the root cause of the problem.

- In the SAP BTP Cockpit, go to your subaccount > Services > Instances and Subscriptions > search for your app ID (eg.
buildapps69) > nd the instance named buildapps69-mobile-services under "Instances" and click it to open the SAP Mobile
Services Cockpit.

- If the app is in an inconsistent state you will see a dialog to restore it, click "Restore".

This is custom documentation. For more information, please visit the SAP Help Portal 280
 8/29/2024

- After a few moments the app is restored. If instead you get an error noti cation, click on the bell icon on the top right of the
page to nd the root cause.

You may need to adjust your Cloud Foundry organization or space quotas, or alternatively delete service instances and space
routes that are no longer used.

Built Application
An application built with Mobile Services con gured will ask a user for a rst-time setup. Upon opening the application, click Get
Started.

This is custom documentation. For more information, please visit the SAP Help Portal 281
 8/29/2024

Agree with the End User License Agreement (EULA).

This is custom documentation. For more information, please visit the SAP Help Portal 282
 8/29/2024

Sign-in with your Cloud Identity Services credentials.

This is custom documentation. For more information, please visit the SAP Help Portal 283
 8/29/2024

Create a passcode for the application. You'll be required to enter this passcode every time you launch the application.

This is custom documentation. For more information, please visit the SAP Help Portal 284
 8/29/2024

Lastly, choose whenever you want to enable noti cations in your application. Restart the application in case that you don't
receive the permission request from your device.

This is custom documentation. For more information, please visit the SAP Help Portal 285
 8/29/2024

Project Sharing
Project sharing allows you to add members to your SAP Build Apps project and enables collaborative editing. Each member is
entitled to a user role that permits only a certain set of actions within the project.

User roles
Viewer: Read-only actions, such as viewing and deploying.

Developer: Edit, deploy, release, manage dependencies in a project, and publish to the library.

Administrator: Complete access, including editing, sharing, and deleting a project.

A higher user role includes all permissions of the preceding ones.

Sharing your project

Project sharing is done via Application Development Lobby.

This is custom documentation. For more information, please visit the SAP Help Portal 286
 8/29/2024
Locate an existing SAP Build Apps application you would like to share and click on "Me" under the 'Members' column, or
'Manage Members' in the three dots menu:

In the pop-up window:

1. Enter an email of the user you are sharing the project with.

2. Choose a user role from the dropdown.

3. Click 'Add' to enter the user to the list.

a. If necessary, add more users.

4. Click 'Save' to share the project with entered users.

Collaborative editing
This is custom documentation. For more information, please visit the SAP Help Portal 287
 8/29/2024
After sharing the project, members with roles 'Developer' and 'Administrator' can start making changes to the application.
Current simultaneous editing follows the following ruleset:

1. Unsaved changes are continuously applied on top of the latest saved version by another user. In other words, non-
con icting changes will be immediately re ected for all members, without intervening with their work.

2. Editing the same parts of the project, e.g., page name or component style class, will cause a con ict. Con icts are
resolved by reloading the page, where con icting changes are discarded. Note that con icts are resolved in favor of the
latest saved version.

3. User pro le coloring in the top bar re ects the current state of the user. Grey implies no unsaved changes, while orange
tells that the user is currently editing the project.

It is of best practice to save the application frequently to avoid con icts and make sure that all developers have the latest
version.

Save as New Project

Save as new project allows you to copy your SAP Build Apps application.

1. In the Build Lobby, click More options next to a project you want to copy and select Save as New Project

2. In the pop-up, you can modify the name for the copy. By default, the name is reused from the original project with a word
"Copy" appended at the end. Optionally, provide a description for the new app.

3. Click Save as new to create the copy.

You're automatically redirected to the newly created app. It's also available in the Build Lobby.

 Remember
Saving an SAP Build Apps - Web & Mobile as a new project transfers all data bindings to the copy.

A copy of SAP Build Apps - Backend needs to be manually redeployed to be accessible as an integration.

Asset Manager
Manage all uploaded fonts and images in a dedicated environment.

Accessing the Asset Manager and Adding New Files

Asset manager is meant to ease the process of storing and using images/fonts in Composer. The Asset Manager can be
accessed via the image icon in the 'Properties' tab.

This is custom documentation. For more information, please visit the SAP Help Portal 288
 8/29/2024
Upon entering, you should be presented with the following view:

1. Folders
The new asset manager supports creation of folders. This may be particularly useful when dealing with large amounts of les.
Move les over to a folder by simply drag-and-dropping them:

2. Adding Files
Adding new les can be done in two ways: Manually choosing a le from your system, or dropping them to the asset manager
window.

Using the Stored Images

To use an image stored in the asset manager, simply choose it from an appropriate folder and click 'Use Image':

This is custom documentation. For more information, please visit the SAP Help Portal 289
 8/29/2024

Tenant Con guration

Con gure different types of tenants as an administrator.

Read more about Tenant Con guration in the SAP Build Lobby documentation.

Regions and IP Addresses of Outgoing and Incoming Networking

Egress - Outbound IP addresses of connections originating from SAP Build Apps.

Ingress - Inbound Load Balancer IP addresses for requests to SAP Build Apps.

 Caution
The following IP Addresses might be a subject to change.

Region Name Technical Key Egress Ingress

Europe (Frankfurt) eu10 18.197.92.199 3.74.237.85

3.73.150.0 3.74.98.134

3.73.225.245 3.65.116.247

US East (VA) us10 35.175.22.166 3.218.2.80

52.55.56.136 54.197.230.87

54.165.250.183 54.165.159.196

Check out Regions and API Endpoints Available for the Cloud Foundry Environment.

If you are using a Cloud Connector, see the Network section in the Prerequisites page.

Visual Cloud Functions User Authorization

This is custom documentation. For more information, please visit the SAP Help Portal 290
 8/29/2024
Visual Cloud Functions User Authorization is a robust feature designed to manage user access to the backend built with visual
cloud functions. This feature allows the system administrator or developer to control the capabilities of end users, such as
determining whether a user can read a certain data entity, but not write to it.

Authorization is primarily composed of two components: Roles and Assigning Roles.

 Remember
SAP Build Apps uses SAP Cloud Identity Services for user authentication. Thus, all information entered while con guring
roles or users must match the one in your Cloud Identity Services. This is especially relevant for user e-mails, group names
and custom attributes.

You can nd relevant information about Cloud Identity Services in the SAP Cloud Identity Services - Identity Authentication
topic.

Creating Roles
Roles are a way of grouping speci c access permissions together. Each role can be assigned a set of permissions that dictate
what actions a user with that role can perform on a data entity.

Learn more about creating user roles.

Assigning User Roles

Once roles have been created, they can be assigned to individual users. This process is known as Assigning Roles. The assigned
role determines the permissions that a user has when interacting with data entities.

Learn more about managing users and assigning roles.

Monitoring and Troubleshooting

Learn the steps necessary to solve service unavailability for SAP Build Apps.

Procedure
Check the platform status and/or official announcements.

SAP Trust Center

SAP Community Topic

If you could not nd a solution, please do the following:

Submit a Support ticket to the CA-LCA-ACP component, see: Getting Support.

Auditing and Logging Information

Here you can nd a list of the security events that are logged by SAP Build Apps.

Security Events Written in Audit Logs

Event grouping What events are logged How to identify related log events

This is custom documentation. For more information, please visit the SAP Help Portal 291
 8/29/2024

Event grouping What events are logged How to identify related log events

Security-related events General security UserModi edEvent - User data was

modi ed.
audit.security-events
UserAuthenticationSuccess - Successful
log-in from a user.

TokenIssuedEvent - A user session is

active.

Custom-check-related events Data access Data Access message. - Data has been
accessed.
audit.data-access

Con gurationt-related events Con guration change Con guration modi cation message. -
Data has been con gured/modi ed.
audit.con guration

The following information is described in the table columns:

Event grouping - Events that are logged with a similar format or are related to the same entities.

What events are logged - Description of the security or data protection and privacy related event that is logged.

How to identify related log events - Search criteria or key words, that are speci c for a log event that is created along
with the logged event.

Related Information
Audit Logging in the Cloud Foundry Environment

Security

Auditing and Logging

Security-related events are logged using the SAP Audit Log service for SAP Business Technology Platform.

Currently logged security events include the following:

Events related to project creation, deletion, or access rights changes.

Project import or export actions.

Subscription and un-subscription events.

Visual cloud functions deployment status changes.

Changes to Visual cloud functions user access control lists.

You can access the audit logs for your BTP sub-account by subscribing to the SAP Audit Log service. You can then view the audit
logs associated with your sub-account in the application provided in the SAP BTP Cockpit. For information on using the Audit
Log Viewer, see Audit Log Viewer for the Cloud Foundry Environment in the SAP BTP documentation.

Data Protection and Privacy

This is custom documentation. For more information, please visit the SAP Help Portal 292
 8/29/2024
Data protection is associated with legal requirements and privacy concerns. In addition to compliance with general data
protection and privacy acts, it's necessary to consider compliance with industry-speci c legislation in different
countries/regions.

SAP provides speci c features and functions to support compliance with regards to relevant legal requirements, including data
protection. SAP doesn't give any advice on whether these features and functions are the best method to support company,
industry, regional, or country/region-speci c requirements. Furthermore, this information shouldn't be taken as advice or a
recommendation regarding additional features that would be required in speci c IT environments. Decisions related to data
protection must be made on a case-by-case basis, considering the given system landscape and the applicable legal
requirements.

 Note
SAP doesn't provide legal advice in any form. SAP software supports data protection compliance by providing security
features and speci c data protection-relevant functions. In many cases, compliance with applicable data protection and
privacy laws won't be covered by a product feature. De nitions and other terms used in this document aren't taken from a
particular legal source.

 Caution
The extent to which data protection is supported by technical means depends on secure system operation. Network security,
security note implementation, adequate logging of system changes, and appropriate usage of the system are the basic
technical requirements for compliance with data privacy legislation and other legislation.

For general information about data protection and privacy in SAP Business Technology Platform (SAP BTP) environments,
see the SAP BTP documentation under Data Protection and Privacy.

Personal Data
SAP Build Apps doesn't provide the technical capabilities to support the collection, processing, and storage of personal data.

Identity and Access Management

SAP Build Apps projects are created and accessed from the SAP Build Lobby. Access rights to individual projects are also
managed within the SAP Build Lobby. Once the user has been granted "Developer" or "Administrator" rights to a Build Apps
project, editing the Build Apps application and managing the backend application deployments is done in the SAP Build Apps
Design Time. Business end-users interact with the actual deployed applications, either in SAP Build Workzone, as standalone
mobile applications using BTP Mobile Services, or in the managed backend runtime hosted by SAP Build Apps.

The following diagram illustrates the three large components in the authentication and authorization setup for Build Apps, and
the following sections go into more details for each speci c component.

This is custom documentation. For more information, please visit the SAP Help Portal 293
 8/29/2024

SAP Build Lobby

SAP Build Lobby is the common UI entry point for both SAP Build Apps and SAP Build Process Automation. When a customer
subscribes to SAP Build Apps, an entry point is provisioned to the Lobby as the URL that’s visible in the BTP Cockpit, and all
projects are created in the Lobby UI.

Lobby is using XSUAA for authentication and authorization management for the citizen developers accessing Build. The
following XSUAA Roles are de ned for SAP Build Apps use cases, and are managed using the standard XSUAA Role Collection
method in the BTP Cockpit.

Role Provider Description

RegistryAdmin Lobby Allows full administrative access in the Lobby. This allows viewing, editing the access
rights to and deleting any project in the tenant, as well as editing tenant-wide settings.

RegistryDeveloper Lobby Allows creating and viewing projects in the Lobby. User can edit projects and
create/delete deployments without this role. Project edit requires
Developer/Administrator level access to project.

BuildAppsAdmin Build Apps Allows using the lobby-only API endpoint of Build Apps through the Lobby UI, and
XSUAA API changing the user access assignments of any project within the tenant.

BuildAppsDeveloper Build Apps Allows creating Build Apps projects in the Lobby. User can edit projects and
XSUAA API create/delete deployments without this role. Project edit requires
Developer/Administrator level access to project.

Access rights to speci c projects are controlled by assigning the principal id (currently e-mail) the desired permissions. The
permissions are then propagated to SAP Build Apps by calling the Build Apps XSUAA API, and persisted also in our database.
The different access levels that project members can have are described in detail in the Managing Project Members article.

Authorization Description

Viewer Authorization for read-only actions, such as viewing and deploying, but not modifying the existing content of the
project.

Developer All viewer permissions plus permission to modify the project, such as modifying existing con gurations, releasing,
and publishing it.

Administrator The person with the authorization to carry out various important administrative tasks is the project's administrator
(like assigning authorization, adding or removing members). Any member with administrator authorization can carry
out all actions. Project creator has administrator authorization privilege and this privilege can't be removed.

This is custom documentation. For more information, please visit the SAP Help Portal 294
 8/29/2024
These rights can be assigned either to a named principal, identi ed by e-mail address, or to a wild-card *, which will allow any
valid user of the tenant to access the project.

Deleting Users with RegistryAdmin Role via Support Ticket.

A user with the RegistryAdmin role can request the deletion of another user in the same subaccount by contacting our support
. The support ticket should contain the email address of the user to delete and the respective subaccount ID. Any projects
made by that user will be transferred to the admin requesting deletion.

SAP Build Apps - Design Time

SAP Build Apps Design Time is the editor where the designing and deploying of projects is done. It's available as a subscription-
based application on SAP Business Technology Platform. Access to projects created in the Lobby is controlled by the project-
speci c access rights assigned to each project through the SAP Build Lobby.

Authentication to SAP Build Apps is done through SAP Identity and Authentication service (SAP Cloud Identity), and SAP Build
Apps is visible as a subscribed application in the customer Identity service tenant.

SAP Build Apps claim requirements in Identity

Access to SAP Build Apps is managed in the automatically created Identity application titled "SAP Build Apps" visible in the
customer Identity tenant that has established trust with the BTP sub account. If the Identity service user store is used as the
primary user registry, these claims are automatically available and populated. Issues usually arise when there's a custom
Corporate identity provider (AzureAD/other) that is actually the user data source, and SAP Identity Authentication is
con gured to just be a proxy. SAP Build Apps requires these user-speci c claims with these exact names in the ID token:

Claim Value

E-mail E-mail address of the logged in user. Must match the one used in the corresponding XSUAA application that is used
to authenticate the users of the BTP sub account. This is the principal identi er for project access control.

given_name Used for display purposes.

family_name Used for display purposes.

groups The relevant user groups, if used for project grants or visual cloud functions authorization rules.

Additionally, SAP Build Apps is con gured to request the Subject Name Identi er (SNI, “sub” in jwt) to be the user’s e-mail
address as a fallback. However, some custom IDP:s may be con gured to ignore this request, so the SNI fallback won't work, and
the custom mapping described below must be done.

SAP Identity as proxy for custom Corporate Identity Provider

When SAP Identity just acts as a proxy for user information from a custom identity provider, all of the claims must come from
the IDP. If the naming of the claims doesn't match the ones that Build Apps is expecting, a mapping must be done at SAP
Identity and Authentication level. There are two different ways to do this, depending on if the Identity user store is enabled or
not.

Identity service as full proxy, no user store

This is custom documentation. For more information, please visit the SAP Help Portal 295
 8/29/2024
In this case the claim mapping must be done at the Corporate Identity Provider section, using the Enriched Attributes function:
https://help.sap.com/docs/identity-authentication/identity-authentication/enrich-assertion-attributes-coming-from-
corporate-idp?locale=en-US

For example, if the IDP is sending the user e-mail in a SAML claim called “userEmail”, a mapping from that claim to “e-mail” can
be con gured like this:

Attribute = email, Value = ${userEmail}

Identity service user store enabled

If the Identity service user store is enabled, but some of the attributes aren't populated from the custom IDP, then the mapping
for the attributes needs to be done on the Identity application level: https://help.sap.com/docs/identity-
authentication/identity-authentication/con gure-default-attributes-sent-to-application?locale=en-US, under “Default
Attributes” --> “Custom Attributes”.

SAP Build Apps Backend Applications

The managed backend runtimes hosted on SAP Build Apps can be con gured to have authorization rules based on the logged in
principal and roles assigned to them for each deployment. The authorization rules are managed per project in the SAP Build
Apps Design Time, and enforced at runtime by the backend deployment.

SAP Build Apps Frontend Applications

Frontend applications created with SAP Build Apps are then deployed into SAP Build Workzone as HTML5 applications, or
distributed as standalone mobile apps. Authentication to the deployed applications is managed by SAP Build Workzone. The
MTAR le that is generated by SAP Build Apps for web application deployments into SAP Build Workzone has authentication as
mandatory, but no speci c authorization rules or groups. Any authenticated users with access to the SAP Build Workzone
tenant will be able to access the Build Apps frontend applications.

Access to all business services and data must be done using BTP Destinations, and the destinations must be con gured to use
principal propagation. The backend system is responsible for authorization checks when accessing data resources. More
information on con guring Destinations can be found in the Principal Propagation article.

Architecture, Network and Communication Security

The following architecture diagram gives an overview of the components of SAP Build Apps, and the integrations and
connectivity between them:

This is custom documentation. For more information, please visit the SAP Help Portal 296
 8/29/2024

SAP Build Apps is a subscription application on BTP, and is accessed through a web browser. Connectivity to the application is
protected with TLS.

Multi-Tenancy
SAP Build Apps is a multi-tenant application, which means that all subscribers share the same application components, the
Design Time database and the same network.

Customer applications are isolated from each other by application schema level controls.

The application builds for each customer are done in ephemeral isolated containers that are created and destroyed for
each build job speci cally, and share no persistency.

The Visual Cloud Functions runtimes are isolated based on namespaces, and share no networking between other
deployments.

The managed persistency offered by SAP Build Apps for the runtimes is stored in a tenant-speci c database instance
with tenant-speci c encryption at rest.

Customer assets, such as images and built application binaries are isolated in tenant-speci c paths or collections.

Frontend Security
SAP Build Apps has a companion mobile application "SAP Build Apps", available on the IOS App Store and Android Marketplace.
The mobile application can be used to preview the created applications in a native mobile context.

Best practices for ensuring the mobile application security:

Keep the application up to date with the latest releases from the platform-speci c application stores.

The mobile application connects to the speci c user session on the SAP Build Apps design time, and therefore has
access to all projects that the user initiating the connection can access. This means that any BTP Destinations accessed
through the mobile application will have the same principal propagated to them that is logged in to SAP Build Apps,
using the same session, and the preview will have the same access to backend systems that the logged in user has.

Don't share the mobile preview with other users.

Secure Delivery, Con guration, and Change Management

This is custom documentation. For more information, please visit the SAP Help Portal 297
 8/29/2024
Applications created with SAP Build Apps include third-party open-source components, and it's important to keep them up to
date. Therefore, we periodically release new versions of the SAP Build Apps runtime. To update all dependencies and take into
use the latest runtime version the application needs to be rebuilt for each target platform with the latest version of the runtime
selected in the Build Service.

Follow the SAP security notices to be informed of any critical security updates required for your applications.

SAP Build Apps backend runtime dependencies are automatically updated for all deployed applications on your behalf.

When developing the applications and adding connectivity to external systems, it's important to use the BTP Destination
service for all connectivity involving credentials. Don't add API keys, usernames and passwords, or access tokens directly into
the application descriptor or any of the ow functions, as such keys will be readable by the application end-users. Any API keys
must be stored in the Destination service, so that they can be securely used at runtime.

Operational security
SAP Build Apps is offered as a subscription on SAP BTP, and the security of the platform is managed by BTP.

If using on-premise destinations through the BTP Connectivity Service, the endpoints for the SAP Build Apps connectivity proxy
need to be included in an allow list on the customer premises. The region-speci c IP addresses and domains are listed in the
networking section.

This is custom documentation. For more information, please visit the SAP Help Portal 298