Wayfinder What is Fiori Fiori Concept Fiori Theme Belize Fiori - - PowerPoint PPT Presentation
Wayfinder What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
A discourse about the new user experience of SAP
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 4
SAP Fiori is a software that provides the porting of applications on mobile devices announced on 15 May
called NetWeaver. It enables applications to be used on desktop computers, tablets and smartphones. SAP Fiori supports HTML5. SAP Fiori is available for iOS, Android and Windows mobile platforms.
04.06.2017 Rob van Linda 5
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 7
SAP Fiori is the design language that brings great user experiences to enterprise applications. Based on user roles and business processes, SAP Fiori simplifies doing business.
04.06.2017 Rob van Linda 8
The Fiori Launchpad offers multiple options to the user to customize the interface according to the needs and the preferences. The Launchpad depends on the role and the tasks of a specific user.
04.06.2017 Rob van Linda 9
At the left is the panel with personal information, the last performed tasks and some options like „App Finder“, „Settings“, „Help“ and „Edit“. On the right hand side there‘s the notification area. Here important informations are provided in real time. It is also possible to interact directly (messages and notifications) with other team members and collegues.
04.06.2017 Rob van Linda 10
Me Area Workspace Notification Area
04.06.2017 Rob van Linda 11
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 13
04.06.2017 Rob van Linda 14
conveys the content with clarity
typography for a richer SAP Fiori user experience Light flavor available today Dark flavor Belize Deep planned The successor to Blue Crystal
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 16
04.06.2017 Rob van Linda 17
Web/SAP Fiori Client Web via SAP FIORI Client/ Custom SAP Fiori client/ Packaged app
Developer On premise SAP mobile platform (optional) SAP Fiori Front-end server Fiori Apps Odata Services SAP Web DIE (HCP)
Fiori User Interfaces
Build Packages Services
ABAP in Eclipse … S4/HANA Backend Services
SAP Business Suite (ERP, SRM, …
04.06.2017 Rob van Linda 18
Use SAP Gateway to:
developer productivity.
consumers.
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 20
04.06.2017 Rob van Linda 21
In the early days of the FIORI Launchpad and SAPUI5 apps, the possibilities were restricted. The first 25 Apps for managers and employees only had request and approval functions. Since the HANA database was introduced, the number of apps and their functions have grown rapidly. There are thousands of apps for each possible use case. Thanks to the speed of the HANA database, due to its In- Memory, it is possible to get complex data in no time. Even on mobile devices.
04.06.2017 Rob van Linda 22
The FIORI Launchpad and SAPUI5 Apps have experienced many changes in a short time.
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 24
04.06.2017 Rob van Linda 25
T Transactional Task-based Access
Access to tasks like change, create or entire processes with guided navigation
I Analytical Insights
Visual overview of a dedicated topic for further KPI related analyses
F Fact Sheets Search and Explore
View essential information about
between related objects
SAP HANA SAP HANA ANY DB
04.06.2017 Rob van Linda 26
T Transactional Task-based Access
Access to tasks like change, create or entire processes with guided navigation
The most important features of Transactional Apps are − The first release of SAP Fiori included 25 transactional apps.
transactional tasks like a manager-employee transactions such as leave request, travel requests, etc.
be deployed with any database with acceptable
transactions on the mobile devices as well as desktop or laptops. Example − Leave Request, Travel Request, Purchase Order
04.06.2017 Rob van Linda 27
Analytical apps are used to provide role-based real time information about the business operations. Analytical apps integrate the power of SAP HANA with SAP business suite. It provides real time information from large volume of data in front-end web browser. Using Analytical apps, you can closely monitor Key Performance indicators KPIs. You can perform complex aggregations and calculations of your business operations and react immediately as per the changes in the market condition. SAP Fiori Analytical apps run on SAP HANA database and use Virtual data models. There are two types of Analytical Apps −
I Analytical Insights
Visual overview of a dedicated topic for further KPI related analyses
04.06.2017 Rob van Linda 28
contextual information in business operations. In SAP Fiori tiles, you can drill down to further details.
fact sheets.
apps to run SAP transactions. A few Fact sheets also provide an integration option of geographical maps.
from other fact sheets or from Transactional or Analytical apps.
an ABAP stack and they cannot be ported to SAP HANA Live tier-2 architecture.
F Fact Sheets Search and Explore
View essential information about
between related objects
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 30
04.06.2017 Rob van Linda 31
In this section one feature of the Fiori Apps is
approaching all features would go beyond the scope
For this section I have chosen the new Overview Pages, because I like them quite a lot because of their intelligence and smart look ;)
04.06.2017 Rob van Linda 32
These overview pages are a new feature in SAP Fiori, but it is not really something new. It comes from a design language which is developed by Google and which is called “Material Design”. The goal was to make websites (which are called web apps nowadays) which are simple,intuitive and minimalistic. After all those years of three dimensional buttons and animated graphics, people were looking for sites which provided information instead of pages
04.06.2017 Rob van Linda 33
SAP Fiori Overview Page (OVP) provides a new interaction within SAP FIORI UX. The OVP can be seen as a step between the basic information on the SAP Fiori Launchpad and the full blown information within the SAP Fiori applications. While simultaneously presenting the big picture in a glance, business users can focus on the most important tasks enabling faster decision making as well as immediate action.
04.06.2017 Rob van Linda 34
The SAP Fiori Overview Page plugin for SAP Web IDE enables developers to create their
is attached to the IDE Overview pages provide users with an interactive overview of a specific area, enabling them to interact with business data and perform key actions.
04.06.2017 Rob van Linda 35
from a range of applications.
task focus or information need.
single page for the tasks of a specific domain or role.
level view of content related to a specific domain or role.
Use cases
04.06.2017 Rob van Linda 36
As you can see in the picture at the right, the overall content scope (shown in green) becomes more focused with each interaction step. The Launchpad home page contains all of a user’s favorite apps and offers access to them via tiles. This covers all the roles that a user might have, such as employee, manager, production worker, or quality manager. An overview page focuses on the key tasks for a specific role, and contains only the most frequently- used apps for that role. The overview page uses cards, which display more (preview) information than tiles because of their size, properties, and interaction areas. One card type also allows users to perform simple actions. Cards represent an entry-level view of application content.
04.06.2017 Rob van Linda 37
The picture below illustrates the complete interaction flow: SAP Fiori launchpad home page ➝ SAP Fiori overview app ➝ SAP Fiori app or non-SAP Fiori app
Use cases
04.06.2017 Rob van Linda 38
Responsiveness & Adaptiveness
The overview page floorplan is fully responsive. The card layout can accommodate typical laptop screens as well as larger desktop monitors, and features responsive (collapsible) “columns” of cards that can scale all the way down to tablet or phone screen sizes.
04.06.2017 Rob van Linda 39
Responsiveness & Adaptiveness
The basic structure and appearance of the overview page is governed by the dynamic page layout. This enables you to use variant manager, text, and a smart filer bar in the upper part of the screen (snapping header). The content of the overview page is presented using cards. The card layout determines the size and position of the cards.
04.06.2017 Rob van Linda 40
Card Layout
The card layout contains responsive (collapsible) columns of cards. The card width is fixed, and the height is determined by the card type and the embedded control. When the user resizes the browser or uses a smaller screen, the columns containing the cards collapse. In this way, the layout can accommodate typical laptop screens, larger desktop monitors, and mobile devices:
Column Row Row
04.06.2017 Rob van Linda 41
Personalized Selection of Cards
Users can also hide cards. The corresponding setting is in the Me Area under Manage Cards. A popover appears on the overview page, and lists the different card names. Users can opt to show or hide the cards using a Switch Control. Reset reinstates the default setup. The personalized setup stays until the user next changes it.
04.06.2017 Rob van Linda 42
Cards
Cards are containers for app content, and represent an entry-level view of the most pertinent app data for a given topic or issue. Technically, a card is a smart component that uses UI annotations to render its content. Cards differ in the content they display: They can show a chart, a list, a table, informative text, or a combination of two elements. However, cards never have editable fields. Cards can vary in size, depending on the selected layout. They can focus on a single object or topic, or on a group of objects.
04.06.2017 Rob van Linda 43
Cards Components
Every card comprises three components: a header area, a content area, and a footer area. The header and content areas are mandatory. The footer area is optional (for example, it is not needed on stack cards or analytical cards).
Header Area Content Area Footer Area
04.06.2017 Rob van Linda 44
Navigation & Interaction
The navigation and interaction depends on the technical card type: Single-object cards, Object group cards, Special cards
Go to single item Different actions Go to single item Go to single item Go to single item Go to list with all items
Go to single target Go to single target Go to single target Go to single target Go to single target Go to single target
04.06.2017 Rob van Linda 45
Quick View Cards
Quick view cards are single-object cards. They display the basic details for one object, such as the name, address, and phone numbers for a contact.
04.06.2017 Rob van Linda 46
Card Types
Analytical cards are used for data visualization. They are single-object cards that consist of two areas: a header area that displays the aggregated value of a key measure (KPI), and a chart area that displays a representation of data in graphical format. Analytical cards do not contain a footer area.
List card Bar chart List card Link list card Table card
04.06.2017 Rob van Linda 47
Stack Card
A stack card is a special collection of single-object quick view cards, based on a topic or
Title Subtitle Count for stack content
04.06.2017 Rob van Linda 48
Card Types
The top-level stack card contains two clickable navigation areas:
the parent application, where the user can see all the objects returned for the annotated view (42 in the example above). The placeholder card and heading inside the object stream have the same navigation target.
which contains a scrollable collection of cards presented in an overlay format. The user can browse individual cards, with the
04.06.2017 Rob van Linda 49
Just to get a swift overview of how many apps are available for the different modules, I have added a table here. The complete Library and all the information needed, when working in Fiori, can be found here: https://fioriappslibrary.hana.ondeman d.com/sap/fix/externalViewer/
Asset Management 157 Commerce 27 Finance 503 Human Resources 72 Industry Specific 12 Manufacturing 160 Marketing 59 R&D/Engineering 142 Sales 130 Service 89 Sourcing and Procurement 267 Supply Chain 467 Substainability 47
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 51
04.06.2017 Rob van Linda 52
In Sap Fiori design and a delightful experience is a crucial facet. The goal of Fiori is to simplify and enhance the workflow. But also to offer the people, who work with Fiori, a pleasant, comfortable and simplified experience by offering inferfaces which can be used instinctively. The future will bring many improvements and additional features
04.06.2017 Rob van Linda 53
The UI theme designer is a browser-based tool that allows you to develop your themes by modifying
Example − You can change the color scheme, or add your company's logo. The tool provides a live preview of the theme while you are designing. Apply your corporate branding and look to applications built with SAP UI technologies. The UI theme designer is a browser-based tool for cross- theming scenarios. Use it to build your corporate identity themes easily by modifying one of the theme templates provided by SAP. The tool is targeted at different user groups, including developers, visual designers, and administrators.
04.06.2017 Rob van Linda 54
SAP Fiori elements (formerly known as smart templates) provide a framework for generating UIs at runtime based on metadata annotations and predefined templates for the most used application patterns. The goals are to ensure design consistency, keep apps up to date with evolving design guidelines, and reduce the amount of frontend code for building SAP Fiori apps. SAP Fiori elements use annotations that add semantics and structures to the data provided by the user. SAP Fiori elements are part of the SAPUI5 delivery.
04.06.2017 Rob van Linda 55
Design Values and Principles SAP Fiori sets the standard for enterprise user experience by removing unnecessary complexity. We put users in control of their business tasks by giving them only what they really need. This core goal is reflected in five design principles: role-based, adaptive, coherent, simple, and delightful. Design Language The SAP Fiori design language guides designers in their task of creating consistent and coherent products. It expresses the values and priorities of the design independent of technology or domain.
04.06.2017 Rob van Linda 56
SAPUI5 (SAP user interface for HTML 5) is a collection of libraries that developers can use to build desktop and mobile applications that run in a browser. With SAP's SAPUI5 JavaScript toolkit, developers can build SAP web applications using HTML5 web development standards. SAP Fiori, the company's line of web-based apps that have a device-agnostic user interface (UI ), have all been built using SAPUI5. There is also an open-source version of SAPUI5, called OpenUI5, which is available on Github.com.
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 58
04.06.2017 Rob van Linda 59
In this chapter, the personalisation of „Order To Cash Performance“ KPIs with filters is demonstrated
04.06.2017 Rob van Linda 60
Fiori Overview Page with different information views from multiple sources
04.06.2017 Rob van Linda 61
For this demonstration we‘ll klick the „Sales Orders per Month“-Tile.
04.06.2017 Rob van Linda 62
In this screen, the user has several options to customize the output according to his or her needs or interest.
04.06.2017 Rob van Linda 63
At the right there are different Tools to customize the viewport
Notifications Notifications Key Key Show/hide key Show/hide key Zoom in/out Zoom in/out Full screen Full screen Line chart/Table view Line chart/Table view Reset filter Reset filter Search Search
04.06.2017 Rob van Linda 64
To change the information, provided by the chart, a KPI filter is used. For example „Oder to invoice“.
04.06.2017 Rob van Linda 65
After applying the KPI, the chart changes.
04.06.2017 Rob van Linda 66
At the sidebar at the left, analysis steps can be added.
04.06.2017 Rob van Linda 67
After activating another KPI, the result looks like this.
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 69
04.06.2017 Rob van Linda 70
The technical part of KPIs
The HANA Database delivers data high speed, due to it‘s In-
waiting for the results. To use KPIs in the Fiori Launchpad, the KPI Modeler is used, which is set up by an user with admin access in SAP GUI, Fiori Launchpad Designer & Fiori Launchpad . KPIs are role assigned. The KPI Apps are added by the admin to catalogs, from which an end user can choose the analytical apps for his needs to add to his individual Fiori launchpad.
04.06.2017 Rob van Linda 71
To provide KPI apps with data, CDS views are used which optimize the data from the database for Odata services. The DDL (simply said: the source code) of CDS allows you to define database tables, database views, data types by wrapping the according native HANA SQL statements and enriching them with semantical properties. CDS View
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 73
The Launchpad Designer is the environment to customize the Fiori Launchpad. Catalogs, groups and roles can be created to enable a custom experience to users who work with the Fiori Launchpad.
04.06.2017 Rob van Linda 74 User PFCG Role Group Tile Catalogue Target Mapping Appplication Transcaction PFCG Launchpad Designer Group created by user
The settings for the Fiori Launchpad are organized in the three layers configuration, customizing and personalisation. The basic layer configuration consists of settings valid for the whole system. The layer customizing builds on the configuration and fine tunes the settings per client. Each end users can then personalize these settings in their personalization layer.
04.06.2017 Rob van Linda 75
04.06.2017 Rob van Linda 76
FLPD
Catalogs Settings Groups Tiles
04.06.2017 Rob van Linda 77
The FLDP offers the same options for customizing per client and configuration per system
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 79
04.06.2017 Rob van Linda 80
In this section of the presentation, we‘ll explore how the work in the Fiori Launchpad Designer is done. I will create a catalog and assign it to a role. Than a tile is created by configuring and adding a target mapping to this tile. After those steps, I will create a group and assign this group also to the role. After all those steps, I will log in with the demo user and we can have a look at the home screen where you‘llfind the group with the option to choose a tile from the catalog.
04.06.2017 Rob van Linda 81
After the login procedure, the Fiori Launchpad Designer opens in the browser
The sidebar in which the catalogs and groups are listed Tiles which are addded to the catalog Catalog search These three icons will be explained separately Tabs for switching from catalogs to groups and vice versa Global search Home
04.06.2017 Rob van Linda 82
The first Icon opens the tile view with all the tiles in the catalogue. The highlighting shows, that the active view is open. The second icon also represents tiles, but the tiles are displayed as a list. Here the tiles can be configured by a toolbar at the bottom
04.06.2017 Rob van Linda 83
Another Option in the toolbar ofers information about where a Tile is used
04.06.2017 Rob van Linda 84
The third icon opens the area in which target mapping can be configuered for the list of tiles which are listet here.. The toolbar at the bottom offers several options.
04.06.2017 Rob van Linda 85
A catalog is added by klicking the + sign at the bottom of the left sidebar
04.06.2017 Rob van Linda 86
A, so called, modal window will appear in which the title and the ID of the catalog, which is created, will be inserted By clicking „Save“ the catalog will be created.
04.06.2017 Rob van Linda 87
We can see the new catalog as an item in the sidbar
04.06.2017 Rob van Linda 88
After creating a new catalog and role, new tiles have to be created and to added to the catalog. We go back to the LPD (LaunchPad Designer) and create a new tile.
04.06.2017 Rob van Linda 89
There are three options here. Dynamic tiles which display updated informations in real time (KPI), a news tile which can display a RSS Feed and which is updated as soon as a new article is published on a blog for example. In this case, the static App Launcher will be chosen, to create a new tile in the catalog.
04.06.2017 Rob van Linda 90
By clicking the +, the configuration interface appears.
04.06.2017 Rob van Linda 91
The filled in fields activate a tile, which is connected to a BSP application, a WebDynPro or even a URL
04.06.2017 Rob van Linda 92
After the tile has been created, it appears in the catalog and can be added to the Fiori Launchpad by a user, which is assigned to the connected role.
04.06.2017 Rob van Linda 93
The last thing, which has to be done, is the Target Mapping of the tile.
04.06.2017 Rob van Linda 94
The routine, to create a group is exactly the same routine as when creating a catalog
04.06.2017 Rob van Linda 95
Now we can insert a tile from the catalog to the group.
04.06.2017 Rob van Linda 96
Now the tile is added to the group...
04.06.2017 Rob van Linda 97
Now we can insert a tile from the catalog to the group.
04.06.2017 Rob van Linda 98
To assign a catalog and a group to a user or users, we have to create a role which is connected to this or those user(s). Therefor we go to the backend and use the transaction PFCG.
04.06.2017 Rob van Linda 99
Let‘s have a more detailed look how this is done. After entering PFCG we‘ll be led to this interface. A new role name is inserted in the field and „Single Role“ is chosen.
04.06.2017 Rob van Linda 100
A short description is entered.
04.06.2017 Rob van Linda 101
After saving the role, the index „Menu“ must be klicked and the follwing actions are performed: By clicking the arrowhead at „Transaction“, al List of Options will open.
04.06.2017 Rob van Linda 102
To assign the catalog to the role, choose „SAP Fiori Tile Catalog“
04.06.2017 Rob van Linda 103
In the appearing pop-up, the ID of the catalog must be entered
04.06.2017 Rob van Linda 104
The catalog is added to the role menu. As we can see, the name of the Catalog (not the ID) is displayed in the list item. At the right, the details of the node are listed.
04.06.2017 Rob van Linda 105
Now we will ad the group to the role. Be aware, that FIRST the CATALOG is created and added to the role and AFTER that the GROUP is added! The group is added the same way with one difference. Instréad of choosing „SAP Fiori Tile Catalog“, the Entry „SAP Fiori Tile Group“ is chosen.
04.06.2017 Rob van Linda 106
Now both catalog and group are assigned to the role. And the user(s) which are connected to this role, will have the catalog and group at their disposal and can add tiles to this group from the catalog or add a custom group which has also access to the
04.06.2017 Rob van Linda 107
Now we will assign a user to the role. Therfor we click the index „User“
04.06.2017 Rob van Linda 108
The ID of the User has to be inserted. One tip, always save the settings in between.
04.06.2017 Rob van Linda 109
The catalog and the group are now available in the Fiori Launchpad of the User „Launchpad Test“.
04.06.2017 Rob van Linda 110
The user is now enabled to add tiles to his „Home“ group from the catalogue. To add a tile, the user can choose „App Finder“ or „Edit Home Page“ in the „Me“ area.
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 112
04.06.2017 Rob van Linda 113
Adding tiles is very comfortable The user already has the group on his or her launchpad, which was created by the developer. When the developer has assigned apps, they will be embedded there.
User experience
04.06.2017 Rob van Linda 114
Please bear in mind that this is a demo launchpad, created for this presentation. Normally there a re more tiles in a launchpad. But this way things stay simple and comfortable.
04.06.2017 Rob van Linda 115
By clicking this icon, the „Me“ area slides in. Let us have a look at the features in this area
04.06.2017 Rob van Linda 116
Here a user can also see the recently performed tasks.
04.06.2017 Rob van Linda 117
The App Finder leads to all the apps which are available to a user (according to his role). By clicking somewhere outside the Me area, the catalogs will slide in and enlarge.
04.06.2017 Rob van Linda 118
By clicking the + under a tile, it‘s added to one or multiple groups on the Fiori Launchpad. The tiles with a checkmark are already added.
04.06.2017 Rob van Linda 119
When a user has multiple groups, the Fiori Launchpad will show a list with the groups. The user is now able to decide to add a tile to one or multiple groups After klicking „OK“, there will be a notification thatthe tile was successfuly added to the group
04.06.2017 Rob van Linda 120
By clicking „Settings“ a modal window will open in which a user has the option to personalize his profile.
By the way… All the icons are not graphical
Fonts have a great advantage towards pixel based images. Fonts are vector based which means, that they also look sharp on retina and
Another great usability tool from Fiori
04.06.2017 Rob van Linda 121
A user not only can add tiles to groups. He or she can also rearrange tiles and groups by drag and drop. It is also as possible to delete tiles as to add them.
04.06.2017 Rob van Linda 122
By touching the group title with a mouse (or finger on touch screens), the groups gand be dragged around and dropped at the position chosen by the user.
04.06.2017 Rob van Linda 123
This can also be done with tiles
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 125
04.06.2017 Rob van Linda 126
Extending an App in the IDE
There‘s an option to modify an app by using the extensibility pane. To make this option available, extension points have to be created and added to the app during development. The logic behind those extensions is to add, to delete or to modify elements like buttons, lists or fields without touching the initial app. Just to name some simple examples. The extension is, as one could say, a sub-app connected to the parent. When the app is called, the extension, and not the initial app, will be loaded and show the
also called and displayed by the extension.
04.06.2017 Rob van Linda 127
Extending an App in the IDE
After log-in in the IDE, the developer can start an extension project.
04.06.2017 Rob van Linda 128
Extending an App in the IDE
A modal window will be opened and the user has to determine from which system the app should be extended.
04.06.2017 Rob van Linda 129
Extending an App in the IDE
In this case an app from a on premise system is chosen.
04.06.2017 Rob van Linda 130
Extending an App in the IDE
We choose a BSP application from the list.
04.06.2017 Rob van Linda 131
Extending an App in the IDE
04.06.2017 Rob van Linda 132
Extending an App in the IDE
And the IDE will automatically attach an extension project.
04.06.2017 Rob van Linda 133
Extending an App in the IDE
By checking the option „Open extensibility pane“ another mobile window will be displayed.
04.06.2017 Rob van Linda 134
Extending an App in the IDE
The extensibility pane will be opened and several sections with options are displayed.
04.06.2017 Rob van Linda 135
Extending an App in the IDE
In the toolbar at the top, the viewport can be adjusted to simulate mobile devices. If a developer wants to test the app on a real smartphone, he or she can open a QR Code (QR = Quick Response) by clicking the icon at the right side and scan the appearing large code with a QR code scanner which has to be installed on the device.
04.06.2017 Rob van Linda 136
Extending an App in the IDE
Let‘s explore the interface of the app. Please bear in mind, that this app is not a Fiori 2 one. The system I‘ve used is not connected to a HANA database.
Master View Detail View Object Header Icon Tab Bar Items
04.06.2017 Rob van Linda 137
Extending an App in the IDE
The panel at the right side lists all the elements of the app. At the top one can filter the items displayed. At the bottom there are several drop-downs for perfroming actions.
04.06.2017 Rob van Linda 138
Extending an App in the IDE
In the project area at the left of the IDE, both projects are listed
04.06.2017 Rob van Linda 139
Extending an App in the IDE There are two view options in the extensibility panel. The preview mode is self-explaining. The extensibility mode helps too determine which item in the list is connected to an element in the app.
04.06.2017 Rob van Linda 140
Extending an App in the IDE By touching aan element, which is listed on the right panel, the connected element in the app will be highlighted. Master view
04.06.2017 Rob van Linda 141
Extending an App in the IDE
04.06.2017 Rob van Linda 142
Extending an App in the IDE This short video demonstrates the precept of the extensibility mode.
04.06.2017 Rob van Linda 143
Extending an App in the IDE
When an Element in the list is activated by klick, the options at the bottom of the panel is activated, and the developer can choose an action. These options have been predefined in the parent app.
04.06.2017 Rob van Linda 144
Extending an App in the IDE
When completing an extending action, like hiding a control…
04.06.2017 Rob van Linda 145
Extending an App in the IDE
…the IDE will show an alert. When the button „Refresh“ is clicked, the view will say visible and the element, in this case, is hidden. By clicking „Open Extension Code“, the source code of the extension will open and the dveloper can chack if the code is correct or modify it according to custom needs.
04.06.2017 Rob van Linda 146
Extending an App in the IDE
The result MasterListHeaderTitle
Hidden Visible
04.06.2017 Rob van Linda 147
Extending an App in the IDE
Extensions can be also be undone.
04.06.2017 Rob van Linda 148
Extending an App in the IDE
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 150
04.06.2017 Rob van Linda 151
Talking about User Experience and User Interface brings me to the next subject. In Fiori it is possible to do the classic SAP „stuff“, which is traditionally done in the classic environment, in Fiori. Let‘s have a look at the classic VA01 Create Sales Order…
04.06.2017 Rob van Linda 152
Let‘s create a sales order in Fiori
04.06.2017 Rob van Linda 153
04.06.2017 Rob van Linda 154
As you can see, it looks familiar. But more relaxed. The menu icons have been replaced by words and the colours are more natural and more relaxed.
04.06.2017 Rob van Linda 155
It has the typical Fiori look
04.06.2017 Rob van Linda 156
04.06.2017 Rob van Linda 157
04.06.2017 Rob van Linda 158
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 160
04.06.2017 Rob van Linda 161
SAP has achieved countless innovations in a very short time. But SAP won‘t stop at this point. There are countless plans, which are already partly realized, which will make working with SAP more and more pleasant, comfortable and more efficient. Let‘s have a look at some planned improvements.
04.06.2017 Rob van Linda 162
Home Page Tour provides a guided activity to orient a user to the new features on the Home Page
04.06.2017 Rob van Linda 163
Provide filtering, sorting and grouping of Workflow approvals and to handle high volume ToDos
users
in tabbed views
narrow down the list
forms directly from the list view
04.06.2017 Rob van Linda 164
Unified workspace for employees to access all their information and take action in a single place.
04.06.2017 Rob van Linda 165
Unified workspace for managers to see all direct report’s information providing both team overview and individual employee view.
04.06.2017 Rob van Linda 166
search results interface to combine the Directory search, Skills and Talent Search
keywords to return people results
and permission controlled
04.06.2017 Rob van Linda 167
SAP Hybris Cloud for Customer theme builder to change colors
04.06.2017 Rob van Linda 168
SAP Hybris Blue n White
04.06.2017 Rob van Linda 169
Insightful overview page with Tiles
Bring Home page tiles on Object Overview page, and make them contextual 1. KPI Tiles 2. Report Tiles 3. Filter Tile 4. Icon Tiles 5. Tools –Notification Tile, News Tile, Recent Interacted 6. Sections
04.06.2017 Rob van Linda 170
Predictive Analytics 3.0: UX Renovation Based on SAP Fiori Designs
Manage the full model life cycle of predictive data preparation, model creation, model deployment, model management.
04.06.2017 Rob van Linda 171
UX Renovation Based on SAP Fiori Templates
What is Fiori Fiori Concept Fiori Theme Belize Fiori & Technology Fiori Apps App Types Overview Pages Design Tools Walk through Sales and Distribution About KPI Modeler & CDS View Fiori Launchpad Designer Roadmap Catalogs, Groups & Tiles Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information Fiori Launchpad User experience Extending Apps
04.06.2017 Rob van Linda 173
04.06.2017 Rob van Linda 174
Fiori Design Guidelines https://experience.sap.com/fiori-design-web/ Reference Apps https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/ Screen Personas https://wiki.scn.sap.com/wiki/display/Img/Productivity+Power+Play OpenSAP Screen Personas https://open.sap.com/courses/sps2
04.06.2017 Rob van Linda 175
Just to get a swift overview of how many apps are available for the different modules, I have added a table here. The complete Library and all the informations needed, when working in Fiori, can be found here: https://fioriappslibrary.hana.ondem and.com/sap/fix/externalViewer/
Asset Management 157 Commerce 27 Finance 503 Human Resources 72 Industry Specific 12 Manufacturing 160 Marketing 59 R&D/Engineering 142 Sales 130 Service 89 Sourcing and Procurement 267 Supply Chain 467 Substainability 47