SAP has put a lot of effort into mak­ing soft­ware that is sim­ple-to-devel­op, coher­ent, sen­si­ble, and that deliv­ers uni­form­ly through the enter­prise. Above all, the com­pa­ny has pro­duced soft­ware that keeps the user expe­ri­ence and acces­si­bil­i­ty across devices front-of-mind. That’s been my expe­ri­ence with using SAP Fiori appli­ca­tions. In this arti­cle, I will walk you through the process of devel­op­ing an SAP Fiori appli­ca­tion on SAP Cloud Web IDE, so you can begin devel­op­ing solu­tions for your own team. 

SAP Fiori: Where to Start

In order to cre­ate an SAP Fiori appli­ca­tion, devel­op­ers must be famil­iar with HTML5 and JavaScript. SAP Fiori uses a JavaScript library called SAPUI5, which is avail­able to SAP cus­tomers, or OpenUI5, which is avail­able to the open-source community. 

Next, you’ll need to use the SAP Cloud Plat­form to devel­op and deploy your appli­ca­tions. Once in the SAP Cloud Web IDE, select the SAP Fiori Mas­ter Detail tem­plate, which is the most com­mon­ly used tem­plate that will help you cre­ate your first SAP Fiori application. 

After you’ve select­ed your desired tem­plate, pro­vide the infor­ma­tion for the required fields — such as project name and app descrip­tor data — when prompted. 

SAP Fiori: Fill­ing in the Details 

Typ­i­cal­ly, the SAP Fiori appli­ca­tions inte­grate with ODa­ta ser­vices (Open Data Pro­to­col). If you know the ODa­ta ser­vice, then select it. If you don’t, con­fig­ure a new one. There are some free online ser­vices such as the ODa­ta v2 free ser­vice, which con­tains a few enti­ties includ­ing one called Prod­ucts.

The default ODa­ta ser­vice (ver­sion 2) is shown here. This SAP Fiori tem­plate does not cur­rent­ly sup­port ver­sion 3 or 4. There are some key dif­fer­ences between ODa­ta ser­vice ver­sions 2 and 4. While ver­sion 2 is a MSFT Open Spec­i­fi­ca­tion Promise, ver­sion 4 Approved by OASIS and ISO. Data can be retrieved in XML and JSON on ODa­ta ser­vice ver­sion 2, and in JSON (XML is option­al) in ver­sion 4. Final­ly, Edm.Date did not exist in ver­sion 2, while it has been added to ver­sion 4. 

Now that you have an idea of what data you are con­sum­ing, you can test the ser­vice to make sure it is run­ning. If there are any issues, you will see them on the default ODa­ta ser­vice screen along with the relat­ed http error code. Oth­er­wise, you can see the enti­ties from the service.

The next step is to map any prop­er­ties you would like to see in your SAP Fiori app with the prop­er­ties of the enti­ty being con­sumed from the ODa­ta ser­vice. After com­plet­ing the ini­tial con­fig­u­ra­tion, go to the next screen to con­tin­ue devel­op­ing. From the SAP Web IDE, you can see a few impor­tant files, including:

• index.html: This is the entry point of your appli­ca­tion. Boot­strap (load) the SAPUI5 library to make those con­trols avail­able in your appli­ca­tion, as well as any oth­er libraries needed. 
• Component.js: This file is used at the start of the UI5 appli­ca­tion and it invokes the app descrip­tor file (manifest.json). It is also used when you need to ini­tial­ize addi­tion­al prop­er­ties such as JSON models. 
• manifest.json: This is used to describe the appli­ca­tion, ver­sion of UI5, type of data mod­els you use (named or default mod­els), and rout­ing for the appli­ca­tion. It also con­tains oth­er meta­da­ta nec­es­sary for your appli­ca­tion to run and allow user navigation. 
• UI ViewsXML: These files ren­der the (UI5) con­trols into the screen. There may be sev­er­al views by the time an SAP Fiori appli­ca­tion is com­plet­ed. The UI views are part of the MVC (Mod­el View Con­troller) soft­ware design pat­tern. Views hold val­ues from the data mod­els, and they can be opened from the code or lay­out edi­tors. Expe­ri­enced devel­op­ers are com­fort­able work­ing with the code editor.
• Con­trollers: These files con­tain JavaScript func­tions that react to events of the views. Con­troller func­tions can manip­u­late data local­ly or invoke oth­er end­points on the ODa­ta ser­vices to update mod­els that are bound to the views. JS con­trols also have life cycles to man­age how data is loaded, cleaned, and man­aged dur­ing the life of the con­trol. Some life cycle func­tions are OnInit, OnBe­for­eRen­der­ing, OnEx­it, and OnAfterRendering.

SAP Fiori: How to Trou­bleshoot Applications 

Run­ning the appli­ca­tion from the SAP Cloud Web IDE will open the brows­er and allow you to ver­i­fy its behav­ior. For client-side devel­op­ment, you can use the brows­er devel­op­er tools on Chrome or Fire­fox (F12 key).

When the appli­ca­tion is run­ning, you can set break points and reload the screen or re-exe­cute a func­tion to debug the code. You can step through the code and view local vari­able val­ues, net­work requests to/​from the appli­ca­tion, and be able to test log­ic from the console.

Whether it’s hear­ing Thomas Reiss, vice pres­i­dent of SAP User Expe­ri­ence at SAP present the road map for SAP Fiori, or you are sit­ting in the audi­ence at SAP Sap­phire, make sure to reg­is­ter for events now.