sapteched 2015 ux114 -building custom sap fiori apps using sap web ide

Session – UX114

Markus van Kempen – [email protected]

@markusvankempen

Building custom SAP Fiori Apps

Using SAP Web IDE

10/23/2015

1

mailto:[email protected]

IBM Internet of Things

Markus Van Kempen

EA Architect

IBM Corporate Technical Strategy

email: mvk@ ca.ibm.com

Twitter: @markusvankempen

Hot Topics: IoT / Bluemix / Wearables / SAP / Mobility and Innovation

http://fiori.mybluemix.net/

Software Engineer from Germany – living in Canada.

Joined IBM in 2002 via OmniLogic/PwC

Famous for Global SAP HR & Portal/Mobile Implementation

Interested predicting The Next Big Thing in technology,

IoT & Bluemix advocate,

Happiest when I can swim, bike & run or code Things


Building Custom SAP Fiori Apps Using SAP Web IDE

10/23/2015

3

This presentation explains and shows the functions and features of SAP Web IDE including how easy and fast

SAP Fiori apps can be built with this development environment. We also discuss how SAP Fiori apps can be

hosted in an on-premise or cloud environment. See how to create Web services and how they can be

integrated into an SAP Fiori application and the end2end steps of building a store SAP Fiori application using

SAP HANA Cloud Platform and with on-premise data.


Agenda

Intro to WebIDE in HCP and Local

Example Landscape

Quick Demo

Cloud connector

How to host a fiori application on-premise

How to create a simple GW Service

Demo

Q&A

10/23/2015

4


SAP WebIDE

Based on Orion - https://orionhub.org/

Cloud and Local version available

(cloud version has more feature / templates)

WYSIWY

Git integration

Deployment to ECC system or HCP

10/23/2015

5


SAP Web IDE Building New Applications

WYSIWYG

New Application

Deploy to

SAP NW AS ABAP

SAP HANA Cloud Platform

Local Development


SAP HCP

SAP Web IDE

Integration Scenario

Data

On Prem

SAP GW

SAP ECC

Connect

Notebook with

SAP

Cloud Connector Mobile

App

HCP Setup

Web Ide

PreviewFiori

On

Mobile


Quick Demo using Flight example service

8

Template/Code

Preview

Cloud Connector/DATA

Gateway Service


Agenda


Example Landscape

Quick Demo

Cloud connector and HCP Setup



Demo

Q&A

10/23/2015

9


SAP Cloud Connector

10/23/2015

10


HANA Cloud Setup

10/23/2015

11


List of available usage types/path

10/23/2015

12

Usage Path Description

odata_abap /sap/opu/odata for the OData functionality of Gateway

odata_gen

for generic OData functionality (service

URL must be provided manually

in the New Project wizard)

ui5_execute_abap /sap/bc/ui5_ui5for executing SAPUI5 applications from

the SAPUI5 ABAP Repository

dev_abap /sap/bc/adt

for extensibility scenarios and

developing or deploying to SAPUI5

ABAP

Repository

bsp_execute_abap /sap/bc/bsp For fact sheets

odata_xs /sap/hba For HANA XS Odata services

plugin_repository /plugins/pluginrepository for exposing external plugin repositories


Agenda


Example Landscape

Quick Demo


How to host a Fiori application on-premise

How create Simple GW Service

Demo

Q&A

10/23/2015

13


On premise Code Options

Run App in HCP, ECC or locally

WebIDE – checking code into ABAP tack

Manual Upload of WebIDE code to ECC

Execute Code locally with ui5 lib and json source path adjustment

10/23/2015

14



Deploy via WebIDE Or download and use

