- SAP Managed Tags:
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 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/)
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
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
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.
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
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
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
Details
It can be used in any (also future) framework because what they all do in the end is: working with HTML
working example UI controls with UI Web Components
https://github.com/vobu/ui5-webcomponents- showcase
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/
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
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 :
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!
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
https://opensource.sap.com
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!
9 Comments
