Mobilize workforce using Fiori apps: Graybar Story

Transcription

1 Mobilize workforce using Fiori apps: Graybar Story

2 AGENDA Introduction Graybar Fiori Project Graybar Fiori Apps App Lifecycle Management Security Demo Key Learning Questions

3 INTRODUCTION A leading distributor of electrical, communications, data networking and security products One of the largest employee owned companies in North America Headquarters in St. Louis, supporting over 260 locations and ~8000 employees Implemented SAP in 2003

4 GRAYBAR FIORI PROJECT Allow Sales Reps to service customers from their mobile phone or tablet Find Customers Order Tracking Product Price and Availability Allow Managers to approve workflow items remotely Time and Expense approvals

5 SOLUTION OVERVIEW Access Fiori Launchpad via Portal on Device Netweaver Gateway On- Premise Single-Sign On to Gateway system SAP Logon ticket Web IDE for development Fiori Theme Designer for branding Bitbucket (Git) for source code management

6 SCREEN FLOW

7 SCREEN FLOW

8 SOLUTION ARCHITECTURE

9 NEED FOR CUSTOMIZATION Business Requirements Dynamic Search for Customer / Material Display stock at multiple locations Display Order delivery / tracking details Cross-app navigation Screen Design / Custom Services Complex search forms Expose SAP Search help as OData services Custom style sheets

10 SAP WEB IDE - OVERVIEW Cloud based development tool Supports creating and extending applications Templates for jump starting development JS & XML code editor, beautifier and checker Layout editor for designing views Supports team development with Git integration Instant preview and mock data capability Supports end-to-end lifecycle of SAPUI5 apps

11 NEED FOR CUSTOM APPS Why we had to use custom views? Huge customer base Apps had to support dynamic search Custom data display requirements Custom OData Services Developed single service with multiple end points Ability to connect on a single search basis Cross-app navigation

12 P&A APP - OVERVIEW Description Pricing and Availability application used a multi-end OData service to provide sales associates material availability and pricing information. Capabilities Ability to look up customer and material dynamically Advanced search capability Provide availabilities of products at multiple locations Real time pricing based on customer

13 P&A APP - SCREENS

14 CUSTOMER APP - OVERVIEW Description Application designed to maintain a recent and favorite list of sales associates customer base and provide advance search capabilities for on the fly customer search. Capabilities Ability to look up customer dynamically Advanced customer search capability Customizable search list Cross application navigation feature

15 CUSTOMER APP - OVERVIEW

16 ORDER STATUS APP - OVERVIEW Description Application provides detailed information on customer orders, delivery and tracking information and real time P&A. Capabilities Track recent open and recently closed orders Search customer orders Detailed delivery and tracking information Real time pricing and availability

17 ORDER STATUS APP - OVERVIEW

18 ORDER STATUS APP - OVERVIEW

19 APP LIFECYCLE MANAGEMENT Web IDE Design, development, testing & deployment Bitbucket (Git repository) Code Versioning, Team based development SAP TMS (Change Management) Application, Custom Services, Configuration & Themes

20 SECURITY Single Sign On (Portal -> Gateway) SAP Logon ticket based authentication Roles Portal roles Gateway roles Service roles Launchpad roles

21 PERFORMANCE TUNING Code optimization Output data as JSON Minifying code (CSS w/less) Remove redundant code, files Caching web content Server-side caching (Portal and Gateway) Add expire headers* Cache manifest*

22 KEY LEARNING POINTS Design first and code later Use Templates to jumpstart you development Setup project in GIT then clone project in Web IDE Use production Web IDE for real development Use mock data if OData services are not ready Use XML based views Invalid SSL certificate could cause testing issues

23 QUESTIONS

24 FOLLOW US Thank you for your time Follow us on