sap teched && d-code - abap · pdf filesap teched using sapui5 to enhance enterprise...
TRANSCRIPT
1© 2015 Lockheed Martin Corporation. All Rights Reserved
SAP TechEd
Using SAPUI5 to Enhance Enterprise
Learning Manager Capabilities
Rob BeckerSession MOB115
2© 2015 Lockheed Martin Corporation. All Rights Reserved
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 web-
address is www.lockheedmartin.com
3© 2015 Lockheed Martin Corporation. All Rights Reserved
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
4© 2015 Lockheed Martin Corporation. All Rights Reserved
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
5© 2015 Lockheed Martin Corporation. All Rights Reserved
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
6© 2015 Lockheed Martin Corporation. All Rights Reserved
Required Components
User Interface Add-On 1.0 for SAP NetWeaver
SPS 13
SAP NetWeaver Gateway 2.0
SPS 10
7© 2015 Lockheed Martin Corporation. All Rights Reserved
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
8© 2015 Lockheed Martin Corporation. All Rights Reserved
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
9© 2015 Lockheed Martin Corporation. All Rights Reserved
Netweaver Gateway Configuration
Step 1
• Activate or Deactivate SAP NetWeaver Gateway – SPRO
• Click on the activate button to turn on the gateway
Step 2
• Manage SAP System Aliases – SPRO
• LOCAL system alias is default
Step 3
• SAP NetWeaver Gateway Settings – SPRO
• Create gateway destinations – one for each client
10© 2015 Lockheed Martin Corporation. All Rights Reserved
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
11© 2015 Lockheed Martin Corporation. All Rights Reserved
OData Services Configuration
Step 1
• Create data structures – SE11
• ZHS_SAPUI5_EMPLIST and ZHS_SAPUI5_CRSLIST
Step 2
• Create new OData service and import data structures as new entities – SEGW
• EmployeeList/EmployeeListSet and CourseList/CourseListSet
Step 3
• Create associations between entities – SEGW
• Principle: EmployeeList, Dependent: CourseList
12© 2015 Lockheed Martin Corporation. All Rights Reserved
OData Services Configuration
Step 4
• Register service to create runtime artifacts – SEGW
• Generates supporting classes and methods for the OData service
Step 5
• Redefine specific methods created by registering service – SE80
• GetEntity… and GetEntityset… methods for DPC_EXT class
Step 6
• Assign SAP system aliases to new OData service – SPRO
• This alias was created during Netweaver Gateway configuration
13© 2015 Lockheed Martin Corporation. All Rights Reserved
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
14© 2015 Lockheed Martin Corporation. All Rights Reserved
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
15© 2015 Lockheed Martin Corporation. All Rights Reserved
SAPUI5 Development Environment
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
https://tools.hana.ondemand.com
Reference
http://scn.sap.com/community/devel
oper-center/front-
end/blog/2013/06/01/how-to-install-
a-basic-development-environment-
for-sapui5
Setting Up Eclipse
16© 2015 Lockheed Martin Corporation. All Rights Reserved
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/front-
end/blog/2014/03/04/building-sap-fiori-like-uis-with-sapui5-in-10-exercises
17© 2015 Lockheed Martin Corporation. All Rights Reserved
Creating An SAPUI5 Application
Launch Eclipse and Create a New SAPUI5 Project
18© 2015 Lockheed Martin Corporation. All Rights Reserved
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
19© 2015 Lockheed Martin Corporation. All Rights Reserved
Creating An SAPUI5 Application Referencing the
OData service in
Component.js
OData Ref
20© 2015 Lockheed Martin Corporation. All Rights Reserved
Creating An SAPUI5 Application Referencing the
OData service in
Master.view.xml
OData Ref
21© 2015 Lockheed Martin Corporation. All Rights Reserved
Creating An SAPUI5 Application
Referencing the
OData service in
Detail.view.xml
OData Ref
22© 2015 Lockheed Martin Corporation. All Rights Reserved
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
23© 2015 Lockheed Martin Corporation. All Rights Reserved
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
24© 2015 Lockheed Martin Corporation. All Rights Reserved
Fiori Launchpad Configuration
Step 1
• Activate and Maintain Services – SPRO
• Activate LAUNCHPAD, PAGE_BUILDER*, TRANSPORT
Step 2
• Create Custom Launchpad – LPD_CUST
• Create custom Z-ROLE LAUNCHPAD instance
25© 2015 Lockheed Martin Corporation. All Rights Reserved
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
26© 2015 Lockheed Martin Corporation. All Rights Reserved
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
27© 2015 Lockheed Martin Corporation. All Rights Reserved
Fiori Launchpad Configuration
Step 7
• 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
Step 8
• 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
28© 2015 Lockheed Martin Corporation. All Rights Reserved
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
29© 2015 Lockheed Martin Corporation. All Rights Reserved
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
30© 2015 Lockheed Martin Corporation. All Rights Reserved
The Fruits of Your Labor
Fiori
Launchpad
Manager
Dashboard
active tile
31© 2015 Lockheed Martin Corporation. All Rights Reserved
The Fruits of Your Labor
Manager
Dashboard
Split-List
Searchable
Sortable
Filterable
Send email
32© 2015 Lockheed Martin Corporation. All Rights Reserved
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
33© 2015 Lockheed Martin Corporation. All Rights Reserved
Lessons Learned
Keep Up With Latest Releases of SAPUI5
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
34© 2015 Lockheed Martin Corporation. All Rights Reserved
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
35© 2015 Lockheed Martin Corporation. All Rights Reserved
What the Future Holds
Next Steps
Create a learner application
Allow learners to take on-line training using their mobile
devices
36© 2015 Lockheed Martin Corporation. All Rights Reserved
Thank You
Feedback
Please complete a session evaluation for this
session!
SESSION CODE: MOB115
37© 2015 Lockheed Martin Corporation. All Rights Reserved
Backup Slides
38© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 1
Activate
the
gateway
service
SPRO
Netweaver Gateway Configuration
39© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2
Create
gateway
aliases
SPRO
Netweaver Gateway Configuration
40© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2
Create
gateway
aliases
SPRO
Netweaver Gateway Configuration
41© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 3
Create
gateway
destinations
SPRO
Netweaver Gateway Configuration
42© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 3
Create
gateway
destinations
SPRO
Netweaver Gateway Configuration
43© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 1
Create
supporting
data
structures
Employee
data
SE11
Create Data Structures for OData
44© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 1
Create
supporting
data
structures
Course
data
SE11
Create Data Structures for OData
45© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2
Create
Supporting
OData
Services
SEGW
OData Services Configuration
46© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Create EmployeeList and EmployeeListSet
OData Services Configuration
47© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Create EmployeeList and EmployeeListSet
OData Services Configuration
48© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Create EmployeeList and EmployeeListSet
OData Services Configuration
49© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Set additional properties
OData Services Configuration
50© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Create CourseList and CourseListSet
OData Services Configuration
51© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Create CourseList and CourseListSet
OData Services Configuration
52© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Create CourseList and CourseListSet
OData Services Configuration
53© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2: Use Wizard to import data structures
Set additional properties
OData Services Configuration
54© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 3: Create associations between data entities
OData Services Configuration
55© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 3: Create associations between data entities
OData Services Configuration
56© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 3: Create associations between data entities
OData Services Configuration
57© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 4: Register services to create runtime artifacts
OData Services Configuration
58© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 5
Create runtime
artifact
redefinitions
Add custom code
to the redefined
methods to
retrieve data
OData Services Configuration
59© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 6
Assign SAP
System
Aliases to
OData
Services
SPRO
OData Services Configuration
60© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 6
Assign SAP
System
Aliases to
OData
Services
SPRO
OData Services Configuration
61© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 1
Activate
services for
the
Launchpad
designer
SPRO
Fiori Launchpad Configuration
62© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 1
Activate
services for
the
Launchpad
designer
SPRO
Fiori Launchpad Configuration
63© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 2
Create
custom Fiori
Launchpad
role
LPD_CUST
Fiori Launchpad Configuration
64© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 3
Create
custom Fiori
Launchpad
LPD_CUST
Fiori Launchpad Configuration
65© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 4
Create new
semantic
object to
identify
application
/UI2/SEMOBJ
Fiori Launchpad Configuration
66© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 5
Launch the
Fiori
Launchpad
designer
SPRO
Fiori Launchpad Designer
67© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 5
Select a
transport and
package for
configuration
changes
Fiori Launchpad Designer
68© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 6
Create a new
catalog
Fiori Launchpad Designer
69© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 7
Create a
new target
map for
your
application
Fiori Launchpad Designer
70© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 7
Create a
new target
map for
your
application
Fiori Launchpad Designer
71© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 8
Create new
tile for your
application
Fiori Launchpad Designer
72© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 9
Create a
new group
Fiori Launchpad Designer
73© 2015 Lockheed Martin Corporation. All Rights Reserved
Step 10
Add tile to
your group
Fiori Launchpad Designer
74© 2015 Lockheed Martin Corporation. All Rights Reserved
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
75© 2015 Lockheed Martin Corporation. All Rights Reserved
UI Development Toolkit For HTML5 – Demo Kit
https://sapui5.netweaver.ondemand.com/sdk/#content/Overview.ht
ml
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
76© 2015 Lockheed Martin Corporation. All Rights Reserved
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
77© 2015 Lockheed Martin Corporation. All Rights Reserved
How to install a basic development environment for
SAPUI5
http://scn.sap.com/community/developer-center/front-
end/blog/2013/06/01/how-to-install-a-basic-development-
environment-for-sapui5
SAP Web IDE – Enablement
http://scn.sap.com/docs/DOC-55465
AppBuilder
https://help.sap.com/appbuilder/
References and Helpful Links
78© 2015 Lockheed Martin Corporation. All Rights Reserved
Using the SAPUI5 Repository Based on BSP Repository
http://help.sap.com/saphelp_nw74/helpdata/en/91/f3ecc06f4d1014b
6dd926db0e91070/frameset.htm
How to Deploy and Run SAPUI5 application on ABAP
Server
http://scn.sap.com/docs/DOC-42820
References and Helpful Links
© 2015 Lockheed Martin Corporation. All Rights Reserved