Creating Engaging SAP User Interfaces with Adobe Flex

A presentation from SAP TechEd 2010. It covers different ways of integrating Flex applications

1/51 Documents & Tips - Sharing is our passion

Share This Page

  1. Matthias Zeller
    A presentation from SAP TechEd 2010. It covers different ways of integrating Flex applications
    Transcript Header:
    Creating Engaging SAP User Interfaces with Adobe Flex
    Transcript Body:
    • 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. 2010 Adobe Systems Incorporated. All Rights Reserved. 2 Adobe revolutionizes how the world engages with ideas and information 2
    • 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. 2010 Adobe Systems Incorporated. All Rights Reserved. Enterprises Face a User-Centric Moment of Truth
    • 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. 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. 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe LiveCycle ES2 RIA SERVICES DOCUMENT SERVICES PROCESS MANAGEMENT
    • 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. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
    • 10. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
    • 11. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
    • 12. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
    • 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. 2010 Adobe Systems Incorporated. All Rights Reserved. The Discovery phase
    • 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. 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. 2010 Adobe Systems Incorporated. All Rights Reserved. Multitude of slow, cumbersome tools. Overly complicated processes. Frustrated agents. Dissatisfied customers. What we found
    • 18. 2010 Adobe Systems Incorporated. All Rights Reserved. Our vision Provide an all-in-one, process-driven solution.
    • 19. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
    • 20. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
    • 21. 2010 Adobe Systems Incorporated. All Rights Reserved. Turning the vision into reality
    • 22. 2010 Adobe Systems Incorporated. All Rights Reserved. Before and after
    • 23. 2010 Adobe Systems Incorporated. All Rights Reserved. Buying products
    • 24. 2010 Adobe Systems Incorporated. All Rights Reserved. Buying products
    • 25. 2010 Adobe Systems Incorporated. All Rights Reserved. Documenting a call
    • 26. 2010 Adobe Systems Incorporated. All Rights Reserved. Documenting a call
    • 27. 2010 Adobe Systems Incorporated. All Rights Reserved. CTI
    • 28. 2010 Adobe Systems Incorporated. All Rights Reserved. CTI
    • 29. 2010 Adobe Systems Incorporated. All Rights Reserved. Demo 29
    • 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. 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. 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LiveCycle Data Services ES client architecture 41
    • 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 • For Remote Object Services
    • 43. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Data-management-config.xml 43 com.adobe.itapps.demo.service.CustomerService application ….
    • 44. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Remoting-config.xml 44 com.adobe.isapps.sparta.ds.LoginService
    • 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. 2010 Adobe Systems Incorporated. All Rights Reserved. Future Roadmap: SAP Connector for LiveCycle Data Services 46
    • 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. 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. 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. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Questions? Andreas Tan – atan@adobe.com Matthias Zeller – mzeller@adobe.com 50
    • 51. 2010 Adobe Systems Incorporated. All Rights Reserved.
    View More