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!
cancel
Showing results for 
Search instead for 
Did you mean: 
MioYasuatke
Active Contributor

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.

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.
Labels in this area