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

[former_member245576]

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.

[former_member346513]

Great Blog

[former_member686435]

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

[former_member245576]

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.

[former_member245576]

Thanks Sai.

[former_member686435]

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

[former_member245576]

You are welcome Soham. Thanks again.

 

[chaithragowda]

Great blog and very informative

[former_member417246]

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

 

Regards,

Rajinder Singh

[former_member394471]

Thanks for the helpful blog.

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

[former_member245576]

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.

[former_member245576]

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

[yuval_morad]

Very good blog!

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

1. Application runtime

2. Portal service

[former_member245576]

Thank you Chaithra.

[former_member394471]

Thank you Hemalatha.

[former_member417246]

Hi Hemalatha,

 

It worked. Thanks for helping me out.

 

Thanks and Regards,

Rajinder Singh

[former_member245576]

Sure. Thanks Yuval.

[former_member677362]

Very Informative. Thanks Hemalatha 🙂

[former_member245576]

Thank you Sohail

[enric101]

Thanks, very useful post!!

[former_member717524]

 

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

[former_member653755]

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!

[rameshreddy]

Hello, How can i manage role based tile

[Tri]

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