Contents

Preface ....................................................................................................................................................... 17

PART I Introduction

1 Introduction to Low-Code and No-Code

Development 23

1.1 Challenges in IT ...................................................................................................................... 26

1.2 Pro-Code versus Low-Code versus No-Code .............................................................. 30

1.2.1 Pro-Code .................................................................................................................... 30
1.2.2 Low-Code ................................................................................................................... 31
1.2.3 No-Code ..................................................................................................................... 32
1.3 No-Code Use Cases ............................................................................................................... 33
1.3.1 Process Automation .............................................................................................. 33
1.3.2 Software Modernization ...................................................................................... 34
1.3.3 Mobile Apps .............................................................................................................. 35
1.3.4 Minimum Viable Products ................................................................................... 37
1.3.5 Websites/Intranet Sites ....................................................................................... 38
1.4 SAP Build ................................................................................................................................... 39
1.4.1 SAP Build Apps ......................................................................................................... 40
1.4.2 SAP Build Work Zone ............................................................................................. 44
1.4.3 SAP Build Process Automation ........................................................................... 47
1.5 Summary ................................................................................................................................... 49

2 SAP Business Technology Platform 51

2.1 Overview ................................................................................................................................... 52

2.1.1 SAP Business Technology Platform: Introduction ....................................... 53
2.1.2 Commercial Models ............................................................................................... 55
2.1.3 Account Structure .................................................................................................. 57
2.1.4 Service Overview ..................................................................................................... 61

7
Contents Contents

2.2 Security ...................................................................................................................................... 65

2.2.1 User Authentication .............................................................................................. 66
2.2.2 User Authorization ................................................................................................. 68
2.2.3 Single Sign-On ......................................................................................................... 71
2.2.4 Identity Authentication ........................................................................................ 72
2.3 Cloud Connector ..................................................................................................................... 78
2.3.1 Initial Configuration .............................................................................................. 79
2.3.2 Mapping .................................................................................................................... 83
2.4 Summary ................................................................................................................................... 88

PART II SAP Build Apps

3 Installing and Configuring SAP Build Apps 91

3.1 Installation ............................................................................................................................... 91

3.2 Configuration .......................................................................................................................... 99

3.3 Security ...................................................................................................................................... 105

3.4 Summary ................................................................................................................................... 110

4 No-Code Development Environment 111

4.1 Launching SAP Build Apps Composer ........................................................................... 112

4.2 Managing Development Projects ................................................................................... 116

4.3 SAP Build Apps Composer User Interface ................................................................... 117

4.4 SAP Build Apps Administration ....................................................................................... 128

4.5 Help and Documentation .................................................................................................. 131

4.6 Summary ................................................................................................................................... 134

5 Developing Applications 135

5.1 Developing a Basic App ....................................................................................................... 135

5.2 Theming ..................................................................................................................................... 145

5.3 Building and Testing ............................................................................................................ 149

8 8
 Contents

5.4 App Logic, Variables, and Data Binding ...................................................................... 154

5.5 Lifecycle Management and Team Collaboration .................................................... 161

5.6 Summary ................................................................................................................................... 163

6 Data Integration and Authentication 165

6.1 User Authentication ............................................................................................................. 166

6.2 Using Data from SAP Systems ......................................................................................... 168

6.2.1 Cloud Systems ......................................................................................................... 170
6.2.2 On-Premise Systems .............................................................................................. 185
6.3 Non-SAP Systems .................................................................................................................. 194

6.4 Local Data Storage ................................................................................................................ 201

6.5 Summary ................................................................................................................................... 214

7 Visual Cloud Functions 217

7.1 Introduction ............................................................................................................................. 217

7.2 Entity Modeling ...................................................................................................................... 220

7.2.1 Native Entities ......................................................................................................... 221
7.2.2 Extended Data Entities ......................................................................................... 224
7.2.3 Virtual Fields ............................................................................................................ 226
7.2.4 Data Browser ........................................................................................................... 229
7.3 Functions ................................................................................................................................... 231
7.3.1 Create a New Function ......................................................................................... 231
7.3.2 Input Parameter ...................................................................................................... 232
7.3.3 Function Outcomes ............................................................................................... 234
7.3.4 Defining the Logic Flow ........................................................................................ 237
7.4 Deployment ............................................................................................................................. 238
7.4.1 Deployment Card ................................................................................................... 239
7.4.2 Change Types ........................................................................................................... 240
7.4.3 Delete/Pause Deployment .................................................................................. 241
7.5 Summary ................................................................................................................................... 242

9
Contents Contents

8 Developing Extensions 243

8.1 SAP SuccessFactors ............................................................................................................... 244

8.1.1 Consume API and Activate Authentication ................................................... 244
8.1.2 Build a List of Personal Data ............................................................................... 246
8.1.3 Build a Detail Page for Employee Details ....................................................... 254
8.2 SAP S/4HANA and SAP S/4HANA Cloud ...................................................................... 265

8.3 Summary ................................................................................................................................... 279

9 Deploying Applications 281

9.1 Build Configuration .............................................................................................................. 282

9.2 SAP Business Technology Platform ............................................................................... 283

9.3 Mobile Deployment .............................................................................................................. 292

9.3.1 iOS ............................................................................................................................... 293
9.3.2 Android ...................................................................................................................... 303
9.4 Summary ................................................................................................................................... 306

