SAP TechEd. Using SAPUI5 to Enhance Enterprise Learning Manager Capabilities. Rob Becker. Session MOB115

Transcription

1 SAP TechEd Using SAPUI5 to Enhance Enterprise Learning Manager Capabilities Rob Becker Session MOB115 1

2 Who Are We Lockheed Martin Corporation Global defense, security, aerospace, and advanced technology company. The majority of Lockheed Martin's business is with the U.S. Department of Defense and U.S. federal government agencies. Lockheed Martin operates in five business areas Aeronautics, Information Systems & Global Solutions, Missiles and Fire Control, Mission Systems, and Training and Space Systems. 112,000 employees worldwide 2014 Sales of 45.6 Billion USD The Corporation's New York Stock Exchange symbol is LMT and our webaddress is 2

3 Lockheed Martin and SAP 1996: First licensed SAP 1999: One of the first certified SAP Competency Centers 2012: HCM Enterprise Learning Solution (LSO) The Lockheed Martin SAP Landscape 10 SAP Finance and Operations systems, including international Enterprise Procurement/Accounts Payable Single Solution Manager system Various BW, Business Objects, HANA 3

4 Why SAPUI5 and Fiori Many of our managers are on the go and require access to the learning system via mobile devices Our solution was to use SAPUI5 and Fiori Launchpad to create a device agnostic web application that would give our managers the ability track their employees training not only on mobile devices but also from our existing portal infrastructure 4

5 Learning Points SAP Components Required for SAPUI5 and Fiori Launchpad Configuring Netweaver Gateway Creating an OData Service Creating an SAPUI5 Application Configuring Fiori Launchpad and Integrating an SAPUI5 Application Live Demo Lessons Learned and Best Practices 5

6 Required Components User Interface Add-On 1.0 for SAP NetWeaver SPS 13 SAP NetWeaver Gateway 2.0 SPS 10 6

7 Service Activation Activate Services SICF /sap/bc/bsp/ui2 /sap/bc/ui2 /sap/bc/ui2suite /sap/bc/ui5_demokit /sap/bc/ui5_ui5 /sap/opu /sap/public/bc/icf /sap/public/bc/ui2 /sap/public/bc/ui5_ui5 7

8 Learning Points SAP Components Required for SAPUI5 and Fiori Launchpad Configuring Netweaver Gateway Creating an OData Service Creating an SAPUI5 Application Configuring Fiori Launchpad and Integrating an SAPUI5 Application Live Demo Lessons Learned and Best Practices 8

9 Netweaver Gateway Configuration Step 1 Step 2 Step 3 Activate or Deactivate SAP NetWeaver Gateway SPRO Click on the activate button to turn on the gateway Manage SAP System Aliases SPRO LOCAL system alias is default SAP NetWeaver Gateway Settings SPRO Create gateway destinations one for each client 9

10 Learning Points SAP Components Required for SAPUI5 and Fiori Launchpad Configuring Netweaver Gateway Creating an OData Service Creating an SAPUI5 Application Configuring Fiori Launchpad and Integrating an SAPUI5 Application Live Demo Lessons Learned and Best Practices 10

11 OData Services Configuration Step 1 Step 2 Step 3 Create data structures SE11 ZHS_SAPUI5_EMPLIST and ZHS_SAPUI5_CRSLIST Create new OData service and import data structures as new entities SEGW EmployeeList/EmployeeListSet and CourseList/CourseListSet Create associations between entities SEGW Principle: EmployeeList, Dependent: CourseList 11

12 OData Services Configuration Step 4 Step 5 Step 6 Register service to create runtime artifacts SEGW Generates supporting classes and methods for the OData service Redefine specific methods created by registering service SE80 GetEntity and GetEntityset methods for DPC_EXT class Assign SAP system aliases to new OData service SPRO This alias was created during Netweaver Gateway configuration 12

13 Learning Points SAP Components Required for SAPUI5 and Fiori Launchpad Configuring Netweaver Gateway Creating an OData Service Creating an SAPUI5 Application Configuring Fiori Launchpad and Integrating an SAPUI5 Application Live Demo Lessons Learned and Best Practices 13

14 SAPUI5 Development Environment Web IDE Browser based IDE Cloud based solution Local installation available as trial Eclipse Kepler/Luna/Mars Local development environment SAPUI5 plugins required AppBuilder Browser based IDE Local development environment 14

