How do I start developing Fiori?

I especially want to help with this question I often hear from my close environment. If you’re wondering what Fiori is, what it does, what stages it has become today, I would advise you to read the article of Barış Arslan which I followed with appreciation and the writing of my esteemed elder, Serkan Özcan.

Not much, but two years ago, we were developing our code on Eclipse and deploy it to our gateway server with the help of SAP’s published plugin. Now it is not only Fiori applications developed by SAP; it has left the product in the SAP Web IDE, which we can also use to develop hybrid, IoT and HANA applications.

With the IDE, we can create our applications without writing single-line code using ready-made templates, quickly design screens with drag-and-drop capability, populate screens with sample data without preparing OData with mock server feature. Also we can practically integrate the versioning tools and test it as if it were running our application on SAP Gateway thanks to the sandbox feature. We can use the IDE on HCP (Hana Cloud Platform) as online, or we can download the SAP Web IDE Personal Edition to our computer and use it offline.

If there is no problem with your Internet connection in your environment, my advice is to use the IDE online. SAP first applies updates to the IDE here and allows us to use the latest version of the 5 features. Once you have logged in to HCP from https://account.hanatrial.ondemand.com, you can open it from the menu on the left by activating the IDE service in the Services screen.

Hana Cloud Platform Cockpit
Hana Cloud Platform Cockpit

If you say “I can continue my development in offline environment, my internet is slow speed”, you can download the Personal Edition from https://tools.hana.ondemand.com/#sapui5. After extract the .zip file, run eclipse > orion. Orion works as a virtual server on your computer and you can access the IDE from http://localhost:8080/webide/index.html.

SAP Web IDE Personal Edition
SAP Web IDE Personal Edition

If we quickly prepare a sample application from the template, we will have an OData service that we need first. Since this side of the business is ABAP development, I plan to mention it under a separate heading. Ready OData Services can be accessed directly via the URL, or the mock Server feature is available with the help of a metafile. Download the text of the Northwind service here and save it to your computer. From THE IDE screen, follow the steps to create an app with the New Project from Template.

There are basically two types of templates. These are On the left is the Master-Detail Application with a list of header information and a detail screen on the right, and a full-screen list of header information and the Worklist Application that is accessed when the corresponding row is selected in the Detail page.

Template Selection
Template Selection

In this step we give our project a name we do not use in our previous projects.

Basic Information
Basic Information

In this step, you can select OData from the Service Catalog tab for any ERP, CRM, etc. We can connect to the system. If we have not yet prepared an OData service, or have no access to service, we can work with mock data by selecting the existing metafile. We continue by selecting our Northwind meta file from the File System tab.

Data Connection
Data Connection

We complete the finishing touches on our application.

Template Customization
Template Customization
Fiori folder structure
Fiori folder structure

To fill our application with mock data, we select the App in FLP Sandbox (Mock Server) setting from the pop-up window at the top of the screen and run it. We prepared our first Fiori application without writing a single line of code 🙂

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *