beginning sap fiori -...

F O R P R O F E S S I O N A L S B Y P R O F E S S I O N A L S®

www.apress.com

Shelve inDatabases /SAP

User levelBeginning–Advanced

9 781484 213360

54399ISBN 978-1-4842-1336-0

SOURCE CODE ONLINE

Take a deep dive into SAP Fiori and discover Fiori architecture, Fiori landscape installation, Fiori standard applications, Fiori Launchpad con� guration, tools for developing Fiori applications and extending standard Fiori applications.

You will learn:

• Fiori architecture and its applications• Setting up a Fiori landscape and Fiori Launchpad• Con� guring, customizing and enhancing standard Fiori applications• Developing Fiori native applications for mobile• Internet of Things-based custom Fiori applications with the HANA cloud platform

Bince Mathew, a SAP mobility expert working for an MNC in Germany, shows you how SAP Fiori, based on HTML5 technology, addresses the most widely and frequently used SAP transactions like purchase order approvals, sales order creation, information lookup, and self-service tasks. This set of HTML5 apps provides a very simple and accessible experience across desktops, tablets, and smartphones.

Beginning SAP Fiori

Mathew

Beginning SAP Fiori Beginning SAP Fiori

—

Bince Mathew

Beginning SAP Fiori

Bince Mathew

Beginning SAP Fiori

Bince Mathew Bangalore, Karnataka, India

ISBN-13 (pbk): 978-1-4842-1336-0 ISBN-13 (electronic): 978-1-4842-1335-3DOI 10.1007/978-1-4842-1335-3

Library of Congress Control Number: 2015958352

Copyright © 2015 by Bince Mathew

This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law.

Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.

The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.

While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.

Managing Director: Welmoed SpahrAcquisitions Editor: Celestin Suresh JohnDevelopmental Editor: Matthew MoodieTechnical Reviewer: Rajanidhi RajasekaranEditorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Louise Corrigan,

James DeWolf, Jonathan Gennick, Robert Hutchinson, Celestin Suresh John, Michelle Lowman, James Markham, Susan McDermott, Matthew Moodie, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Gwenan Spearing, Matt Wade, Steve Weiss

Coordinating Editor: Rita FernandoCopy Editor: Tiffany Taylor Compositor: SPi GlobalIndexer: SPi Global

Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.

For information on translations, please e-mail [email protected] or visit www.apress.com.

Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales.

Any source code or other supplementary materials referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to www.apress.com/source-code/.

Printed on acid-free paper

mailto:[email protected]

https://www.springeronline.com

mailto:[email protected]

https://www.apress.com

http://www.apress.com/bulk-sales

https://www.apress.com

www.apress.com/source-code/

www.apress.com/source-code/

Dedicated to My Parents and My Brother

Contents at a Glance

About the Author �� xiii

About the Technical Reviewer ��xv

Acknowledgments ��xvii

Introduction ��xix

■Chapter 1: Introduction to SAP Fiori �� 1

■Chapter 2: Setting Up the Fiori Landscape �� 25

■Chapter 3: Fiori Launchpad and Applications�� 55

■Chapter 4: Customizing and Extending Standard Fiori Applications �� 97

■Chapter 5: Fiori OData Customization and NetWeaver Gateway Overview �� 177

■Chapter 6: Fiori Custom Application Development and Tools �� 217

■Chapter 7: Introduction to HANA Smart Business and the Internet of Things �� 281

■Chapter 8: Debugging and Troubleshooting Fiori Applications �� 323

■Chapter 9: Developing Fiori Applications Using Cordova and Kapsel �� 337

Index �� 359

v

Contents

About the Author �� xiii

About the Technical Reviewer ��xv

Acknowledgments ��xvii

Introduction ��xix

■Chapter 1: Introduction to SAP Fiori �� 1

Why Fiori? �� 1

Introduction to the SAP UX Strategy and the SAP Fiori UX �� 3

SAP UX Strategy �� 3

SAP Fiori UX �� 4

SAP Fiori Design Inspiration �� 10

Introduction to SAP Fiori�� 13

Fiori Applications Overview �� 14

Fiori Wave 1 �� 14

Fiori Wave 2 �� 15

