SAP TechEd && d-code - ABAP · PDF fileSAP TechEd Using SAPUI5 to Enhance Enterprise...

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

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

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

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

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

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

gateway

service

Step 2

Create

gateway

aliases

Step 2

Create

gateway

aliases

Step 3

Create

gateway

destinations

Step 3

Create

gateway

destinations

Step 1

Create

supporting

structures

Employee

Create Data Structures for OData

Step 1

Create

supporting

structures

Course

Create Data Structures for OData

Step 2

Create

Supporting

Services

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

Services

Step 6

Assign SAP

System

Aliases to

Services

Step 1

Activate

services for

Launchpad

designer

Step 1

Activate

services for

Launchpad

designer

Step 2

Create

custom Fiori

Launchpad

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

Launchpad

designer

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

application

Step 7

Create a

new target

map for

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

UI Development Toolkit For HTML5 – Demo Kit

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

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

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

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

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/

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

SAP TechEd && d-code - ABAP · PDF fileSAP TechEd Using SAPUI5 to Enhance Enterprise...

Documents

SAP Teched Duet Enterprise

SAPUI5 & OpenUI5 for SAP InnoJam

Virtual SAP TechEd 2007 Syllabus

Virtual SAP TechEd 2009 Syllabus

POP101 Intelligent Processes on SAP HANA Overview and …sapvod.edgesuite.net/TechEd/TechEd_Vegas2013/pdfs/POP101.pdf · SAPUI5-based BPM Inbox API access to tasks PI and BPM on a

Exhibitor Information - SAP Eventsevents.calliesundschewe.de/uploads/9/SAP TechEd Barcelona_Exhibit… · SAP® TechEd Barcelona Exhibitor Information November 10-12, ... • SAP

SAP TechEd 2015 takeaway

SAP TechEd 2015 – SAP BI Takeaways

SAP SAPUI5

sap teched sessions

SAP TechEd BI recap | sitNL 2016

SAP TECHED Barcelona 2015 - All Sessions

McCoy SAP TechEd Takeaway 2016

SAP TechEd 2016 UX261 sap_screen_personas_hands-on

Kommissionierdialoge mit SAPUI5 - baymevbm.de€¦ · Kommissionierdialoge mit SAPUI5 Mit SAPUI5 richtet SAP den Fokus auf ein deutlich verbessertes Handling der Software: Sowohl

SAP TechEd SAP Screen Personas lecture session UXP203

SAP Fiori - SAPUI5 Overview

SAP BI on BB TechEd Pres

SAP TechEd 2016 when_to_use_fiori_or_sap_screen_personas

Sap teched sapbw_innovatively_nalabothula