(Report /UI5/UI5_REPOSITORY_LOAD to upload your code as BSP pages

Tip: You can also run the code locally if you adjust the js library path in the index.html as the

destination and ECC url in components.

10/23/2015

15


Tip: You can also run the code locally if you adjust the js library path in the index.html as the destination and ECC url in components.

10/23/2015

16


Agenda


Example Landscape

Quick Demo




Demo

Q&A

10/23/2015

17


Useful Transaction

/n/IWFND/MAINT_SERVICE – GW Service

/nsicf – Internet Services

/nse37 - find RFC

Report /UI5/UI5_REPOSITORY_LOAD

/nsegw – create GW Service

/n/IWFND/GW_CLIENT – test GW client

/IWFND/ERROR_LOG

10/23/2015

18


Building a Service

10/23/2015

19

Keep in mind that the data model is separated from fetching processing the data e.g EntitySets

Transaction /nsegw tip: use RFCs (MSR1_MD_PLANT_GETLIST) if you can for data model and fetching

... Make it really easy


Search / $filter …

10/23/2015

20

URL Parameter like $count ….

https://help.sap.com/saphelp_gateway20sp08/helpdata/en/71/d07b52a3566f54e10000000a44176d/content.htm

LOOP AT it_filter_select_options INTO ls_filter_select_options.

IF ls_filter_select_options-property = 'Name1'.

LOOP AT ls_filter_select_options-select_options

INTO ls_select_option.

MOVE-CORRESPONDING ls_select_option TO ls_contract_range.

APPEND ls_contract_range TO lt_contract_range.

ENDLOOP.

mvk_filter_str = |NAME1 in lt_contract_range|.

ENDIF.

ENDLOOP.

LOOP AT pot_plant INTO ls_pot_plant

FROM lv_skip TO lv_top

where (mvk_filter_str).


Test the Service (/n/IWFND/GW_CLIENT)

10/23/2015

21

Tip: You can use a REST client like Postman in a browser for testing as well


Build the App using the a custom service (demo)

10/23/2015

22


YT instructions to setup WebIDE, Cloud Connector …

SAPTechED UX114 WebIDEFioriApp Part One / 1

https://youtu.be/xWGul1CzmIg

SAPTechED UX114 WebIDE Fiori App Part Two / 2

https://youtu.be/SDFbAbbCBkE

SAPTechED UX114 Create Custom GW Service Part Three / 3

https://youtu.be/7_BrEM3patk

SAPTechED 2015 UX114 Create a Fiori App With Custom Service Part Four / 4

https://www.youtube.com/watch?v=j3lqt8IbHbc

10/24/2015

23

https://youtu.be/xWGul1CzmIg

https://youtu.be/SDFbAbbCBkE

https://youtu.be/7_BrEM3patk

https://www.youtube.com/watch?v=j3lqt8IbHbc

IBM Internet of Things10/23/2015

25

Please complete a session

evaluation for: UX114


Markus van KempenExecutive Architect & Venture Capital InvestorIBM Corporate Technical StrategyInnovating with People and Technology

email: mvk@ ca.ibm.comTwitter: @markusvankempenHashtag: #MVK


References

27

HanaCloudTrail

https://account.hanatrial.ondemand.com/

Cloud Connector

https://help.hana.ondemand.com/help/frameset.htm?e6c7616abb5710148cfcf3e75d96d596.html

SAP WebIDE

http://scn.sap.com/docs/DOC-55465

Training

http://scn.sap.com/community/gateway/blog/2015/07/10/gw100--sap-gateway--building-odata-services

Local WebIDE

http://scn.sap.com/community/developer-center/front-end/blog/2014/12/24/start-with-the-sap-web-ide-on-premise

How to configure an external GW system with SAP Web IDE

http://scn.sap.com/community/developer-center/front-end/blog/2014/06/22/how-to-configure-an-external-gw-system-with-sap-river-

rde

Setup your SAP Web IDE on HANA Cloud Platform

http://scn.sap.com/community/developer-center/front-end/blog/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-5

Odata/URL Parameter


https://account.hanatrial.ondemand.com/

https://help.hana.ondemand.com/help/frameset.htm?e6c7616abb5710148cfcf3e75d96d596.html

http://scn.sap.com/community/gateway/blog/2015/07/10/gw100--sap-gateway--building-odata-services

http://scn.sap.com/community/developer-center/front-end/blog/2014/12/24/start-with-the-sap-web-ide-on-premise

http://scn.sap.com/community/developer-center/front-end/blog/2014/06/22/how-to-configure-an-external-gw-system-with-sap-river-rde

http://scn.sap.com/community/developer-center/front-end/blog/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-5



References

2810/23/2015

Blogs - SAP Fiori / UI5 and HANA Data visualization

http://scn.sap.com/community/fiori/blog/2015/05/11/sap-fiori-ui5-and-hana-data-visualization

YouTube:

https://www.youtube.com/watch?v=kvOOREcpLfo

SAP Web Ide and Hana Cloud Platform building a Fiori App

https://www.youtube.com/watch?v=hQBewJcAUHI

More

https://markusvankempen.wordpress.com/



https://www.youtube.com/watch?v=kvOOREcpLfo

https://www.youtube.com/watch?v=hQBewJcAUHI

https://markusvankempen.wordpress.com/


Highly efficient development tools 1/3

Increasing Developer productivity by simplifying development to create more apps faster. SAP Web IDE’s modular architecture

offer extending it by “adding your own plug-ins”.

Templates and wizards for creating Fiori/UI5 Apps

Project templates for creating new apps e.g. Fiori Start App, Empty UI5

Mobile app

Wizards for creating components as single logical units (i.e. single SAPUI5

view)

Template library grouped by categories containing technical details on

delivered templates

Plug-in and template creation

Wizard of creating new plug-ins and templates

Ability to reuse existing template screens and created new templates

Auto complete for editing template files in code editor

Test plugin projects within SAP Web IDE



Increasing Developer productivity by offering a robust code editor with code completion (XML, JavaScript and SAPUI5) and an

embedded API reference pane.

Code Editor

Code Editor for JS and XML

Content/File search and replace (all) function pane

Syntax check with error / warning indicators

API reference pane for control documentation

Personalization to choose a different SAP themes for code editor

Integration with static code quality tools (JShint, Eslint)

Code completionContext-based XML and JS code completion for SAPUI5 controls (also

based on arbitrary XML schema)

Snippet-based XML and JS auto-completion

Code completion for customer-defined global variable/function/object

cross different JS files



Project persistency through GIT integration

Clone an existing Git repository into a new directory

Integrated Git pane in SAP Web IDE to perform local

and server side operations

Comparing files before committing changes

Integrated Git history pane

Integrated collaboration

Integrated Collaboration pane based on JAM to

improve team productivity

Collaboration between Developers on files in the code

editor

Collaboration between Developers, Business experts

and Designers on a running application

Increasing Developer productivity by offering collaborative development and project persistency through GIT

IBM Internet of Things10/23/2015

32