SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
1 like2,295 views
This document provides an overview of a presentation on building custom SAP Fiori apps using SAP Web IDE. The presentation discusses using SAP Web IDE for development, hosting apps on-premise or in the cloud, creating web services, and building a sample store app. It includes an agenda, introductions to SAP Web IDE and HCP, demos of building apps and services, and references for further information.
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
- 1. Session โ UX114 Markus van Kempen โ mvk@ca.ibm.com @markusvankempen Building custom SAP Fiori Apps Using SAP Web IDE 10/23/2015 1
- 2. 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
- 3. 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.
- 4. 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
- 5. 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
- 6. 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
- 7. IBM Internet of Things SAP HCP SAP Web IDE Integration Scenario Data On Prem SAP GW SAP ECC Connect Notebook with SAP Cloud Connector MobileApp HCP Setup Web Ide Preview Fiori On Mobile
- 8. IBM Internet of Things Quick Demo using Flight example service 8 Template/Code Preview Cloud Connector/DATA Gateway Service
- 9. 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
- 10. IBM Internet of Things SAP Cloud Connector 10/23/2015 10
- 11. IBM Internet of Things HANA Cloud Setup 10/23/2015 11
- 12. 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_ui5 for 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
- 13. 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
- 14. 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
- 15. 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
- 16. 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
- 17. 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
- 18. 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
- 19. 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
- 20. 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).
- 21. 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
- 22. IBM Internet of Things Build the App using the a custom service (demo) 10/23/2015 22
- 23. 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
- 24. IBM Internet of Things
- 25. IBM Internet of Things 10/23/2015 25 Please complete a session evaluation for: UX114
- 26. IBM Internet of Things Markus van Kempen Executive Architect & Venture Capital Investor IBM Corporate Technical Strategy Innovating with People and Technology email: mvk@ ca.ibm.com Twitter: @markusvankempen Hashtag๏: #MVK
- 27. 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
- 28. IBM Internet of Things References 28 10/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/
- 29. 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
- 30. 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 completion Context-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
- 31. 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
- 32. IBM Internet of Things 10/23/2015 32