Fiori Architecture for Transactional Applications �� 19

Fiori Architecture for Analytical Applications �� 20

Fiori Architecture for Fact Sheet Applications �� 22

■Chapter 2: Setting Up the Fiori Landscape �� 25

Fiori Prerequisites �� 25

Prerequisites for the Front-End Server (SAP NetWeaver Gateway) �� 25

User Interface Add-on Components �� 26

Prerequisites for the Back-End Server for SAP ERP �� 27

vii

■ Contents

viii

Initial Configuration �� 27

Creating Fiori Users and Assigning Authorizations �� 27

Connecting SAP NetWeaver Gateway with the Back-End SAP Suite �� 36

Configuring SAP Web Dispatcher �� 44

Setting Up the Fiori Launchpad, Fiori Launchpad Designer, and Fiori Admin Page �� 45

Activating ICF Nodes �� 46

Configuring the Logon Screen for the Fiori Launchpad and Fiori Launchpad Designer (Admin page) �� 48

Configuring the Logout Screen �� 51

Fiori Application Add-Ons �� 52

■Chapter 3: Fiori Launchpad and Applications�� 55

The Fiori Launchpad and Launchpad Designer �� 55

Fiori Launchpad �� 55

Fiori Launchpad Designer �� 60

Configuring the Fiori Home Page �� 71

Creating Groups in Fiori Launchpad Designer �� 74

Assigning Groups to End Users �� 77

Configuring the Fiori Approval Application Workflow �� 87

Configuring Wave 1 Approval Applications �� 88

Configuring Wave 2 Approval Apps �� 92

Fiori My Inbox �� 94

■Chapter 4: Customizing and Extending Standard Fiori Applications �� 97

Installing Eclipse and UI5 Add-Ons �� 97

Downloading the Standard Fiori Application Code �� 99

Importing Fiori Standard Application Code into Eclipse �� 108

Redefining a Standard OData Service �� 116

Fiori Apps Reference Library �� 124

Extending the Fiori Standard Application UI in Eclipse �� 127

Creating a Fiori Extension Project �� 127

Adding Extensions to the Project �� 130

■ Contents

ix

Uploading the Extension Project to the Gateway Server �� 141

Creating a Custom Tile in the Fiori Launchpad �� 147

Assigning Roles to End Users �� 151

Adding a Custom Tile to the Home Page�� 153

Extending a Fiori Standard Application in Web IDE �� 159

Connecting Web IDE to Back-End Systems �� 159

Creating a New Extension Project in Web IDE �� 160

Adding Extensions to the Project �� 162

■Chapter 5: Fiori OData Customization and NetWeaver Gateway Overview �� 177

OData Overview �� 177

OData Development Using NetWeaver Gateway �� 178

Custom Table for the OData Service �� 178

Creating an OData Service in Gateway �� 179

Implementing Business Logic in the OData Service �� 185

Activating and Testing an OData Service �� 190

Building a UI5 App to Consume the OData Service �� 196

Previewing and Testing the UI5 App �� 203

Error Log Monitoring and Troubleshooting Techniques �� 207

Using REST Clients �� 215

■Chapter 6: Fiori Custom Application Development and Tools �� 217

Eclipse �� 217

AppBuilder �� 219

Web IDE �� 220

Theme Designer �� 224

Launching the Theme Designer �� 224

Customizing the Home Screen Background Image �� 226

Customizing Standard Tiles �� 228

Customizing the Login Screen Background Image �� 234

■ Contents

x

Fiori Prototyping Kit and Axure Wireframe Tool �� 238

Fiori Application Architecture Overview �� 242

Visualizing the App �� 245

Designing a Wireframe/Mockup �� 245

Building the Final App �� 248

Developing a Custom Fiori Application �� 249

Creating a New UI5 Project �� 249

Adding Views to the App �� 254

Creating Custom Controls �� 259

Deploying the Custom Application to HANA Cloud �� 263

Web IDE Basics �� 273

■Chapter 7: Introduction to HANA Smart Business and the Internet of Things �� 281

Analytical and Fact Sheet Applications Overview �� 281

Smart Business Apps Overview �� 281

KPI Modeler Overview �� 283

Internet of Things �� 283