PART III SAP Build Work Zone

10 Introduction to SAP Build Work Zone 311

10.1 SAP Build Work Zone ........................................................................................................... 311

10.2 Standard Edition .................................................................................................................... 315

10.2.1 Functionality ............................................................................................................ 316
10.2.2 Working Environment .......................................................................................... 318
10.2.3 Installing SAP Build Work Zone, Standard Edition ...................................... 323
10.3 Advanced Edition ................................................................................................................... 327

10.4 Summary ................................................................................................................................... 336

10 10
 Contents

11 Installing and Configuring SAP Build Work Zone 337

11.1 Installation ............................................................................................................................... 337

11.2 Configuration .......................................................................................................................... 344

11.2.1 Trust and Authorizations ..................................................................................... 344
11.2.2 Identity Authentication ........................................................................................ 353
11.2.3 Identity Provisioning ............................................................................................. 355
11.3 Summary ................................................................................................................................... 371

12 UI Integration 373

12.1 Content Packages .................................................................................................................. 373

12.1.1 Creating a Content Package ............................................................................... 374
12.1.2 Deploying a Content Package ............................................................................ 377
12.2 UI Integration Cards ............................................................................................................. 384
12.2.1 Structure of Cards .................................................................................................. 385
12.2.2 Card Types ................................................................................................................. 386
12.2.3 Developing a UI Card ............................................................................................. 389
12.2.4 Uploading a UI Integration Card ....................................................................... 393
12.2.5 Adding a UI Integration Card to a Work Page ............................................... 395
12.3 Widgets ...................................................................................................................................... 398

12.4 Summary ................................................................................................................................... 402

13 External Integrations and Content Federation 403

13.1 Business Content ................................................................................................................... 403

13.1.1 Create Destinations ............................................................................................... 405
13.1.2 Expose Content ....................................................................................................... 407
13.1.3 Add Content Channel ............................................................................................ 409
13.1.4 Check Content and Add Roles ............................................................................ 410
13.1.5 Configure Site .......................................................................................................... 411
13.1.6 Assign Roles .............................................................................................................. 413
13.2 Microsoft Teams .................................................................................................................... 416

13.3 Summary ................................................................................................................................... 423

11
11
Contents Contents

14 Content Transport 425

14.1 Manual Transport .................................................................................................................. 427

14.1.1 Business Content .................................................................................................... 427
14.1.2 Home Page ................................................................................................................ 430
14.1.3 Workspaces .............................................................................................................. 432
14.1.4 Workspace Templates .......................................................................................... 436
14.2 SAP Cloud Transport Management ............................................................................... 438
14.2.1 Initial Setup .............................................................................................................. 438
14.2.2 Configuration .......................................................................................................... 448
14.3 Summary ................................................................................................................................... 453

15 Advanced Topics 455

15.1 Notifications ............................................................................................................................ 455

15.1.1 Types of Notifications ........................................................................................... 457
15.1.2 Push Notifications with Webhooks .................................................................. 460
15.2 SAP HANA Enterprise Search ............................................................................................ 462

15.3 SAP Task Center Integration ............................................................................................. 468

15.3.1 Steps in SAP Build Work Zone ............................................................................ 468
15.3.2 Steps in SAP Task Center ...................................................................................... 472
15.4 SAP Mobile Start .................................................................................................................... 474

15.5 Summary ................................................................................................................................... 480

16 Administration 481

16.1 Feature Management .......................................................................................................... 481

16.2 User Management ................................................................................................................ 486

16.3 Compliance ............................................................................................................................... 488

16.4 Error Logs ................................................................................................................................... 499

16.5 Summary ................................................................................................................................... 504

12 12
 Contents

PART IV SAP Build Process Automation

17 Introduction to SAP Build Process Automation 507

17.1 Subscribing to SAP Build Process Automation ......................................................... 507

17.2 Features and Components ................................................................................................ 508

17.3 The Lobby .................................................................................................................................. 514

17.4 Lifecycle Management ........................................................................................................ 519

17.5 Collaboration ........................................................................................................................... 521

17.6 Roadmap ................................................................................................................................... 524

17.7 Summary ................................................................................................................................... 525

18 Installing and Configuring SAP Build Process

Automation 527

18.1 Installation ............................................................................................................................... 527

18.2 Configuration .......................................................................................................................... 536

18.3 Security ...................................................................................................................................... 543

18.4 Summary ................................................................................................................................... 547

19 Processes 549

19.1 Creating a Project with a Business Process ................................................................ 549

19.2 Triggers ...................................................................................................................................... 555

19.2.1 Form Triggers ........................................................................................................... 555
19.2.2 API Triggers ............................................................................................................... 564
19.2.3 Event Triggers .......................................................................................................... 583
19.3 Forms ........................................................................................................................................... 585
19.3.1 Creating a New Form ............................................................................................ 585
19.3.2 Using Forms in the Example Process ............................................................... 595
19.3.3 Approval Forms ....................................................................................................... 604
19.4 Conditions and Branches ................................................................................................... 613
19.4.1 Conditions ................................................................................................................. 613
19.4.2 Branches .................................................................................................................... 619

13
13
Contents Contents

19.5 Actions ........................................................................................................................................ 623

19.6 Summary ................................................................................................................................... 625

20 Rules and Decisions 627

