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
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
* 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
- Introducing Fiori elements
- Introducing Overview pages
- Introducing List Report and Object pages
- Introducing Analytical List Report pages
- Understanding Odata and annotations
- Turning OData into Applications
- Creating Overview pages
- Creating List Report and Object pages
- Creating Analytical List Report pages
- Introducing Worklist pages
- 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
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:
- Angular
- React
- 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
If would like compare 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!
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.
Hello Showkath,
While creating of DEV SPACE, I am not getting SAP FIORI Element option.
Any Idea or possible solution?
Regards,
Sri
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.
Excellent work. Thanks for your time and effort.
Very nice post. Thanks.