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:
- Setup SAP Business Application Studio in Cloud Foundry environment.
- You created a dev space for the SAP Fiori application type
📚 Step-by-Step Procedure
1. Launch the dev space for the SAP Fiori application type.
2. On Welcome page, click on New project from template.
3. Next, choose the template SAP Fiori Freestyle – Project Generator and click on Next button.
4. Choose Target Running Environment as Cloud Foundry and template as SAPUI5 Application.
5. Enter a project name and then click Next.
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.
8. Provide Basic Attributes details and then click Next
- Enter the HTML5 module name
- Choose Yes to add authentication.
- Enter a namespace
9. In the last step, enter View Name and choose No to add a data service and then click Next.
10. Finally, the Fiori project is created and here is the folder structure.
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.yml | This file defines application’s resources and dependencies |
| xs-security.json | This file defines application’s security scopes and roles. |
| /ui/webapp | This folder contains SAPUI5 application files like view, controllers etc.. |
12. In View1.view.xml file, add a Text UI5 control like below.
13. After that, right click on index.html file and choose Preview to run the SAPUI5 application.
14. Hurray!!! you see the output like below.
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
- Develop Your First SAPUI5 Web App with SAP Business Application Studio
- How to develop and deploy Node.js applications in SAP Cloud Foundry
