Skip to Content
Technical Articles

SAPUI5 vs SAP Fiori Elements (FE)

This blog post written based on new SAP cutting edge technologies, framework, tools to implement Fiori Apps & deliver software quality  out-of-box .I personally reached out to SAP Software experts (Engineering, UX Team) to gather their unique prospective on this subject .I’ve also crawled the most popular SAP Blogs for this topic .So rest assured that you are getting only fresh and up-to date content here. Stay tuned @ SAP

SAP Fiori

SAP Fiori is the design principles, practices and the design style guide.

SAP Fiori (new version Fiori 3) apps can be implemented either by using SAPUI5 or SAP Fiori elements.

Fiori uses SAPUI5 for frontend and it uses OData to get back end data. One code line for all screen sizes like Browser, Mobile .. i.e It will run on any device (Mobile ,Tablet , Desktop)

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

Official delivered Fiori apps can be found in the Fiori Apps Library Fiori Apps Library

SAP Fiori3 is SAP’s new target design system, which evolves the SAP Fiori design for all SAP products to fully support the Intelligent Suite, running on any device.

https://experience.sap.com/news/sap-fiori-3-first-parts-available-for-sapui5-developers/

https://blogs.sap.com/2019/09/30/fiori-3-available-for-developers/

What is SAP User Experience! & SAP’s user experience strategy

https://experience.sap.com/ux-strategy/

UX/UI is essential for promoting a high level of quality and consistency across all pages of web application .UX may require more creativity than UI ,at the end of the day, the design of a website has to be user centric and add value to end user .
In the world of design thinking, design is a three-phase process of “discover, design and deliver.” Other companies use different words and different steps, but in general it is always the same.
In order to complete all three phases of the “Design Thinking” process, organizations require a new set of skills and mindset, including facilitation, coaching, brainstorming and idea generation (Design Thinking).
Design Thinking in 500 Words or less refer https://experience.sap.com/basics/post-101/
https://blogs.sap.com/2015/02/01/the-right-people-a-key-to-innovation/It combines empathy, creativity and rationality to meet user needs and drive business success

Learn more about how SAP can help augment your team’s staffing and how to build the right skills in your organization.
AppHaus : https://experience.sap.com/designservices/

UX and UI depend on each other. UX should focus on the end user

UI vs. UX  differences

 

