Skip to main content

Developing a Book Store Application using SAP Build Apps

Published on 30 January 2024
Developing a Book Store Application using SAP Build Apps banner
Aiswarya Sivan
Aiswarya Sivan
Associate Consultant

Aiswarya Sivan is an Associate Consultant specializing in the Idoc cockpit. Leveraging her expertise in Fiori, CDS, and OData, she optimizes data processes, designs user-friendly interfaces, and streamlines workflows for enhanced business efficiency. A skilled developer, Aiswarya builds intuitive Fiori applications, simplifies data access with CDS views, and ensures seamless data exchange through OData integration.

Remya Raju
Remya Raju
Associate Consultant

Remya Raju is an SAP ABAP Associate Consultant who delivers innovative solutions by leveraging ABAP's capabilities to automate tasks and streamline workflows. With expertise in OData, Fiori, and CDS, she simplifies technical complexities to create user-friendly experiences. Through intuitive Fiori applications, Remya enhances user adoption and ensures seamless operations across various business processes.

In the last blog, we touched on SAP build and how its low-code drag-and-drop environment democratizes the playing field for non-technical folks, helping these business users focus on higher-order activities such as the creation of enterprise applications. Continuing this theme, today we bring another blog that focuses on seamless application development.

In this blog, we will give you a walkthrough on how to develop a simple and user-friendly bookstore application using the SAP Build App. We have named the application "Readify," and it displays a set of books and their secondary details, such as the author of the book and a description of that book.

The application contains three pages.

  • Home Page
  • Book View
  • Book Details
Home page screenshot

Home Page

The home page contains the name of the application. The UI components used on this page are the title, text, and icon. These are placed inside a container.

Home page UI

To add the background image to the container, select the container, go to layout, and set the alignment of the container by choosing the option custom and then set the width and height of the container manually.

Height and Width settings screen

For the icon, we set the navigation to the next page and bind the page "Book Details."

next page navigation screen

Book Detail

The book details page shows the list of books available. The search bar, image list item, and title are used on this page.

Book details page shows

We'll explore how local storage can be effectively utilized within SAP applications, focusing on a            sample entity “Books” with essential fields: ID, book Name, author, description, and price.

One of the features of the Build app is on-device storage, which helps store data on the device only.

Data Screen

While creating the entity, we can specify the field name and its type. We can populate the entity based on our requirements, like entering the data manually. The BROWSE SAMPLE DATA option will help us populate our entity manually. The “Add New” option will create new fields along with their type.

On device storage Screen

We can populate the entity by adding the data to the value field. Then, save the record. There     
is also an option to delete the record.

delete the record screen

Import Data

Import Data Screen

SAP Build Apps provides another option to upload our data in Excel format using IMPORT. By selecting “see format,” we can download the Excel format of the entity that we created.

download option screen

It is downloaded as an Excel file. The format will be as shown below, and then we can populate the  Excel with the data that we require.

Excel sheet screenExcel sheet with Data screen

Once the data is entered, we can choose the file using the “SELECT FILE” option.

File select option screen image

This is how we can populate the entity using the import option.

For search bar control, we assign a page variable for searching books by their name. This variable is only valid for the current page. Here we use the page variable "Book" assigned to the search bar.

Search page screen image

Image list item control shows the list of books with their images; Binding is done by using a formula for searching purposes.

formula for searching purposes screen

Setting Page Parameter

The list page will navigate to the detail page of the specified book. For that, we have used some page parameters. We can create page parameters by selecting variables. The page parameters and its type can only be added for that current page. Then save the page Parameter.

Setting Page Parameter screen

After setting the page parameters, we need to set up the page parameters on the book view page. To do so,

  • Select Image list Item and then Drag Open page navigation at the logic page.
  • Bind the required page in the navigation together with page parameters.
set up the page parameters on the book view page screen

Double-click the Open page navigation, and then bind the corresponding page parameters as per the requirements.

 binding the corresponding page parameters

Book View

This page shows a detailed view of the book. The page contains the UI component's title, image, and text. The background color of the page layout has been changed.

UI component in the page

As mentioned previously, we can create the page parameters for the next page and bind the page parameters to the corresponding Text control at their content Property.

Final page

Finally, save the application and launch it.

Final app view

Final app view


In the end, we saw how easy it was to create an Enterprise-level app using the user-centric and cloud-based prototyping design tool called SAP Build App. The drag-and-drop functionality and a suite of pre-designed UI elements streamlined the design process and enabled us to develop a brand-new app seamlessly, ultimately leading to a more efficient and accelerated application development.

If you have any questions on building and deploying similar high-performing, user-friendly, and sophisticated applications for your specific business requirements efficiently, please feel free to get in touch with me.  

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.