UI5 Apps with SAP HANA and Raspberry Pi �� 284

Setting Up the Raspberry Pi �� 287

Detecting the Digital Sensor �� 290

Connecting Sensors to the Raspberry Pi �� 290

Deploying the Java Persistence API in HANA Cloud Platform �� 294

Python Scripts for Passing Data from the Raspberry Pi to HANA Cloud �� 309

Creating a Fiori Front End for IoT �� 311

■Chapter 8: Debugging and Troubleshooting Fiori Applications �� 323

Supported Web Browsers �� 323

Debugging Methods �� 324

Debug Mode in UI5 Apps�� 327

Logging and Network Tracing �� 328

Diagnostics �� 330

■ Contents

xi

Simulating Mobile Devices �� 332

Troubleshooting Errors in Fiori Apps �� 333

Troubleshooting Errors in the Fiori Configuration �� 334

■Chapter 9: Developing Fiori Applications Using Cordova and Kapsel �� 337

Connecting to the SMP Architecture with Fiori�� 337

Fiori Client Application for Mobile �� 341

Introduction to Cordova and Kapsel �� 341

Creating a New Project with Cordova and Kapsel Plugins �� 343

Building Fiori Apps Using Cordova�� 350

Example App Using the Device’s Camera, GPS, and Google Maps �� 355

Accessing the Camera �� 355

Accessing the Barcode Scanner �� 355

Accessing the GPS and Google Maps �� 356

Index �� 359

About the Author

Bince Mathew is a SAP Mobility Technology Consultant who has more than 7 years of expertise in developing Mobile applications and executing various projects in SAP Mobility. He is an expert in SAP Fiori, SMP, SYCLO, AFARIA and native Android application developments. Bince was given the Best Speaker award for SAP Fiori in SAP Inside track 2014 held by SAP. He blogs about various articles on topics related to SAP Mobility in SAP Developer Network site (SDN) and other developer communities. He is also an expert in the field of Internet of Things and connected devices.

xiii

About the Technical Reviewer

Rajanidhi Rajasekaran has 15 years of Techno Functional experience in SAP including 8 years of experience in CRM and 2 years of experience in SAP FIORI. Have worked more than 10 projects of End to End implementation and support in ECC and CRM. Have worked in 4 SAP FIORI projects including developing custom app and also enhancing standard apps. Have worked on SAP 4.6B, 4.6 C, 4.7, ECC 5.0, ECC 6.0, ISU CCS version of SAP R/3 and CRM 5.0, CRM 6.0 (CRM 2007), CRM 7.0 (EHP 1 & EHP 2) version of SAP CRM, Gateway 2.0 SP08, SAP_UI SP09, SAPUI5 1.22.4, SAP WEBIDE, Hana Cloud Platform.

xv

Acknowledgments

This book would not have been possible without the support of the following people.Friends and FamilyMy Parents - Without them I would not be in this position to write about this book, it’s because of them I

am what I am today.Bivin Mathew (My Brother) - Who always motivated me to find time for writing the book. He kept asking

me every week about how far have I completed with my book and that kept me on track.Arun Kumar (My college friend) - He invested his time for giving me his suggestions on improving the

contents of the book.Sreehari V Pillai - He is an expert in SAP HANA and Ui5. He had helped me with the HANA Topics

and gave me some suggestions regarding the custom applications chapter for Fiori. He has also helped me with the custom control development for the fiori application mentioned in this book.

Final ThanksCelestin Suresh John - Senior Manager Editor of Apress who gave me the opportunity to write this book.Rita Fernando - Coordinating Editor of Apress, she helped with preparing a complete schedule on the

timeframe to complete each chapter and helped me with all the technical hiccups I faced during the chapter preparations.

Matt Moodie - Developmental Editor of Apress, Matt basically pointed out my mistakes with drafting a proper chapter, He helped me to effectively represent my ideas in a formatted and professional way. His comments basically made me understand how to write a chapter with clarrity.

Rajanidhi Rajasekaran - Our Technical reviewer for this book, Rajnidhi pointed out the missing parts and mistakes in the book. He also suggested me with the additional topics that I should cover in the book.

xvii

Introduction

