Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2010 Adobe Systems Incorporated. All Rights Reserved.
CD209 - Creating Engaging SAP User Interfaces with Adobe Flex
Andrea...
2010 Adobe Systems Incorporated. All Rights Reserved. 2
Adobe revolutionizes
how the world
engages with ideas
and informat...
2010 Adobe Systems Incorporated. All Rights Reserved.
Our Customers
Enterprise IT &
Line of Business
Creative
Professional...
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, Engagin...
2010 Adobe Systems Incorporated. All Rights Reserved.
Why Do Intuitive User Experiences Matter?
Forrester
August 7, 2010
T...
2010 Adobe Systems Incorporated. All Rights Reserved.
Adobe LiveCycle ES2
RIA SERVICES
DOCUMENT
SERVICES
PROCESS
MANAGEMENT
2010 Adobe Systems Incorporated. All Rights Reserved.
Adobe Project Hendrix
 A new user experience for Adobe call center ...
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 ma...
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
...
2010 Adobe Systems Incorporated. All Rights Reserved.
What we found
The tools The processes
SNS
CSUI
CTI/Genesys
LWS
Unloc...
2010 Adobe Systems Incorporated. All Rights Reserved.
Multitude of slow, cumbersome tools.
Overly complicated processes.
F...
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,...
2010 Adobe Systems Incorporated. All Rights Reserved.
Options to Integrate Flash/Flex with SAP applications
 Web Dynpro R...
2010 Adobe Systems Incorporated. All Rights Reserved.
Embedded Flex in SAP: Web Dynpro Rich Islands for Flash
 Rich UI co...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Direct connections between SAP and Flex/Air
Ad...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Direct connections between SAP and Flex/Air
 ...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LiveCycle Data Services
 Improved Data Manage...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36
What is LiveCycle Data Services ES
Client
C...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 37
LiveCycle Data Services ES Features
Web Ser...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 38
RPC Services Diagram (Authentication for SA...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
Data Management Service
• Supports automati...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Physical Architecture of Flex, LCDS and SAP In...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LiveCycle Data Services ES client architecture...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Configuration between LCDS and JCO / Backend A...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Data-management-config.xml
43
<destination id=...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Remoting-config.xml
44
<destination id="LoginS...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
JCO Connection considerations
45
Depending how...
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 developm...
2010 Adobe Systems Incorporated. All Rights Reserved.
SAP Flash Builder Integration
48
 Connect to one or more SAP system...
2010 Adobe Systems Incorporated. All Rights Reserved.
Data model view with relationships
49
 Map SAP RFC functions
to Fle...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Questions?
Andreas Tan – atan@adobe.com
Matthi...
2010 Adobe Systems Incorporated. All Rights Reserved.
Upcoming SlideShare
Loading in …5
×

Creating Engaging SAP User Interfaces with Adobe Flex

5,514 views

Published on

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.

Published in: Technology
  • Be the first to comment

Creating Engaging SAP User Interfaces with Adobe Flex

  1. 1. 2010 Adobe Systems Incorporated. All Rights Reserved. CD209 - Creating Engaging SAP User Interfaces with Adobe Flex Andreas Tan | Senior Enterprise Architect, Adobe Systems Matthias Zeller | Group Product Manager, Adobe Systems
  2. 2. 2010 Adobe Systems Incorporated. All Rights Reserved. 2 Adobe revolutionizes how the world engages with ideas and information 2
  3. 3. 2010 Adobe Systems Incorporated. All Rights Reserved. Our Customers Enterprise IT & Line of Business Creative Professionals Application Developers Marketers, 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
  4. 4. 2010 Adobe Systems Incorporated. All Rights Reserved. Enterprises Face a User-Centric Moment of Truth
  5. 5. 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
  6. 6. 2010 Adobe Systems Incorporated. All Rights Reserved. Why Do Intuitive User Experiences Matter? Forrester August 7, 2010 The State Of Enterprise IT Budgets: 2010 by Heidi Lo and Andrew Bartels
  7. 7. 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe LiveCycle ES2 RIA SERVICES DOCUMENT SERVICES PROCESS MANAGEMENT
  8. 8. 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
  9. 9. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
  10. 10. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
  11. 11. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
  12. 12. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
  13. 13. 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
  14. 14. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
  15. 15. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase No progressive disclosure No data visualization Poor information architecture Tiny buttons, no keyboard shortcuts
  16. 16. 2010 Adobe Systems Incorporated. All Rights Reserved. What we found The tools The processes SNS CSUI CTI/Genesys LWS Unlocking UPS 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 Fedex Notepad Outlook Kana Knova CRM
  17. 17. 2010 Adobe Systems Incorporated. All Rights Reserved. Multitude of slow, cumbersome tools. Overly complicated processes. Frustrated agents. Dissatisfied customers. What we found
  18. 18. 2010 Adobe Systems Incorporated. All Rights Reserved. Our vision Provide an all-in-one, process-driven solution.
  19. 19. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
  20. 20. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
  21. 21. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
  22. 22. 2010 Adobe Systems Incorporated. All Rights Reserved. Before and after
  23. 23. 2010 Adobe Systems Incorporated. All Rights Reserved. Buying products
  24. 24. 2010 Adobe Systems Incorporated. All Rights Reserved. Buying products
  25. 25. 2010 Adobe Systems Incorporated. All Rights Reserved. Documenting a call
  26. 26. 2010 Adobe Systems Incorporated. All Rights Reserved. Documenting a call
  27. 27. 2010 Adobe Systems Incorporated. All Rights Reserved. CTI
  28. 28. 2010 Adobe Systems Incorporated. All Rights Reserved. CTI
  29. 29. 2010 Adobe Systems Incorporated. All Rights Reserved. Demo 29
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Direct connections between SAP and Flex/Air Adobe Flex Client Adobe Flex/AIR applications in Flash Player SAP ERP Existing Functions of SAP systems HTTP SOAP connection REST connection
  34. 34. © 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 Adobe Flex Client Adobe Flex/AIR applications in Flash Player SAP ERP Existing Functions of SAP systems  Why is XML/SOAP not always the best solution?
  35. 35. © 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
  36. 36. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 36 What is LiveCycle Data Services ES Client Client Client Web Server J2EE 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
  37. 37. © 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
  38. 38. © 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!
  39. 39. © 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
  40. 40. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Physical Architecture of Flex, LCDS and SAP Integration LoadBalancer ECC (cluster/group) Server 2.1 Server 2.2 Server 2.3 … Server 1.m CRM (cluster/group) Server 1.1 Server 1.2 Server 1.3 … Server 1.n SAP Your Application JBoss LCDS Cluster Server 1.2 ... User Desktop Internet Browser Flash Player Your Flash Application JCO - JNI – TCP/ IP Server 1.3 ... Server 1.n AMF / HTTPS FIREWALL FIREWALL
  41. 41. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LiveCycle Data Services ES client architecture 41
  42. 42. © 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"/>
  43. 43. © 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>
  44. 44. © 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>
  45. 45. © 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
  46. 46. 2010 Adobe Systems Incorporated. All Rights Reserved. Future Roadmap: SAP Connector for LiveCycle Data Services 46
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Questions? Andreas Tan – atan@adobe.com Matthias Zeller – mzeller@adobe.com 50
  51. 51. 2010 Adobe Systems Incorporated. All Rights Reserved.

×