20.1 Decision Editor ........................................................................................................................ 627

20.2 Creating a Decision Artifact .............................................................................................. 629

20.3 Creating a Data Type ............................................................................................................ 632

20.4 Creating a Text Rule ............................................................................................................. 635

20.5 Using a Text Rule in a Process .......................................................................................... 642

20.6 Creating a Decision Table .................................................................................................. 646

20.7 Summary ................................................................................................................................... 653

21 Action Projects 655

21.1 Create an Action Project ..................................................................................................... 655

21.1.1 Project Creation ...................................................................................................... 655
21.1.2 Input ........................................................................................................................... 659
21.1.3 Output ........................................................................................................................ 662
21.1.4 Test .............................................................................................................................. 664
21.2 Using the Action within a Process .................................................................................. 674

21.3 Summary ................................................................................................................................... 685

22 Visibility Scenarios 687

22.1 Creating a Visibility Scenario ........................................................................................... 687

22.2 Configuring a Visibility Scenario .................................................................................... 690

22.2.1 General ....................................................................................................................... 691
22.2.2 Processes ................................................................................................................... 691
22.2.3 Correlation ................................................................................................................ 695
22.2.4 Phases ......................................................................................................................... 696
22.2.5 State ............................................................................................................................ 698
22.2.6 Status .......................................................................................................................... 699

14 14
 Contents

22.2.7 Attributes .................................................................................................................. 700

22.2.8 Actions ....................................................................................................................... 707
22.2.9 Performance Indicators ........................................................................................ 710
22.3 Summary ................................................................................................................................... 714

23 Automation 715

23.1 Desktop Agent ........................................................................................................................ 716

23.2 Capture Applications ........................................................................................................... 722

23.3 Files .............................................................................................................................................. 734

23.4 Environment Variables ....................................................................................................... 745

23.5 Deployment ............................................................................................................................. 750

23.6 Summary ................................................................................................................................... 754

24 My Inbox 755

24.1 Using My Inbox ....................................................................................................................... 755

24.1.1 Task Functionality .................................................................................................. 755
24.1.2 Search Functionality .............................................................................................. 757
24.1.3 Sorting ........................................................................................................................ 757
24.1.4 Filter ............................................................................................................................ 758
24.1.5 Grouping ................................................................................................................... 760
24.2 Substitution ............................................................................................................................. 761

24.3 My Inbox and SAP Build Process Automation .......................................................... 764

24.4 Summary ................................................................................................................................... 764

25 Monitoring and Administration 765

25.1 Monitoring ................................................................................................................................ 765

25.1.1 Process and Workflow Instances ...................................................................... 766
25.1.2 Automation Jobs ..................................................................................................... 770
25.1.3 Acquired Events ...................................................................................................... 770
25.1.4 Automation Overview .......................................................................................... 771
25.1.5 Processes and Workflows .................................................................................... 772

15
15
Contents Contents

25.1.6 Triggers ...................................................................................................................... 773

25.1.7 Visibility Scenarios ................................................................................................. 774
25.2 Administration via the Control Tower ......................................................................... 774
25.2.1 Tenant Details ......................................................................................................... 776
25.2.2 Mail Server ................................................................................................................ 777
25.2.3 SAP Cloud ALM ........................................................................................................ 778
25.2.4 Destinations ............................................................................................................. 779
25.2.5 External Authentication ....................................................................................... 781
25.2.6 Agent Configuration .............................................................................................. 783
25.2.7 Cloud Studio Variables ......................................................................................... 785
25.2.8 API Keys ...................................................................................................................... 786
25.2.9 Alert Handlers .......................................................................................................... 787
25.3 Summary ................................................................................................................................... 789

The Authors ............................................................................................................................................. 791

Index .......................................................................................................................................................... 793

16 16
 Chapter 5
Developing Applications
The development of applications can be very complex and sometimes
complicated. You not only have to take care of the user interface, but 5
also prepare the application logic, which is the magic behind the scenes.
The interplay of user interface, application logic, and later also data and
proper data management must be learned well. That sounds compli-
cated, doesn't it? Don't worry: SAP Build Apps provides sophisticated no-
code development objects that can usually be added by drag and drop.

App development and knowledge of the tools and techniques behind it play a major
role in SAP Build Apps. Although SAP Build Apps delivers a number of UI elements that
can of course be used directly via drag and drop, there are nonetheless various setting
options, display options, and layout options that need to be applied at the right time.
In this chapter, we’ll develop a simple app step by step to introduce the most important
building blocks and UI elements. We’ll also show you some tips for how to implement
certain requirements with regard to user interface development. In addition to build-
ing forms and tables, application logic and the so-called logic flow will also play a major
role. Section 5.1 deals with the first development steps toward a basic app. Corporate
design and the integration of self-developed apps into the existing product range play
a major role nowadays. For this reason, Section 5.2 also address the topic of theming. A
developed app must of course be tested and, after a successful development test, also
deployed and thus made available to end users. Building and testing will be discussed
in Section 5.3. An app will rarely function without data and application logic, which is
why we’ll take a closer look at these details in Section 5.4. This section also discusses
how the communication flow between the data and the UI takes place. Finally, Section
5.5 shows how you can work together with others on a project in SAP Build Apps and
thus promote collaboration during development.

5.1 Developing a Basic App