When SAP initially launched its ERP software, the GUI for SAP was a very powerfull piece of software at that time. But in this day and age of powerful smartphones, tablets and ultabooks, the old desktop based SAP GUI is getting outdated. In addition to that, the user experience on the old GUI was not able to stand against the fleet of HTML5 based powerfull and more appealing modern UI which is being adopted by many other software products. SAP’s solution to their ageing GUI is know as SAP Fiori. It was one of the first initiative by SAP to achieve their new goal of “One UX for all SAP Products”. Fiori is based on a framework known as UI5 which is built on top of HTML5. Fiori is also compatable with any device with any screen size.

Today almost every software and websites has a mobile compatible version. 4 or 5 years ago this wasn’t the case. Now whenever we hear about an interesting website or a product, we autmotically checks for its mobile app in the app store. The reason for this shift is because, today our smartphones are much more powerfull and even comparable to a 3 or 4 year old PC. Which enables us to browse websites, play graphic intensive games, edit word or PowerPoint presentations on the go and we even consume a huge amount of multimedia content using our phone rather than a pc these days. We need everything on the go and in the palm of our hand. We are using mobile devices on a regular basis, it has become a part of our life. You will hardly find a person who doesn’t have a mobile device in this day and age. Nowadays if your software product don’t have a mobile version, then you are missing out a huge part of your business in the mobile space.

When SAP came up with the new UX strategy to cater to all platforms and devices, they not only made it compatable with all devices, they also made the UI less complicated. This was very crucial because accessing a particular application with too much data or too many options in one single screen might not be an issue in a desktop or in a tablet to a certain extend, but it’s definitely an issue in a much smaller smartphone screen. So they made the new UX simpler and more appealing to the users.

SAP Fiori started with 25 applications which was based on frequently used transactions and processes in SAP. Today Fiori has more than 500 apps and its still growing. And with the release of S/4 HANA, SAP is moving closer to their goal of replacing the old GUI with a new UX standard set by Fiori for all its products. Fiori is being widely accepted by SAP users everywhere around the globe.

Like every niche technology, the developers will need some time to understand the Fiori architecture so that they can utilize Fiori to its full potential. This book will help you to get a more insight to the Fiori architecture, develop custom applications, extend standard Fiori Applications and customize fiori applications. The book takes you on a tour on everything related to SAP Fiori, it also helps you understand to build Fiori applications for Internet of Things, develop native applications using cordova and developing OData services using SAP Netweaver Gateway. The book is divided into 9 chapters, I have tried my best to keep these chapters simple and yet detailed enough for you to understand.

xix

1© Bince Mathew 2015 B. Mathew, Beginning SAP Fiori, DOI 10.1007/978-1-4842-1335-3_1

Chapter 1

Introduction to SAP Fiori

SAP Fiori is a new offering from SAP, based on the HTML5 framework. A great deal of help regarding Fiori is available on the Internet, but the information is scattered across many web sites and sources. Users who are new to SAP Fiori may find it difficult to get an overall idea of what Fiori is. This book provides an overview and gives you the knowledge you need to configure, implement, and extend Fiori applications.

This chapter covers the history of SAP Fiori and examines SAP’s roadmap to a unified user experience (UX) for all of its products.

Why Fiori?In the past, SAP customers complained about the old-fashioned look and feel of the standard screen and the fact that SAP can only be accessed via its desktop GUI for most transactions. SAP listened to this feedback from all over the world and launched a set of applications, based on the HTML5 framework, that includes the most widely and frequently used SAP transactions: purchase order approval, sales order creation, information lookup, self-service tasks, and so on. These HTML5 applications are easy to access seamlessly across desktops, tablets, and smartphones (see Figure 1-1). This collections of apps is named Fiori.

Figure 1-1. The Fiori user experience as seen on all types of devices

Chapter 1 ■ IntroduCtIon to Sap FIorI

2

The term Fiori is an Italian word that means “flowers.” SAP wanted a beautiful UI for its current GUI, and it also wanted to create a simple, elegant user experience. Initially, SAP charged a license fee per Fiori user. After receiving complaints from customers about paying for an additional license on top of their existing ERP license, and from service companies who found it difficult to convince customers to pay the additional cost, SAP announced at the February 2014 SAPPHIRE event that Fiori would be free for any customer with an SAP license. This decision resulted in a higher adoption rate for Fiori and increased market demand for Fiori-based custom UI5 applications.

