8/13/2019 SAP Portal on Device
1/40
Develop Your First Mobile Applicationwith Portal on DeviceDong Pan, Aviad Rivlin
[
8/13/2019 SAP Portal on Device
2/40
Real Experience. Real Advantage.
[
2
Learning Points
Simplified mobile business app development with Portal onDevice
Near-native user experience with HTML5-based mobile webapplications
Lower TCO with the device-agnostic approach to mobile appdevelopment
8/13/2019 SAP Portal on Device
3/40
Real Experience. Real Advantage.
[
3
Agenda
Introduction to Portal on Device
Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
8/13/2019 SAP Portal on Device
4/40
Real Experience. Real Advantage.
[ Portal in the Overall SAP Strategy
4
Improvements for portal core (TCO reduction)
Enhancing Enterprise Workspaces
Professional Web Content Management
Professional Document Management
Smart integration with on demand solutions
(SAP and third party services)
Social Intelligence tools for SAP StreamWork
Support for common web standards
Easy consumption via browser or mobile devices
Appealing branding based on Ajax Framework
Aligned offering with Sybase portfolio
Reliable infrastructure with minimal TCO
8/13/2019 SAP Portal on Device
5/40
Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
The Underlying UI of Portal on Device
jQuery Mobile is a unified, HTML5-based, touch-optimized Webuser interface framework for smartphones and tablets.
Multiple pages" may exist in the sameHTML file.
Rich, native-like experience, such as advanced transitions.
Uses HTML5 data-attributes for page styling and componentbehavior.
Unlimited theming possibilities with simple tools
8/13/2019 SAP Portal on Device
6/40
Real Experience. Real Advantage.
[
6
Agenda
Introduction to Portal on Device Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
8/13/2019 SAP Portal on Device
7/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Steps to Create a HelloWorld PoD Application
Create a regular Portal Application project and anAbstractPortalComponent
Use the HTML5 Utility library to set HTML5 DOCTYPE
Create mobile UI in JSP/html pages Include jQuery Mobile JS, CSS, image and JSP/html files in the
doContentmethod
8/13/2019 SAP Portal on Device
8/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Important: Set HTML5 DOCTYPE
Default portal pages are not compliant with HTML5. To render themobile pages correctly, we need to:
Override servicemethod of AbstractPortalComponent
Use the utility library to set the correct DOCTYPE
public void service(IPortalComponentRequest request, IPortalComponentResponse response)
throws PortalComponentException {
EnhancedPortalResponse epResponse = new EnhancedPortalResponse(request, true,
false);
epResponse.setDocTypeToHtml5();
super.service(request, response);
}
8/13/2019 SAP Portal on Device
9/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Create helloworld.jsp Page
Demo App
My Links
8/13/2019 SAP Portal on Device
10/40Real Experience. Real Advantage.
[
11
DemoApplication Skeleton
8/13/2019 SAP Portal on Device
11/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Useful Tips
The HTML5 utility library can be used to add additionalelements, e.g.
Cache Manifest file (we will talk about this later)
External JavaScript files
Meta and Link tags
Custom URL schemes can be used to launch native apps,bridging the web app and native apps
8/13/2019 SAP Portal on Device
12/40Real Experience. Real Advantage.
[
13
Agenda
Introduction to Portal on Device Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
8/13/2019 SAP Portal on Device
13/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
The Scenario
Add a page to show a list of sales orders retrieved from anECC system
JCA (Java EE Connector Architecture) will be used toconnect to the ECC system.
8/13/2019 SAP Portal on Device
14/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Device
Design Pattern I: Device-Portal Interaction Model
Business logic encapsulated in the mobile-oriented portal components
Data exchange between mobile UI and the business logic components isbased on AJAX and JSON
Decoupling the business logic and UI allows the freedom to choose any
mobile UI library
Minimizing the data volume transferred on the mobile network.
Portal
Portal Services
Portal Components (Business Logic here)
AJAX Response in JSON format
Mobile UI
AJAX Requests (plain/JSON)
8/13/2019 SAP Portal on Device
15/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Overall Steps
Add build-time and runtime references for JCA
Create a separate portal component to handle sales orderretrieval and delivery
Add JavaScript functions to retrieve JSON-formatted salesorders by AJAX calls
Add a jQuery Mobile page to helloworld.jsp to display salesorders
8/13/2019 SAP Portal on Device
16/40Real Experience. Real Advantage.
[
17
Demo: Display Sales Orders
8/13/2019 SAP Portal on Device
17/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Useful Tips
JSON utility classes can be found in the HTML5 utility library.
To output pure JSON, bypass document hooks by using thefollowing URL:
/irj/servlet/prt/prtrw/prtroot/myMobileApp.SalesOrder
Build semi-static data into the DOM for smooth navigationback and forth.
8/13/2019 SAP Portal on Device
18/40Real Experience. Real Advantage.
[
19
Agenda
Introduction to Portal on Device
Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
8/13/2019 SAP Portal on Device
19/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
The Scenario and the Implementation Steps
The Scenario
Add a page to show a list of banks retrieved from NetWeaverGateway
Overall Steps:
Add build-time and runtime references to Gateway JavaLibrary
Create a separate AbstractPortalComponent to handle data
retrieval from Gateway and data delivery (JSON) to devices
Add an AJAX call to consume the JSON-formatted bank list
Add a page to render the bank list
8/13/2019 SAP Portal on Device
20/40Real Experience. Real Advantage.
[
21
Demo: Retrieve Bank List from NetWeaver Gateway via Portal
8/13/2019 SAP Portal on Device
21/40Real Experience. Real Advantage.
[
22
Agenda
Introduction to Portal on Device
Create the Application Skeleton
Backend Data Consumption Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
8/13/2019 SAP Portal on Device
22/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
The Scenario
Scenario: Retrieve the list of banks directly from NetWeaver
Gateway by JavaScript. Challenge: Impossible to retrieve data from Gateway due to
JavaScript Same-Origin Policy
Mobile Browser
Main Page
Portal
http://
Gateway
http://datajs lib REST
calls X
8/13/2019 SAP Portal on Device
23/40Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Design Pattern II: HTML5-based Cross-Site Data Retrieval Add a ProxyPage on the Gateway system to handle genericGateway calls by
datajs.
Use HTML5 Cross Document Messaging for cross-domain data exchange
Main page dynamically spawns a hidden iframe that points to the ProxyPage.
Main page sends commands to the ProxyPage to perform dataretrieval/update/etc.
ProxyPage sends REST data (in JSON format) back to main page
Mobile Browser
Hidden iframe
http:///ProxyPage.html
Datajs lib
Main Page
http://
Cross
Document
Messaging
Portal
Gateway
8/13/2019 SAP Portal on Device
24/40Real Experience. Real Advantage.
[
25
Demo: Retrieve Bank List from NetWeaver Gateway Directly
8/13/2019 SAP Portal on Device
25/40
Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Best Practices
Take the load off portal for better scalability if the data isalready exposed to Internet directly
The typical cross-domain challenge can be addressed byCross Document Messaging and Cross-Origin Resource
Sharing (CORS)
Generalize ProxyPage in the Gateway system to suit all kindsof consuming applications
8/13/2019 SAP Portal on Device
26/40
Real Experience. Real Advantage.
[
27
Agenda
Introduction to Portal on Device
Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
8/13/2019 SAP Portal on Device
27/40
Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Design Pattern III: Make Your iView an Offline Web App
Appify offline-capable iViews (HTML5 Offline Web App) to make it always available
Sync semi-static data to the browsers local database, eliminating unnecessary roundtripsto portal
Use a dedicated Web Worker thread for background synchronization to create a highlyresponsive UI
Ideal for lightweight data centric application
Offline iView
WebWorker
DB
PortalMainThread
Sync
8/13/2019 SAP Portal on Device
28/40
Real Experience. Real Advantage.
[
29
Demo: Offline-Capable iView on Home Screen
8/13/2019 SAP Portal on Device
29/40
Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Best Practices
Place the pages in a HTML file (not JSP) in the portal application,
which will serve as the entry point to install the offline app. Use HTML5 offline cache to speed up loading of bothonline
and offline applications
Configure AS Java to serve the correct MIME type for the cachemanifest.
Configure your offline app to run full-screen with a startupimage to give it a professional look
Android browser does not support Web Workers yet. Use in-thread sync instead.
Consider Sybase Unwired Platform for complex DB sync
8/13/2019 SAP Portal on Device
30/40
Real Experience. Real Advantage.
[
31
Agenda
Introduction to Portal on Device
Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
8/13/2019 SAP Portal on Device
31/40
Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Design Pattern IV: New Ways of Human Interaction
Use the new ways of human interaction to create highly
professional mobile web applications Modern mobile devices are equipped with smart sensors that were
never available to desktops and laptops
The smart sensors have made possible cool new ways of human-machineinteraction
HTML5 applications have access to most sensors includingaccelerometer, gyroscope, GPS, compass, camera*, microphone*.
8/13/2019 SAP Portal on Device
32/40
Real Experience. Real Advantage.
[
33
Demo: Find Local Banks with a Shake Gesture
8/13/2019 SAP Portal on Device
33/40
Real Experience. Real Advantage.
[
34
Agenda
Introduction to Portal on Device
Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
[
8/13/2019 SAP Portal on Device
34/40
Real Experience. Real Advantage.
[
This presentation and SAP's strategy and possible future developments are subject to change and may be changed by S AP at any time for any reason without notice. This document is provided without a
warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement.
Design Pattern V: Visualize Data with Canvas and SVG
Requirements
Retrieve data from HANA and show it on mobile devices in anappealing way.
Solution:
Maintain HANA as a JDBC DataSource on AS Java.
Use HTML5 Canvas or SVG to visualize the data. SVG andCanvas are well supported on popular mobile devices.
[
8/13/2019 SAP Portal on Device
35/40
Real Experience. Real Advantage.
[
36
Demo: Consume HANA Data
[
8/13/2019 SAP Portal on Device
36/40
Real Experience. Real Advantage.
[
37
Agenda
Introduction to Portal on Device
Create the Application Skeleton
Device-Portal Interaction Model
Consume NetWeaver Gateway Services
Java-based Consumption Take the Load off Portal
Lets Take This Offline
Shake it to Find Local Banks
Consume HANA Data Summary
[
8/13/2019 SAP Portal on Device
37/40
Real Experience. Real Advantage.
[
38
Key Learnings
Leverage NetWeaver Portals rich connectivity to variousbackend systems.
Separate business logic and UI into different portal componentsto allow UI flexibility, responsiveness and reusability
Use cross-site data retrieval via JavaScript whenever possibleto build a highly scalable solution
Make offline-capable iViews always available on home screen.
Use HTML5 Canvas and SVG for a more vivid user experiencewithout browser plug-ins.
Leverage new ways of human interaction to impress your users
[
8/13/2019 SAP Portal on Device
38/40
Real Experience. Real Advantage.
[ Further information
General Information
Follow us on Twitter: http://twitter.com/#!/PORTAL_SAP Demo videos: http://www.youtube.com/user/SAPNetWeaverPortals
Decisions Makers
Overview information on www.sap.com
Technical Consultants, Developers & Architects SCN Portal Community: http://scn.sap.com/community/portal Detailed release notesfor SAP NetWeaver 7.3
Project Managers
Release Notes, Documentation: http://help.sap.com> SAP NetWeaver SAP Release Brochure: http://service.sap.com/releasestrategy
Partners
Partner Portal: https://service.sap.com/partnerportal/products Solutions on SAP EcoHub: http://ecohub.sdn.sap.com
39
[
http://twitter.com/http://www.youtube.com/user/SAPNetWeaverPortalshttp://www.sap.com/platform/netweaver/components/portal/index.epxhttp://scn.sap.com/community/portalhttp://help.sap.com/saphelp_nw73/helpdata/en/a2/fc644eb17e43b3a6442c5c522ad55e/frameset.htmhttp://help.sap.com/http://service.sap.com/releasestrategyhttps://service.sap.com/partnerportal/productshttp://ecohub.sdn.sap.com/http://ecohub.sdn.sap.com/https://service.sap.com/partnerportal/productshttp://service.sap.com/releasestrategyhttp://help.sap.com/http://help.sap.com/saphelp_nw73/helpdata/en/a2/fc644eb17e43b3a6442c5c522ad55e/frameset.htmhttp://scn.sap.com/community/portalhttp://www.sap.com/platform/netweaver/components/portal/index.epxhttp://www.youtube.com/user/SAPNetWeaverPortalshttp://twitter.com/8/13/2019 SAP Portal on Device
39/40
Real Experience. Real Advantage.
[Join other portal-related ASUG sessions
2214 SAP Portal Roadmap: Innovations On Premise, On Demand and On Device
3903 SAP Portal Influence Council 2201 SAP NetWeaver Portal 7.3top 5 reasons to upgrade to the new portal release
2203 Best practices for successfully upgrading your portal to SAP NetWeaver 7.3
2207 "From Document Management to Social and Mobile Content Managementwith SAP Portal Content Management by OpenText"
2114 External Facing Portal: solution that fits your needs
2112 Lessons learned for implementing appealing extranets with SAP NetWeaver Portal
2102 Content consumption and interoperability between SAP NetWeaver Portals
2204 SAP NetWeaver Portal On Deviceaccessing your existing SAP NetWeaver Portal on mobile devices
2209 A day in a life of a manger: mobile intranet using desktop, tablets and smartphone devices
2211 Develop your first mobile application with Portal on Device
2108 Leverage the Power of Social Networks in your organization, by SAP Enterprise Workspaces
2110 Customer story: use EP inside multi-portal organizations
2213 Lessons learned by Colgate-Palmolive with Enterprise Workspaces 1.x for SAP NetWeaver Portal
40
[
8/13/2019 SAP Portal on Device
40/40
[
[
] Thank you for participating.
SESSION CODE:
2211
Please remember to complete and return your
evaluation form following this session.
For ongoing education on this area of focus, visit the
Year-Round Community page at www.asug.com/yrc