SAP Fiori UX represents a personalized, responsive and simple user experience across devices and deployment options.” (https://experience.sap.com/fiori/)

SAPUI5

UI5 is a technology whereas Fiori is a methodology. UI5 offers framework, development tool kit for html 5 , contains lot of predefined JavaScript libraries based on MVC pattern. By using this framework developer can easily build web application. … UI5 uses web technologies like HTML, CSS and JavaScript.

Margot Wollny    wrote a nice blog post about

The evolution for UI5 hasn’t stopped yet & what UI5 had set out to do for 2020

SAP Fiori elements

From my personal experience ,SAP Fiori elements works for around 80% of SAP use cases, this is because SAP Fiori elements handles UI development, connect to OData Service. SAP Fiori elements provide a framework for the most common application patterns based on SAPUI5. As a developer, all you need to do is write require CDS annotations.

SAP Fiori elements ensure design consistency and auto compliance (no extra development effort) with the latest design guidelines, while reducing the amount of frontend code needed to build SAP Fiori apps. SAP Fiori elements have proven savings in front-end development of up to 80% more than before.

The application team selects the relevant floorplan then framework generates the application screens.  SAP Fiori elements (formerly known as smart templates) provide a framework for the most common application patterns & reduction in development effort.

As I said Fiori Apps can be implemented either using SAPUI5 code or Fiori Elements.

Fiori Elements + CAP(Cloud Application Programming )  is advanced programming model ( Free style app development )

You can read my other blog to know advantages of CAP

SAP Fiori elements relies on SAPUI5. They are the same development technology; one focuses on flexibility and the other on efficiency.SAP expect most customers to use a mix of the two SAPUI5-based approaches, depending the specific needs of the app and business needs. 

Below table illustrates the implementing Fiori apps using SAPUI5 code  vs FE

 

SAPUI5 Programming (Code) SAP Fiori Elements (FE)

Flexible programming model

Application developers has to write lot of UI5 Code so project development & maintenance cost will be higher.

SAPUI5 code will be auto generated based on CDS View annotations & metdata using FE Framework

No need to write SAPUI5 Code , No JavaScript coding.

 SAPUI5 application code. Metadata-driven

Write custom code (UI5,HTML,JQuery.. etc) to build Controls,

Models , jQuery/Ajax code to Invoke REST API’s, OData Services

 

Declarative programming

Automate many tedious tasks

Minimizes boilerplate code

Generate UI, Service invocation automatically

Provides Out of box features

Require you to consider both the SAPUI5 technical guidelines and the SAP Fiori design guidelines to deliver the application.

Possible deviation from Fiori guidelines

Provide flexibility for customization but lose Fiori advantages.

SAP Fiori elements fulfill all of  UX , Fiori guidelines out of box .

with this FE cannot break SAP Fiori standards , UX Guidelines

If standard UX /Fiori team changes design & upgrade Fiori  new guidelines then FE team leverage framework.

Need to write additional code toolbar or change behavior  in a responsive table

By default, Responsiveness & Adaptiveness  (Run Multiple devices)

As FE strictly follow Fiori3 Guidelines

 

Rework to migrate to new version

Default Forward compatibility ( Fiori new version guidelines)

No additional effort required

Code Effort will be more & Development Cost also Reduce coding time & development effort drastically
When code is huge maintenance cost also will be more Very minimal maintenance cost
Possible code refactor & revamp cod for better performance optimizations Best possible performance from the very beginning.
Custom code + more development effort

Support UI Adaptation, Floor Plans, List Report & Object Page

 

 

Customization Possible

 

 

Customization (Work in progress)

Example: Dynamic list of option depending of another dynamic field

 

  1. We can navigate to Fiori3 elements APP  to SAPUI5 custom app
  2. Implement Custom Pages
  3. In Object Page : Custom sections are supported

* Double check the detailed documentation

Open to implement any fancy feature request Complex logic not always possible with Fiori elements as of now
Opensource/Third party library integration possible Not supported as of now

Support’s ODataV2 & OData V4

 

*Use ODataV4 Model has improved performance over ODataV2 Model

But please visit ODataV4 Model documentation and ensure that all required features are available

Support’s ODataV2 & OData V4

 

Use ODataV4 Model has improved performance over ODataV2 Model

 

Note:  Any(!) SAPUI5 usage has out-of-the-box capabilities of SAPUI5 like accessibility, responsiveness, adaptiveness, Fiori Design and much more. Now the choice is based on your business/end user requirements. Please be aware that before choosing SAP Fiori Elements or Free style SAPUI5  or UI-web components or any technology check that all required features are in place before developing application as per end user requirement. Double check the detailed documentation of the features as certain part of feature may be missing or any deviation.

 

More details

SAP Fiori Elements  

The SAP Fiori elements framework supports the dynamic page layout for all available floorplans. In addition, the flexible column layout is supported for all available floorplans except the overview page, which is not allowed within the flexible column layout.

One of the big benefits of SAP Fiori elements is the reduction in development effort. This is especially important for features like draft handling or the flexible column layout.

SAP Fiori elements use the global edit flow, which includes draft handling, or the local edit flow without draft handling. SAP Fiori elements also offer message handling.

If you need these features in your app, you should go with SAP Fiori elements.

SAP Fiori Elements  Supported Floorplans and Layouts The following floorplans are available as SAP Fiori elements:

For an overview of all available floorplans and layouts, see Overview – Layouts, Floorplans, and Frameworks.

For more information on when to use SAP Fiori elements, see the usage guide.

If you want to learn more about SAP Fiori elements please go to www.sapfiorielements.com.

Watch the first episode: Getting Started with SAP Fiori elements: Introduction

Read : Introduction to SAP Fiori Elements

 

SAP Fiori Design Guideline : https://experience.sap.com/fiori-design-web/

Slack Channel : SAP Fiori Elements

SAP Fiori tools : https://github.wdf.sap.corp/ux-engineering/tools-suite

SAP Fiori  Elements Community : https://community.sap.com/topics/fiori-elements

SAPUI5 technical guidelines for SAP Fiori elements, Developing Apps with SAP Fiori Elements :  https://sapui5.hana.ondemand.com/sdk/#/topic/03265b0408e2432c9571d6b3feb6b1fd

 

Few Videos

  1. Introducing Fiori elements
  2. Introducing Overview pages
  3. Introducing List Report and Object pages
  4. Introducing Analytical List Report pages
  5. Understanding Odata and annotations
  6. Turning OData into Applications
  7. Creating Overview pages
  8. Creating List Report and Object pages
  9. Creating Analytical List Report pages
  10. Introducing Worklist pages
  11. Creating Worklist pages

SAP Business Application Studio

The SAP Fiori tools extensions can be used locally in Microsoft Visual Studio Code (VSCode) or SAP Business Application Studio (AppStudio).

“SAP Business Application Studio (AppStudio) is a powerful and new development environment i.e next generation of SAP Web IDE available as a cloud service on SAP’s Multi-Cloud environment (Cloud Foundry) and provides desktop-like experience similar to leading IDEs VSCode,.. etc with command line, integrated debugging and optimized code editors. At the heart of AppStudio are the Dev Spaces, which are like isolated virtual machines in the cloud containing tailored tools and pre-installed runtimes per business scenario, such as: SAP Fiori, SAP S/4 HANA extensions ,Java Code Editor ,build and deploy the application as multitarget applications (MTA).and more.In SAP Business Application Studio, the developer is provided with one or more Development Spaces. As a developer, you can chose which tools will be installed on your dev space by selecting the suitable extension pack…

Refer this blog post for more details  https://blogs.sap.com/2020/02/27/sap-business-application-studio-is-generally-available/

Setup  : https://developers.sap.com/tutorials/appstudio-onboarding.html

References : https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-overview-ui5con-2019/

Basic Steps: Please follow wizard & setup your development environment & Fiori App creation

 

Click on Create Dev Space ,then Choose Dev Space plugin/extension support for your project .

Please note that Fiori Elements Template in SBAS is not available yet to customers .It is coming soon

 

Select View Menu –> Find Command –> Type SAP

Disclaimer :This is the current state of planning and may be changed by SAP and customers can get new features .As the product evolves*, additional SAP scenarios and technologies ,extensions  will be added in AppStudio

 

Though this blog post main motivation is SAP Fiori Elements FE

I also would like to share other options available ,if you are not fan of metadata-driven development (i.e SAP Fiori Elements) and comfortable with HTML tags and frame works like Angular,React,Vue then read more about UI5 ​​Web Components which helps you in create enterprise-grade Web applications more easily

UI5 ​​Web Components 

In short  : “Open Source , reusable UI controls just like regular HTML tags  ,which follow SAP Fiori Design Guidelines and incorporate the Fiori 3 design  work with any web framework

 

Motivation behind implementing UI Web Components

  • UI5 controls are proprietary and as of today are tightly coupled to the UI5 framework. Other frameworks are not able to use them without pulling the UI5 framework.
  • At the beginning of 2019, SAP released the UI5 ​​Web Components.They are part of the “UI5 Evolution” project ,Open source is a key part of SAP’s technology strategy and make it possible to work with any web framework.
  • News : https://news.sap.com/2019/07/iu5-web-components-open-source-engagement-contribution/

Details 

  • The UI5 Web Components library enables developers to create enterprise-grade Web applications more easily
  • UI5 Web Components are built by SAP’s UI5 org
  • The new UI5 Web Components from SAP allow developers to take advantage of the features offered by OpenUI5
  • Fully functional UI controls, usable just like regular HTML tags
  • So they work with any web framework that uses HTML tags.    For instance UI5 Web Components can be consumed and used by these three frameworks:
  1.  Angular
  2.  React
  3.  Vue

It can be used in any (also future) framework because what they all do in the end is: working with HTML

  • The components are not however built on top of UI5, but are standalone elements i.e UI5 Web Components are built independent of the UI5 framework.
  • UI5 Web Components and UI5 controls are two different concepts.
  • However you can also use UI5 Web Components in UI5 app (standard UI5 controls)

working example UI controls with UI Web Components

https://github.com/vobu/ui5-webcomponents- showcase

 

  • They implemented in accordance with the SAP Fiori Design Guidelines and incorporate the SAP Fiori design i.e Out of box provides SAP Fiori design user interfaces ,reusable UI controls which consumed in any technology of your choice (Angular,React,Vue)

 

To learn more about UI5 Web Components

 

Home Page https://sap.github.io/ui5-webcomponents/

Playground / Documentation :

https://sap.github.io/ui5-webcomponents/playground/

You can try samples in any of your favorite editor . For instance SAP WebIDE , code sandbox 

GitHub Projects

https://github.com/SAP/ui5-webcomponents

https://github.com/StErMi/ui5con-app-vue          

The sample applications to show-case the usage with React, Angular and Vue are online on

https://sap.github.io/ui5-webcomponents/ -> Try out the demo apps

 

A nice blogs about UI5 with UI5 Web Components

https://blogs.sap.com/2020/03/10/ui5-framework-and-ui5-web-components/

https://blogs.sap.com/2020/03/06/ui5-with-ui5-web-components/

  • Contributing to UI5 Web Components  : You are welcome to contribute code to the UI5 Web Components in order to fix bugs or to implement new features.

https://github.com/SAP/ui5-webcomponents/blob/master/CONTRIBUTING.md

 

Report issue : https://github.com/SAP/ui5-webcomponents/issues

To learn more about SAP’s open source projects, visit

https://opensource.sap.com

 

If would like compare Side by Side: SAPUI5 vs. React & Angular2

Source  : https://blogs.sap.com/2017/03/04/side-by-side-sapui5-vs.-react-angular2/

 

Thank you SAP . CAP + Fiori Elements has boost me as a full-stack engineer .With the help of Fiori Elements + CAP , I am able to build modern web apps  a fully out of box CRUD + Query enabled OData API that serves a Fiori Elements UI in a really short time! i.e save time and development costs and I can also profit from enterprise ready features such as authentication and internationalization…

Developing Apps with SAP Fiori Elements

Stay curious :

Fiori elements floor plans with OData V4 and CAPM – Coming soon

https://blogs.sap.com/2020/03/17/fiori-elements-floorplans-for-odata-v4-coming-soon/

 

If there’s anything else (please let me know) I’ll add it to this blog post as and when it appears or occurs to me.

 

Stay tuned @ SAP :

Visit the SAP News Center. Follow SAP on Twitter at @sapnews.

 

Happy Coding!

/
9 Comments
You must be Logged on to comment or reply to a post.
  • Hello Showkath,

    Very good post, thank you for that. I have a litte bit of experience with FE and your note “Now the choice is based on your business/end user requirements.” should be placed at the very beginning, since comparing possibilities in FE vs Customer Requirements you can create an application which will be hybrid of FE + JS + changes made through the Extension Panel, which can be really hard to support. Nevertheless, FE is a future (or even present) in cases like reports.

     

    Best Regards,

    Hubert

     

  • SAP should come out clean on it’s fiori elements strategy or keep it clean separate ui and backend logic but please stop confusing people in the name of innovation and stop selling crap.

    Annotations in CDS are a architecture nightmare, it’s horrible and I can’t think it’s innovation at any level

    Why can’t SAP enhance web dynpro or other technologies that can help quick ui coding like the xcode in swift. More over one size fits all is a recipe for disaster. SAP fiori is a failure and SAP is trying to force it down customers.

     

    Fiori and every one wants a browser app is a joker’s dream that SAP management thinks is true.

    • Hello Prasenjit Singh Bist,

      thanks for your comment.

      I fully agree SAP should provide a clear way forward wrt. SAP Fiori elements as it is the strategic technology to scale SAP Fiori user experience.  SAP Fiori elements proved to be efficient when implementing apps according to the SAP Fiori guidelines. We separate frontend from backend (semantic information) to enable an efficient adoption across SAP’s solutions.
      Right, one size fits all usually is the wrong approach, especially when looking at technologies. With user experience though we think it is important to provide a consistent and modern experience across all solutions involved in a business process. To implement this experience, different technologies are appropriate on different stacks.

      I understand this is a topic which is sometime frusttrating. I go through this myself regularly. I suggest to check the official SAP documentation on these topics to have consistent up-to-date information. And we try to help as good as possible.

      I also suggest we stick to an appropiate jargon. Thanks a lot 😊

      Best regards,
      Oliver

      • Hello Oliver,

         

        Thanks for your points but Fiori elements based on annotations is an architectural nightmare and not a clean seperation of concerns. The classical dynpro has a lot of merits that no other solution including your competitors offer and trust me I am not an ABAP dinosaur.

        First the experience on mobile is app driven not browser driven, do you honestly believe the fiori elements solutions are really elegant who wants a solution for 80%and another for the break out cases of 20%,give us one solution either keep it clean like in java enterprise world but don’t make a curry pushing everything via cds is itself a ridiculous proposition.

        Your own ex CTO told us to keep the core clean, another ex CTO talked about timeless software and look where you are leading us.

        Why can we have simple backend logic expose it using the plain and simple SEGW and then bind it with UI5. The new RAP model of BO is so elegant but the fiori elements concept kills it.

        Thanks,

        Prasenjit

      • One interesting point- There was a big technology company called Nokia and in 2010 when we had the symbian 3 the leaders said the same not one size fits all and see the rest is history. When it comes to software architecture it has to be uniform and adaptable that can evolve over time, if you let people play with it, you will become symbian and a decade ago it didn’t matter for you, now it matters when ERP market has so many wonderful and elegant offerings to replace SAP.

  • /
    • Hi Srinivasa Mukka ,

       

      Thanks for reading this blog & for your comment .

      Please note that Fiori Elements Template in SBAS is not available yet to customers .It is coming  soon . I will keep updating this blog .

       

      Best Regards,

      Showkath.