Open SAP course address
Many SAP practitioners say that the videos on Open SAP cannot be accessed due to network reasons, so I will continue to post these videos with Chinese subtitles on my personal wechat account “Wang Zixi”, please pay attention.
This is a video of unit 1 of SAP Fiori Elements with Chinese subtitles and a brief introduction.
Hello, everyone Welcome to the first week of the Open SAP learning unit, developing and extending the SAP Fiori Elements application
I’m Stephanie Hager, product Manager at SAP Fiori Elements
And Peter Spielvogel, another product manager at SAP Fiori Elements
In this unit, we will introduce SAP Fiori Elements
In the next four weeks, you will learn how to create an SAP Fiori Elements application and how to extend it
In week 1, we will cover some basic architecture, explaining how OData services work in the SAP Fiori Elements architecture
In the second and third weeks, we will create several different types of SAP Fiori Elements applications and familiarize ourselves with the various tools
The goal here is to introduce you to most of the technologies you will encounter during your SAP Fiori Elements development project
The fourth week focuses on the Extensibility of Fiori Elements applications
This is a development course, obviously for developers
But for any SAP practitioner in any other role who is interested, this course can also help you learn how easy it is to build SAP Fiori Elements applications
So we will build several different types of Fiori Elements applications together
This course provides some optional exercises to encourage you to do along with us
These exercises also include some additional material. Because we can’t cover everything that we want to show in class
This course will develop an application for Jay, a travel counter employee, to manage travel and booking information
The employee can use Travel Overview to understand the most important business data
Within the app, he can navigate to a list of trips for further details, as well as use booking analytics
We will also create an additional application outside of the travel scenario to manage food and drinks taken out
Here we will use an external OData service that is not provided by SAP
Here is a simple demo to show you how the application works after completion
And we’re going to do that together in this course
This is all of Jay’s Travel data
Here is a summary of Jay’s most important business data in cards, including some analysis information
Here is a list of the most important ones with quick links. With this list card, you can see at a glance which trips need special attention
These are upcoming trips that have not yet been approved
Click on the header of the list
Navigate to the Travel List. This list is drawn based on our List Report
We offer a lot of functionality out of the box
Examples are Variant Management, Generic Search, and Table Personalization
The filter fields in the table columns are provided by the application developer via metadata
You can also navigate to the trip details page. Again, this is a standard feature of Fiori Elements
This type of Page is Object Page and provides many out-of-the-box functions, such as editing, including Draft Management.
The map you see is part of the GeoMap control
This is a feature we do not support in the SAP Fiori Elements standard. So in this course we will also learn how to enhance Fiori Elements applications to develop features that are not on their out-of-the-box feature list
I mentioned earlier that Jay can also analyze booking information through the booking analysis application
This is based on the plan type analysis list page, providing additional analysis capabilities for slicing and slicing data
In particular, these interactive charts here, and visual filters
So much for the simple demonstration. Now Peter will explain the technology behind user experience consistency
And why is user experience consistency important
Thank you, Stephanie. Your demonstration demonstrated the value of SAP Fiori Elements in providing a consistent experience across all applications
UX(user experience) consistency is important for SAP
This is what we hear in user group meetings with customers and partners, SAP meetings and emails sent to us
For this reason, user experience consistency is a board-level priority. As we saw in this quote by Thomas Saueressig
This is a link from a blog he posted
Our development efforts are focused on delivering a consistent user experience, and SAP Fiori Elements plays an important role in this regard
This is one of our main tools for developing applications for SAP S/4HANA
With SAP Fiori Elements, you build an application that looks and feels exactly like the S/4HANA applications SAP publishes
Why is a consistent user experience so important
One of the challenges of enterprise software development is to hold all developers to the same user experience standards
User experience consistency includes fonts and colors, the layout of information on the screen, and all modes of interaction
Good UX brings measurable benefits
Consistency is at the heart of a good user experience
A great APPLICATION UX means that people love your application. What’s more frustrating than writing an app that no one uses
Knowing how to find information on your screen and navigate through an app can make users more confident and productive when using the app
Consistency promotes a quick learning curve for the user because the user already knows where to click and how the menu works
Simple and consistent screens also mean that people make fewer mistakes. So the data in the system is cleaner
All of these measurable benefits add up to mean that users are more likely to use the app you’ve created
Using Fiori Elements allows you to reap all of these benefits while controlling development and maintenance costs
Is that why THERE is so much internal reliance on Fiori Elements within SAP
SAP Fiori Elements adopts SAP UI5 technology
This is a modern Web development framework that can be implemented with a set of code to create a series of applications that can be used across platforms
There are several key advantages to using SAP UI5 for your Web applications. It provides you with the latest SAP Fiori experience
And with the development of design systems
It will continue to provide built-in support for SAP enterprise product standards, such as Security, Integration, and Accessibility
Because SAP UI5 is a Web-based technology, it runs on all platforms, browsers and devices
So you can write once and have both desktop and mobile applications
Fiori Elements also enables you to use the flexibility of SAP UI5 to extend SAP standard applications and customize the UI without any coding
We’ll talk more about the benefits of SAP UI5 in the next unit on Fiori Elements architecture
In the last week of the course, we will focus on extending standard applications with SAP UI5
So far, you’ve seen some examples of SAP Fiori Elements in the demo, along with some knowledge of SAP UI5
So what exactly is SAP Fiori Elements?
SAP Fiori Elements is a UI library that provides multiple standard Floor plans. SAP Fiori Elements uses metadata so you can create Fiori applications with minimal coding
Metadata determines the look and behavior of an application. This metadata-driven approach to development has several key benefits
You start your development work with enterprise-class application-quality code designed to execute in a variety of common layouts
This low-code approach improves your development efficiency because you focus only on the business logic
You don’t need to write any code for the user interface
The floor plan already includes the Fiori design, so everything looks consistent across all the applications you write. Because SAP provides the UI, we maintain it as well
As the Fiori design evolves, your Fiori Elements application can inherit these updates. Now Stefanie will introduce the different floor plans
By providing standard floor plans, developers are significantly more productive
Most scenarios in an enterprise involve providing an overview of business-relevant data and some variation around that overview data
And provide management functions for this data. The five floor plans shown on the screen are designed by SAP Fiori Elements to cover the vast majority of business use cases
The Overview page provides an Overview of the data for certain business areas
The Overview page is the starting point for a business process, such as navigating from the Overview page to the travel list interface
The travel List interface is based on another type of floor plan from SAP Fiori Elements: List Report
List Reports are designed to filter and sort large amounts of project data
List Report allows the user to navigate to an Object Page, the Object Page, to provide specific insight into further details
Analytical List pages have additional analysis capabilities, such as the charts and visual filters we saw earlier in the subscription analysis application
The fifth Floor Plan is the Worklist Page, optimized for working with task lists. We don’t have time to introduce this plan in this course
Applications built using SAP Fiori Elements automatically become “Enterprise Ready” applications.
Our framework provides high-quality, stable, optimized UI code right out of the box
This means you don’t have to write, test, or maintain a lot of complex UI code
As you’ve heard before, SAP UI5 Freestyle also provides the ability to write enterprise-ready applications
How can SAP Fiori Elements and SAP UI5 Freestyle be used? Peter can you tell us a little bit about their technology selection?
Of course,
Obviously, both are good options for developing SAP Fiori applications
What works best for you depends on your situation and the business requirements you need to meet
In short, if you choose SAP Fiori Elements, you have decided to sacrifice some flexibility for efficiency
If your business needs are largely covered by the Fiori Elements five Floor plans described earlier, you can build your application efficiently with Fiori Elements
Because in this case, you only need to focus on defining annotations, and the applied UI interface and control logic are already provided by the SAP framework code
This simplified process reduces development and maintenance time and costs
If the scene you need to implement is not covered by these plans, then extending these plans can take a lot of time
SAP UI5 Freestyle is a better choice
With SAP UI5 Freestyle, you take full responsibility for UI development, giving your design complete flexibility
Obviously, this leads to higher development and maintenance costs
This course introduces you to the knowledge necessary to develop SAP Fiori Elements
SAP UI5 Freestyle development is another Open SAP course introduced separately
In the last week of this course, we will use SAP UI5 Flexibility to extend an SAP standard application
We hope you will be happy to join us on the development journey of SAP Fiori Elements
Finally, a summary. In this unit, we discussed why a consistent user experience benefits your business
And why the combination of SAP UI5 and Fiori Elements can improve application development efficiency
And the importance of user experience consistency in building large-scale enterprise applications
Finally, we discussed where Fiori Elements can be used and how it complements SAP UI5 Freestyle
In the next unit we will discuss the architectural topic of SAP Fiori Elements and how all the different underlying technologies work together. Thanks for watching and I’ll see you next time.