Development starts in the SAP Build Apps lobby. Although before development can
even begin, someone has to create a corresponding project. This can be either you or
your colleague, who then invites you to collaborate. In our example, we’ll create a proj-
ect ourselves.

135
135
5 Developing Applications 5 Developing Applications

As you can see in Figure 5.1, we are greeted in the lobby with a table of existing projects.
Above this, you will find templates and sample apps that you can try out as you wish.
On the left, you can navigate between the lobby and the available extensions, such as
connectors and the tenant configuration. The existing projects can be searched, fil-
tered, and sorted. Next to the search box, you can click the Create button to create a
new project.

Figure 5.1 SAP Build Lobby as Starting Point for Developments

First, you’re asked what type of project you want to create in SAP Build Apps. The fol-
lowing three options are available:
 Build an Application
This involves the development of applications. These in turn are divided into two
subcategories, which we’ll discuss in a moment.
 Build an Automated Process
You’ll get to know SAP Build Process Automation in detail in Part IV of this book. The
name is decisive here: the aim is to convert manual processes into automated pro-
cesses in no time at all.
 Build a Business Site
The third type of application allows you to bring content into SAP Build Work Zone.
You can find out more about this in Part III of this book.

In this case, we want to develop a web application that falls into the Build an Applica-
tion category, so select this type. As already mentioned, application development is
divided into two parts:

136 136
 5 Developing
5.1 DevelopingApplications
a Basic App

 Web and mobile applications are applications that can be run in the browser (either
be hosted in house on a web server) or made available to end users via SAP Build
Work Zone. Mobile applications are installed directly on mobile devices and must
normally also be developed in a native programming language such as Java or Kotlin
for Android or Swift for iOS. In this case, SAP Build Apps offers a way to develop an
app more generically and thus also develop a mobile app independently of these 5
languages. This can either be installed directly or rolled out in a public app store or
via an internal mobile device management system.
 Application backend refers to the corresponding no-code development of business
logic. We’ll show you how to work with these visual cloud functions in Chapter 7.
This business logic can then be called up by the web and mobile application.

For now, to start developing a web application, select Web & Mobile Application.
Once you have assigned a name for the project in a dedicated dialog, you will be taken
to the development environment. A first page has already been created, and you can
start developing a web application. Changes to the user interface are made in the UI
CANVAS tab menu, which is already preselected in the system. We’ll gradually intro-
duce the other menus.

Figure 5.2 UI CANVAS Tab for Editing User Interface

The UI elements that are placed on a page can be selected and edited. As soon as you
have selected an element, a blue border appears, which marks the selected element.
Click the title UI element with the current content “Headline” and edit the Content

137
137
5 Developing Applications 5 Developing Applications

property on the right-hand side under PROPERTIES. Properties describe a UI element in

more detail and are decisive for what is to be displayed and how in the corresponding
UI element. Change the content to read "This is my first Basic App" with a simple key-
board input (see Figure 5.3).

Figure 5.3 Properties: Content and Other Features of UI Element

In addition to PROPERTIES, two other tabs are decisive for the display and further
description of a UI element. Before we talk about STYLE, we will first switch to LAYOUT
and show you the options that can be used. In the case of the text UI element, you can,
for example, set the width, height, and spacing (margin and padding) around the text,
and the text alignment on this tab. We have changed the value of Text Align from left
to center in Figure 5.4, which ensures that the text is always centered, regardless of the
device size the user is using.
Displaying UI elements next to each other requires the use of containers. Containers
are UI elements that in turn contain UI elements and can be displayed and formatted
together as a group. They are located in the UI element palette under the LAYOUT
group. One such container is a Row, which allows you to define several cells next to
each other as a container. You will need this UI element, as the name suggests, if you
want to display rows in a table. There is no UI element for a table per se; you have to get
creative and create your own table with the Row UI element.

138 138
 5 Developing
5.1 DevelopingApplications
a Basic App

Figure 5.4 Layout Settings for Alignment, Width, and Height of UI Elements

As you can see in Figure 5.5, we have dragged a row from the left from the UI elements pal-
ette and dropped it into the workspace. Compare the changes to the PROPERTIES, STYLE,
and LAYOUT options to a title or text we already used. Under LAYOUT, for example, the
ROW CELLS option can be used to set how many cells you want to display in the currently
selected row. You can also change the horizontal alignment in the cells and the individual
cell widths. In this case, we have currently set two cells, each with 50% of the width.

Manually Assigned Width of UI Elements

We recommend that you work with relative widths instead of absolute widths. The
advantage of relative specifications is that even if the user is using different device
sizes, the ratios of distances and widths of and between the UI elements remain con-
stant. For example, 50% width will always be relative to 50% of the corresponding
screen. In contrast, 500 px could appear small on a desktop device and take up the
entire width on a mobile device.

Additional UI elements can now be dragged and dropped into the corresponding cells.
A cell is a generic container that can contain all possible UI elements. During the drag-
and-drop process, you can see from the border where the UI element will end up and
whether you have just hit the cell or whether the UI element will be placed outside the
cell on the page (see Figure 5.6).

139
139
5 Developing Applications 5 Developing Applications

Figure 5.5 Rows: Display Multiple UI Elements Next to Each Other

Figure 5.6 Adding Content to Cells

140 140
 5 Developing
5.1 DevelopingApplications
a Basic App

