Case Studies: Custom Web Browser Apps

1. Case Studies:Custom Web Browser Apps Scotsman Ice: Warranty Registration System Merz Aesthetics: Customer Service Portal March 21, 2011 MWUG Spring 2011 Terry Welch Business Applications Manager Teri Conner Applications Manager Scott Blaubach Co-founder and Vice President

2. Scott Blaubach, App Technologies, Inc. Over 20 years working with Progress Software. Co-founder of App Technologies, a provider of consulting services and web application development tools to the Progress Software market. President of the Wisconsin Progress Users Group since 2006.

3. Session Goals Demonstrate that Progress WebSpeed is a viable business application development platform for custom QAD-integrated business applications. Emphasize the importance of building cross-browser compatible web applications. Demonstrate the flexibility of WebSpeed for Desktop, iPad, Tablet PC and Smartphone devices and operating systems.

4. WebSpeed Overview High throughput, sub-second transaction times. Ability to access Progress DBs directly. No need to replicate Progress data to other sources in order to be viewed via the web. Upon release of WebSpeed, building a robust user interface was challenging. Lacked Application Development Tools Cascading Style Sheet standards were in their infancy

5. Progress Application Deployment Options Progress Application Deployment options have typically included Progress Character, GUI, or .NET Open Client. WebSpeed has had limited deployment compared to these other options. GUI and .NET Open Client both provide a robust User Interface but require a Client Server or Terminal Server deployment. Custom QAD-integrated business applications developed with Progress WebSpeed are accessible from any device that has a web-browser.

6. WebSpeed Application Development Revisited Web 2.0 functionality provides new user interface richness to browser-based applications. Browser manufacturer compliance to Cascading Style Sheet standards. AJAX [Asynchronous JavaScript and XML] allows data to be retrieved from the web server in the background and displayed on the current screen without reposting the entire web page. Through Web 2.0 functionality, WebSpeed-based applications now can provide a rich user interface comparable to GUI and .NET.

7. Benefits of Web Browser Apps Ease of Deployment Users only need a web browser to access the applications. Highly Accessible Applications can be easily accessed both internally and externally, assuming the proper security access considerations have been accounted for. Highly Extensible A desktop application can also be run on iPads and other Tablet PCs without modification. That same application can be used as a basis for SmartPhones deployment. However, SmartPhone screen sizes need to be taken into consideration.

8. Most Popular Web Browsers Internet Explorer Firefox Safari Google Chrome Opera

9. Case Study: Web Browser App Customer Service Portal Terry Welch, Business Applications Manager Merz Aesthetics

10. Terry Welch, Merz Aesthetics Business Applications Manager for Merz Aesthetics (formerly BioForm) in Franksville, WI. QAD consultant for 12 years prior to joining Merz. Merz Aesthetics is the maker Radiesse ®, a volumizing filler product. Merz Aesthetics also sells other pharmaceutical and filler products. Merz is headquartered in San Mateo, CA and owned by Merz Pharma of Frankfurt, Germany.

11. QAD History – Merz Aesthetics QAD customer since 2004. eB2.1 Service Pack 5 with .Net user interface. No source code. Customized for: Automatic Sales Order creation Customer Work Order Pick List based on raw material attributes Added customer master fields Custom reports Utilize CSS but only for internal purposes.

12. Customer Service Portal What problems needed to be solved? Make the Customer Service Representative’s jobs easier and less prone to error. Needed an easier flow between all the information available. Previously, CSRs had to jump between multiple QAD screens and ask customers to wait while they found the required information. Needed additional (or modified) information from what standard QAD provided: Indicator Fields, Contacts, Notes, Credit Cards, CSS Catalog and Attachments.

13. Customer Service Portal Why did we consider a browser-based solution? We liked the design proposal of having everything available on a single screen. A browser-based solution with tabs for the different data groups and transactions made the most sense. Ease of deployment.

14. Case Study: Web Browser App Customer Service Portal Demonstration

15. Accounts Receivable Portal Customer Search Customer Number Auto-Complete displays Customer matches as you type. Customer information derived directly from QAD / Custom tables. If Customer Number is not known, the Lookup button can be used for searching.

16. Accounts Receivable Portal Customer Lookup Customers can be searched by a number of different parameters (Number, Name, City, State, Zip, Telephone). Customers matching search parameters are shown in data grid for selection.

17. Accounts Receivable Portal Invoice History Display Invoice History summary data displayed on first tab. Filter data by specific Type or “All Types”. Invoice Reference link may be clicked to bring up Invoice details.

18. Accounts Receivable Portal Invoice History Detail Display Invoice History detail data displayed in pop up window.

19. Accounts Receivable Portal Customer Notes Original QAD Notes previously maintained in master comments were converted to the new Custom Notes table. New notes can be added for Accounts Receivable and / or Customer Service Note Types (based on user permissions). Filter Notes by “Note Type” and / or “User”.

20. Accounts Receivable Portal Contacts Accounts Receivable and / or Customer Service Contacts may be added or maintained (based on user permissions). Click “Add Contact” for new Contact record. Click on “Name” link to maintain the record. Initiate Email by clicking “Email” link.

21. Accounts Receivable Portal Contact Maintenance Maintain Contact information in a Custom table. Navigate between Contacts using “Next” and “Previous” buttons, without returning back to data grid.

22. Accounts Receivable Portal Attachments Accounts Receivable and / or Customer Service Attachments may be added or maintained. Click “Add Attachment” for new Attachment. Click on “Attachment Name” link to view the Attachment. Click “Delete” link to delete Attachment.

