Developing a Book Store Application using SAP Build Apps

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

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.

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.

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

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.

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.

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.

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.

Import Data

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.

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.

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

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.

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

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.

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.

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

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.

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.

Finally, save the application and launch it.

Final app view

Conclusion

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.