SAP Build Code blog series: 4 – Adding a SAPUI5 ap...

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

2,091

In the previous blog posts, we’ve created a project in which we now have a fully functional CAP backend service, but what is a backend service without a user interface? In this blog post we will extend our project with an SAPUI5-based application and deploy it to SAP Business Technology Platform.

Adding a SAPUI5 application to manage sales orders to our project

In the project story board, click the “+” button under the UI applications section to get started.

In the first step, add a display name, application name and description for your application and click the “next” button.

In the next step, select the type of UI application you want to add to the project. There are two options here, either a Template-Based, Responsive Application (SAPUI5 application) or a Mobile-Centric, Freestyle Application (SAP Mobile Services-based application).

For the sake of simplicity in this blog series, we’ll use a Template-Based, Responsive Application. But now you can perfectly create a native mobile application from here as well leveraging SAP Mobile Services.

Choose the right template you’d like to use; in the case of our project the most logical / recommended template would be the List Report Page.

After selecting the right template, configure the necessary data objects. In this case we’ll just select the SalesOrders entity and select none as the navigation entity.

After finishing the guided experience, the SAPUI5 app will be generated, added to the story board and you’ll see the Fiori Tooling Page Map show up after clicking the UI Application.

There’s no need to do changes at this point, since we saw in the previous blog post that SAP Joule already generated the necessary annotations for our project. If you run the project again, you’ll now see that the project overview also contains an application. By clicking the tile, you can start the application.

Deploying our project to SAP Business Technology Platform

As a final step for our project, we’ll deploy our project to SAP Business Technology Platform. I’m not going to dive into the details on how to prepare your cloud foundry space here, since this is well documented.

Just make sure your cloud foundry organization has access to following services for this example:

Connectivity Service (lite plan)
SAP HANA Schemas & HDI Containers (hdi-shared plan)
Destination Service (lite plan)
HTML5 Application Repository Service (app-host plan)
Application Logging Service (lite plan)
Authorization and Trust Management (application plan)

To deploy the full project to SAP Business Technology Platform, SAP Build Code has a task available. You’ll find the task in the Task Explorer. Open the task and click the “Deploy” button to start the deployment process.

If you’re not logged in to Cloud Foundry yet, you’ll be asked to login to Cloud Foundry and select the space you want to deploy to.

Once the deployment process is complete, you’ll see the overview URL displayed in the terminal.

Going to the SAP Business Technology Platform cockpit you’ll find the HTML5 applications as usual.

Same applies for the backend services.

We’ve now manually deployed our application to SAP Business Technology Platform, which is great! We actually have a fully working application created through generative AI without changing anything manually. (disclaimer: for more complex cases, you’ll need to do manual implementations as well)

In the next blog post, I’ll give you some last insights, personal experience and final thoughts on using SAP Build Code.