One drawback of current SAP transactions is that some transactions are complex, and the same transactions are used to perform multiple tasks. As a result, transactions may have many fields and configurations and become difficult to use. For example, suppose a sales and distribution (SD) consultant accesses transaction VA01 to perform SD-related tasks (see Figure 1-2). The transaction works fine if the user is familiar with the complex steps and fields required to complete the task. But a sales representative whose priority is making sales rather than spending time creating a sales order in the complex GUI, this transaction may be difficult, and many of the fields and options may seem confusing and irrelevant.

To avoid such cases, SAP simplified its complex UIs and split them into multiple simple UIs whose elements make sense to the user. For example, when a sales representative uses the Fiori Sales Order application shown in Figure 1-3, all the elements are useful. The sales rep can create sales orders without using the SAP GUI—the rep can even create a sales order on the go, from a mobile phone.

Figure 1-2. An example scenario with the VA01 Create Sales Order transaction


3

In addition, to perform simple operations, SAP users sometimes have to execute multiple transactions. SAP split these complex transactions into smaller apps, simplifying them and making them specific to the roles of particular users. At the same time, SAP merged repetitive transactions. Using this approach, SAP created role-based applications: the first wave of Fiori applications (known as Fiori Wave 1 apps) consisted of a set of 25 applications targeted at users such as managers, employees, sales representatives, and purchasing agents.

Introduction to the SAP UX Strategy and the SAP Fiori UXThe new UX for SAP simplifies the old GUI and makes it compatible with any device of any screen size that supports HTML5, including mobile devices. This change was a big step for SAP—it adopted an entirely new technology and strategy for its UI.

SAP UX StrategyEnterprise resource planning (ERP) software was developed to provide increased functionality. Although ERP solutions have powerful features, end users sometimes find the UI complex and even intimidating. Most of the time, users don’t use ERP software based on its features and its ability to handle complicated tasks; they give priority to UI ease of use and the ability to complete their required tasks with the least amount of effort.

For example, consider Facebook. A user may find it easy to use the Facebook web site when they have access to a desktop or laptop. But when the user is on the move, accessing the same fully featured web site via a mobile device can be complex and frustrating. Using the Facebook mobile app gives the user a simpler UI and easier layout to update their status, check notifications, see what their friends are up to, and so on. The most powerful and sophisticated UI is not always the best answer for providing users with a good UX. For this reason, SAP put its users first and developed an intuitive, consistent, simple UX. It saves users time and increases their productivity. The UX provides benefits like these:

• Fewer user errors

• Decreased user training costs

• Higher satisfaction rates

Figure 1-3. The Fiori Sales Order application simplifies the VA01 transaction by including only the minimum required fields to complete the task


4

To achieve the goal of providing this enhanced UX, SAP has three primary areas of focus:

• New: It’s all about providing consumer-grade user experiences for new applications.

• Renew: SAP provides an improved UX for its existing applications. As a start, SAP based the Fiori apps on some of the most commonly used SAP applications.

• Enable: SAP helps its partners and customers improve the UX of other existing SAP software.

Initially, SAP developed Fiori apps with the Renew strategy in mind by creating a new UX for the existing and most commonly used business scenarios in SAP software. But later, this approach evolved into a new standard UX strategy for all SAP software. With the release of S/4HANA, SAP is moving closer to its goal of “one UX for all SAP solutions.”

SAP Fiori UXThe SAP Fiori UX is the new face of SAP for its business users across devices, platforms, and deployment options. It provides optimal usability and simple business interactions and ease of use. Fiori is not just a new UI or a new theme on top of existing SAP transactions; it’s a new concept of providing user-centric applications.

A traditional SAP transaction generally has numerous screens, fields, and tabs that encompass multiple features and types of functionality and can serve multiple users. These transactions end up with many fields, navigations, and features that don’t apply to all users—rather, each part, tab, or area of the transaction is targeted at a different type of user (see Figure 1-4).

Figure 1-4. A sample standard SAP transaction


5