Displaying text is a good start, but you will often encounter the requirement to enable
data entry. Again, there are various options for input, but let's start with the simplest
and most obvious, an input field (added with the Input Field element from the Forms
area).
An input field offers other options under PROPERTIES. Value, for example, determines
which value should be in the input field. In other words, the value entered by a user 5
input is also saved in this property. Label can be used to determine the heading of the
input field, whereby the value of the Placeholder Text property is displayed in the input
field and is intended to provide the user with an input aid or reminder. Disabled can be
used to determine whether the input field can be filled by the user or whether it is only
available in read-only mode.
Other, less frequently used property settings determine, for example, whether the
input should always be capital letters (Auto-capitalize) or whether the input should be
restricted to certain characters such as numbers, letters, or a telephone number (Key-
board Type).
You can see in Figure 5.7 that we have changed both the label and the placeholder text.
We have not assigned anything to the Value property, so this input field will be empty
by default.

Figure 5.7 Add Input Field and Change Its Properties

141
141
5 Developing Applications 5 Developing Applications

Next, let’s add a Button to the page (see Figure 5.8). Buttons allow users to perform
actions and have a trigger to initiate the corresponding application logic behind them.
You will find out what options you have for the application logic in the course of this
chapter, and we will also cover it in more detail in Chapter 6.

A button can and should have an appropriate style (set in the STYLE menu tab) depend-
ing on the corresponding action. Section 5.2 will cover color options in more detail, but
for now, let’s use a practical example to explain how the color scheme should be set.
Semantic colors are intended to give users a sense of the impact an action could have.

For example, the color green could stand for save, red is usually for cancel or delete, and
more neutral colors such as blue are for information buttons or for editing. Some of
these semantic colors are already provided and can also be selected under STYLE. But
you will see in the next section how you can change these and possibly also adapt them
to your corporate colors.

Figure 5.8 Buttons to Execute Actions Such as Saving Form Entries or Canceling Processes

As you can see in Figure 5.9, buttons take up the full screen width by default. Under LAY-
OUT, as with many other UI elements, you can change the width under Width and Height
to Fit Content. This sets the width exactly to the length of the respective content. You can
of course also assign a fixed size, but remember our earlier tip about relative sizes.

142 142
 5 Developing
5.1 DevelopingApplications
a Basic App

Figure 5.9 Different Layout Options to Change Appearance of Buttons

Figure 5.10 Containers to Group UI Elements and Define Styles and Alignments of Container
Content

143
143
5 Developing Applications 5 Developing Applications

To display buttons (and of course other UI elements) next to each other, you can use
the Container UI element. Here you can group several UI elements and decide how they
should be arranged: next to each other or under each other, moved together or far
apart, with the same spacing, left-aligned, centered, or right-aligned. As you can see,
there are no limits to your imagination. We have aligned the two buttons to the right in
Figure 5.10 to be able to display a footer like this in the future.
Now you have all the means in hand to build a complete form, at least in the UI. To do
this, place two input fields on the page and name them with the labels First name and
Last name. Just below these, set two buttons in a container, which are aligned horizon-
tally and right-justified. These two buttons have been given the texts Save and Cancel.
All these changes are shown in Figure 5.11.

Figure 5.11 Form Built Manually Using Existing UI Elements

So that you can find UI elements in a technical sense and recognize them more easily,
technical names should be assigned to the Component Display Name property. If you
do not assign these yourself, all UI elements are automatically numbered and assigned
the names. In the course of this section, you will see how you can access the UI ele-
ments and their properties via these assigned technical names. Figure 5.12 shows that
we assigned the name “input_first_name” to the first input field.

144 144
 5 Developing5.2
Applications
Theming

Figure 5.12 Stable IDs Help to Access UI Elements

5.2 Theming
Before we continue on to testing and application logic, let's look at how to adapt an app
to your own corporate design. To do this, you first need to switch to the THEME tab, as
shown in Figure 5.13.
As you can see in this tab, there are basically three themes that can be selected. Two of
these themes correspond to SAP's own theme, with Morning Horizon being the latest
theme delivered in the SAP Fiori design system. SAP Quartz Light was the standard
theme for a long time and the predecessor of Horizon.

Horizon Theme
The Horizon theme was introduced as one of the last themes in the SAP Fiori design
system and is now the standard theme for all SAP apps, both on-premise and in the
cloud. Customer developments should also adhere to this design in the SAP environ-
ment so that the various applications are still coherent. You can learn more about this
theme on the official website of the SAP Fiori design guidelines:
https://experience.sap.com/fiori-design-web/look-feel-and-wording/

145
145
5 Developing Applications 5 Developing Applications

These themes are merely templates and are equipped with a standard set of colors and
design elements. You can select one of these themes and still make any color and tex-
tual changes. Let’s now take a closer look at these options.

Figure 5.13 Select SAP Theme or Create Your Own

On the left-hand side, under Colors, you can assign the individual colors for the respec-
tive semantic colors. There are color groups such as Primary, Secondary, Positive, Nega-
tive, and many more, which should generally apply to a uniform color in the program.
This is to ensure that if several UI elements use the color set for primary, they all
change automatically when a change is made. Nevertheless, you could also assign a
separate color for each UI element instead of using these general color groups. Such an
adjustment is also shown in Figure 5.14, where the basic colors can be defined on the
one hand, but the colors can also be adjusted again for each UI element and theme.

