Fiori Introduction

Posted by Thorsten Müller on April 1, 2021 at 9:30 AM
Thorsten Müller
Find me on:

TL;DR: The Fiori cosmos has a lot of expressions. There are standard Fiori apps as well Fiori lighthouse apps available. Also, there are several options to develop our own Fiori app. In this blog we clarify some of the terms to get everybody on the same page for the upcoming blogs.

Introduction

When someone mentions Fiori he/she often refers to a Fiori standard app. Even though there is a huge Fiori world with a lot of terms. In this blog series we are digging a bit deeper into the Fiori world. We will show the differences between Fiori apps as well as how you can extend them. Either by customizing your Fiori apps or by extending them. To get things started we focus on the question what types of standard Fiori apps exist and how do they differentiate.

Since we see our blogs as an exchange of ideas, feel free to add comments as well as get in contact with us.

Fiori Introduction

To get things started I want to get all of us on the same page. Hence, we will start very basic and discuss about what Fiori is.

Fiori is/are basically design guidelines which describe how apps should look and feel. Thus, all Fiori apps should follow those design guidelines.

Beside the Fiori apps there are also the Fiori-like apps and the UI5 freestyle apps. Fiori-like apps are apps which follow the design guidelines most of the time but they have little twists which are not in the Fiori design guidelines. For example a button could have a different design or is placed on a different part of the UI where the design guidelines doesn’t intend it. Such changes occur often during development. The other option is to create a ‘UI5 freestyle app’. Those apps are not bound to the Fiori design guidelines. Hence, it is possible to create the app any way you want it. In those kind of apps we have the possibility to create our own button or a line in a table with our own design. A sample for such custom controls would be the following two pictures. This custom control is part of a todo-list. The list item will cross out the text and the due date as well as provide a green border once the task is marked as solved.

Custom List Item Custom List Item Done

 

Fiori lighthouse app vs Fiori standard app

Since this blog series focuses on the Fiori standard apps, we will now take a look at the two different Fiori app types which are provided by SAP. There are the Fiori standard apps and the Fiori lighthouse apps. The lighthouse apps are also standard apps, because they are provided by SAP as well by SAP. They serve more or less as an entry point to the Fiori standard apps. Both types of apps are found in the Fiori Apps Library. The lighthouse apps will be displayed with a lighthouse in front of the name.

lighthouse app

When we compare the Fiori standard apps and developed apps, we can quickly realize that apps which are developed by SAP are cheaper and provide customization and extension options. Whereas on the other hand a developed Fiori-like or freestyle UI5 app provides more flexibility as well as more options during the complete development process. In the upcoming blogs we will display some useful features as well as some tips and tricks to enhance a standard app. The first topic we discuss will be modifications as well as enhancements of the UI.

 

 

Topics: Fiori

Thorsten Müller

Written by Thorsten Müller

Thorsten experiences different types of front-end technologies within the SAP cosmos. Open to learn new technologies to be able to choose the correct technique for the desired outcome.

Feel free to leave a comment!

Recent Posts