Creating Engaging SAP User Interfaces with Adobe Flex

2010 Adobe Systems Incorporated. All Rights Reserved.

CD209 - Creating Engaging SAP User Interfaces with Adobe FlexAndreas Tan | Senior Enterprise Architect, Adobe SystemsMatthias Zeller | Group Product Manager, Adobe Systems

2010 Adobe Systems Incorporated. All Rights Reserved. 2

Adobe revolutionizes how the world

engages with ideas

and information

2


Our Customers

Enterprise IT & Line of Business

CreativeProfessionals Application DevelopersMarketers, Publishers

and Advertisers Knowledge Workers

Create and optimize media

assets and online ROI

Design rich, meaningful customer

engagements

Maximize creative

breakthrough and impact

Build engaging, effective

applications across

screens

Enhance cross-team productivity

and collaboration

3


Enterprises Face a User-Centric Moment of Truth


What Are Intuitive User Experiences?

Effective, Efficient, Engaging, Easy to learn, Error free Personalized, responsive experiences across devices and channels Communication & collaboration in context Harmonization of backend processes and services


Why Do Intuitive User Experiences Matter?

ForresterAugust 7, 2010The State Of Enterprise IT Budgets: 2010by Heidi Lo and Andrew Bartels


Adobe LiveCycle ES2

RIA SERVICESDOCUMENT SERVICES

PROCESS MANAGEMENT


Adobe Project Hendrix

A new user experience for Adobe call center representatives Built on SAP CRM, Genesys CTI and custom applications

Mission: Reduce average handling time Increase first call resolution Increase customer satisfaction

8


The Discovery phase


The Discovery phase


The Discovery phase


The Discovery phase


The Discovery phase

Unnecessary steps

Too much room for error

Too many steps, processes too long

Process was tied to the systems

Too many different systems Too many band-aids


The Discovery phase


The Discovery phase

No progressive disclosure No data visualization

Poor information architecture Tiny buttons, no keyboard shortcuts


What we found

The tools The processes

SNSSNS

CSUICSUI

CTI/Genesys

CTI/Genesys

LWSLWS

UnlockingUnlocking

UPSUPS

1. Find SKU

2. Enter payment details

3. Check billing address

4. Check delivery address

5. Order confirmation

1. Check elligibility, register previous product, if purchase is from reseller, POP needs to be sent

2. Find upgrade SKU

3. Order new product



6. Escalate for validation by tier 1 senior


1. Check elligibility

2. Find product

3. Order new product



6. Take payment details


1. Find the original order

2. Register orginal PSN

3. Enter serial number in serial number issuer

4. Give reason for reserialisation and register PSN

5. Cancel old PSN and remove from contracts

6. Adds SN to DNR server

1. Send TOL form to customer

2. Status “Pending Customer Action”, awaiting the TOL form to be returned.

3. When CS receives the completed TOL form:

4. Attaches it to the case

5. Transfer from original owner to the new owner

6. Email sent to original and new owner that TOL has been completed

ESD returns

1. Register serial number

2. Check elligibility (within 30 days, purchase from direct)

3. Create RMA number (returns number)

4. Send LOD by email

5. Customer sends back digitally signed LOD

6. Case delegated to a Tier 1 CS agent

7. Agent checks LOD, disables serial number and escalates to Senior

8. Senior releases RMA to trigger payment

1. Find CRM Delivery N°

2. Find UPS Shipping Tracking N°

3. Enter N° in UPS website

Shrink Wrap returns

1. Register serial number

2. Check elligibility (within 30 days, purchase from direct)

3. Create RMA number (returns number)

4. Disable serial number

5. For free uplift: Uplift arranged

6. Customer sends software with RMA to warehouse

7. Warehouse receives product, releases RMA and funds automatically sent to customer

FedexFedex

NotepadNotepad

OutlookOutlook

KanaKana

KnovaKnova

CRMCRM


Multitude of slow, cumbersome tools.

Overly complicated processes.

Frustrated agents.

Dissatisfied customers.

What we found


Our vision

Provide an all-in-one, process-driven solution.


Turning the vision into reality






Before and after


Buying products


Buying products


Documenting a call


Documenting a call


CTI


CTI


Demo

29


Adobe LiveCycle RIA Services

LiveCycle Mosaic ES

Assemble intuitive, personalized and highly productive applications

through a composite RIA framework

LiveCycle Collaboration Service

Build real-time, multi-user collaboration into existing or new rich Internet applications

LiveCycle Data Services ES

Improve the performance and simplify the

development and integration of your RIA

application with backend systems


Options to Integrate Flash/Flex with SAP applications

Web Dynpro Rich Islands for Flash

Flex apps connecting to SAP via SOAP or REST

Flex apps connecting to SAP via LiveCycle Data Services

31


Embedded Flex in SAP: Web Dynpro Rich Islands for Flash

