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 Catalogs, Groups & Tiles Fiori Launchpad User experience Extending Apps Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information

Overview Pages 04.06.2017 Rob van Linda 30

Overview Pages In this section one feature of the Fiori Apps is discussed. Of course this is just one of many, but approaching all features would go beyond the scope of this workshop. 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 31

Fiori Overview Pages 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 overloaded with bells and whistles. 04.06.2017 Rob van Linda 32

Fiori Overview Pages 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 33

Fiori Overview Pages The SAP Fiori Overview Page plugin for SAP Web IDE enables developers to create their own overview page applications. The plugin 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 34

Fiori Overview Pages Use cases The user has a specific role and needs to filter and react to information stemming • from a range of applications. The user needs to gather information from different sources that support a specific • task focus or information need. You want to give users a place to focus on their role-specific tasks. • You want to offer different information formats (such as charts, lists, and tables) on a • single page for the tasks of a specific domain or role. You want to organize and display a set of (filterable) data to provide an entry- • level view of content related to a specific domain or role. 04.06.2017 Rob van Linda 35

Fiori Overview Pages 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 36

Fiori Overview Pages Use cases 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 04.06.2017 Rob van Linda 37

Fiori Overview Pages 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 38

Fiori Overview Pages 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 39

Fiori Overview Pages 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. Row 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: Row Phone: 1 column • Tablet (portrait): 2 columns • Laptop / tablet (landscape): 3 columns • Large desktop: 4 columns • Extended monitor: 5 columns (maximum) • Column 04.06.2017 Rob van Linda 40

Fiori Overview Pages 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 41

Fiori Overview Pages 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 42

Fiori Overview Pages Cards Components Every card comprises three components: a header area , a content area , and a footer area . Header 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). Content Area Footer Area 43 04.06.2017 Rob van Linda

Fiori Overview Pages Navigation & Interaction The navigation and interaction depends on the technical card type: Single-object cards , Object group cards, Special cards Go to single item Go to list with all items Go to single target Go to single item Go to single target Go to single item Go to single target Go to single target Go to single item Go to single target Different actions Go to single target 04.06.2017 Rob van Linda 44

Fiori Overview Pages 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 45

Fiori Overview Pages 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 Table card Link list card 04.06.2017 Rob van Linda 46

Fiori Overview Pages Stack Card A stack card is a special collection of single-object quick view cards, based on a topic or action. Unlike the other card types, the top-level stack cards don’t show any application content. Instead, they act as an entry point to an object stream containing multiple cards. Count for Title stack content Subtitle 04.06.2017 Rob van Linda 47

Fiori Overview Pages Card Types The top-level stack card contains two clickable navigation areas: The left area and View All link navigate to • 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. The right area opens the object stream, • which contains a scrollable collection of cards presented in an overlay format. The user can browse individual cards, with the option to view, inspect, or take action. 04.06.2017 Rob van Linda 48

Number of Apps available Just to get a swift overview of how many apps are available for the Asset Management 157 different modules, I have added a table here. Commerce 27 Finance 503 The complete Library and all the information needed, when working in Human Resources 72 Fiori, can be found here: Industry Specific 12 https://fioriappslibrary.hana.ondeman Manufacturing 160 d.com/sap/fix/externalViewer/ Marketing 59 R&D/Engineering 142 Sales 130 Service 89 Sourcing and Procurement 267 Supply Chain 467 Substainability 47 04.06.2017 Rob van Linda 49

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 Catalogs, Groups & Tiles Fiori Launchpad User experience Extending Apps Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information

Design Tools 04.06.2017 Rob van Linda 51

Design Tools 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 52

Design Tools The UI theme designer is a browser-based tool that allows you to develop your themes by modifying one of the theme templates provided by SAP. 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 53

Fiori Elements 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 54

Fiori Design Guidelines 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 55

SAPUI5 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. 04.06.2017 Rob van Linda 56

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 Catalogs, Groups & Tiles Fiori Launchpad User experience Extending Apps Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information

Walk through Sales and Distribution 04.06.2017 Rob van Linda 58

Walk through Sales and Distribution In this chapter, the personalisation of „Order To Cash Performance“ KPIs with filters is demonstrated 04.06.2017 Rob van Linda 59

