How to develop Fiori App in SAP Business Application Studio

0
7521

Dear SAPLearners, in this blog post we will learn how to develop Fiori App in SAP Business Application Studio.

✋ Prerequisites

To complete this tutorial, you will need:

📚 Step-by-Step Procedure

1. Launch the dev space for the SAP Fiori application type.

Fiori App in SAP Business Application Studio Step1 1

2. On Welcome page, click on New project from template.

Fiori App in SAP Business Application Studio Step2

3. Next, choose the template SAP Fiori Freestyle – Project Generator and click on Next button.

Fiori App in SAP Business Application Studio Step3

4. Choose Target Running Environment as Cloud Foundry and template as SAPUI5 Application.

Fiori App in SAP Business Application Studio Step4

5. Enter a project name and then click Next.

Fiori App in SAP Business Application Studio Step5

6. On HTML5 application runtime step you have 2 options to choose either the Standalone Approuter or the Managed by SAP Cloud Platform approuter.

7. However, we will choose Managed by SAP Cloud Platform and provide the service name. Click Next.

Fiori App in SAP Business Application Studio Step6
Fiori App in SAP Business Application Studio Step7

8. Provide Basic Attributes details and then click Next

  • Enter the HTML5 module name
  • Choose Yes to add authentication.
  • Enter a namespace
Fiori App in SAP Business Application Studio Step8

9. In the last step, enter View Name and choose No to add a data service and then click Next.

Fiori App in SAP Business Application Studio Step9

10. Finally, the Fiori project is created and here is the folder structure.

Fiori App in SAP Business Application Studio Step10

11. Unlike SAP Web IDE Full Stack, we have different project structure in SAP Business Application Studio. Lets understand important folders, files in the project.

mta.ymlThis file defines application’s resources and dependencies
xs-security.json This file defines application’s security scopes and roles.
/ui/webappThis folder contains SAPUI5 application files like view, controllers etc..

12. In View1.view.xml file, add a Text UI5 control like below.

Fiori App in SAP Business Application Studio Step11

13. After that, right click on index.html file and choose Preview to run the SAPUI5 application.

Fiori App in SAP Business Application Studio Step12

14. Hurray!!! you see the output like below.

Fiori App in SAP Business Application Studio Step13

Conclusion

Congrats!! you have finally learned the how to develop Fiori App in SAP Business Application Studio. In next tutorial we will deploy SAPUI5 app to SCP Cloud Foundry and add it to the SAP Cloud Platform Portal Fiori Launchpad site.

Continue Reading: How to build, deploy Fiori app in SCP Cloud Foundry.

Please feel free to comment and let us know your feedback. Subscribe for more updates.

If you liked it ❤️, please share it! Thanks! 🙏

Other References