With SAP Fiori, apps are developed from a user’s perspective: the apps are user-centric. These apps are simple, relevant to a particular user role, and designed to carry out specific tasks and activities. Basically, Fiori apps break the big, standard SAP transactions into multiple small, easy-to-use apps that make more sense to individual users (see Figure 1-5).

Figure 1-5. Standard transaction converted into smaller, simple, role-based, user-centric Fiori apps

In addition to having apps for specific tasks, with Fiori, the user has access to a fleet of apps based on the roles that particular user handles. For example, suppose a user is handling multiple roles in an organization: the user is an employee but also approves finance-related activities as a manager. As a manager, the user needs access to certain approval-related apps; and as an employee, the user needs to request leave, update timesheets, submit claims for travel expenses, and so on. Fiori gives the end user a single point of entry to access all apps relevant to their roles: the Fiori launchpad (Chapter 2 goes into more depth about it). When users log in to the Fiori launchpad, they see all the apps that have been authorized for them, based on their roles (see Figure 1-6).

http://dx.doi.org/10.1007/978-1-4842-1335-3_2


6

Apps in the Fiori launchpad are displayed as tiles, as shown in Figure 1-7. Each tile is like a shortcut icon on your desktop that opens an app when you click it.

Figure 1-6. Sample Fiori launchpad running on a tablet


7

When you click a tile, the app opens as master-detail page or as a full-screen app. In a master-detail view, the master page is on the left and the detail is on the right (see Figure 1-8).

Figure 1-7. Fiori launchpad

Figure 1-8. Master-detail view


8

Users can drill down into detail pages to navigate to other pages. For example, in Figure 1-9, additional details about a material are shown on a new page that loads in the same area as the previous detail page. This enables users to navigate to more detailed views while also letting the UI developer minimize the amount of data that must be shown on a single screen—too much data on a single screen leads to a complex, confusing UX.

An app can also use the full screen, as shown in Figure 1-10. The choice of whether to use a master-detail app or a full-screen app is based on the scenario and the type of data that needs to be presented.

Figure 1-9. Line-item page

Figure 1-10. Master list page


9

In a full-screen app, unlike in the master-detail page design, the detail page is loaded as a new page (see Figure 1-11). Further drill-down pages—such as item details or additional information about items on the detail pages—are also loaded full-screen (see Figure 1-12).

Figure 1-11. Detail page/list

Figure 1-12. Line item/detail


10

SAP Fiori Design InspirationThe inspiration for the design of Fiori came from a web design and graphic design trend that is standard in most web-based applications today: flat design. You can see flat design everywhere, from the latest IOS 7 flat icons; to Android’s material design; to web pages that use simple, flat designs and avoid the complicated, graphics-heavy, skeuomorphic look of the past.

What is a skeuomorphic design? It’s a method or style in which the physical characteristics of an actual object are captured in digital form. For example, look at the calculator shown in Figure 1-13. Such a design places unnecessary load on the device’s CPU/GPU, which in turn can result in a laggy experience when many such designs are loaded at the same time. Web pages that use skeuomorphic designs have heavy page sizes, which results in slower loading times.

Figure 1-13. A calculator based on skeuomorphic design

A flat design is light and simple. It has a minimalist look, with the emphasis on usability. For example, look at the calculator in Figure 1-14.


11

Microsoft was one of the first tech companies to adopt flat design, with its tile (formerly known as Metro UI) design in Windows 8 (see Figure 1-15). This design trend was quickly followed by other tech companies including Apple and Google. One of the main advantages of flat design in mobile devices is that it uses fewer resource such as battery life and GPU. And because the design is light in size, loading times and animations when navigating from one screen to another are smooth. No shadow effects on icons or in the apps tax the GPU. Figure 1-16 shows the transition of iOS from a skeuomorphic design to a flat design.

Figure 1-14. A calculator based on flat design


12

Figure 1-16. Skeuomorphic design in iOS 6 (left) vs. flat design in iOS 7

Figure 1-15. Windows 8 flat design


13

Here are the primary things customers associate with a flat design:

• Simple

• Clean

• Colorful

• Modern

• Trendy

And these are the advantages of flat design:

• Ease of use

• Modern appearance

• Responsive designs that are more efficient