Walk through Sales and Distribution Fiori Overview Page with different information views from multiple sources 04.06.2017 Rob van Linda 60

Walk through Sales and Distribution For this demonstration we‘ll klick the „Sales Orders per Month“-Tile. 04.06.2017 Rob van Linda 61

Walk through Sales and Distribution 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 62

Filter Options for the viewport At the right there are different Tools to customize the viewport Search Search Notifications Notifications Reset filter Reset filter Full screen Full screen Show/hide key Show/hide key Line chart/Table view Line chart/Table view Zoom in/out Zoom in/out Key Key 04.06.2017 Rob van Linda 63

Walk through Sales and Distribution To change the information, provided by the chart, a KPI filter is used. For example „Oder to invoice“. 04.06.2017 Rob van Linda 64

Walk through Sales and Distribution After applying the KPI, the chart changes. 04.06.2017 Rob van Linda 65

Walk through Sales and Distribution At the sidebar at the left, analysis steps can be added. 04.06.2017 Rob van Linda 66

Walk through Sales and Distribution After activating another KPI, the result looks like this. 04.06.2017 Rob van Linda 67

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 Catalogs, Groups & Tiles Fiori Launchpad User experience Extending Apps Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information

About KPI Modeler & CDS Views 04.06.2017 Rob van Linda 69

About KPI Modeler & CDS Views The technical part of KPIs The HANA Database delivers data high speed, due to it‘s In- memory. Analytics can be performed in real time without 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 70

About CDS Views 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 04.06.2017 Rob van Linda 71

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 Catalogs, Groups & Tiles Fiori Launchpad User experience Extending Apps Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information

Fiori Launchpad Designer 04.06.2017 Rob van Linda 73

Fiori Launchpad Designer The Launchpad Designer is the environment to customize Group the Fiori Launchpad. User created by user Catalogs, groups and roles can be created to enable a custom experience to users who work with the Fiori Launchpad. Group PFCG Tile Role Catalogue Target Mapping Transcaction PFCG Launchpad Appplication Designer 04.06.2017 Rob van Linda 74

Fiori Launchpad Designer 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

Fiori Launchpad Designer FLPD Catalogs Settings Tiles Groups 04.06.2017 Rob van Linda 76

Fiori Launchpad Designer The FLDP offers the same options for customizing per client and configuration per system 04.06.2017 Rob van Linda 77

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 Catalogs, Groups & Tiles Fiori Launchpad User experience Extending Apps Executing a transaction in „classic SAP“ in Fiori The Future Links and Helpful Information

Roadmap to Catalogs, Groups and Tiles 04.06.2017 Rob van Linda 79

Roadmap to Catalogs, Groups and Tiles 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 80

Creating a new catalog Tabs for switching from catalogs Home to groups and vice versa These three icons will be explained separately Catalog search Tiles which are addded to the catalog Global search The sidebar in which the catalogs and groups are listed After the login procedure, the Fiori Launchpad Designer opens in the browser 04.06.2017 Rob van Linda 81

Creating a new catalog 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 82

Creating a new catalog Another Option in the toolbar ofers information about where a Tile is used 04.06.2017 Rob van Linda 83

Creating a new catalog 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 84

Creating a new catalog A catalog is added by klicking the + sign at the bottom of the left sidebar 04.06.2017 Rob van Linda 85

Creating a new catalog 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 86

Creating a new catalog We can see the new catalog as an item in the sidbar 04.06.2017 Rob van Linda 87

Creating new tiles 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 88

Creating new tiles 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 89

Creating new tiles By clicking the + , the configuration interface appears. 04.06.2017 Rob van Linda 90

Creating new tiles 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 91

Creating new tiles 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 92

Creating new tiles The last thing, which has to be done, is the Target Mapping of the tile. 04.06.2017 Rob van Linda 93

Creating a group The routine, to create a group is exactly the same routine as when creating a catalog 04.06.2017 Rob van Linda 94

Creating a group Now we can insert a tile from the catalog to the group. 04.06.2017 Rob van Linda 95

Creating a group Now the tile is added to the group... 04.06.2017 Rob van Linda 96

Creating a group Now we can insert a tile from the catalog to the group. 04.06.2017 Rob van Linda 97

Creating a role 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 98

Creating a role 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 99

Creating a role A short description is entered. 04.06.2017 Rob van Linda 100