15 SAPUI5 Development Environment Setting Up Eclipse Download and install Java JRE or JDK Download and install Eclipse Eclipse IDE for Java EE Developers Kepler/Luna/Mars Download and install a Java Web Server and integrate into Eclipse IDE Jetty Apache Tomcat Install SAPUI5 plugins Reference oper-center/frontend/blog/2013/06/01/how-to-installa-basic-development-environmentfor-sapui5 15

16 Creating An SAPUI5 Application SAPUI5 Best Practices MVC application design XML development paradigm Separation of display logic and other code OData services SAPUI5 designed to work best with OData Build application to work with mobile devices as lowest common denominator Reference 16

17 Creating An SAPUI5 Application Launch Eclipse and Create a New SAPUI5 Project 17

18 Creating An SAPUI5 Application Create MVC application using XML paradigm Used application design from 10 step exercise as a template for creating our custom application Add bootstrap and shell information to index.htm Bootstrap Shell 18

19 Creating An SAPUI5 Application Referencing the OData service in Component.js OData Ref 19

20 Creating An SAPUI5 Application Referencing the OData service in Master.view.xml OData Ref 20

21 Creating An SAPUI5 Application Referencing the OData service in Detail.view.xml OData Ref 21

22 Creating An SAPUI5 Application Moving Code to SAP SAP ABAP Repository Team Provider plugin for Eclipse Requires Netweaver 7.31 and above Older Versions of Netweaver Require Code to be Migrated Manually Use program /UI5/UI5_REPOSITORY_LOAD with SE38 Code Is Uploaded to BSP ABAP Repository 22

23 Learning Points SAP Components Required for SAPUI5 and Fiori Launchpad Configuring Netweaver Gateway Creating an OData Service Creating an SAPUI5 Application Configuring Fiori Launchpad and Integrating an SAPUI5 Application Live Demo Lessons Learned and Best Practices 23

24 Fiori Launchpad Configuration Step 1 Step 2 Activate and Maintain Services SPRO Activate LAUNCHPAD, PAGE_BUILDER*, TRANSPORT Create Custom Launchpad LPD_CUST Create custom Z-ROLE LAUNCHPAD instance 24

25 Fiori Launchpad Configuration Step 3 Create New Launchpad application LPD_CUST Enter application link text and description Enter application URL Specify an application alias Step 4 Create semantic object navigation target for application /UI2/SEMOBJ Z-object to reference the application from within the Launchpad 25

26 Fiori Launchpad Configuration Step 5 SAP Fiori Launchpad Designer (Cross-Client) SPRO Open the Launchpad Designer in Cross-Client mode and select transport and package for changes Step 6 Create New Catalog Standard catalog with title and ID 26

27 Fiori Launchpad Configuration Step 7 Step 8 Create catalog application target mapping Enter semantic navigation object and specify an action Enter launchpad role, instance, and application alias Specify device types - desktop, tablet, phone Create catalog application tile Enter general application information If dynamic tile specify service URL Select semantic navigation object and enter semantic object name and specify action that was named when creating target mapping 27

28 Fiori Launchpad Configuration Step 9 Create new group Enter title and ID for new group Step 10 Add Application tile to group Select tile from the newly created catalog 28

29 Learning Points SAP Components Required for SAPUI5 and Fiori Launchpad Configuring Netweaver Gateway Creating an OData Service Creating an SAPUI5 Application Configuring Fiori Launchpad and Integrating an SAPUI5 Application Live Demo Lessons Learned and Best Practices 29

30 The Fruits of Your Labor Fiori Launchpad Manager Dashboard active tile 30

31 The Fruits of Your Labor Manager Dashboard Split-List Searchable Sortable Filterable Send 31

32 Learning Points SAP Components Required for SAPUI5 and Fiori Launchpad Configuring Netweaver Gateway Creating an OData Service Creating an SAPUI5 Application Configuring Fiori Launchpad and Integrating an SAPUI5 Application Live Demo Lessons Learned and Best Practices 32

33 Lessons Learned Keep Up With Latest Releases of SAPUI5 Fiori Launchpad Role Assignment Issue User Interface Add-On 1.0 for SAP NetWeaver SPS Sorting order of role menu entries for folders reference user Single Sign On SAML 2.0 implementation on ABAP stack 33

34 Key Learnings SAPUI5 and Fiori are evolving technologies and it is important to keep up with latest support packs and notes SAPUI5 is a robust framework that allows for developing fully responsive web applications that will adapt to the desktop and mobile devices SAPUI5 applications can be developed very rapidly and deployed using the Fiori Launchpad 34