Rich UI components Mashups like Google maps Dashboards Flash Video and Adobe Connect

http://wiki.sdn.sap.com/wiki/display/EmTech/SAP+Rich+Islands+for+Adobe+Flash

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Direct connections between SAP and Flex/Air

HTTP

SOAP connection

REST connection


Direct connections between SAP and Flex/Air

Development effort can be reduced Missing Functionality

Data Management Real-time Messaging

Possible performance issues Rendering of XML in flash player Network traffic and SAP system load High volume of users

Why is XML/SOAP not always the best solution?


LiveCycle Data Services

Improved Data Management Most efficient framework for data

handling between RIA Client, RIA Server and backend SAP system

Based on CRUD, as is the SAP Enterprise Services approach

Increased Performance Optimized protocol between RIA

Client and RIA Server Lazy Loading and Paging reduce

requests on SAP server and network Integration with Enterprise security

infrastructure Real-time messaging based on push

mechanism PDF generation and WSRP portal

support

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36

What is LiveCycle Data Services ES

Client

Client

Client

Web ServerJ2EE Server

Live Cycle Data

Services

Client application is typically an Adobe Flex or AIR application. Flex and AIR applications use Flex components to communicate with the LiveCycle Data Services ES server

The LiveCycle Data Services ES server is a combination of a J2EE web application and a highly scalable network socket server.

LCDS ES application consists of two parts• Client-side application• Server-side Java web application


LiveCycle Data Services ES Features

Web Service

Live Cycle Data Services ES

RPC Services

HTTP Service

Remoting Service

Publish & Subscribe

Messaging Services

Collaboration

Real Time Data Push

Data Syncronization

Data Mgmt Services

Off-line Applications

Data Paging

Service Adapters

Live Cycle

Hibernate

Cold Fusion

Java or SAP JCO

JMS

Custom

Proxy Service

Portal Deployment

RIA PDF Generation

SQL


RPC Services Diagram (Authentication for SAP sample)

• Enable asynchronous requests to remote services

• Process the requests and then return data directly to the client

• Access data through client-side RPC components that include:

• HTTP GET or POST (HTTP services)• SOAP (web services)• Java objects (remote object services)

Use Remoting (remote object services) where possible due to the significant gains in response time!


Data Management Service

• Supports automatic and manual synchronization of a common set of data

• On multiple clients

• On server-side data resources

• The client automatically tracks changes made to the objects

• Can apply those changes on the server objects

• The server can update any clients viewing these objects


Physical Architecture of Flex, LCDS and SAP Integration

Load

Bala

nce

r L

oad

Bala

nce

r

SAPSAPYour ApplicationYour ApplicationJBoss LCDS Cluster

Server 1.2

...

User DesktopUser Desktop

Internet Browser

Flash Player

Your Flash Application

Internet Browser

Flash Player

Your Flash Application

JCO - JNI – TCP/ IP Server 1.3

...

Server 1.n

AMF / HTTPS

FIR

EW

AL

LFIR

EW

AL

L FIR

EW

AL

LFIR

EW

AL

L


LiveCycle Data Services ES client architecture

41


Configuration between LCDS and JCO / Backend APIs

42

Sample MXML codes to make connection from Flex to the backend thru LCDS

• For Manage Data Services <mx:DataService id="customerService" destination="CustomerService" autoCommit="false" autoSyncEnabled="true"/>

• For Remote Object Services <mx:RemoteObject id="loginRO" destination="LoginService"/>


Data-management-config.xml

43

<destination id="CustomerService"> <adapter ref="java-dao" /> <properties>  <source>com.adobe.itapps.demo.service.CustomerService</source> <scope>application</scope> <metadata> <identity property="customer"/> </metadata> …. </properties></destination>


Remoting-config.xml

44

<destination id="LoginService"> <properties>

<source>com.adobe.isapps.sparta.ds.LoginService</source> </properties></destination>


JCO Connection considerations

45

Depending how your application works, you need to decide whether to you use Stateful or Stateless JCO connection;

Example: CRM call center locks customer record while a user is working on a transaction for the customer. In this case, Stateful maybe appropriate to use


Future Roadmap: SAP Connector for LiveCycle Data Services

46


SAP Adapter for LCDS Overview

47

Connector to SAP to ease development of RIA on top of SAP applications

Flash developers can find and invoke an RFC function as a Flex remote service

Flash Builder plug-in provides model driven development for SAP RIA development


SAP Flash Builder Integration

48

Connect to one or more SAP systems Introspect and find RFC modules and

functions


Data model view with relationships

49

Map SAP RFC functions to Flex remote functions

Customize functions in Flex - Modify function names, parameters, inputs and outputs

Generate ActionScript facades to communicate with SAP


Questions?

Andreas Tan – [email protected] Zeller – [email protected]

50

Technology

Creating Engaging SAP User Interfaces with Adobe Flex