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.