35 What the Future Holds Next Steps Create a learner application Allow learners to take on-line training using their mobile devices 35

36 Thank You Feedback Please complete a session evaluation for this session! SESSION CODE: MOB115 36

37 Backup Slides 37

38 Netweaver Gateway Configuration Step 1 Activate the gateway service SPRO 38

39 Netweaver Gateway Configuration Step 2 Create gateway aliases SPRO 39

40 Netweaver Gateway Configuration Step 2 Create gateway aliases SPRO 40

41 Netweaver Gateway Configuration Step 3 Create gateway destinations SPRO 41

42 Netweaver Gateway Configuration Step 3 Create gateway destinations SPRO 42

43 Create Data Structures for OData Step 1 Create supporting data structures Employee data SE11 43

44 Create Data Structures for OData Step 1 Create supporting data structures Course data SE11 44

45 OData Services Configuration Step 2 Create Supporting OData Services SEGW 45

46 OData Services Configuration Step 2: Use Wizard to import data structures Create EmployeeList and EmployeeListSet 46

47 OData Services Configuration Step 2: Use Wizard to import data structures Create EmployeeList and EmployeeListSet 47

48 OData Services Configuration Step 2: Use Wizard to import data structures Create EmployeeList and EmployeeListSet 48

49 OData Services Configuration Step 2: Use Wizard to import data structures Set additional properties 49

50 OData Services Configuration Step 2: Use Wizard to import data structures Create CourseList and CourseListSet 50

51 OData Services Configuration Step 2: Use Wizard to import data structures Create CourseList and CourseListSet 51

52 OData Services Configuration Step 2: Use Wizard to import data structures Create CourseList and CourseListSet 52

53 OData Services Configuration Step 2: Use Wizard to import data structures Set additional properties 53

54 OData Services Configuration Step 3: Create associations between data entities 54

55 OData Services Configuration Step 3: Create associations between data entities 55

56 OData Services Configuration Step 3: Create associations between data entities 56

57 OData Services Configuration Step 4: Register services to create runtime artifacts 57

58 OData Services Configuration Step 5 Create runtime artifact redefinitions Add custom code to the redefined methods to retrieve data 58

59 OData Services Configuration Step 6 Assign SAP System Aliases to OData Services SPRO 59

60 OData Services Configuration Step 6 Assign SAP System Aliases to OData Services SPRO 60

61 Fiori Launchpad Configuration Step 1 Activate services for the Launchpad designer SPRO 61

62 Fiori Launchpad Configuration Step 1 Activate services for the Launchpad designer SPRO 62

63 Fiori Launchpad Configuration Step 2 Create custom Fiori Launchpad role LPD_CUST 63

64 Fiori Launchpad Configuration Step 3 Create custom Fiori Launchpad LPD_CUST 64

65 Fiori Launchpad Configuration Step 4 Create new semantic object to identify application /UI2/SEMOBJ 65

66 Fiori Launchpad Designer Step 5 Launch the Fiori Launchpad designer SPRO 66

67 Fiori Launchpad Designer Step 5 Select a transport and package for configuration changes 67

68 Fiori Launchpad Designer Step 6 Create a new catalog 68

69 Fiori Launchpad Designer Step 7 Create a new target map for your application 69

70 Fiori Launchpad Designer Step 7 Create a new target map for your application 70

71 Fiori Launchpad Designer Step 8 Create new tile for your application 71

72 Fiori Launchpad Designer Step 9 Create a new group 72

73 Fiori Launchpad Designer Step 10 Add tile to your group 73

74 References and Helpful Links SAP NetWeaver Gateway User Interface Add-On 1.0 for SAP NetWeaver Introducing Fiori Launchpad SAP Fiori - SAP Fiori launchpad 74

75 References and Helpful Links UI Development Toolkit For HTML5 Demo Kit ml Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises end/blog/2014/03/04/building-sap-fiori-like-uis-with-sapui5-in-10- exercises End-to-End How-to Guide: Building SAPUI5 Applications on SAP NetWeaver AS ABAP 7.31 Consuming Gateway OData Services 75

76 References and Helpful Links Getting Started with SAPUI5 UI Development Toolkit for HTML5 Developer Center SAP Development Tools for Eclipse 76

77 References and Helpful Links How to install a basic development environment for SAPUI5 SAP Web IDE Enablement AppBuilder 77

78 References and Helpful Links Using the SAPUI5 Repository Based on BSP Repository 6dd926db0e91070/frameset.htm How to Deploy and Run SAPUI5 application on ABAP Server 78

79