Skip to Content
Technical Articles
Author's profile photo Chandra Bhushan Singh

Learning SAP Build Apps from Basics: Create a Project

Important Update: SAP Build Apps Preview App is now available on App Store. 

Introduction

Let us create our first project in SAP Build Apps.

How do you create your first project in SAP Build Apps?

Access your BTP Subaccount with the pre-requisites met and subscribed to SAP Build Apps. I am using a Free-Tier version.

BTP%20Subaccount%20with%20SAP%20Build%20Apps

BTP Subaccount with SAP Build Apps

SAP%20Discovery%20Center

SAP Discovery Center

From the SAP Build Lobby, you need to click on Create button

Create%20Project

Create Project

Click on Build an Application

Build%20an%20Application

Build an Application

Click on Web and Mobile Application

Web%20Application

Web & Mobile Application

Add “Project Name” and click on Create button

Save%20Project

Save Project

Now you see App Builder below with:

  • View Canvas in the center
  • Left-hand side panel is Component Library
  • Right hand side panel is called as Component Properties and
  • Top panel is the Global Toolbar
  • At bottom, you see the Logic Canvas.

This is the start point for us to create an application.

Components%20of%20App%20Builder

Components of App Builder

Components%20of%20App%20Builder%20-cont.

Components of App Builder -cont.

Select the component on the UI canvas. By default, you get a Title and Text Component.

 

How to edit a component?

Select the component, Title on the UI canvas.

Go to Component Properties and click on the Content property

Change the text to Product

Edit%20Title%20Component

Edit Title Component

Select the Text component and click on the cross mark to delete it. By this way you can delete a component from the view canvas.

Delete%20Component%20from%20Canvas

Delete Component from Canvas

Go to the Component Library and find the Search Bar component. Drag and drop it on the view canvas below the title.

Search%20Components%3A%20Inserting%20Search%20Bar%20and%20List%20Item%20components

Search Components: Inserting Search Bar and List Item components

Similarly, go to the Component Library and search for the List Item component. Drag and drop it on the view canvas below the search bar.

Creating a Variable

Let us create an App Variable, which will be used to store the search term. We will call it as “filterText”.

Go to the UI canvas, you see a toggle button for View and Variable. Toggle to variables and select the “App Variable” tab and then click on + icon. Now, select the variable created and change it to filterText.

Add%20Variable

Add Variable

In the above screenshot, you also see there is a button in the bottom left for Remove from the app, which you can click when you intend to delete the variable.

With this you have successfully completed designing the app structure!

Final%20Structure%20of%20App

Final Structure of App

Click on the Launch button in the Global Toolbar

Launch%20App

Launch App

Press the Open Preview Portal button

Preview

Preview

Select your project from the below screen and click on Preview on web

Preview%20on%20web

Preview on web

Click on Open button to launch the web preview

Click%20Open

Click Open

Final Output looks like this:

Output

Output

Now, let us connect the app to the oData service in my next blog.

Stay tuned!

 

Feel to connect with me at Chandra Bhushan Singh 

Why not say a ‘Hi’ on LinkedIn?

Do you have any suggestions? Comment below.

If you found it to be useful, give us a like and share on social media platform.

Have a question in mind, just ask here.

 

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Shantanu Sharma
      Shantanu Sharma

      Outstanding! Very helpful.

      Author's profile photo Chandra Bhushan Singh
      Chandra Bhushan Singh
      Blog Post Author

      Thank you Shantanu. I am glad to hear it!

      Author's profile photo MADHULATHA PELLURI
      MADHULATHA PELLURI

      Hi Chandra,

      Outstanding! Very helpful. I have followed the same.

      Thanks

      Madhulatha

      Author's profile photo Chandra Bhushan Singh
      Chandra Bhushan Singh
      Blog Post Author

      That's awesome, Madhulatha!

      Author's profile photo Ukeme Ekpenyong
      Ukeme Ekpenyong

      Very clear and easy to follow and replicate. Great job, thanks a lot !!

      Author's profile photo Chandra Bhushan Singh
      Chandra Bhushan Singh
      Blog Post Author

      Thanks Ukeme!

      Author's profile photo Nagandla Raghu Ram
      Nagandla Raghu Ram

      Hi!!

      This is catchy blog on SAP Build. It is helpful.  Please add few more details like connecting to Odata Services, Adding extra UI Elements and Adding Controller Logic to customize according to your requirement.

      Thank you so much

      Author's profile photo Chandra Bhushan Singh
      Chandra Bhushan Singh
      Blog Post Author

      Thanks Raghu, few more blogs are on the way:)

      Author's profile photo Akshay Raina
      Akshay Raina

      https://groups.community.sap.com/t5/sap-builders-discussions/how-to-filter-services-within-page-1-and-page-2-in-app/m-p/259186#M587

      I am facing an issue with filtering here, can you please guide me the correct way to handle this scenario of filtering using SAP Build, please.

      Author's profile photo Javier Andrés Cáceres Moreno
      Javier Andrés Cáceres Moreno

      Good