Creating your first Fiori App in 10 mins using Fiori Elements ( Smart Templates ) by using SAP Web IDE and SAP API Hub with SAP Sandbox as backend.

[Sijin_Chandran]

Fiori Elements aka Smart Templates ( earlier name ) has been a talk of town since the advent of S4 HANA. But am sure many ABAP developers especially who still haven't got chance to get their hands dirty with a S4 HANA system might not have got a hands-on with it. This blog post of mine is especially targeted for those ABAP Developers who are pretty much keen on to know about this tool using which we can create Report type Applications and we can do away with traditional ALV Reports if we are working on a S4 HANA system.

What is Fiori Elements ( Smart Templates ) ?

Fiori Elements is a framework using which we can create UI5 Applications ( adhering to Fiori Guidelines ) with zero coding needed at Front end level. Its mainly used for Report type Applications development.

Please go through this link for more info on this:

https://experience.sap.com/fiori-design-web/smart-templates/

 

Why ABAP Developers need to pay a heed on this ?

Going ahead with S4 HANA more preference is given on Developing User Interfaces using UI5 or Fiori Elements and these are completely out of world considering traditional ABAP based UI Paradigms like Module Pool, Selection Screen etc. Leaving our Core S4 System ( SAP ERP  ) serving as a Backend system for these new UI5/Fiori Apps ( these are deployed in Fiori Front end System ). UI5/Fiori Apps can consume the Backend data using Odata Services.

So why we ABAP Developers need to know about these, is so that we can create Back-end services which perfectly aligns with the Business case and also we can work smoothly with the Front End ( Fiori App ) Developers in case if we are not the one 😉

 

Prerequisites:

• The most important, a SCN ID ( or say answers.sap.com ID ) https://accounts.sap.com


• Using the above ID only you can get access to SAP Cloud Platform Trial which can be used for Developing Fiori apps using "Fiori Elements" from the "SAP Web IDE".


• And again using the same ID only for Back-end Services you can login to SAP API Business Hub . After Login you will get access to SAP Sandbox system and you can simulate these APIs. I will explain about this later.


• Last but not the least basic knowledge of OData based Services, like Metadata , Collection ( Entity Sets ) , Navigation ( Dependent Entity Sets ) etc.

Knowledge which can be helpful:

• Knowledge on annotations while creating CDS views and exposing it as an Odata Service. Using annotations we can control and add more features at UI Level while creating application using Fiori Elements like setting some default value at a Filter Selection etc.

Browsing SAP API Hub using Sandbox System access :

1. Log on to SAP API Business Hub.


2. Select "SAP S/4HANA Cloud".


3. Now there you can find many APIs pertaining to familiar ECC Transactions like Sales Order, Production Order Confirmations, Product Master ( Materials ) etc.


4. For example I selected "Sales Order"


5. Lets check GET ( READ ) operation for EntitySet "/A_SalesOrder". Click On "Try out" button and you could see many options appearing $top,$skip etc. In the $top field give 10 that means Select First 10 Sale Orders and Execute the query ( appears in bottom ). This will automatically generate the Backend Odata query with $top Parameter and you should be able to get the results i.e. 10 Sale Orders with Server Response code as 200.

 

-------------------------------------------------------------------------------------------------------------------------------------

Now with all these Prerequisites lets build our first Fiori App using this Sale Order API

1. Login to SAP Cloud Platform Login.


2. Click "Launch SAP Web IDE"


3. Click on Home if you have not landed to the below Home Screen,


4. Click on "New Project from Template"


5. Select the first option i.e. "List Report Application" ( this is Fiori Elements ) and press "Next".


6. Give "Basic Information" and press "Next.


7. Now this is the most important step "Data Connection" where we will specify Back-end information. From the "Sources" option Select "SAP API Business Hub" and you could see automatically in the right hand side you will get "Search APIs" option. Search for the "Sales Order" API and select it. It will prompt for SAP Community User credentials, please input the same. And you will get a message "Sevice: XXXXXXXXXXXXXXXXXX is selected. Click "Next".


8. Now comes the Annotation Selection. Based on the Metadata of this Service automatically a Annotation File will be showing. Select it and proceed ahead.


9. Now comes "Template Customization", this section is for defining the Data Binding of Back-end with our Front-end application. In the first option i.e. "OData Collection" provide the EntitySet/Collection which you want to see first after loading. Here am selecting "A_SalesOrder". Then the "OData Navigation" option, here you can define to which Dependent EntitySet the Program should divert if we click on any of the rows Selected in initial OData Collection, here am giving "to_Item" Navigation Property. Now click on "Finish".


10. And its done, system will start generating code for this automatically.


11. Open your Project, open "webapp" sub folder and then Click on "Component.js" right click and select "Run" -> "Run as Web Application". Select "Sandbox.html".


12. Click on the corresponding Fiori App created.

Output :



Note: You need to do Settings for the Output Columns you want in Display. Use the "Settings" Option on Right hand side for that.

Note: Ideally on clicking a Sale Order here it should Navigate to Item Details as per the information we maintained in Step 9. But its not navigating to Item Details for which am clueless. Probably jocelyn.dart can guide us on the cause of this. Am I missing somewhere. If you could highlight this, it would be a great help.

But with this we have created a Basic Reporting Fiori app using Fiori Elements.

There are lot of things to be explored on this like annotations in CDS views.

Please check  the below page and links for more on Fiori Elements:

https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+elements

Thanks,

Sijin