Colors with Theme Variables

Instead of changing the colors for the UI elements individually, we recommend that
you create global theme variables that save the corresponding colors. Access via the
variable ensures that all UI elements in the app change when a change is made.

Technically speaking, we use Cascading Style Sheets (CSS) for changes and classes,
which are the technical descriptions of the layout. As colors have their own codes in
web development, we recommend that you use a CSS color picker, which is already
integrated into SAP Build Apps. With such a tool, you can easily find the corresponding
hex code for a color and then enter it.

146 146
 5 Developing5.2
Applications
Theming

Figure 5.14 Change Colors or Fonts to Integrate Corporate Design

Figure 5.15 SAP Default Fonts

147
147
5 Developing Applications 5 Developing Applications

Not only colors but also fonts can increase recognition potential. Many companies
have their own fonts in use. With its newest theme, SAP has again put a lot of thought
into the font, font size, shadows, and color ratios to ensure accessibility in the web envi-
ronment. If you still need to import your own fonts, SAP Build Apps also offers this
option (see Figure 5.15).
However, we recommend that you at least take a look behind the scenes and realize
how much effort SAP has put into the right choice of font: https://experience.sap.com/
fiori-design-web/typography-horizon/.
In our example, we have adapted the primary color in our app and used the main color
of our company. Now all UI elements, such as buttons, are also set in this color by
changing and globally affecting the semantic color. If you still want to change the color
or make further adjustments to the style of a UI element, simply right-click the style
you want to edit in the STYLE menu tab (see Figure 5.16).

Figure 5.16 Changing Predefined Styles for Each UI Element

Edit takes you to the editing mode shown in Figure 5.17, where you can change the back-
ground color, color in general, font, border, special effects, width, height, padding, and
margin of a style.

148 148
 5 5.3
Developing
BuildingApplications
and Testing

Figure 5.17 Local Style Class Changes to Change Colors, Font, Size, and More

Incidentally, if you have made unwanted changes or simply want to switch back to the
standard theme, you can reset the changes you have made under THEME.

5.3 Building and Testing

What use is the development environment if we can't run the application and test it
from the user's perspective? We’ll show you how to do so in this section.
In the LAUNCH tab, you have the option to test the application on the one hand, but
also to proceed to the build and then to the corresponding deployment. You’ll see that
you can test the application in various ways and start a preview. However, bear in mind
that this is only ever a preview. The application cannot be executed by end users, nor is
there any guarantee that the environment in which the application is later executed in
real time will behave in the same way as in the preview. With that in mind, click the
Open Preview Portal button shown in Figure 5.18 to begin your testing.
Figure 5.19 shows that you now have two important options for testing the app. The
first option is Open Web Preview, which allows you to test the application directly in
your current browser. However, if you’ve downloaded the native application from the

149
149
5 Developing Applications 5 Developing Applications

respective app store, you can also connect it here with the code shown, which appears
in the native app, and test the app on a mobile device.

Figure 5.18 Open Preview Portal to Check App Usability

Figure 5.19 Different Preview Options for Displaying Apps in Browsers or on Mobile Devices

150 150
 5 5.3
Developing
BuildingApplications
and Testing

For now, select the variant for testing in the browser (Open Web Preview). You’ll see all
the SAP Build Apps applications available that you have built (see Figure 5.20). If you
click OPEN, you’ll start the preview for the respective project.

Figure 5.20 All Projects You Can Access Can Be Previewed

OPEN opens a new tab in which the application is opened in preview mode and can be
tested, as shown in Figure 5.21. We’ll do extensive testing in Section 5.4 and in Chapter 6.

Figure 5.21 Preview to See How Applications Will Look to Users

You’ll learn more about navigation in Chapter 6, but for now we want to show you how
to implement a single-page application. Single page means that no other pages are
used, so no navigation and therefore no navigation bar, menu, or anything else is
required.
You can do this under the NAVIGATION tab by deactivating both the Navigation Header
Bar and the Navigation Menu settings by selecting No under Enabled?. As shown in Fig-
ure 5.22, you can also see that by deactivating the navigation, a page must be set as the
initial page. The initial page is displayed by default when the app is opened.

151
151
5 Developing Applications 5 Developing Applications

Figure 5.22 Disable Navigation Options for Single-Page Applications

To ensure that an application that you build in SAP Build Apps can also be accessed by
end users, you need to make the application available either on a server or hosted
somewhere in the cloud—for example, on SAP BTP. However, the application is not
copied over 1:1, but must first be put into an executable state. This process is called the
build process and ensures that the development files are converted into executable files
and into a so-called minified version.

Deployment Process
In this section, we show you a short excerpt of how to build an executable version of an
application. In Chapter 9, however, we will deal extensively with the topics of building
and deployment. Deployment means making the executable version of the application
available to end users.

If you click Open Build Service, as shown in Figure 5.18, you’ll see a separate screen, as
shown in Figure 5.23.
If you now scroll down this page, you’ll see the options to bring an application into an
executable form. Because different target systems require different types of such exe-
cutable programs, there are also different build processes that can be carried out. So, for
example, you can decide whether you want to run the application as a web application
(hosted somewhere on a web server or on SAP BTP) or as a native application (on iOS or
Android). Depending on your requirements, click BUILD to start the process, as shown
in Figure 5.24. In CONFIGURE, further settings can be made for the corresponding target
system, such as the file format of the build output, versioning, or naming.

