SAP TechEd && d-code - ABAP · PDF fileSAP TechEd Using SAPUI5 to Enhance Enterprise Learning Manager Capabilities Rob Becker ... end/blog/2014/03/04/building-sap-fiori-like-uis-with-sapui5-in-10

1© 2015 Lockheed Martin Corporation. All Rights Reserved

SAP TechEd

Using SAPUI5 to Enhance Enterprise

Learning Manager Capabilities

Rob BeckerSession MOB115


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


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 13

SAP NetWeaver Gateway 2.0

SPS 10


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






Live Demo



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


Learning Points






Live Demo



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



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


Learning Points






Live Demo



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


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

https://tools.hana.ondemand.com/

http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-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/front-

end/blog/2014/03/04/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



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.htm

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



Referencing the

OData service in

Detail.view.xml

OData Ref



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





Configuring Fiori Launchpad and Integrating an SAPUI5

Application

Live Demo



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



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



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



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



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






Live Demo



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






Live Demo



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


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 application

Allow learners to take on-line training using their mobile

devices


Thank You

Feedback

Please complete a session evaluation for this

session!

SESSION CODE: MOB115


Backup Slides


Step 1

Activate

the

gateway

service

SPRO



Step 2

Create

gateway

aliases

SPRO



Step 2

Create

gateway

aliases

SPRO



Step 3

Create

gateway

destinations

SPRO



Step 3

Create

gateway

destinations

SPRO



Step 1

Create

supporting

data

structures

Employee

data

SE11

Create Data Structures for OData


Step 1

Create

supporting

data

structures

Course

data

SE11

Create Data Structures for OData


Step 2

Create

Supporting

OData

Services

SEGW



Step 2: Use Wizard to import data structures

Create EmployeeList and EmployeeListSet












Set additional properties




Create CourseList and CourseListSet












Set additional properties



Step 3: Create associations between data entities









Step 4: Register services to create runtime artifacts



Step 5

Create runtime

artifact

redefinitions

Add custom code

to the redefined

methods to

retrieve data



Step 6

Assign SAP

System

Aliases to

OData

Services

SPRO



Step 6

Assign SAP

System

Aliases to

OData

Services

SPRO



Step 1

Activate

services for

the

Launchpad

designer

SPRO



Step 1

Activate

services for

the

Launchpad

designer

SPRO



Step 2

Create

custom Fiori

Launchpad

role

LPD_CUST



Step 3

Create

custom Fiori

Launchpad

LPD_CUST



Step 4

Create new

semantic

object to

identify

application

/UI2/SEMOBJ



Step 5

Launch the

Fiori

Launchpad

designer

SPRO

Fiori Launchpad Designer


Step 5

Select a

transport and

package for

configuration

changes



Step 6

Create a new

catalog



Step 7

Create a

new target

map for

your

application



Step 7

Create a

new target

map for

your

application



Step 8

Create new

tile for your

application



Step 9

Create a

new group



Step 10

Add tile to

your group



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

http://help.sap.com/nwgateway20

http://help.sap.com/nw-uiaddon

http://experience.sap.com/news/introducing-sap-fiori-launchpad



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


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



https://sapui5.netweaver.ondemand.com/sdk/#content/Overview.html

http://scn.sap.com/community/developer-center/front-end/blog/2014/03/04/building-sap-fiori-like-uis-with-sapui5-in-10-exercises



Getting Started with SAPUI5


UI Development Toolkit for HTML5 Developer Center

http://scn.sap.com/community/developer-center/front-end

SAP Development Tools for Eclipse




http://scn.sap.com/community/developer-center/front-end



How to install a basic development environment for

SAPUI5


end/blog/2013/06/01/how-to-install-a-basic-development-

environment-for-sapui5

SAP Web IDE – Enablement


AppBuilder

https://help.sap.com/appbuilder/


http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-sapui5


https://help.sap.com/appbuilder/


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://help.sap.com/saphelp_nw74/helpdata/en/91/f3ecc06f4d1014b6dd926db0e91070/frameset.htm


© 2015 Lockheed Martin Corporation. All Rights Reserved

Documents

SAP TechEd && d-code - ABAP · PDF fileSAP TechEd Using SAPUI5 to Enhance Enterprise Learning Manager Capabilities Rob Becker ... end/blog/2014/03/04/building-sap-fiori-like-uis-with-sapui5-in-10