Wayfinder What is Fiori Fiori Concept Fiori Theme Belize Fiori - - PowerPoint PPT Presentation

wayfinder
SMART_READER_LITE
LIVE PREVIEW

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


slide-1
SLIDE 1

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

slide-2
SLIDE 2

Fiori

A discourse about the new user experience of SAP

slide-3
SLIDE 3

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

slide-4
SLIDE 4

What is Fiori?

04.06.2017 Rob van Linda 4

slide-5
SLIDE 5

What is Fiori?

SAP Fiori is a software that provides the porting of applications on mobile devices announced on 15 May

  • 2013. SAP Fiori is based on SAP's technology platform

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

slide-6
SLIDE 6

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

slide-7
SLIDE 7

Fiori Concept

04.06.2017 Rob van Linda 7

slide-8
SLIDE 8

Fiori Concept

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

slide-9
SLIDE 9

Fiori Concept

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

slide-10
SLIDE 10

Fiori Concept

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

slide-11
SLIDE 11

Off Canvas Panels

04.06.2017 Rob van Linda 11

slide-12
SLIDE 12

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

slide-13
SLIDE 13

Fiori Theme Belize

04.06.2017 Rob van Linda 13

slide-14
SLIDE 14

Fiori Theme Belize

04.06.2017 Rob van Linda 14

  • Refined SAP Fiori visual language
  • Clean and consistent layouts throughout the UI

conveys the content with clarity

  • Delightful details in micro interactions and

typography for a richer SAP Fiori user experience Light flavor available today Dark flavor Belize Deep planned The successor to Blue Crystal

slide-15
SLIDE 15

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

slide-16
SLIDE 16

Fiori &Technology

04.06.2017 Rob van Linda 16

slide-17
SLIDE 17

Fiori &Technology

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, …

slide-18
SLIDE 18

SAP Gateway

04.06.2017 Rob van Linda 18

Use SAP Gateway to:

  • Expose data from SAP backend systems and consume
  • n compelling apps on any device.
  • Create OData services quickly and easily, increasing

developer productivity.

  • Reuse On-Premise data in cloud and hybrid scenarios
  • Digitalize your business and engage with end

consumers.

slide-19
SLIDE 19

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

slide-20
SLIDE 20

Fiori Apps

04.06.2017 Rob van Linda 20

slide-21
SLIDE 21

Fiori Apps

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.

slide-22
SLIDE 22

Fiori Apps Journey

04.06.2017 Rob van Linda 22

The FIORI Launchpad and SAPUI5 Apps have experienced many changes in a short time.

slide-23
SLIDE 23

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

slide-24
SLIDE 24

App Types

04.06.2017 Rob van Linda 24

slide-25
SLIDE 25

App Types

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

  • bjects and contextual navigation

between related objects

SAP HANA SAP HANA ANY DB

slide-26
SLIDE 26

App Types | Transactional

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 apps in SAP Fiori are used to perform

transactional tasks like a manager-employee transactions such as leave request, travel requests, etc.

  • Transactional Apps run best on SAP HANA database but can

be deployed with any database with acceptable

  • performance. These apps allow a user to run simple SAP

transactions on the mobile devices as well as desktop or laptops. Example − Leave Request, Travel Request, Purchase Order

slide-27
SLIDE 27

App Types | Analytical

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 −

  • SMART Business
  • Virtual Data Models

I Analytical Insights

Visual overview of a dedicated topic for further KPI related analyses

slide-28
SLIDE 28

App Types | Fact Sheets

04.06.2017 Rob van Linda 28

  • Fact sheets are used to drill the key information and

contextual information in business operations. In SAP Fiori tiles, you can drill down to further details.

  • It also allows you to navigate one-fact sheet to all its related

fact sheets.

  • Fact sheets also allow you to navigate to Transactional

apps to run SAP transactions. A few Fact sheets also provide an integration option of geographical maps.

  • You can call Fact sheets from Fiori Launchpad search results,

from other fact sheets or from Transactional or Analytical apps.

  • Fact sheets only run on SAP HANA database and also require

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

  • bjects and contextual navigation

between related objects

slide-29
SLIDE 29

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

slide-30
SLIDE 30

Overview Pages

04.06.2017 Rob van Linda 30

slide-31
SLIDE 31

Overview Pages

04.06.2017 Rob van Linda 31

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

  • f 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 ;)

slide-32
SLIDE 32

Fiori Overview Pages

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

  • verloaded with bells and whistles.
slide-33
SLIDE 33

Fiori Overview 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.

slide-34
SLIDE 34

Fiori Overview Pages

04.06.2017 Rob van Linda 34

The SAP Fiori Overview Page plugin for SAP Web IDE enables developers to create their

  • wn 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.

