I often develop CAP MTA projects that contain some UI modules for PoC purposes. However, the process of deploying these UIs and making them accessible from SAP Build Work Zone, standard edition, is not well-documented. In 2020, I wrote two blog posts addressing this particular topic.

• Developing a Fiori elements app with CAP and Fiori Tools
• Deploying a CAP based Fiori app to a central Launchpad

Why am I writing my third blog on the same topic then? Well, since my last post, templates in SAP Business Application Studio has evolved, allowing you to generate UI deployment configurations without the need for manual setup. In this blog post, I will demonstrate the process of generating UI deployment configurations using SAP Business Application Studio.

Steps

1. Create a CAP project
2. Add managed approuter
3. Add UI
4. Deploy and verify the UI

1. Create a CAP project

Execute the commands below to create a CAP project, add sample schema and basic deployment settings.

cds init cap-ui  
cd cap-ui
cds add samples  
cds add hana
cds add xsuaa
cds add mta

As a result, a project with the following structure will be generated.

Project structure

2. Add managed approuter

Next step is to add managed approuter configuration. To do this, you can use the “Approuter Configuration” template. Please note that the screenshots in the following sections were captured from a different project than step 1; however, the settings remain the same.

Approuter Configuration template

In the wizard, select the project location.

Select project location

In the next step, select “Managed Approuter” and provide a business solution name. For “Do you plan to add a UI?” select “Yes“.

Approuter Configuration

In the final step, choose “overwrite” and click on “Finish“.

Select action

As a result, the managed approuter configuration will be added to the mta.yaml file. You can view the added configurations in the images below.

Modules section

Resources section

Please note that the property “ServiceInstanceName” is missing for the second (xsuaa) destination. This is because the xsuaa service instance has been configured without specifying the service-name (which is fine).

ServiceInstanceName missing

However, without the “ServiceInstanceName”, the deployment will fail. So let’s add it as below. You can set the resource name (“cap-ui2-auth” in the example below) as “ServiceInstanceName”.

Add ServiceInstanceName

3. Add UI

Open the template wizard and select the template “SAP Fiori application” > “List Report Page”.

Select a template

In the “Data Source and Service Selection” step, select “Use a Local CAP Project” and provide the path to your project.

Data Source and Service Selection

In the “Project Attributes” step, set both “Add deployment configuration to MTA project” and “Add FLP configuration” to “Yes“.

Project Attributes

In the “Deployment Configuration” step, choose “Cloud Foundry” as the target and select “Local CAP Project API” as the destination name. With this, the destination configuration will be automatically added to the mta.yaml file, so you don’t have to create the destination manually.

Deployment Configuration

In the “Fiori Launchpad Configuration” step, enter values as below. They will be used for creating a tile in SAP Build Work Zone, standard edition.

Fiori Launchpad Configuration

After clicking on “Finish“, the Fiori app will be generated and deployment configurations will be added to the mta.yaml file.

4. Deploy and verify the UI

Finally, deploy the MTA with the following commands.

mbt build
cf deploy mta_archives/cap_ui_1.0.0.mtar

After the deployment is compolete, the UI application will be visible in the HTML5 Application Repository.

HTML5 Applications Repository

In SAP Build Work Zone, standard edition, once you refresh the HTML5 Apps channel in the content manager, the application will be available in the content explorer.

Application in the Content Explorer

Conclusion

By utilizing the templates available in SAP Business Application Studio, you can easily deploy a UI5 app within a CAP MTA project and make it accessible from SAP Build Work Zone, standard edition. Although a minor correction is needed in the mta.yaml file, this approach proves to be much simpler and faster compared to the manual methods described in previous blog posts. If you are using SAP Business Application Studio, I highly recommend adopting this approach.