Mobilize workforce using Fiori apps: Graybar Story

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

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

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

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

SCREEN FLOW

SOLUTION ARCHITECTURE

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

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

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

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

P&A APP - SCREENS

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

CUSTOMER APP - OVERVIEW

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

ORDER STATUS APP - OVERVIEW

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

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

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*

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

QUESTIONS

FOLLOW US Thank you for your time Follow us on at @ASUG365