slide-35
SLIDE 35

Fiori Overview Pages

04.06.2017 Rob van Linda 35

  • 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.

Use cases

slide-36
SLIDE 36

Fiori Overview Pages

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.

slide-37
SLIDE 37

Fiori Overview Pages

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

slide-38
SLIDE 38

Fiori Overview Pages

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.

slide-39
SLIDE 39

Fiori Overview Pages

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.

slide-40
SLIDE 40

Fiori Overview Pages

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:

  • Phone: 1 column
  • Tablet (portrait): 2 columns
  • Laptop / tablet (landscape): 3 columns
  • Large desktop: 4 columns
  • Extended monitor: 5 columns (maximum)

Column Row Row

slide-41
SLIDE 41

Fiori Overview Pages

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.

slide-42
SLIDE 42

Fiori Overview Pages

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.

slide-43
SLIDE 43

Fiori Overview Pages

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

slide-44
SLIDE 44

Fiori Overview Pages

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

slide-45
SLIDE 45

Fiori Overview Pages

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.

slide-46
SLIDE 46

Fiori Overview Pages

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

slide-47
SLIDE 47

Fiori Overview Pages

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

  • 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.

Title Subtitle Count for stack content

slide-48
SLIDE 48

Fiori Overview Pages

04.06.2017 Rob van Linda 48

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

  • ption to view, inspect, or take action.
slide-49
SLIDE 49

Number of Apps available

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

slide-50
SLIDE 50

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

slide-51
SLIDE 51

Design Tools

04.06.2017 Rob van Linda 51

slide-52
SLIDE 52

04.06.2017 Rob van Linda 52

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

slide-53
SLIDE 53

04.06.2017 Rob van Linda 53

Design Tools

The UI theme designer is a browser-based tool that allows you to develop your themes by modifying

  • ne 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.

slide-54
SLIDE 54

04.06.2017 Rob van Linda 54

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.

slide-55
SLIDE 55

04.06.2017 Rob van Linda 55

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.

slide-56
SLIDE 56

04.06.2017 Rob van Linda 56

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.

slide-57
SLIDE 57

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

slide-58
SLIDE 58

Walk through Sales and Distribution

04.06.2017 Rob van Linda 58

slide-59
SLIDE 59

Walk through Sales and Distribution

04.06.2017 Rob van Linda 59

In this chapter, the personalisation of „Order To Cash Performance“ KPIs with filters is demonstrated

slide-60
SLIDE 60

Walk through Sales and Distribution

04.06.2017 Rob van Linda 60

Fiori Overview Page with different information views from multiple sources

slide-61
SLIDE 61

Walk through Sales and Distribution

04.06.2017 Rob van Linda 61

For this demonstration we‘ll klick the „Sales Orders per Month“-Tile.

slide-62
SLIDE 62

Walk through Sales and Distribution

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.

slide-63
SLIDE 63

Filter Options for the viewport

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

slide-64
SLIDE 64

Walk through Sales and Distribution

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“.

slide-65
SLIDE 65

Walk through Sales and Distribution

04.06.2017 Rob van Linda 65

After applying the KPI, the chart changes.

slide-66
SLIDE 66

Walk through Sales and Distribution

04.06.2017 Rob van Linda 66

At the sidebar at the left, analysis steps can be added.

slide-67
SLIDE 67

Walk through Sales and Distribution

04.06.2017 Rob van Linda 67

After activating another KPI, the result looks like this.

slide-68
SLIDE 68

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

slide-69
SLIDE 69

About KPI Modeler & CDS Views

04.06.2017 Rob van Linda 69

slide-70
SLIDE 70

About KPI Modeler & CDS Views

04.06.2017 Rob van Linda 70

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.

slide-71
SLIDE 71

About CDS Views

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

slide-72
SLIDE 72

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

slide-73
SLIDE 73

Fiori Launchpad Designer

04.06.2017 Rob van Linda 73

slide-74
SLIDE 74

Fiori Launchpad Designer

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

slide-75
SLIDE 75

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

slide-76
SLIDE 76

Fiori Launchpad Designer

04.06.2017 Rob van Linda 76

FLPD

Catalogs Settings Groups Tiles

slide-77
SLIDE 77

Fiori Launchpad Designer

04.06.2017 Rob van Linda 77

The FLDP offers the same options for customizing per client and configuration per system

slide-78
SLIDE 78

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

slide-79
SLIDE 79

Roadmap to Catalogs, Groups and Tiles

04.06.2017 Rob van Linda 79

slide-80
SLIDE 80

Roadmap to Catalogs, Groups and Tiles

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.

slide-81
SLIDE 81

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

slide-82
SLIDE 82

Creating a new catalog

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

slide-83
SLIDE 83

Creating a new catalog

