Skip to Content
Technical Articles
Author's profile photo Hemalatha Bharanikumar

Develop and Deploy SAPUI5 application with launchpad Module from Business Application Studio

Dear Readers,

I hope this blog post will be helpful for you to develop and deploy SAP UI5 application from Business Application Studio to Cloud Foundry with launchpad Module.

Prerequisite :
1. SAP Business Application Studio.

2. Portal Service
3. Application Runtime

 

Now lets see the step by step procedure,

Step 1: Create a New Dev Space for SAP Fiori. Provide the Dev Space name, choose SAP Fiori and select Launchpad module from Additional SAP Extensions and click “Create Dev Space“.

Step 2:After successful creation of Dev Space. You could see the below screen.Click on “New Project from template

or Give “ctrl+shift+p“, search for template and click on “SAP Business Application Studio: Create project from Template

 

Step 3: You could see multiple options. Select “SAP Fiori Freestyle – project Generator” and click “Next

 

Step 4: Select target running environment as “Cloud Foundry”,  choose SAPUI5 Application and click “Next

Step 5: Enter a project name – name of your MTA application and click “Next

Step 6:Choose HTML5 Application Runtime as Standalone Approuter and click “Next“.

Step 7:Give your HTML5 module name, add authentication as “Yes“, enter namespace and click “Next

 

Step 8: Give your view name, adding data source is not mandatory to proceed with this blog post. So choose either Yes or No and click “Next

 

Step 9: If you have given “No” to add the data source you can skip this step. If you have given “Yes“, select your system “My SAP Systems” to access cloud foundry destinations, select a source , service and click “Next“.

 

Step 10: Now you could see your application created successfully.

 

Step 11: Bind the data according to the data source added. If you havent chosen any data source just give a text with “Hello World” and Proceed.

 

Step 12: Configure the target navigation settings. In your manifest.json file,add the below piece of code inside “sap.app”.

  "crossNavigation": {
        "inbounds": {
            "intent1": {
                "signature": {
                    "parameters": {},
                    "additionalParameters": "allowed"
                },
                "semanticObject": "Demo",
                "action": "display",
                "title": "Demo",
                "icon": "sap-icon://accept"
            }
        }
	},

 

your Manifest.json should look like,

 

Step 13: Give “ctrl+shift+p” and select “Yeoman UI Generator

 

Step 14: In Yeoman UI you could see multiple generators. Choose launchpad Module and click “Next“.

Step 15: choose your launchpad module name and click “Next’.

Step 16: choose “Yes” and click “Next”.

Step 17: In your launchpad module name “flp”, go to CommonDataModel.json –. Rename your default group name and add your HTML5 module to this group by clicking the “+” icon.

Step 18: Choose your App and click “Select“.

 

Step 19: Now its time to deploy your application. Right click on the mta file and click “Build MTA“.

Step 20: Building MTA in the previous file will generate a *.mtar file. Right click on the generated mtar file and click “Deploy MTA archive”

 

Step 21: If you are logged in to your cloud foundry already you can skip this step.. Otherwise you will receive a below promt asking for CF end point, email Id and password. Then choose your organisation and space in preceeding prompts.

.

Step 22: Once you deploy your MTA Archive successfully. Got to “Spaces” and click on your space where you deployed your *.mtar file.

 

Step 23: Click on your application app router.

 

Step 24: You could see your application routes inside your app router.

 

Step 25: Your SAPUI5 application with launchpad module look like,

 

That’s it you have successfully created your launchpad module for SAP UI5 application

Conclusion

In this blog post, We have learnt how to develop SAP UI5 application, add launchpad module and to deploy to Cloud foundry from Business Application Studio.

Suggestions are welcome
Thank you:)

#HappyLearning

Regards,
Hemalatha B.