152 152
 5 5.3
Developing
BuildingApplications
and Testing

Figure 5.23 Build Information and History of Selected Application

Figure 5.24 Start Build Process for Different Outputs

153
153
5 Developing Applications 5 Developing Applications

The respective build process can take some time, which is why it’s first queued in the
backlog. As soon as the process is complete, a button appears under the respective
build request to continue with the output. We’ll show you the options you have for this
output in Chapter 9.

5.4 App Logic, Variables, and Data Binding

Building user interfaces is only part of the equation. There are also invisible forces
behind it, such as the application logic and the use of variables so that both the UI and
the application logic can be supplied with the necessary data.
In this section, we’ll show you the basics of application logic and the first steps for vari-
ables. We’ll again show you the basics and teach you reusable patterns so that you can
use them for a wide variety of requirements.
Let's start by changing the slider from VIEW to VARIABLES and thus access the option of
creating variables. Variables help temporarily store data and provide a central location
for storing it. PAGE VARIABLES are only available on the current page and will help man-
age data on this page. In Figure 5.25, we’ve created two variables with the ADD PAGE
VARIABLE button, named them “value_first_name” and “value_last_name”, and set
both to store a Text element.

Figure 5.25 Page Variables to Store Data at Runtime

154 154
 5.4 5 Developing
App Logic, Variables, Applications
and Data Binding

Now, of course, the question arises: How can these variables help you? One possibility
is to bind one of these variables to a property of a UI element. This procedure is known
as data binding. The advantage of doing so is that if a property to which the variable is
bound changes because of user input, the new value is entered directly into the vari-
able. Conversely, if the value of the variable changes due to the application logic, this
has a direct effect on the user interface. 5
Let’s consider an example of how the data binding between the value_first_name vari-
able can be linked to the Value property of the input field of the first name. Start, as
shown in Figure 5.26, by clicking the data binding symbol for the Value property.

Figure 5.26 Data Binding to Interconnect UI Element Property and a Variable

Data binding can have different sources, but only one per property. We’ll introduce a
few more sources in this and the following chapters, but for now we’ll start with vari-
ables. Clicking the data binding opens a dialog, in which you can select Data and Vari-
ables as the source in the first step (see Figure 5.27).

155
155
5 Developing Applications 5 Developing Applications

Figure 5.27 Different Binding Types as Sources for Data Binding

The dialog jumps one step further, like in a wizard, and now you’ll see a further restric-
tion based on your first selection. Here you have to select which type of variable we
want to use—in this case, Page Variable (see Figure 5.28).

Figure 5.28 Different Types of Variables for Different Functionalities

156 156
 5.4 5 Developing
App Logic, Variables, Applications
and Data Binding

In the next step, you’ll see all the variables of the respective type that you have created.
You can only select the variables that match the data type of the respective property.
For example, you will not be able to bind a variable of the text type to the Visible prop-
erty because Visible returns true/false values—that is, yes/no values. A text type can
store much more than true/false values, so data binding is not suitable here.
In Figure 5.29, we’ve already thought about this and created the two variables with the 5
corresponding data type. So, we selected the corresponding value_first_input variable
for the input field. Carry out the same steps for the input field for the last name.

Figure 5.29 Preferred Variable to Store and Provide Data for Selected Property

To add application logic to UI elements, first select the corresponding UI element and
click the black bar at the bottom with the Add Logic To ... title to open the logic canvas.
The UI canvas, where we have been so far, is for building the user interface. The logic
canvas is the counterpart to this and forms the corresponding application logic. Appli-
cation logic can either be added to the entire view or to a specific UI element.
Select your Save button and open the logic canvas. This interface is a graphical work-
bench of concatenations of prefabricated logic blocks. These logic blocks can be
dragged and dropped into the workspace from the left, and the sequence can be deter-
mined by connecting the blocks. The trigger is always an event, such as the component
tap event.

157
157
5 Developing Applications 5 Developing Applications

Now drag in an Alert logic block and link it to the event. An alert is a dialog that shows
a message to the user in the UI with a corresponding text. The displayed text can be
stored in the Dialog Title property. Instead of storing a static text, click Data Binding
again and assign the displayed text dynamically by using your two variables (see Figure
5.30).

Figure 5.30 Data Binding in Logic Canvas for Properties of Logic Blocks

With this data binding, you can establish that a dialog will open when clicking Save, in
which both the first name and last name are displayed concatenated as a text. In this
case, you cannot bind the variable directly, as only one variable can be used in this case.
So, you’ll use a formula. Formulas help to build nonexistent data yourself based on cal-
culations. Now go ahead and select Formula, as shown in Figure 5.31.
As a formula, store a calculation that does nothing other than concatenate a static text
with the two variables. In our case, this formula is as follows:
"Your name: " + pageVars.value_first_name + " " + value_last_name
This formula says that when you click the Save button, a dialog opens, and the first
name and last name from the two page variables are added to the "Your name: " text.
These variables can be accessed with pageVars.value_first_name and pageVars.value_
last_name, as shown in Figure 5.32.

158 158
 5.4 5 Developing
App Logic, Variables, Applications
and Data Binding

