Session – UX114
Markus van Kempen – [email protected]
@markusvankempen
Building custom SAP Fiori Apps
Using SAP Web IDE
10/23/2015
1
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
IBM Internet of 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.
IBM Internet of Things
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
IBM Internet of Things
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
IBM Internet of Things
SAP Web IDE Building New Applications
WYSIWYG
New Application
Deploy to
SAP NW AS ABAP
SAP HANA Cloud Platform
Local Development
IBM Internet of Things
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
IBM Internet of Things
Quick Demo using Flight example service
8
Template/Code
Preview
Cloud Connector/DATA
Gateway Service
IBM Internet of Things
Agenda
Intro to WebIDE in HCP and Local
Example Landscape
Quick Demo
Cloud connector and HCP Setup
How to host a fiori application on-premise
How to create a simple GW Service
Demo
Q&A
10/23/2015
9
IBM Internet of Things
SAP Cloud Connector
10/23/2015
10
IBM Internet of Things
HANA Cloud Setup
10/23/2015
11
IBM Internet of Things
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
IBM Internet of Things
Agenda
Intro to WebIDE in HCP and Local
Example Landscape
Quick Demo
Cloud connector and HCP Setup
How to host a Fiori application on-premise
How create Simple GW Service
Demo
Q&A
10/23/2015
13
IBM Internet of Things
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
IBM Internet of Things
How to host a fiori application on-premise
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
IBM Internet of Things
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
IBM Internet of Things
Agenda
Intro to WebIDE in HCP and Local
Example Landscape
Quick Demo
Cloud connector and HCP Setup
How to host a fiori application on-premise
How to create a simple GW Service
Demo
Q&A
10/23/2015
17
IBM Internet of Things
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
IBM Internet of Things
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
IBM Internet of Things
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).
IBM Internet of Things
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
IBM Internet of Things
Build the App using the a custom service (demo)
10/23/2015
22
IBM Internet of Things
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
IBM Internet of Things
IBM Internet of Things10/23/2015
25
Please complete a session
evaluation for: UX114
IBM Internet of Things
Markus van KempenExecutive Architect & Venture Capital InvestorIBM Corporate Technical StrategyInnovating with People and Technology
email: mvk@ ca.ibm.comTwitter: @markusvankempenHashtag: #MVK
IBM Internet of Things
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://help.sap.com/saphelp_gateway20sp08/helpdata/en/71/d07b52a3566f54e10000000a44176d/content.htm
IBM Internet of Things
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/
IBM Internet of Things
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
IBM Internet of Things
Highly efficient development tools 2/3
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
IBM Internet of Things
Highly efficient development tools 3/3
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