Assigned tags

      23 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo sai santhosh
      sai santhosh

      Great Blog

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thanks Sai.

      Author's profile photo Soham Shah
      Soham Shah

      Amazing Blog. Very Informative.

      I am facing an issue which I hope you can help me with.

      • I have created one standalone approunter app  in Business Application Studio. It conencts to CF Destination ES5.
      • I have run the app successfully in BAS.
      • Was able to built MTA file successfully.
      • Also deployed MTA Archive successfully. But when I'm trying to run using the URL shown in my Space/Application App router, it states not found.

      Deployed App:

       

      When I try to click on URL and open it:

      Can you identify what is wrong? (I have not followed step-12 from your blog. Is it required?)

       

      Soham

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thank you Soham.

      I hope you are not deploying your app with launchpad module.

      So here you are running your deployed approuter which is not redirecting to your HTML5 module. Give <your URL>/<namespace of your application excluding “.”>/index.html. You could see your application.

      You just need to write a line of code in your application to redirect directly on clicking the route. Go to your application approuter folder. In xs-app.json add the below line.

      “welcomeFile”:”nsdemo” – where ns.demo is my HTML5 module application’s namespace.
      Regards,
      Hemalatha B.
      Author's profile photo Soham Shah
      Soham Shah

      Brilliant answer Hemalatha !!!!

      I was able to run the app by

      1. modifying the approuter URL by appending /mynamespace>/index.html
      2. Updating xs-app.json with welcomeFile:"mynamespace"

      Really appreciate your help with it.

      I will connect in future in case I face any road block.

      Soham

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      You are welcome Soham. Thanks again.

       

      Author's profile photo Rajinder Singh
      Rajinder Singh

      Hemalatha,

       

      I am also facing a similar issue. I also created a standalone approuter and there is no data service added. I followed your above suggestion and added "welcomeFile": "nshtml5module". But I am still getting "Not Found" error.

      Could you please help? Attached is the snapshot of the project structure and xs-app.json in projectname-approuter.

      Project-Structure

      Project-Structure

       

      Regards,

      Rajinder Singh

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Hi Rajinder Singh,

       

      Run your deployed approuter as

      <your URL>/<namespace of your application excluding “.”>/index.html.

      If it is working. try to recreate your *.mtar file, then deploy it again and check.

       

      Regards,

      Hemalatha B.

      Author's profile photo Rajinder Singh
      Rajinder Singh

      Hi Hemalatha,

       

      It worked. Thanks for helping me out.

       

      Thanks and Regards,

      Rajinder Singh

      Author's profile photo Chaithra Lakshmi
      Chaithra Lakshmi

      Great blog and very informative

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thank you Chaithra.

      Author's profile photo Avinash Sahoo
      Avinash Sahoo

      Thanks for the helpful blog.

      I have one query that can we import our SAP Web-IDE projects into SAP Business Application Studio.

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Hi Avinash,

      Yes we can. I hope the below blog post by Yuval Morad will be helpful for you.

      Migrating SAP Fiori Applications from SAP Web IDE to SAP Business Application Studio

       

      #HappyLearning

      Regards,
      Hemalatha.B

      Author's profile photo Avinash Sahoo
      Avinash Sahoo

      Thank you Hemalatha.

      Author's profile photo Yuval Morad
      Yuval Morad

      Very good blog!

      Please consider to add in the prerequisite entitlement section for not trial.

      1. Application runtime

      2. Portal service

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Sure. Thanks Yuval.

      Author's profile photo Sohail Ahmed
      Sohail Ahmed

      Very Informative. Thanks Hemalatha 🙂

      Author's profile photo Hemalatha Bharanikumar
      Hemalatha Bharanikumar
      Blog Post Author

      Thank you Sohail

      Author's profile photo Enric Castella Gonzalez
      Enric Castella Gonzalez

      Thanks, very useful post!!

      Author's profile photo Hari Krishna Dandhibhotla
      Hari Krishna Dandhibhotla

       

      Hello Hemalatha,

      I have created test project, as per the steps mentioned above, i was able to Build MTA file, when deploying, i am getting an error. (error screen attached).

       

      Note: I have subscribed for Portal service.

       

       

       

      Thanks and Regards

      Hari Krishna

      Author's profile photo Tiago Moises
      Tiago Moises

      Hello!
      Thanks for the tutorial. Deploy successfully !!!
      Now, I need to add a tile for Business Rules and Process Visibility to the launchpad module.
      How to do this? have any tutorial or code to share?

      Thanks in advance!

      Author's profile photo Ramesh Reddy
      Ramesh Reddy

      Hello, How can i manage role based tile

      Author's profile photo Minh Tri Le
      Minh Tri Le

      Hi Hemalatha Bharanikumar,

      Thanks for a great blog.

      I've tried entering "yeoman" in command palette but it doesn't show anything.

      Do you have any ideas?

      Thanks

      Tri