SAP Portal on Device

8/13/2019 SAP Portal on Device

1/40

Develop Your First Mobile Applicationwith Portal on DeviceDong Pan, Aviad Rivlin

[


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


3/40


[

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


4/40


[ 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


5/40


[

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


6/40


[

6

Agenda

Introduction to Portal on Device Create the Application Skeleton








7/40Real Experience. Real Advantage.

[



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



[



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);

}



[



Create helloworld.jsp Page

Demo App

My Links



[

11

DemoApplication Skeleton



[



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



[

13

Agenda

Introduction to Portal on Device Create the Application Skeleton









[



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.



[



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)



[



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



[

17

Demo: Display Sales Orders



[



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.



[

19

Agenda











[



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



[

21

Demo: Retrieve Bank List from NetWeaver Gateway via Portal



[

22

Agenda



Backend Data Consumption Model








[



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



[



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



[

25

Demo: Retrieve Bank List from NetWeaver Gateway Directly


25/40


[



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


26/40


[

27

Agenda










27/40


[



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


28/40


[

29

Demo: Offline-Capable iView on Home Screen


29/40


[



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


30/40


[

31

Agenda










31/40


[



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*.


32/40


[

33

Demo: Find Local Banks with a Shake Gesture


33/40


[

34

Agenda









[


34/40


[



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.

[


35/40


[

36

Demo: Consume HANA Data

[


36/40


[

37

Agenda









[


37/40


[

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

[


38/40


[ 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/


39/40


[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

[


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

Documents

SAP Portal on Device