Introduction
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
- Create a CAP project
- Add managed approuter
- Add UI
- 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 mtaAs 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
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.mtarAfter 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.
- SAP Managed Tags:
