sap fiori user experience (ux) - sapsa.se ¥-fungerar-det... · pdf filehur fungerar...

29
Hur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

Upload: hatuyen

Post on 14-Feb-2018

240 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

Hur fungerar det tekniska?

SAP Fiori User experience (UX)

Anders Heimer @HeimerAnders

Niklas Packendorff @packendorff

Page 2: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 2

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the

permission of SAP. This presentation is not subject to your license agreement or any other service or subscription

agreement with SAP. SAP has no obligation to pursue any course of business outlined in this document or any related

presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation

and SAP's strategy and possible future developments, products and or platforms directions and functionality are all

subject to change and may be changed by SAP at any time for any reason without notice. The information in this

document is not a commitment, promise or legal obligation to deliver any material, code or functionality. This

document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied

warranties of merchantability, fitness for a particular purpose, or non-infringement. This document is for informational

purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this

document, except if such damages were caused by SAP´s willful misconduct or gross negligence.

All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ

materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements,

which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

Legal disclaimer

Page 3: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

Arkitektur

Utveckla & Anpassa

Mobilisera

Implementera

Page 4: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 4

Back-end prerequisites vary across stack components and across the different types of apps.

For example, apps that fall into the SAP Analytical Apps Type require HANA as the database.

Minimum release may vary per app.

Components Transactional Apps Analytical Apps Factsheet Apps

SAP Hana Innovations for

Business Suite

• Minimum SAP Ehp 7 for SAP ERP SP02

Minimum SAP EhP3 for CRM SPS 02

• Minimum SAP Ehp 3 for SAP SRM 7.0 SPS 02

• SAP HANA 1.0 SPS06 • SAP HANA 1.0 SPS06

Older Releases of SAP Business

Suite

• Minimum SAP ERP 6.0 SP15 or higher

• Minimum SAP SRM 7.0 SP11 or higher

• Minimum SAP CRM 7.0 SP06 or higher

N/A customer needs to be on SAP

Hana Innovations for Business Suite

• N/A customer needs to be on SAP

Hana Innovations for Business Suite

Middleware

• Minimum NW 7.31 SP04 and SAP NW Gateway 2.0

or or NW 7.40 SP04

• NW 7.31 SP04 or NW 7.40 SP04

HANA XS Engine

• NW 7.31 SP04 or NW 7.40 SP04

• HANA XS Engine

Database • HANA or any other DB • HANA • HANA

For more detailed information go to http://help.sap.com/fiori_overview

App types

Software Prerequisites What do I need to get started?

Page 5: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 5

Arkitekturöversikt

SAP Mobile Platform

SAP Business Suite

(ERP, SRM, …)

SAP Business Suite

(ERP, SRM, …) …

Frontend Server UI5 Content OData Services

Database

Page 6: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 6

Any DB (1) / HANA

Back-End Server (NW ABAP)

SAP Business Suite

R

R

Front-End Server (NW ABAP)

SAP NetWeaver Gateway

NW Central UI Add-On

SAP Business Suite

Product-Specific UI Add-Ons

Reverse Proxy (SAP Web Dispatcher)

R

R

HTTPS (OData)

Trusted RFC

HTTPS (HTML / OData)

HANA XS Engine (3)

VDM Reuse Content

ERP CRM SCM

SAP Fiori App Content

ERP CRM SCM SAP SmartBusiness

KPI Framework (3) (KPI modeler, generic drill-down app)

Search

Models (2)

INA Search

Protocol R

Progression:

(1) Only Transactional Apps can run on

any DB. Fact sheets & Analytical Apps

require HANA.

(2) Only Fact Sheets requires Search

Models.

(3) Only Analytical Apps requires

HANA XS Engine and additionally, KPI

Framework is needed for Smart

Business Apps.

Detaljerad arkitektur

Page 7: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 7

Säkerhet

Reverse

Proxy

SAP NW

Gateway SAP ECC

Secure Configuration

/ Network Setup /

Authentication Authorization

Network and Reverse Proxy Setup

Authentication

User Management

Authorization

System Hardening (Securing Trusted RFC connection)

Page 8: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

Arkitektur

Utveckla & Anpassa

Mobilisera

Implementera

Page 9: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

SAP Web IDE* (formally named SAP River RDE)

Deliver amazing experiences quickly and efficiently

*Integrated Development Environment

Page 10: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 10

How to deliver amazing apps at business speed?

Primarily functionality-focused

App development lags need

Functional apps with amazing user

experience

App creation at business speed

011101101 111010110110 1101010110

Big Data

Today

Cloud Mobile

With SAP Web IDE

Page 11: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 11

Today

Speeding development by reducing effort

Open browser-based

development environment

and generate App UI from

prototype or create UI

through drag and drop

tools

Change the app

using wizards or

drag and drop tools

and code editor with

code completion

Instantly preview

the application

and collaborate

seamlessly with others

for revisions

Mockups Install/

Update IDE

Manually

Recreate UI

Code from

Scratch

Wait for

Reviewers

Find Stable

Test Site

Explain

Access/Run

Revise

With SAP Web IDE

Page 12: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 12

Experience SAP Web Integrated Development Environment

(SAP Web IDE)

Simpler development

creates amazing apps

faster

Tighter collaboration

with developers, business

analysts and designers

Increased productivity

to create more apps, no

need for a complex

infrastructure

Page 13: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 13

SAP Web IDE Simplify SAPUI5 development – support end-to-end application lifecycle with one tool

Prototype Develop Test Package/

Deploy

Extend

This is the current state of planning and may be changed by SAP at any time.

Page 14: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 14

Get accurate prototypes from designers/analysts

Create the UI of an app using drag

and drop tools

Leverage mockup created in

prototyping tool to generate the

SAPUI5 application

Seamless hand-off from business

expert to developer

*Planned innovation 2015

Page 15: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 15

Highly efficient development tools

Code anywhere

Wizard templates for creating simple and

complex SAP Fiori and SAPUI5 apps

Code editor with JS, XML and SAPUI5-

specific code completion

Collaborative development and project

persistency

Integration with code quality tools

Page 16: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 16

Instant preview in SAP Web IDE

Instantly preview your application in

browser at different resolutions and in

different languages

Include real or mock data (auto

generated or created on your own)

Quickly send the application to

others to view

Collaborate with others on the

previewed application

Page 17: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 17

Seamlessly deploy to run on

any device – automatically

renders for phone, tablet,

desktop

Deploy to SAP Mobile

Platform*, ABAP, or

SAP HANA Cloud

Platform/SAP HANA XS*

Support for all environments

*Planned for Q4 2014

Page 18: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 18

Extend existing apps

Extend SAP Fiori app without

changing the original app

Create a new project to include all

the changes

Use wizard templates, visual

extensibility tool, and code editor

Page 19: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP AG or an SAP affiliate company. All rights reserved. 19

Get started now!

Try it today on the

SAP HANA

Marketplace

http://marketplace.saphana.com/p/3334

Get more

information at

SCN

http://scn.sap.com/docs/DOC-55465

i

Page 20: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

Arkitektur

Utveckla & Anpassa

Mobilisera

Implementera

Page 21: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 21 Public

Desktop & Mobile Web Browser

(HTML5)

SAP Fiori Client mobile app

– Improves caching, life cycle

management, etc. (SMP optional)

Enhanced with SAP Mobile Platform (SMP)

3.0 optimized for deployment in enterprise

infrastructure

SAP Fiori Client mobile app + Kapsel

SDK

– Native device capabilities

– Foundation for Offline access, push

notifications and additional security

Hybrid Web Container + Kapsel SDK

– Leverage third-party native container to

run SAP Fiori via SAP Mobile Platform

SAP Fiori Client

mobile app

SAP Fiori Client mobile app

Kapsel SDK +

Mobile Specific Options

Lab Preview

Mobilizing Apps applying SAP Fiori UX

Desktop & Mobile Web

Browser (HTML5) SAP Enterprise Portal -

desktop & mobile

consumption

SAP Business Suite

(ERP, SRM, …)

SAP Business Suite

(ERP, SRM, …) …

Frontend Server UI5 Content OData Services

Page 22: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 22 Public

Mobilizing Apps applying SAP Fiori UX SAP Fiori Client

Challenges

Startup performance

Attachment handling in full screen mode

Native device capabilities support

Advanced security

Solution

Provide HTML5 and CSS 3.0 browser for iOS, Android, and Windows

