Using SAPUI5 to Enhance LSO Manager Capabilities Rob Becker & Steve Sweeney Lockheed Martin SESSION CODE: AD124
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 www.lockheedmartin.com
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
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
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
Required Components User Interface Add-On 1.0 for SAP NetWeaver SPS 11 SAP NetWeaver Gateway 2.0 SPS 09
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
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
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
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
OData Services Configuration Step 1 Step 2 Step 3 Create data structures SE11 ZHS_SAPUI5_EMPLIST, ZHS_SAPUI5_CRSLIST Create new OData service and import data structures as new entities SEGW EmployeeList/EmployeeListSet, CourseList/CourseListSet Create associations between entities SEGW Principle: EmployeeList, Dependent: CourseList
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
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
SAPUI5 Development Environment Web IDE Browser based IDE Cloud based solution Local installation for as trial Eclipse Kepler/Luna AppBuilder Browser based IDE Local development environment Local development environment SAPUI5 plugins required
SAPUI5 Development Environment Setting Up Eclipse Download and install Java JRE or JDK Download and install Eclipse Eclipse IDE for Java EE Developers Kepler or Luna Download and install a Java Web Server and integrate into Eclipse IDE Jetty Apache Tomcat Install SAPUI5 plugins Reference http://scn.sap.com/community/devel oper-center/frontend/blog/2013/06/01/how-to-installa-basic-development-environmentfor-sapui5
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 http://scn.sap.com/community/developer-center/frontend/blog/2014/03/04/building-sap-fiori-like-uis-with-sapui5-in-10-exercises
Creating An SAPUI5 Application Launch Eclipse and create a new SAPUI5 project
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.html Bootstrap Shell
Creating An SAPUI5 Application Referencing the OData service in Component.js OData Ref
Creating An SAPUI5 Application Referencing the OData service in Master.view.xml OData Ref
Creating An SAPUI5 Application Referencing the OData service in Detail.view.xml OData Ref
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
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
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
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
Fiori Launchpad Configuration Step 5 Step 6 SAP Fiori Launchpad Designer (Cross-Client) SPRO Open the Launchpad Designer in Cross-Client mode and select transport and package for changes Create New Catalog Standard catalog with title and ID
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
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
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
The Fruits of Your Labor Fiori Launchpad Manager Dashboard active tile
The Fruits of Your Labor Manager Dashboard Split-List Searchable Sortable Filterable Send email
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
Lessons Learned Fiori Launchpad role assignment issue User Interface Add-On 1.0 for SAP NetWeaver SPS 11 2111618 - Sorting order of role menu entries for folders reference user Single Sign On SAML 2.0 implementation on ABAP stack
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
What the Future Holds Next Steps Create a learner dashboard application Allow learners to take on-line training using their mobile devices
STAY INFORMED Follow the ASUGNews team: Tom Wailgum: @twailgum Chris Kanaracus: @chriskanaracus Craig Powers: @Powers_ASUG
THANK YOU FOR PARTICIPATING Please provide feedback on this session by completing a short survey via the event mobile application. SESSION CODE: AD124 For ongoing education on this area of focus, visit www.asug.com
Backup Slides
Netweaver Gateway Configuration Activate the gateway service SPRO
Netweaver Gateway Configuration Create gateway aliases SPRO
Netweaver Gateway Configuration Create gateway aliases SPRO
Netweaver Gateway Configuration Create gateway destinations SPRO
Netweaver Gateway Configuration Create gateway destinations SPRO
Create Data Structures for OData Create supporting data structures Employee data SE11
Create Data Structures for OData Create supporting data structures Course data SE11
OData Services Configuration Create Supporting OData Services SEGW
OData Services Configuration Use Wizard to import data structures Create EmployeeList/EmployeeListSet
OData Services Configuration Use Wizard to import data structures Create EmployeeList/EmployeeListSet
OData Services Configuration Use Wizard to import data structures Create EmployeeList/EmployeeListSet
OData Services Configuration Use Wizard to import data structures Set additional properties
OData Services Configuration Use Wizard to import data structures Create CourseList/CourseListSet
OData Services Configuration Use Wizard to import data structures Create CourseList/CourseListSet
OData Services Configuration Use Wizard to import data structures Create CourseList/CourseListSet
OData Services Configuration Use Wizard to import data structures Set additional properties
OData Services Configuration Create Associations Between Data Entities
OData Services Configuration Create Associations Between Data Entities
OData Services Configuration Create Associations Between Data Entities
OData Services Configuration Register Services to Create Runtime Artifacts
OData Services Configuration Create Runtime Artifact Redefinitions Add Custom Code to the Redefined Methods to Retrieve Data
OData Services Configuration Assign SAP System Aliases to OData Services SPRO
OData Services Configuration Assign SAP System Aliases to OData Services SPRO
Fiori Launchpad Configuration Activate services for the Launchpad designer SPRO
Fiori Launchpad Configuration Activate services for the Launchpad designer SPRO
Fiori Launchpad Configuration Create custom Fiori Launchpad LPD_CUST
Fiori Launchpad Configuration Create custom Fiori Launchpad LPD_CUST
Fiori Launchpad Configuration Create new semantic object /UI2/SEMOBJ
Fiori Launchpad Designer Launch the Fiori Launchpad designer SPRO
Fiori Launchpad Designer Select a transport and package for configuration changes
Fiori Launchpad Designer Create a new catalog
Fiori Launchpad Designer Create a new target map for your application
Fiori Launchpad Designer Create a new target map for your application
Fiori Launchpad Designer Create new tile for your application
Fiori Launchpad Designer Create a new group
Fiori Launchpad Designer Add tile to your group
References and Helpful Links SAP NetWeaver Gateway 2.0 http://help.sap.com/nwgateway20 User Interface Add-On 1.0 for SAP NetWeaver http://help.sap.com/nw-uiaddon Introducing Fiori Launchpad http://experience.sap.com/news/introducing-sap-fiori-launchpad SAP Fiori - SAP Fiori launchpad http://scn.sap.com/docs/doc-53178
References and Helpful Links UI Development Toolkit For HTML5 Demo Kit https://sapui5.netweaver.ondemand.com/sdk/#content/overview.html Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises http://scn.sap.com/community/developer-center/front- 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 http://scn.sap.com/docs/doc-33792
References and Helpful Links Getting Started with SAPUI5 http://scn.sap.com/docs/doc-48897 UI Development Toolkit for HTML5 Developer Center http://scn.sap.com/community/developer-center/front-end SAP Development Tools for Eclipse https://tools.hana.ondemand.com/
References and Helpful Links How to install a basic development environment for SAPUI5 http://scn.sap.com/community/developer-center/frontend/blog/2013/06/01/how-to-install-a-basic-development-environmentfor-sapui5 SAP Web IDE Enablement http://scn.sap.com/docs/doc-55465 AppBuilder https://help.sap.com/appbuilder/
References and Helpful Links Using the SAPUI5 Repository Based on BSP Repository http://help.sap.com/saphelp_nw74/helpdata/en/91/f3ecc06f4d1014b6dd 926db0e91070/frameset.htm How to Deploy and Run SAPUI5 application on ABAP Server http://scn.sap.com/docs/doc-42820