04.06.2017 Rob van Linda 83

Another Option in the toolbar ofers information about where a Tile is used

slide-84
SLIDE 84

Creating a new catalog

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.

slide-85
SLIDE 85

Creating a new catalog

04.06.2017 Rob van Linda 85

A catalog is added by klicking the + sign at the bottom of the left sidebar

slide-86
SLIDE 86

Creating a new catalog

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.

slide-87
SLIDE 87

Creating a new catalog

04.06.2017 Rob van Linda 87

We can see the new catalog as an item in the sidbar

slide-88
SLIDE 88

Creating new tiles

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.

slide-89
SLIDE 89

Creating new tiles

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.

slide-90
SLIDE 90

Creating new tiles

04.06.2017 Rob van Linda 90

By clicking the +, the configuration interface appears.

slide-91
SLIDE 91

Creating new tiles

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

slide-92
SLIDE 92

Creating new tiles

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.

slide-93
SLIDE 93

Creating new tiles

04.06.2017 Rob van Linda 93

The last thing, which has to be done, is the Target Mapping of the tile.

slide-94
SLIDE 94

Creating a group

04.06.2017 Rob van Linda 94

The routine, to create a group is exactly the same routine as when creating a catalog

slide-95
SLIDE 95

Creating a group

04.06.2017 Rob van Linda 95

Now we can insert a tile from the catalog to the group.

slide-96
SLIDE 96

Creating a group

04.06.2017 Rob van Linda 96

Now the tile is added to the group...

slide-97
SLIDE 97

Creating a group

04.06.2017 Rob van Linda 97

Now we can insert a tile from the catalog to the group.

slide-98
SLIDE 98

Creating a role

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.

slide-99
SLIDE 99

Creating a role

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.

slide-100
SLIDE 100

Creating a role

04.06.2017 Rob van Linda 100

A short description is entered.

slide-101
SLIDE 101

Creating a role

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.

slide-102
SLIDE 102

Creating a role

04.06.2017 Rob van Linda 102

To assign the catalog to the role, choose „SAP Fiori Tile Catalog“

slide-103
SLIDE 103

Creating a role

04.06.2017 Rob van Linda 103

In the appearing pop-up, the ID of the catalog must be entered

slide-104
SLIDE 104

Creating a role

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.

slide-105
SLIDE 105

Creating a role

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.

slide-106
SLIDE 106

Result

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

  • catalog. As we can see, the index „Menu“ has turned from red to green.
slide-107
SLIDE 107

Assigning a User to the Role

04.06.2017 Rob van Linda 107

Now we will assign a user to the role. Therfor we click the index „User“

slide-108
SLIDE 108

Assigning a User to the Role

04.06.2017 Rob van Linda 108

The ID of the User has to be inserted. One tip, always save the settings in between.

slide-109
SLIDE 109

Result

04.06.2017 Rob van Linda 109

The catalog and the group are now available in the Fiori Launchpad of the User „Launchpad Test“.

slide-110
SLIDE 110

Result

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.

slide-111
SLIDE 111

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

slide-112
SLIDE 112

Fiori Launchpad User experience

04.06.2017 Rob van Linda 112

slide-113
SLIDE 113

User experience

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.

slide-114
SLIDE 114

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.

slide-115
SLIDE 115

User experience

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

slide-116
SLIDE 116

User experience

04.06.2017 Rob van Linda 116

Here a user can also see the recently performed tasks.

slide-117
SLIDE 117

User experience

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.

slide-118
SLIDE 118

User experience

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.

slide-119
SLIDE 119

User experience

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

slide-120
SLIDE 120

User experience

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

  • elements. They are fonts.

Fonts have a great advantage towards pixel based images. Fonts are vector based which means, that they also look sharp on retina and

  • ther high resolution displays.

Another great usability tool from Fiori

slide-121
SLIDE 121

User experience

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.

slide-122
SLIDE 122

User experience

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.

slide-123
SLIDE 123

User experience

04.06.2017 Rob van Linda 123

This can also be done with tiles

slide-124
SLIDE 124

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

slide-125
SLIDE 125

Extending Apps

04.06.2017 Rob van Linda 125

slide-126
SLIDE 126

Extending Apps

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

  • modifications. All the „standard“ features of the parent app, which runs in the background, will be

also called and displayed by the extension.

slide-127
SLIDE 127

Extending Apps

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.

slide-128
SLIDE 128

Extending Apps

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.

slide-129
SLIDE 129

Extending Apps

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.

slide-130
SLIDE 130

Extending Apps

04.06.2017 Rob van Linda 130

Extending an App in the IDE

We choose a BSP application from the list.

slide-131
SLIDE 131

Extending Apps

04.06.2017 Rob van Linda 131