23. Customer Service Portal Customer Service Portal Same Customer Search options as the Accounts Receivable Portal. Click “New” to create a new Customer. Click “Edit” to maintain a Customer. Click “CSS” to jump to the CSS screen for selected Customer.

24. Customer Service Portal Customer Edit Updates are processed through CIM Load to update QAD tables. Data stored in Custom tables are updated directly.

25. Customer Service Portal Ship To Addresses Click “Add Ship To” to create a new record. Click on “Ship To” link to maintain the record.

26. Customer Service Portal Ship To Address Maintenance Updates are processed through CIM Load to update QAD tables. Data stored in Custom tables are updated directly. Navigate between Ship To records using “Next” and “Previous” buttons, without returning back to data grid.

27. Customer Service Portal What was the outcome? The outcome is fantastic. The users love the way they can get to everything (Maintenance and Inquiry) in a single screen. We anticipate significant time saving and reduced errors in the account set up process. Questions?

28. Case Study: Web Browser App Warranty Registration System Teri Conner, Applications Manager Scotsman Ice Systems

29. Teri Conner, Scotsman Ice Systems Applications Manager for Scotsman Industries. Worked with Scotsman Industries’ companies for 30 years in a variety of IT positions, including Operations, Programming and Systems Analyst. Manages development and support of Enterprise Applications. Scotsman Industries is the world’s leading ice machine manufacturer. US operations include Scotsman Ice Systems and Ice-O-Matic.

30. QAD History - Scotsman Ice and Ice-O-Matic QAD customer since 2004. eB2 Service Pack 3. No source code. Running QAD Core plus: Supplier Schedules PCC QPS CSS BI Add-Ons: Eagle RF Vertex Optio

31. Warranty Registration System What problems needed to be solved? Replace our legacy Warranty Registration system running on obsolete hardware and software. Automate registration processes which were being manually handled. Allow easy access to the Warranty Registration data. Integrate with QAD to eliminate the need to pass large data files between systems.

32. Warranty Registration System Why did we consider a browser-based solution? Since the Warranty Registration is an end-user application, the new application needed to be easily accessed through a web-browser. Using a Progress-based application allowed us to easily use our existing infrastructure. Data is accessed directly. No need to export / import data between QAD and a remote web registration system.

33. Warranty Registration System The Warranty Registration System was designed for usage by both Scotsman Ice and Ice-O-Matic. The system needed to run both companies with common code, but with unique configuration settings.

34. Case Study: Web Browser App Warranty Registration System Demonstration

35. Warranty Registration System Search Warranty Registrations Warranty Registrations can be searched by a number of different parameters (Serial Number, Model, Business / Contact Name, City, Email, Purchased From, Installed By). Registrations matching search parameters are shown in data grid for selection.

36. Warranty Registration System Warranty Registration Same program is used for internal CSR usage as external customer usage. Program permissions determine what functions each user has access to. Click the “Update Registration” button to navigate to the registration process.

37. Warranty Registration System Warranty Registration The “Your Information” & “Product Information” sections identify the Owner, Purchased From and Installed By information.

38. Warranty Registration System Warranty Registration Questions The remaining Sections, Questions and Answers are all user configurable. Each Product Line can have a unique questionnaire set up for capturing information specific to it. Otherwise, a default questionnaire may be used.

39. Warranty Registration System • Questions and Answers • Answers Types: • Short Text (up to 80 chars) • Long Text (Text Box) • Selection Box (Select one) • Multiple Select (Checkboxes) • Yes/No (Radio set) • True/False (Radio set) • Ranking (Excellent … Poor)

40. Warranty Registration System Admin Functions: Question and Answers Maintain Question and Answer master data that may be referenced on multiple Questionnaires.

41. Warranty Registration System Admin Functions: Question and Answers As marketing directives change, Questions and possible Answers may be dynamically changed, moved or inactivated.

42. Warranty Registration System Admin Functions: Configuration Information that is displayed on the Warranty Registration forms is configurable by company.

43. Warranty Registration System Mobile App Same functionality available as the Desktop App. Screen layout was modified for the smaller screen size.

44. Warranty Registration System What was the outcome? The results are great! The application is well-designed and user-friendly which integrates perfectly with our existing website. The users and management are very excited about the new application. Questions?

45. Mobile Web Browser Apps Mobile Computing Considerations

46. iPad Considerations • The iPad is a viable device for accessing QAD / Custom application data anywhere a user has access to Wi-Fi or 3G network (and proper security access): • Sales person on a sales call • Production manager on manufacturing floor • Shipping personnel processing shipments • Executives inside and outside of the office • Retail store employees accessing product info • Any employee needing mobile access to data

47. Smartphone WebSpeed App Development • Same CSS style rules used for Safari running on Mac/Windows desktop as for Safari running on the iPhone or iPod Touch. • Same program running on desktop can be run on the Smartphone. • Available real estate limits usability on Smartphones. A simplified user interface for Smartphones should be developed.

48. Illustration Smartphone WebSpeed Application Illustrations

49. Demo: SmartPhoneWebSpeed App using HTML, JavaScript and Cascading Style Sheets Desktop Application Clicking “Charts” button generates one screen with four Google charts. Charts are appropriately sized for the desktop screen size.

50. Demo: SmartPhoneWebSpeed App using HTML, JavaScript and Cascading Style Sheets Desktop Application running on a SmartPhone device Desktop applications can run on a SmartPhone, but the results aren’t always desirable.