• Faster loading times

• Straightforward design with no special effects that affect performance

Introduction to SAP FioriAs mentioned earlier, Fiori was developed based on the HTML5 framework, with an emphasis on a flat UI design and user-centric apps. This helped SAP create a responsive UI that’s compatible with all screen sizes and runs on any device that has an HTML5-compatible browser. Fiori was developed based on the design principles shown in Figure 1-17:

• Role-based

• Each app is specific to a user’s role: manager, employee, salesperson, and so on.

• The role-based approach helps in developing user-centric apps.

• A user may have multiple roles. Depending on the nature of their responsibilities, the same user may perform different tasks across multiple business domains. Apps that are developed to carry a specific task that belongs to different modules (HR, SRM, CRM, and so on) can be assigned to users based on their roles.

• Developers can visualize a specific user’s task and develop a UI that relates to the nature of the user’s work.

Figure 1-17. Fiori design principles


14

• Responsive

• Because it’s HTML5-based, Fiori works seamlessly across all screen sizes and devices that have an HTML5-compatible browser.

• Fiori apps adjust their layout based on the available screen real estate.

• Fiori supports multiple interaction modes, such as keyboards, mice, and touch-based inputs.

• Fiori works independently of platform or ecosystem (Windows, Android, or iOS). The apps work and respond the same across all platforms.

• Simple

• The simple UI helps the user complete tasks quickly and easily.

• Fiori apps emphasize a 1:1:3 approach: one user, one use case, and three screens (desktop, tablet, and mobile).

• Coherent

• No matter how many apps Fiori has, they all have the same design footprint and thus the same look and feel.

• This helps users become familiar with Fiori apps. After using one Fiori app, users feel comfortable with other Fiori apps, because every app speaks the same design language.

• Instant value

• The time required to train users in the new UI is minimal for Fiori. The UI is simple and follows the same design pattern across apps, which makes it easier for users to adopt the new UI quickly. Hence the cost of training users is also minimized.

Fiori Applications OverviewThe Fiori apps have been launched in waves. The first wave was called Wave 1 and included 25 apps. The next wave was called Wave 2, and so on.

Fiori Wave 1The initial 25 Fiori apps were categorized as follows:

1. Manager

• Approve Leave Requests (HR-based)

• Approve Purchase Contracts (MM-based)

• Approve Purchase Orders (MM-based)

• Approve Requests (generic workflow application)

• Approve Requisitions (MM-based)

• Approve Shopping Cart (SRM-based)


15

• Approve Time Sheets(HR-based)

• Approve Travel Expenses (HR-based)

• Approve Travel Requests (HR-based)

• My Spend

2. Employee

• My Benefits (HR-based)

• My Leave Requests (HR-based)

• My Paystubs (HR-based)

• My Shopping Cart (SRM-based)

• My Timesheet (HR-based)

• My Travel Requests (HR-based)

• Track Shopping Carts (SRM-based)

3. Sales Representative

• Change Sales Order (SD-based)

• Check Price And Availability (SD-based)

• Create Sales Order (SD-based)

• Customer Invoices (SD-based)

• Track Sales Order (SD-based)

• Track Shipments (SD-based)

4. Purchasing Agent

• Order From Requisitions (MM-based)

• Track Purchase Order (SD-based)

Fiori Wave 2As mentioned previously in the architecture section, from Fiori Wave 2 on, Fiori apps are primarily classified as follows:

• Transactional apps

• Analytical apps

• Fact sheets


16

Transactional ApplicationsTransactional applications are used for task-based access. Figure 1-18 shows a sample transactional app.

Figure 1-18. Sample transactional app

These apps give you access to transactions that let you create or change an entire functional process. Because the Fiori UI gives priority to simplifying tasks, such apps provide guidance on how to complete the tasks. Transactional apps are compatible with the SAP HANA database and any other database used by SAP ERP.

Analytical ApplicationsThese apps give you insight into a particular area and provide reports that let you drill down into the app for further KPI analysis of the data (see Figure 1-19). The data used to generate these reports may be huge, ranging from several hundred megabytes to gigabytes. By using the processing power of HANA, these apps generates reports in seconds.

beginning sap fiori -...

Documents