Extending an App in the IDE

slide-132
SLIDE 132

Extending Apps

04.06.2017 Rob van Linda 132

Extending an App in the IDE

And the IDE will automatically attach an extension project.

slide-133
SLIDE 133

Extending Apps

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.

slide-134
SLIDE 134

Extending Apps

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.

slide-135
SLIDE 135

Extending Apps

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.

slide-136
SLIDE 136

Extending Apps

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

slide-137
SLIDE 137

Extending Apps

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.

slide-138
SLIDE 138

Extending Apps

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

slide-139
SLIDE 139

Extending Apps

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.

slide-140
SLIDE 140

Extending Apps

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

slide-141
SLIDE 141

Extending Apps

04.06.2017 Rob van Linda 141

Extending an App in the IDE

slide-142
SLIDE 142

Extending Apps

04.06.2017 Rob van Linda 142

Extending an App in the IDE This short video demonstrates the precept of the extensibility mode.

slide-143
SLIDE 143

Extending Apps

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.

slide-144
SLIDE 144

Extending Apps

04.06.2017 Rob van Linda 144

Extending an App in the IDE

When completing an extending action, like hiding a control…

slide-145
SLIDE 145

Extending Apps

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.

slide-146
SLIDE 146

Extending Apps

04.06.2017 Rob van Linda 146

Extending an App in the IDE

The result MasterListHeaderTitle

Hidden Visible

slide-147
SLIDE 147

Extending Apps

04.06.2017 Rob van Linda 147

Extending an App in the IDE

Extensions can be also be undone.

slide-148
SLIDE 148

Extending Apps

04.06.2017 Rob van Linda 148

Extending an App in the IDE

slide-149
SLIDE 149

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

slide-150
SLIDE 150

Executing „classic“ SAP transactions in Fiori

04.06.2017 Rob van Linda 150

slide-151
SLIDE 151

Executing „classic“ SAP transactions in Fiori

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…

slide-152
SLIDE 152

Executing „classic“ SAP transactions in Fiori

04.06.2017 Rob van Linda 152

Let‘s create a sales order in Fiori

slide-153
SLIDE 153

Executing „classic“ SAP transactions in Fiori

04.06.2017 Rob van Linda 153

slide-154
SLIDE 154

Executing „classic“ SAP transactions in Fiori

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.

slide-155
SLIDE 155

Executing „classic“ SAP transactions in Fiori

04.06.2017 Rob van Linda 155

It has the typical Fiori look

slide-156
SLIDE 156

Executing „classic“ SAP transactions in Fiori

04.06.2017 Rob van Linda 156

slide-157
SLIDE 157

Executing „classic“ SAP transactions in Fiori

04.06.2017 Rob van Linda 157

slide-158
SLIDE 158

Executing „classic“ SAP transactions in Fiori

04.06.2017 Rob van Linda 158

slide-159
SLIDE 159

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

slide-160
SLIDE 160

The Future

04.06.2017 Rob van Linda 160

slide-161
SLIDE 161

The Future

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.

slide-162
SLIDE 162

The Future

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

slide-163
SLIDE 163

The Future

04.06.2017 Rob van Linda 163

Provide filtering, sorting and grouping of Workflow approvals and to handle high volume ToDos

  • Supports Managers & Specialists

users

  • Quick access to forms organized

in tabbed views

  • Search and filter options to

narrow down the list

  • Take Action on single or multiple

forms directly from the list view

slide-164
SLIDE 164

The Future

04.06.2017 Rob van Linda 164

Unified workspace for employees to access all their information and take action in a single place.

slide-165
SLIDE 165

The Future

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.

slide-166
SLIDE 166

The Future

04.06.2017 Rob van Linda 166

  • Single search entry point and

search results interface to combine the Directory search, Skills and Talent Search

  • Allow Search by additional

keywords to return people results

  • Make search fields configurable

and permission controlled

slide-167
SLIDE 167

The Future

04.06.2017 Rob van Linda 167

SAP Hybris Cloud for Customer theme builder to change colors

slide-168
SLIDE 168

The Future

04.06.2017 Rob van Linda 168

SAP Hybris Blue n White

slide-169
SLIDE 169

The Future

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

slide-170
SLIDE 170

The Future

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.

slide-171
SLIDE 171

The Future

04.06.2017 Rob van Linda 171

UX Renovation Based on SAP Fiori Templates

  • New chart types and options
  • Geo map enhancements
  • Table for dashboards/ scorecards
  • Improved icon & graphic library
slide-172
SLIDE 172

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

slide-173
SLIDE 173

Links & helpful information

04.06.2017 Rob van Linda 173

slide-174
SLIDE 174

Links & helpful information

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

slide-175
SLIDE 175

Number of Apps available

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