Estimated Read Time:  Around 8-9 minutes

SAP Build Apps is a no-code platform that enables users to easily create enterprise applications with a visual interface, integrating backend data and defining app logic without writing any code.

HISTORY OF GENERATIVE AI

SAP Build Apps (formerly SAP AppGyver) is a visual development solution for creating enterprise apps without writing code. It lets you:

Create apps by dragging and dropping pre-built components and then configuring them to your needs.
Connect to all forms of back-end data, such as REST and OData services, including SAP systems, using a simple form, and then display or use the data for calculations.
Create application logic, also by dragging and dropping flow functions and configuring them. Logic allows you to tell the app what to do in response to user or app events.

In addition to the main app-building features, there are a bunch of features that make it easy to build SAP extensions and other SAP-related apps:

SAP BTP Authentication You can make it mandatory for the users to be authenticated with SAP BTP before using the app. This is required for many other features, such as referencing SAP BTP destinations. Destinations are connections to back-end systems, often SAP systems, defined within SAP BTP for use by SAP BTP services. SAP Build Apps is aware of destinations defined in the SAP BTP cockpit and can create data resources (that is, connections to back-end systems) based on these destinations. SAP Systems describes how to set up destinations for SAP Build Apps. Deployment to SAP BTPSAP Build Apps lets you deploy your app to run on SAP BTP. SAP Build Apps enables you to build your project into an MTAR, an application file understood by SAP BTP’s Cloud Foundry environment, and then enables you to send the file to be deployed in SAP BTP.

Process of Building an App

There is a typical methodology or process flow for building an app, along with certain typical parts of the app that are included.

The three main parts of an application are:

User Interface (UI)It refers to what the user sees on the screen and interacts with.DataIt refers to the information retrieved from back-end systems that generally displays in the UI.LogicIt defines the actions performed in response to user interactions or application events.
These parts need to be considered right from the start, where it is first recommended to create a high-level plan for the app.

Exploring Fundamentals of Components

What is the role of User Interface (UI) in an app?

The UI covers what you will see and be able to do in the app. UI not only defines the elements that can be seen, but it also defines some of the basic interactions in the app. No-code development environments are typically equipped with a set of tools for creating a UI.

In SAP Build Apps, components are the powerful key to building apps easily and quickly that meet companies’ most diverse needs and enrich work processes. A simple description of components is that they are prefabricated code pieces that can be used as building blocks with pre-defined functions to design the UI and enable the bridge to use logic.

Components can occur in any type of element, such as buttons, input fields, text areas, or images. There are no fixed limits to how big or small components can be. The smallest components can be like an individual icon or a divider line. The largest components can be a map component for geolocation or a video player. By prefabricating them, they promote an intuitive experience in the visual field of development and, with the provided functions, allow many development possibilities to be covered. However, if any specific additional requirements are needed, components can also be adapted and built based on appearance and functionality.

Form components can be used to insert useful shapes in the app. These are particularly advantageous in order to exploit user information and enable interactions. It allows the user to trigger simple and more complex actions. The most frequently used component is the button component that is predestined to trigger an action by choosing it, even if other components are connected to logic and can also trigger actions by selecting it.

Input and password fields are essential for users to enter information that can be processed further, for example, to store and display or authenticate a user.

In addition, checkboxes, dropdown fields, and sliders provide a quick, intuitive way for users to select predefined values in these components. This information can then also be processed further by the app.

Creating lists using list components is an important and frequently used approach to SAP Build Apps. In order to display certain information using lists, the list components are usually connected to a database (source) where the stored data is located. Temporary information from the app combined with user input or new information that results from functions and forms can all be listed. Other options are, however, the connection through interfaces to data/information from the internet or other SAP or third-party solutions. The type of display with the components is diverse; there are those, using normal lists to which more than one piece of information is connected or to which images and icons will also display. With lists, in particular, it is important to use the properties component, which is explained in more detail in the next lesson, for a dynamic or targeted display.

Layout Components

By default, SAP Build Apps offers three layout components that allow you to design further options regarding the layout of the UI and to structure elements. You can just group components or do more complex actions, such as turn components in groups invisible or visible after a trigger as one section at the same time. In that way, layout components bring additional advantages for designing apps, such as:

More clarity, especially with the layout tree.
Display content sections side-by-side.
Content and components can be easily proportioned and grouped.
Enter several components at once as group.
Intuitive display possible by scrolling in the defined area, so on.

Properties

To ensure that the UI of an application is adapted to its requirements regarding the context, dynamic appearance, and functionality, the properties of the components, in particular, are an advantageous factor. The settings in the properties differ depending on the chosen component and allow easy adjustment of the components on the UI.

Bindings

Components have properties that can be bound to static values, variables, formulas, and also other component properties. This makes it possible to use the same component in different ways and adapt it to your needs. For example, if a text component is selected, it can simply be assigned a static name, which would be the default method. Another example is that you can link a data variable to a UI component to display the data.

However, there are many other ways to make the content dynamic instead. In this case, a connection can be used, for example, to display a text or name adapted to the user from a variable assigned to that user or also time and date, and more. The options are unlimited and are made possible by the different types of binding that can be selected in the properties of each component.

Advanced Properties

Under the Advanced Properties, you can find a field for the component display name which allows you to customize the component name in the view canvas and tree view. Giving components custom names can be very useful when working with more complex layouts and more components.

The Need for Variables

Variables provide a place in your app to store temporary data until you need to display or read it or send it somewhere else, for example, to a back-end system.

For example, let’s consider that you have an application that is a calculator. You will need to store the operands (the numbers the user enters to be added or multiplied) and the result of the calculation. Once the data is stored in a variable, you can display the answer in a text field so the user can see the result.

You can use the variables to store:

Data retrieved from an external data resource.
Information about the current user (such as name, E-mail).
User’s preferences for the app while the app is running (such as preferred home page, favorite baseball team).
Information about the current product that is being displayed on the current page.
Key Use Cases for Variables

Types of Variables

SAP Build Apps includes different types of variables for various purposes.

Page parameters and data variables have specific use cases, but app variables and page variables essentially store data. You may wonder when you use one or the other.

You could store all your data in app variables, but all app variables are display together, and you might have so many that it would be difficult to keep track of your long list of app variables.

It would be easy for you–and anyone helping you develop your app–to store the data you need for individual pages in those pages and not lump them together as app variables. This way, each page could manage its own page variables, and you would better know the purpose of each variable.

Define Variables

The default state of a page is View, which shows the layout of the page with all its components. If you want to define variables, change the state to Variables.