creating engaging sap user interfaces with adobe flex
DESCRIPTION
A presentation from SAP TechEd 2010. It covers different ways of integrating Flex applications with SAP and discusses how Adobe internally has developed a Flex based frontend on top of SAP CRM to make call center agents more efficient.TRANSCRIPT
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
2010 Adobe Systems Incorporated. All Rights Reserved.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
Enterprises Face a User-Centric Moment of Truth
2010 Adobe Systems Incorporated. All Rights Reserved.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
Why Do Intuitive User Experiences Matter?
ForresterAugust 7, 2010The State Of Enterprise IT Budgets: 2010by Heidi Lo and Andrew Bartels
2010 Adobe Systems Incorporated. All Rights Reserved.
Adobe LiveCycle ES2
RIA SERVICESDOCUMENT SERVICES
PROCESS MANAGEMENT
2010 Adobe Systems Incorporated. All Rights Reserved.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
The Discovery phase
2010 Adobe Systems Incorporated. All Rights Reserved.
The Discovery phase
2010 Adobe Systems Incorporated. All Rights Reserved.
The Discovery phase
2010 Adobe Systems Incorporated. All Rights Reserved.
The Discovery phase
2010 Adobe Systems Incorporated. All Rights Reserved.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
The Discovery phase
2010 Adobe Systems Incorporated. All Rights Reserved.
The Discovery phase
No progressive disclosure No data visualization
Poor information architecture Tiny buttons, no keyboard shortcuts
2010 Adobe Systems Incorporated. All Rights Reserved.
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
4. Check billing address
5. Check delivery address
6. Escalate for validation by tier 1 senior
7. Order confirmation
1. Check elligibility
2. Find product
3. Order new product
4. Check billing address
5. Check delivery address
6. Take payment details
7. Order confirmation
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
2010 Adobe Systems Incorporated. All Rights Reserved.
Multitude of slow, cumbersome tools.
Overly complicated processes.
Frustrated agents.
Dissatisfied customers.
What we found
2010 Adobe Systems Incorporated. All Rights Reserved.
Our vision
Provide an all-in-one, process-driven solution.
2010 Adobe Systems Incorporated. All Rights Reserved.
Turning the vision into reality
2010 Adobe Systems Incorporated. All Rights Reserved.
Turning the vision into reality
2010 Adobe Systems Incorporated. All Rights Reserved.
Turning the vision into reality
2010 Adobe Systems Incorporated. All Rights Reserved.
Before and after
2010 Adobe Systems Incorporated. All Rights Reserved.
Buying products
2010 Adobe Systems Incorporated. All Rights Reserved.
Buying products
2010 Adobe Systems Incorporated. All Rights Reserved.
Documenting a call
2010 Adobe Systems Incorporated. All Rights Reserved.
Documenting a call
2010 Adobe Systems Incorporated. All Rights Reserved.
CTI
2010 Adobe Systems Incorporated. All Rights Reserved.
CTI
2010 Adobe Systems Incorporated. All Rights Reserved.
Demo
29
2010 Adobe Systems Incorporated. All Rights Reserved.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
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!
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LiveCycle Data Services ES client architecture
41
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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"/>
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Data-management-config.xml
43
<destination id="CustomerService"> <adapter ref="java-dao" /> <properties> <!-- <use-transactions>true</use-transactions> --> <source>com.adobe.itapps.demo.service.CustomerService</source> <scope>application</scope> <metadata> <identity property="customer"/> </metadata> …. </properties></destination>
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Remoting-config.xml
44
<destination id="LoginService"> <properties>
<source>com.adobe.isapps.sparta.ds.LoginService</source> </properties></destination>
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
Future Roadmap: SAP Connector for LiveCycle Data Services
46
2010 Adobe Systems Incorporated. All Rights Reserved.
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
2010 Adobe Systems Incorporated. All Rights Reserved.
SAP Flash Builder Integration
48
Connect to one or more SAP systems Introspect and find RFC modules and
functions
2010 Adobe Systems Incorporated. All Rights Reserved.
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
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Questions?
Andreas Tan – [email protected] Zeller – [email protected]
50
2010 Adobe Systems Incorporated. All Rights Reserved.