Discover how to create your first SAP Fiori app

[Trinidad]

You might have already heard about SAP Fiori, but do you know exactly what SAP Fiori means?

SAP Fiori 2.0 is the latest evolution of the user experience for SAP.

The SAP Fiori user-centered design concept focuses on the way employees work and offers a variety of business benefits:

• Increased productivity – faster and direct access to relevant information and applications


• Transparency on items needing your attention – timely notifications


• Helps users decide what needs to be done next


• Allows users to take quick and informed actions


• Increased user satisfaction

 

SAP Fiori apps are then apps built following SAP Fiori UX principles.



Important update 19/03/2021: SAP Business Application Studio is the next generation of SAP WebIDE, please use SAP Business Application Studio instead of WebIDE.

Check this blog for more details: SAP Business Application Studio and SAP Web IDE Full-Stack

And the following blog and tutorial to start creating your first Fiori apps with SAP Business Application Studio:

• SAP Fiori Development with SAP Business Application Studio


• Create an SAP Fiori App Using SAP Business Application Studio


• SAP Fiori Elements using SAP Business Application Studio

I have striked through some of the following lines, if you continue reading this blog please take into consideration the topics not linked to WebIDE and translate to WebIDE when required. The same Fiori templates proposed by WebIDE are available as SAP Business Application Studio.

In order to develop SAP Fiori apps we use SAP WebIDE.

SAP Cloud Platform Web IDE is a powerful, extensible, web-based, integrated development tool that simplifies end-to-end application development. Build, debug, test, extend, and deploy apps by using wizards, templates, samples, code, graphics editors, modelers, and more. SAP Web IDE simplifies the end-to-end application lifecycle: prototyping, development, packaging, and deployment. You can also create custom extensions to existing Fiori applications.

When faced with developing an app, you have several ways to get started ranging from app templates, sample applications, build prototypes or a make-them-completely-from-scratch approach. But which approach is right for your situation? In most cases, it's your project necessities, level of expertise or need for flexibility and freedom that will decide.

• Build prototype – We already talked about Design Thinking and Build prototyping tool in the blog Digital Transformation for SMBs – Design Thinking methodology and Build.me and we saw how easy it is to generate a Fiori app out of a Build.me prototype (just an import operation indeed).


• WebIDE Sample Applications – The blog Fiori Reference Apps gives you a list of available sample apps and how to proceed in order to get them running in your WebIDE workspace.


• SAP WebIDE Templates – This is the main topic I’ll like to cover in this blog and show you via some samples how to apply it to our SAP SMB market.

 

SAP WebIDE Templates

WebIDE app templates are a kind of best practices for app development. They incorporate our latest recommendations and can be used as a starting point for developing apps according to the SAP Fiori design guidelines. They include generic application functionality and tests that can be easily extended with custom functionality if needed.

The available templates are described under App Templates: Kick Start Your App Development.

And the blog Use SAP Web IDE Templates for Rapid Fiori App Development is giving details on how to create an app from the templates.

SAP WebIDE templates will require the declaration of a Data Connection. In the case of OData V2 backend services, all the templates are supported. In the case of OData V4 backend services at the time I’m writing this blog only the SAPUI5 and the SAP Fiori Worklist Application OData V4 templates are supported. But why am I talking about OData versions? Well for our specific SAP SMB market we work with 2 products: SAP Business By Design and SAP Business One. SAP Business By Design supports OData V2 and therefore all SAP Fiori templates are available. In the case of SAP Business One OData V4 is supported and therefore only SAPUI5 and SAP Fiori Worklist Application OData V4 are supported.

In this blog I’ll like to share with you a very simple step by step tutorial Creating an SAP Fiori app from a WebIDE worklist template connecting to SAP Business One via SAP API Business Hub. Just follow the instructions to create your first SAP Fiori app!

You can of course do a similar exercise by directly connecting to your OnPremise system by using the option Service URL instead of SAP API Business Hub in the Data Connection step. You can find more details on how to define your destination in the first topics covered by the blog From SAP API Business Hub to your SAP Business One system.

We have other exercises and samples on similar SMB topics available in the blog Loosely Coupled Solutions for SMBs Topics, just check them.

Check as well our eLearning materials, some sessions are focused on SAPUI5 and SAP Fiori!

And don't forget to share your experiences either in this blog if directly related with the proposed exercise or in the SAP Community forums for all topics around SAP Business One and SAP Business ByDesign. We will be glad to help!