Figure 5.31 Select Formula for Calculations Done Directly at Runtime

Figure 5.32 Creating Formulas to Define Calculations to Produce Desired Results

159
159
5 Developing Applications 5 Developing Applications

Once you’ve saved both the data binding and your SAP Build Apps project, you can test
the app again. If you enter values in the input fields using keyboard input, these values
are written to the variables thanks to data binding. If you now click Save, the app action
logic behind it is executed and a dialog opens. In this dialog, a static text with the cur-
rent values from the two variables is displayed (see Figure 5.33).

Figure 5.33 Alert Logic Block Opens Message Dialog at Runtime

What do you do now with your Cancel button? Well, let's get to know more logic blocks.
With the Set Page Variable block, you can change the value of a page variable from the
application logic. Just as a user can change the value using data binding by means of an
input, you can also make this change via the application logic. As shown in Figure 5.34,
we have inserted this block twice.

Figure 5.34 Data Binding to Ensure Input Fields Are Cleared if Variable Is Cleared

160 160
 5.5 5 Developing
Lifecycle Management Applications
and Team Collaboration

First, we’ve selected the value_first_name variable as the source for the data binding
and the Variable Name property. We’ve left the Assigned Value property empty. This
resets the variable and, as already mentioned, also clears the input field thanks to data
binding. We’ve done the same for the input field for the last name. This means that
both variables and both input fields are reset when the Cancel button is clicked.
5

5.5 Lifecycle Management and Team Collaboration

All these tasks are easier to complete if you share the work and implement the project
with others. In this section, we’ll look at available collaboration options. In this case too,
we already have ready-made options that can be activated very easily.
As you know, someone had to take the first step and create the application locally in
their own SAP Build lobby. This person is the first administrator of the project and can
use the Options  Manage Members button to manage the members and invite new col-
laborators (see Figure 5.35).

Figure 5.35 Manage Project Members to Invite Others to Participate

A dialog will now open for the corresponding project, in which you can add new project
members in the upper section (see Figure 5.36). You must enter the members' emails
yourself and also ensure that these members are maintained in SAP BTP with the cor-
responding authorization for SAP Build. You can choose from the following roles:
 Administrator
Complete access, including editing, sharing, and deleting a project

161
161
5 Developing Applications 5 Developing Applications

 Developer
Edit, deploy, release, manage dependencies in a project, and publish to the library
 Viewer
View and deploy a project

In the lower area, you can view the existing members, change the authorizations, and
remove members. The only person who cannot be removed is the creator of a project.
From this point on, you can work together with all administrators and developers on
the SAP Build Apps project and jointly edit the pages, application logic, theming, and
variables and thus share the work.

Figure 5.36 Add or Remove Members and Define Their Project Roles

The following rules are specified by SAP Build Apps for collaborative work:
 Unsaved changes are continuously applied on top of the latest saved version by
another user. In other words, nonconflicting changes will be immediately reflected
for all members, without interfering with their work.
 Editing the same parts of the project, such as the page name or component style
class, will cause a conflict. Conflicts are resolved by reloading the page, whereupon
conflicting changes are discarded. Note that conflicts are resolved in favor of the lat-
est saved version.
 User profile coloring in the top bar reflects the current state of the user. Grey
implies no unsaved changes, while orange denotes that the user is currently editing
the project.

162 162
 5 Developing
5.6Applications
Summary

Especially when resolving conflicts, we unfortunately have no choice but to refresh the
app and thus discard the conflicts that occur in comparison with the last actively saved
version. A merge, as known to pro code developers from other source code–management
tools such as Git, unfortunately does not (yet) exist here.

5
5.6 Summary
In this chapter, we looked at many different topics relating to application develop-
ment. We started with the user interface, and you got to know the first UI elements.
You’ve seen how the properties, style, and layout of these UI elements can be custom-
ized so that they behave according to your wishes. On the subject of style and layout,
you saw that you can establish your own theme and integrate your corporate design.
We then turned our attention to the application logic and events as triggers. With appli-
cation logic, you can create all the magic behind the scenes, again using drag and drop.
You could use this to, for example, display a message box, change the values of vari-
ables, or access UI elements. Finally, we looked at how to work together with others on
a project and share responsibilities.

163
163
 Glavanovits, Haider, Koch, Krancz

SAP Build
No-Code Development, Centralized
Access, and Process Automation

■ Develop low-code and no-code

applications with SAP Build Apps
■ Create centralized business sites with
SAP Build Work Zone
■ Automate workflow processes with
SAP Build Process Automation

www.sap-press.com/5772

We hope you have enjoyed this reading sample. You may

recommend or pass it on to others, but only in its entirety,
including all pages. This reading sample and all its parts
are protected by copyright law. All usage and exploitation
rights are reserved by the author and the publisher.

Rene Glavanovits is an SAP consultant and developer at CloudDNA GmbH,

an SAP partner in Austria. Gernot Haider is the cofounder of sapio GmbH, an
Austrian SAP partner that supports a wide variety of companies in the imple-
mentation of cloud integration projects. Martin Koch is the managing director
of CloudDNA GmbH. Daniel Krancz is a general manager at CloudDNA GmbH.

ISBN 978-1-4932-2481-4 • 801 pages • 05/2024

E-book: $84.99 • Print book: $89.99 • Bundle: $99.95