Support of app-specific on-device persistent caching strategy

− Direct URL download with cache synchronization on app-level via manifest timestamp

− Optimized URL download with cache synchronization based on manifest content via SMP

Full-screen mode either by dedicated JavaScript API or by meta-data tag in HTML

Attachment and document viewer

− PDF, MS Word, MS Excel, MS PowerPoint, PNG, et cetera

− Viewer is launched in full-screen mode within the browser frame

− By an action or by a gesture it is possible for the end user to close the attachment window

Web Server

SAP Mobile Platform

Server

Optimized

Optimized

Direct

Page 23: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

Arkitektur

Utveckla & Anpassa

Mobilisera

Implementera

Page 24: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 24 Public

SAP Side Panel

Content RDS

SAP Mobile

Platform RDS

SAPUI5 Design

RDS

SAP Screen

Personas RDS

SAP Fiori

Apps RDS

SAP Fiori

Infrastructure RDS

SAP Rapid Deployment for User Experience Solutions

Page 25: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

25 © 2014 SAP SE or an SAP affiliate company. All rights reserved.

SAP UX Adoption Service Kits for Fiori and Screen Personas

Benefits

• Plan your roadmap based on your needs and aligned with

SAP’s UX strategy

• Deploy the foundation to get up and running quickly

• Implement the apps and scenarios you need now and

easily add more as needed

• Improve employee efficiency with beautiful, intuitive and

modernized screen flows and apps

UX Adoption Service Kits from SAP make it easy to

plan, install and further extend SAP Fiori and SAP

Screen Personas in your organization – for an instant

boost in productivity.

Page 26: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 26 Public

SAP UX Adoption Service Kits for Fiori and Screen Personas

Define Roadmap for

SAP Fiori and

Screen Personas

User

Experi

ence A

doption

Deploy foundation

and bring live first

SAP Fiori apps and

Screen Personas

Screen flows

1 - 2 weeks 9 – 10 weeks 4 – 5 weeks

Deploy additional

SAP Fiori apps and

Screen Personas

Screen flows

ADVISORY Service Kit

LAUNCH Service Kits

ACCELERATE Service Kits

Page 27: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 27 Public

Useful links

SAP Web IDE (formerly called “River” RDE)

Trial version (Beta Release):

https://account.hanatrial.ondemand.com/cockpit

Official documentation:

https://help.hana.ondemand.com/ under Platform Solutions choose SAP River Rapid Development Environment

Within SAP River RDE: Choose Help > Documentation

Additional related information to SAP Web IDE

SAP HANA Cloud Platform:

https://help.hana.ondemand.com/ Go to SAP HANA Cloud Platform > Getting Started

SAP Gateway:

http://help.sap.com/nwgateway20

SCN (SAP Community Network)

SAPUI5 & SAP Web IDE:

http://scn.sap.com/community/developer-center/front-end

SAP for Mobile:

http://scn.sap.com/community/mobile

SAPUI5

UI Development Toolkit for HTML5 - Demo Kit (interactive doc

on SAPUI5 / OpenUI5):

https://sapui5.hana.ondemand.com/sdk/

https://openui5.hana.ondemand.com/

OpenUI5:

http://sap.github.io/openui5/

UI Development with SAPUI5 documentation:

https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb571

0148368de02b150bce3.html

SAP HANA Marketplace

http://marketplace.saphana.com/p/3334

SAP HANA Academy

YouTube Channel:

http://www.youtube.com/user/saphanaacademy

SAP Enterprise Portal

http://scn.sap.com/community/enterprise-

portal/blog/2014/06/23/sap-enterprise-portal-74-sp7-sap-fiori-design-

in-the-sap-enterprise-portal

Page 28: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

TACK!

Anders Heimer @HeimerAnders

Niklas Packendorff @packendorff

Page 29: SAP Fiori User experience (UX) - sapsa.se ¥-fungerar-det... · PDF fileHur fungerar det tekniska? SAP Fiori User experience (UX) Anders Heimer @HeimerAnders Niklas Packendorff @packendorff

© 2014 SAP SE or an SAP affiliate company. All rights reserved. 29 Public

© 2014 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an

SAP affiliate company.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE

(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark

information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its

affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or

SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing

herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or

release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future

developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for

any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-

looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place

undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.