SAP Build Apps Product Tour

Explore SAP Build Apps

Take the product tour to see how easy it is to create an enterprise application with drag-and-drop simplicity.

Click-through product tour

Web & mobile application

Web & mobile application

Click to start demo

Macbook grey

Press

on your keyboard to toggle zoom

This demo will walk you through the creation of a simple "To-Do Manager" app.

You'll see how to create the components needed to build the app: user interface (UI), data models, and business logic.

Click on the option to build a "Web & Mobile Application" to begin.

In the "Application Builder", you will create a user interface for your app by simply dragging and dropping UI components.

Start by clicking the "Button" component and dragging it into the canvas.

Once the button has been added to the app canvas, a new component will be created in the user interface. You can then customise it in the "Properties" configuration.

In the "Properties" tab, you can customise the label to say "Add Item" and add other visual attributes.

If you don't see a component that you need for your app, you can search for additional pre-built components in the "Marketplace."

The marketplace has 500+ pre-built components that you can leverage to design your app.

Now let's go back to your app canvas.

For the button to work, business logic is required. By default, it is triggered when a user presses or taps the button in the app.

Let's open the "Logic" tab and add business logic to the new "Add item." To do that, click the highlighted button at the bottom right of the screen.

The "tap" event for the button is represented by the "Event | Component tap" component that automatically appears in the logic flow.

Now, you can drag a new component "Data | Create record" and drop it into the logic flow.

The new component "Data | Create record" will be added to the flow design.

Next, add a connector from "Event | Component tap" to "Data | Create record."

This will create the following logic: "when the button is tapped, a new record is created."

Let's open the "Properties" tab to define the details of the new record.

Set up this new record as a data resource, which will add a new item to a database table in your backend.

Now that you have added all the UI components needed for the app and their associated logic, it's time to build the backend of your app.

Let's use "Visual Cloud Functions" to build the data model and backend business logic – without writing any code.

To do this, click on "Application Backend."

First, let's create the data model and data tables for your application.

This data table will store the to-do items or tasks that your app will manage.

Under "Configure fields", click "Add New" to add the fields of your table.

You can create a variety of Field types: text, number, date, list, and true/false.

The data model for your app can be easily created without code.

And you can do more, for example:

If needed, you can create additional data tables or business logic. For example, by adding a "Holiday alert" feature that will notify you about tasks expiring on holidays, or a list of recommended "Vendors" or "Service Providers" which you can hire to execute services like equipment maintenance. To do this, click the (...) button from "Vendor list" data table.

Here, you can add business logic that will apply conditions and rules to the maintenance of the business partners included in your "Vendor list".

Once you have created the data model for the "To-Do Manager" app, you can go back to the frontend app builder.

SAP Build Apps has an in-app learning experience designed to accelerate your onboarding and learning journey. Click on "Learning Status" to explore more.

With the in-app learning experience, users can easily track their learning journeys.

The in-app learning tab provides helpful tips and learning content for key concepts such as UI design, data, and business logic.

In a previous flow, we demonstrated how to use "Visual Cloud Functions" to create a data model in your backend for your "To-Do Manager" app.

If you wish to integrate your application with another backend, you can connect to your SAP landscape using SAP Business Technology Platform (SAP BTP) authentication or connect to non-SAP systems via APIs.

Now that you have designed both the frontend and backend of your app, your "To-Do Manager" app is ready for testing.

From your "App Builder," click the "Launch" tab.

Click "Preview your app" to see what the App will look like.

Here is the preview of your "To-Do Manager" app.

We hope you enjoyed the demo. Check out our other content and learning journeys, and keep building!

Try and buy SAP BTP