{"id":1937,"date":"2022-06-02T10:42:25","date_gmt":"2022-06-02T08:42:25","guid":{"rendered":"https:\/\/new.enmeshed.de\/?p=1937"},"modified":"2025-11-25T11:44:18","modified_gmt":"2025-11-25T10:44:18","slug":"fiori-introduction","status":"publish","type":"post","link":"https:\/\/www.js-soft.com\/en\/fiori-introduction\/","title":{"rendered":"Fiori Introduction"},"content":{"rendered":"\n

Update: A new generation of Fiori Apps are rising, the world moves in the cloud. This article covers SAP on-premise technology.<\/em><\/p>\n\n\n\n

Introduction<\/h2>\n\n\n\n

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 of what types of standard Fiori apps exist and how do they differentiate.<\/p>\n\n\n\n


Since we see our blogs as an exchange of ideas, feel free to add comments as well as get in contact with us.<\/p>\n\n\n\n

Fiori Introduction<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Fiori is\/are basically design guidelines which describe how apps should look and feel. Thus, all Fiori apps should follow those design guidelines<\/a>.<\/p>\n\n\n\n

Besides 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\u2019t intend it. Such changes occur often during development. The other option is to create a \u2018UI5 freestyle app\u2019. 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.<\/p>\n\n\n\n

\"Custom<\/figure>\n\n\n\n
\"Custom<\/figure>\n\n\n\n

Fiori lighthouse app vs Fiori standard app<\/h2>\n\n\n\n

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<\/a>. The lighthouse apps will be displayed with a lighthouse in front of the name.<\/p>\n\n\n\n

\"SAP<\/figure>\n\n\n\n

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<\/a>.<\/p>\n\n\n\n

Read also part II: Fiori Customization<\/a><\/p>\n\n\n\n

part III: Extensibility Sc<\/a>enario With Key User Tools<\/a><\/p>\n\n\n\n

part IV: SAP UI5 Adaptation Project<\/a><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":6,"featured_media":14005,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-1937","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-fiori-en"],"acf":[],"yoast_head":"\nFiori Introduction - j&s-soft<\/title>\n<meta name=\"description\" content=\"Fiori apps or Fiori lighthouse apps: There are several options to develop our own Fiori app. Learn more in the upcoming blogs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.js-soft.com\/en\/fiori-introduction\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fiori Introduction - j&s-soft\" \/>\n<meta property=\"og:description\" content=\"Fiori apps or Fiori lighthouse apps: There are several options to develop our own Fiori app. Learn more in the upcoming blogs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.js-soft.com\/fiori-introduction\/\" \/>\n<meta property=\"og:site_name\" content=\"j&s-soft\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-02T08:42:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-25T10:44:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.js-soft.com\/wp-content\/uploads\/2023\/03\/Fiori-Introduction.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1860\" \/>\n\t<meta property=\"og:image:height\" content=\"1084\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thorsten M\u00fcller\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thorsten M\u00fcller\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fiori Introduction - j&s-soft","description":"Fiori apps or Fiori lighthouse apps: There are several options to develop our own Fiori app. Learn more in the upcoming blogs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.js-soft.com\/en\/fiori-introduction\/","og_locale":"en_US","og_type":"article","og_title":"Fiori Introduction - j&s-soft","og_description":"Fiori apps or Fiori lighthouse apps: There are several options to develop our own Fiori app. Learn more in the upcoming blogs.","og_url":"https:\/\/www.js-soft.com\/fiori-introduction\/","og_site_name":"j&s-soft","article_published_time":"2022-06-02T08:42:25+00:00","article_modified_time":"2025-11-25T10:44:18+00:00","og_image":[{"width":1860,"height":1084,"url":"https:\/\/www.js-soft.com\/wp-content\/uploads\/2023\/03\/Fiori-Introduction.png","type":"image\/png"}],"author":"Thorsten M\u00fcller","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Thorsten M\u00fcller","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.js-soft.com\/fiori-introduction\/#article","isPartOf":{"@id":"https:\/\/www.js-soft.com\/en\/fiori-introduction\/"},"author":{"name":"Thorsten M\u00fcller","@id":"https:\/\/www.js-soft.com\/en\/#\/schema\/person\/df2ce7ed8b79e66d730f6aa7c28d10a4"},"headline":"Fiori Introduction","datePublished":"2022-06-02T08:42:25+00:00","dateModified":"2025-11-25T10:44:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.js-soft.com\/en\/fiori-introduction\/"},"wordCount":583,"commentCount":0,"publisher":{"@id":"https:\/\/www.js-soft.com\/en\/#organization"},"image":{"@id":"https:\/\/www.js-soft.com\/fiori-introduction\/#primaryimage"},"thumbnailUrl":"https:\/\/www.js-soft.com\/wp-content\/uploads\/2023\/03\/Fiori-Introduction.png","articleSection":["Fiori"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.js-soft.com\/fiori-introduction\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.js-soft.com\/en\/fiori-introduction\/","url":"https:\/\/www.js-soft.com\/fiori-introduction\/","name":"Fiori Introduction - j&s-soft","isPartOf":{"@id":"https:\/\/www.js-soft.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.js-soft.com\/fiori-introduction\/#primaryimage"},"image":{"@id":"https:\/\/www.js-soft.com\/fiori-introduction\/#primaryimage"},"thumbnailUrl":"https:\/\/www.js-soft.com\/wp-content\/uploads\/2023\/03\/Fiori-Introduction.png","datePublished":"2022-06-02T08:42:25+00:00","dateModified":"2025-11-25T10:44:18+00:00","description":"Fiori apps or Fiori lighthouse apps: There are several options to develop our own Fiori app. Learn more in the upcoming blogs.","breadcrumb":{"@id":"https:\/\/www.js-soft.com\/fiori-introduction\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.js-soft.com\/fiori-introduction\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.js-soft.com\/fiori-introduction\/#primaryimage","url":"https:\/\/www.js-soft.com\/wp-content\/uploads\/2023\/03\/Fiori-Introduction.png","contentUrl":"https:\/\/www.js-soft.com\/wp-content\/uploads\/2023\/03\/Fiori-Introduction.png","width":1860,"height":1084,"caption":"Fiori first steps"},{"@type":"BreadcrumbList","@id":"https:\/\/www.js-soft.com\/fiori-introduction\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/www.js-soft.com\/en\/"},{"@type":"ListItem","position":2,"name":"Fiori Introduction"}]},{"@type":"WebSite","@id":"https:\/\/www.js-soft.com\/en\/#website","url":"https:\/\/www.js-soft.com\/en\/","name":"j&s-soft","description":"IT-Unternehmensberatung f\u00fcr SAP","publisher":{"@id":"https:\/\/www.js-soft.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.js-soft.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.js-soft.com\/en\/#organization","name":"j&s-soft","url":"https:\/\/www.js-soft.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.js-soft.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.js-soft.com\/wp-content\/uploads\/2022\/03\/Logo-js-soft.png","contentUrl":"https:\/\/www.js-soft.com\/wp-content\/uploads\/2022\/03\/Logo-js-soft.png","width":2560,"height":544,"caption":"j&s-soft"},"image":{"@id":"https:\/\/www.js-soft.com\/en\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.js-soft.com\/en\/#\/schema\/person\/df2ce7ed8b79e66d730f6aa7c28d10a4","name":"Thorsten M\u00fcller","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.js-soft.com\/wp-includes\/images\/blank.gif","url":"https:\/\/www.js-soft.com\/wp-includes\/images\/blank.gif","contentUrl":"https:\/\/www.js-soft.com\/wp-includes\/images\/blank.gif","caption":"Thorsten M\u00fcller"},"description":"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."}]}},"_links":{"self":[{"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/posts\/1937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/comments?post=1937"}],"version-history":[{"count":5,"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/posts\/1937\/revisions"}],"predecessor-version":[{"id":14693,"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/posts\/1937\/revisions\/14693"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/media\/14005"}],"wp:attachment":[{"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/media?parent=1937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/categories?post=1937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.js-soft.com\/en\/wp-json\/wp\/v2\/tags?post=1937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}