SAP NetWeaver Portal 7.3: Introduction to Portal on Device

SAP NetWeaver

Introduction to Portal on Device

Applicable Releases:

SAP NetWeaver 7.3 SPS05

Topic Area: Portal on Device

Capability: SAP NetWeaver Portal

Version 1.1

February 2012

© Copyright 2012 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, OpenPower and PowerPC are trademarks or registered trademarks of IBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.

MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

These materials are provided “as is” 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.

SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials.

SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages.

SAP NetWeaver “How-to” Guides are intended to simplify the product implementation. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. Should you wish to receive additional information, clarification or support, please refer to SAP Consulting.

Any software coding and/or code lines / strings (“Code”) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

Disclaimer

Some components of this product are based on Java™. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively prohibited, as is any decompilation of these components.

Any Java™ Source Code delivered with this product is only to be used by SAP’s Support Services and may not be modified or altered in any way.

Document History

Document Version Description

1.0 (Nov 2011) First version of this document.

1.1 (Feb 2012) Section 4.3.1 Deploying the Portal on Device Software Package: updated with new information about obtaining the required JAR files

Typographic Conventions Type Style Description

Example Text Words or characters quoted from the screen. These include field names, screen titles, pushbuttons labels, menu names, menu paths, and menu options. Cross-references to other documentation

Example text Emphasized words or phrases in body text, graphic titles, and table titles

Example text File and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools.

Example text User entry texts. These are words or characters that you enter in the system exactly as they appear in the documentation.

<Example text>

Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system.

EXAMPLE TEXT Keys on the keyboard, for example, F2 or ENTER.

Icons Icon Description

Caution

Important

Note

Recommendation or Tip

Example

Table of Contents

1. Overview ..........................................................................................................................1

2. Supported Application Types .........................................................................................2

3. UI Components of Portal on Device ...............................................................................3 3.1 Header .....................................................................................................................4 3.2 Home Page...............................................................................................................5 3.3 Favorites Page..........................................................................................................6 3.4 Search Page .............................................................................................................7 3.5 Settings Page ...........................................................................................................8 3.6 More Apps Page .......................................................................................................9

4. Configuring the Portal for Mobile Devices ................................................................... 10 4.1 Prerequisites ........................................................................................................... 10 4.2 Support for HTML5 for Portal on Device .................................................................. 11 4.3 Configuration Workflow ........................................................................................... 11

4.3.1 Deploying the Portal on Device Software Package ...................................... 12 4.3.2 Creating the Mobile Portal Framework ........................................................ 13 4.3.3 Creating and Configuring the Mobile Framework Page ................................ 13 4.3.4 Adding a Headerless Page to the Mobile Framework Page ......................... 15 4.3.5 Creating a Theme for the Mobile Desktop ................................................... 16 4.3.6 Creating a Desktop for the Mobile Framework Page .................................... 16 4.3.7 Creating a Desktop Rule to Access the Mobile Desktop .............................. 17 4.3.8 Preventing Mobile Content from Being Displayed to Portal Desktop Users .. 18 4.3.9 Creating and Configuring the Home Page ................................................... 18 4.3.10 Creating and Configuring the More Apps Page ........................................... 19 4.3.11 Changing the Portal Login Page (Optional) ................................................. 19

5. Known Limitations ........................................................................................................ 20

An Introduction to Portal on Device

February 2012 1

1. Overview SAP NetWeaver Portal acts as a gateway to enterprise information systems and provides connectivity to SAP and non-SAP back-end systems. Using mobile Web browsers, you can access the portal on mobile devices, such as smartphones or tablets, using a UI scheme that is adapted for these devices. This capability is referred to as portal on device.

Note The capabilities of portal on device, as described in this document, are based on SAP NetWeaver 7.3 SPS05.

Native Browser Navigation Experience Portal on device runs in a mobile browser and provides a native browser navigation experience, by supporting the following capabilities:

Navigation bar

Previous and next page buttons

Paging button Session management. Portal on device uses the standard session management mechanisms

that are used for a portal that runs in a regular browser.

Note Although the portal currently does not support HTML5, the portal on device implementation requires support for HTML5. For more information, see Support for HTML5 for Portal on Device on page 11.

Assumptions The following assumptions apply to this implementation:

You are using the SAP NetWeaver Portal from desktops, and would like to expose the portal content and applications to mobile devices

Separate role structures are used for portal on desktop and for portal on device Legacy applications that are used as-is, are opened in a new headerless window

Multi-Language Support Portal on device provides multi-language support. English, German, and French are supported for the portal on device capabilities described in this document. You can extend support to additional languages using standard portal translation mechanisms.

This Document SAP NetWeaver 7.3 SPS05 enables you to consume portal services from mobile devices using a dedicated software package. The implementation provided by the package was designed for smartphones, yet can also be consumed by tablets. This document accompanies the portal on device software package and describes the following topics:

Supported Application Types UI Components of Portal on Device Configuring the Portal for Mobile Devices

As a result of working with this document: You will gain an understanding of portal on device concepts You will experience implementing a jQuery Mobile framework You will be able to create your own portal on device implementation


February 2012 2

2. Supported Application Types Portal on device can be implemented for all types of applications, including mobile-oriented applications that are written from scratch and existing legacy applications, as described in the following table:

Application Type Description Example

New – Mobile Oriented A Web application that is written from scratch for mobile end users.

Any Web application that produces HTML5/jQuery output and is fully-aligned with portal on device design.

Existing – Adapted UI An existing application whose user interface is adapted to the UI design of portal on device. This is done by creating a new UI for the existing application (service), regardless of the underlying UI technology of the application.

Use jQuery Mobile to wrap the Unified WorkList (UWL) service, to implement a UI that is suitable for mobile devices.

Existing – As Is A legacy application that can be accessed by mobile devices using portal on device, which provides zooming capabilities to enable consuming the legacy screens in a convenient manner.

Applications written using one of the following:

Web Dynpro ABAP HTMLB BSP (Business Server Page) PRT


February 2012 3

3. UI Components of Portal on Device

The portal mobile framework consists of the following components:

Header Home Page Favorites Page Search Page Settings Page More Apps Page

The following sections describe these components, demonstrating an example implementation.


February 2012 4

3.1 Header

The header, which is displayed at the top of the page, consists of the following components:

Options – this button opens a menu with the following actions: Refresh – navigates to the home page Log-Off – logs off the portal. (The log-off functionality was implemented using the AFP

Session Plug-in.) Cancel – closes the Options dialog box

Note You can customize the sample code, provided in the portal on device software package, to add additional options, such as Send Link.

Title – this text appears in the center of the header. Menu – this button opens a menu that enables you to navigate to other pages of the portal

smartphone implementation: Home page Favorites page Search page Settings page More Apps page

The following sections describe these pages.

Note To close the menu, tap anywhere outside the menu and header areas.


February 2012 5

3.2 Home Page

The Home page is the entry page for your portal on device mobile implementation. The applications displayed in the Home page are the mobile applications (iViews) that are assigned to the first page within the mobile role. The Home page lists all the applications in a single column, one beneath the other. When you run an application, the Home page adjusts the application height according to amount of content in the application. The content of the Home page can be updated dynamically, by changing the applications configured for this page. For information about configuring the Home page, see Creating and Configuring the Home Page on page 18.

Note Home page applications must be configured in the portal as isolated applications (Isolation Method = URL).


February 2012 6

3.3 Favorites Page

The Favorites page, which is based on the portal favorites mechanism, displays the list of favorites that are defined for the portal. A jQuery Mobile implementation is used to display the favorites as follows:

The list of favorites is divided into favorite providers, assuming that you are using more than one favorites provider

Each favorite item is either a folder ( ) or an item ( ). Selecting an item navigates to the corresponding favorite.

Folders can contain folders and items Folders have a numeric indication ( ) of the number of items

they contain (items only, not including folders) The Favorites page also provides the following options:

Filter field – type a string to filter the list of favorites Add button – add favorite URLs, which can refer to locations

that are external to the portal.


February 2012 7

3.4 Search Page

The Search page enables you to search the mobile portal content, as defined by a filter ID (for more information, see Preventing Mobile Content from Being Displayed to Portal Desktop Users on page 18). The page consists of a dropdown list for selecting a search provider, a field for typing search strings, and a list of navigation suggestions. As you type a search string, the list displays all the possible navigation suggestions, according to your role. You can also choose Search (from the keyboard) to search for the string using the selected search provider. When you navigate to a suggestion, it is displayed in a new page. You can also add a navigation suggestion to the list of favorites, using the Add to Favorites button ( ). When using a search provider, the search string opens in a new page, according to the selected provider. The system administrator can extend the list of search providers by adding custom search providers, according to portal guidelines.

To retrieve search providers or suggestions, developers can use methods such the following:

To retrieve the list of search providers: EPCM.getSAPTop().LSAPI.getSearchProviderPlugin().getProviders For more information, see http://help.sap.com/saphelp_nw73/helpdata/en/12/ad264cba3d4b9983698740f6c51e47/frameset.htm

To retrieve the list of suggestions: EPCM.getSAPTop().LSAPI.getSuggestionPlugin().getSuggestions For more information, see http://help.sap.com/saphelp_nw73/helpdata/en/76/0e025d91394fc3bc4813403e63ea37/frameset.htm

http://help.sap.com/saphelp_nw73/helpdata/en/12/ad264cba3d4b9983698740f6c51e47/frameset.htm

http://help.sap.com/saphelp_nw73/helpdata/en/12/ad264cba3d4b9983698740f6c51e47/frameset.htm

http://help.sap.com/saphelp_nw73/helpdata/en/76/0e025d91394fc3bc4813403e63ea37/frameset.htm

http://help.sap.com/saphelp_nw73/helpdata/en/76/0e025d91394fc3bc4813403e63ea37/frameset.htm


February 2012 8

3.5 Settings Page

The Settings page provides options for changing the presentation of the UI. In this implementation, the Settings page enables you to switch between the following themes: Black Theme and Yellow Theme. These themes are based on jQuery Mobile themes. You can extend the implementation to use any of the jQuery Mobile themes. For more information on JQuery Mobile themes, see http://jquerymobile.com/demos/1.0b3/docs/api/themes.html. You can also extend the implementation and add additional options to the Settings page for customizing the presentation, such as changing fonts.

http://jquerymobile.com/demos/1.0b3/docs/api/themes.html


February 2012 9

3.6 More Apps Page

In this implementation, the More Apps page is used as an example that demonstrates how to manage mobile content. In this example, the More Apps page lists all the mobile applications assigned to a user. The More Apps page is accessed from the Menu menu. There can only be one More Apps page. You can use the Filter field at the top of the page to reduce the number of applications to display or to determine a subset of applications to display. For information about configuring the More Apps page, see Creating and Configuring the More Apps Page on page 19.

Note You can manage mobile content in other ways; for example, by defining mobile roles with a custom representation.


February 2012 10

4. Configuring the Portal for Mobile Devices This section describes the tasks necessary for configuring the portal for mobile devices. These tasks include creating a custom framework and desktop for mobile devices, enabling services such as Favorites and Search for mobile content. You also need to tag portal content for mobile devices. ...

4.1 Prerequisites

Portal Permissions You are assigned the System Admin role You are assigned the Content Admin role

Software Requirements To develop a custom framework page for mobile devices:

SAP NetWeaver 7.3 SPS05 SAP NetWeaver Developer Studio Portal on device software package, to deploy on top of portal HTML5 browser support

Mobile Devices Portal on device runs on iPhone with iOS5. Portal on device can also be consumed by iPad with iOS5

Knowledge/Skills Topic Knowledge

SAP NetWeaver Portal Basic knowledge portal desktop configuration Basic knowledge portal component development

Client side development Such as: JavaScript, HTML, jQuery

jQuery Mobile For more information, see http://jquerymobile.com/.

Assumptions The following assumptions apply to this implementation:

Separate role structures are used for portal on desktop and for portal on device Legacy applications that are used as-is are opened in a new headerless window


February 2012 11

4.2 Support for HTML5 for Portal on Device The portal currently does not support HTML5. To add support for HTML5, you need to use the EnhancedPortalResponse class, located in com.sap.PortalUtilsHtmlapi.jar. This class enables you to enhance portal responses with HTML output such as:

DOCTYPE declaration for HTML5, HTML 4.01, XHTML 1.0, etc. Adding specific <meta>, <link> and other tags to the <head> element

To support HTML5, in every custom application, perform the following: In the doContent() method of your component that inherits from AbstractPortalComponent, instantiate the class EnhancedPortalResponse as follows: EnhancedPortalResponse epResponse = new EnhancedPortalResponse(request, true, true); epResponse.setDocTypeToHtml5();

4.3 Configuration Workflow This section lists the configuration tasks you need to perform, to enable consuming portal applications from mobile devices. Step-by-step instructions for each task are provided in the sections that follow. ...

1. Deploy the portal on device software package to the portal. 2. Create the mobile portal framework - create a folder to contain the portal on device components.

For example, Portal Mobile. 3. Create and configure the mobile framework page. 4. Add a headerless page to the mobile framework page. 5. Create a theme for the mobile desktop. 6. Create a desktop for the mobile framework page. 7. Create a desktop rule to access the mobile desktop. 8. Prevent mobile content from being displayed to portal desktop users. 9. Create and configure the home page.

10. Create and configure the More Apps page. 11. Change the login page (optional).


February 2012 12

4.3.1 Deploying the Portal on Device Software Package You download the portal on device software package from: https://cw.sdn.sap.com/cw/groups/portal-on-device. The software package includes the following projects:

com.sap.MobileHeaderlessLayout

com.sap.MobileLayout

com.sap.MobilePersonalizedData

com.sap.MobileResources

com.sap.MobileServices

com.sap.PortalUtilsHtml

You need to import these projects into SAP NetWeaver Developer Studio, configure the Java build path for each project according to the information in the Introduction to Portal on Device - Classpath Guide, compile each project, and then deploy the EAR files to your portal. After deployment, these packages are placed in the Portal Catalog under Portal Applications.

Procedure 1. Create a new workspace in SAP NetWeaver Developer Studio. 2. From the portal on device software package you downloaded, import the existing projects into

the workspace you created. 3. Use the information in the Introduction to Portal on Device - Classpath Guide, to obtain all the

necessary JAR files. 4. In SAP NetWeaver Developer Studio, for each project, from the context menu choose

Properties. In the left pane, select Java Build Path, and choose Add External JARs to add all JAR files necessary for that project, according to the information in the Introduction to Portal on Device - Classpath Guide.

5. Compile each project: from the context menu, choose Export, and in the left pane select SAP NetWeaver Portal.

Note As there are dependencies between the projects, you must complete step 4 for all the projects, before compiling the projects.

6. Deploy the EAR file generated for each project to the portal.

https://cw.sdn.sap.com/cw/groups/portal-on-device

https://cw.sdn.sap.com/cw/groups/portal-on-device


February 2012 13

4.3.2 Creating the Mobile Portal Framework You need to create the portal folder that will contain the mobile portal components. ...

1. In the portal, navigate to Content Administration Portal Content Management. 2. In the Portal Catalog, under Portal Content, create a folder. In this document, Portal Mobile is

used as the folder name. 3. Perform the following steps for each one of the packages: com.sap.MobileLayout,

com.sap.MobileResources, MobileHeaderlessLayout: a. In the Portal Catalog, under Portal Applications, open the package. b. For each component in the package:

i. From the context menu, choose Copy. ii. In the Portal Catalog, from the context menu of the Portal Mobile folder, choose

Paste as PCD Object. iii. Choose Next. iv. Choose Finish.

The Portal Mobile folder should look as follows:

4.3.3 Creating and Configuring the Mobile Framework Page Use the Ajax Framework Page to create the mobile framework page. ...

1. In the portal, navigate to Content Administration Portal Content Management. 2. In the Portal Catalog, navigate to Portal Content Portal Users Standard Portal Users

Ajax Framework Content, and from the context menu of Ajax Framework Page, choose Copy. 3. Navigate to Portal Content Portal Mobile and paste the copied object as a copy. 4. From the context menu of Ajax Framework Page, choose Open Properties. 5. In the Properties tab, choose Modify Properties, and in the Name field, enter the name of the

mobile framework page that you are creating. In this document, Mobile Framework Page is used as the name of the framework page. We also recommend changing the value of the ID property.

6. Choose Save. 7. In the Page tab:

a. In the Page Content and Layout Settings table, remove all the iViews except AFP Resources.

b. From the Portal Mobile folder in the Portal Catalog, add the MobileResources iView and the MobileLayout iView to the page as delta links.

c. Choose Add/Remove Layouts, and add the AFP Mobile Layout to the list of Selected Layouts.

d. From the Current Layout dropdown list, select AFP Mobile Layout. e. In the Page Content and Layout Settings table, for the MobileResources iView and the

AFP Resources iView, change the value of the Container column to Technical Hidden Container.

8. Choose Save.


February 2012 14

The Mobile Framework Page should look as follows:

The Portal Mobile folder should now look as follows:

Note You can customize the mobile framework page by adding additional resources or functionality, as necessary.


February 2012 15

4.3.4 Adding a Headerless Page to the Mobile Framework Page

The headerless page is used to host portal applications, such as the applications listed in the More Apps page, in the Favorites page, in the Search results, and in the Search navigation suggestions. The headerless page enables you to take advantage of all the capabilities of portal services, without being restricted by the UI representation of the header. ...

1. In the portal, navigate to Content Administration Portal Content Management. 2. In the Portal Catalog, under Portal Mobile, open the Mobile Framework Page. 3. In the Portal Catalog, navigate to Portal Content Portal Users Standard Portal Users

Ajax Framework Content. 4. Select Ajax Framework Page. 5. In the Detailed View, from the context menu of Ajax Headerless Framework Page, choose Add

Page to Page, to add the headerless page to the Mobile Framework Page. 6. Choose Save. 7. In the Mobile Framework Page, in the Page Content and Layout Setting table, select Ajax

Headerless Framework Page, and choose Open. 8. In the Page Content and Layout Setting table, remove all the iViews except AFP Resources. 9. Navigate to Portal Content Portal Mobile, and add the MobileHeaderlessLayout iView as a

delta link to the page. 10. Choose Add/Remove Layouts, and add the AFP Mobile Layout to the list of Selected Layouts. 11. From the Current Layout dropdown list, select AFP Mobile Layout. 12. In the Page Content and Layout Settings table, for AFP Resources, set the value of the

Container column to Technical Hidden Container. Make sure that the value of the Container column of the MobileHeaderlessLayout iView is Main Container.

13. Choose Save. 14. In the Properties (All) tab, change the value of the

com.sap.portal.page.builder.optimization.level property from 1 to 0.

15. Choose Save. The Mobile Framework Page should now look as follows:


February 2012 16

4.3.5 Creating a Theme for the Mobile Desktop To create a theme that is suitable for a mobile desktop, you need to configure the distances between iViews to be zero.

1. In the portal, navigate to Content Administration Portal Display Portal Themes Theme Editor.

2. From the Theme dropdown list, select the theme to edit, and choose Open. 3. Navigate to Portal Outer Frame Portal Body. 4. In the Distances Between iViews styles, set all the Margin and Padding values to 0 0 0 0. 5. Choose Save As. 6. In Theme Name, enter the theme name. In this document, Mobile Portal is used as the

theme name. 7. In Theme ID, enter the theme ID. In this document, MobilePortal is used as the theme ID. 8. Choose Save.

4.3.6 Creating a Desktop for the Mobile Framework Page You need to create a desktop for the mobile framework page and configure the filter ID for the desktop. ...

1. In the portal, navigate to System Administration System Configuration Portal Display Desktops & Display Rules.

2. From the context menu of Portal Mobile, select New Portal Desktop. 3. In Desktop Name, enter the desktop name. In this document, Mobile Desktop is used as the

desktop name. 4. Choose Next. 5. From the context menu of Mobile Framework Page, choose Add Framework Page to Portal

Desktop. 6. Choose Next. 7. Navigate to Portal Content themes, select the Mobile Portal theme that you created, and from

its context menu, choose Add Theme to Portal Desktop. 8. Choose Next. 9. Click Finish.

10. Select Open the object for editing and choose OK. 11. Select the Properties tab, and choose Modify Properties. 12. Locate the Filter ID property, and define the filter ID for the desktop; for example mobile.

For more information, see Preventing Mobile Content from Being Displayed to Portal Desktop Users on page 18.

13. Choose Save.


February 2012 17

The Mobile Desktop desktop should look as follows:

4.3.7 Creating a Desktop Rule to Access the Mobile Desktop You access the mobile desktop using the following URL: http://<server>:<port>/irj/portal/mobile. To connect the mobile desktop to this URL address, you need to create a desktop rule. ...

1. In the portal, navigate to System Administration System Configuration Portal Display URL Alias Manager.

2. Choose New to add a new URL alias. 3. In the Name field, enter portal/mobile.

The portal alias is appended to the default portal URL: http://<server>:<port>/irj. 4. Choose Save. 5. Choose Desktops & Display Rules. 6. In the Portal Catalog, navigate to Portal Content Portal Administrators Super

Administrators. 7. Open the Master Rule Collection. 8. Choose Add IF Expression. 9. Create a new IF expression:

a. From the first dropdown list, select URL Alias. b. From the operator dropdown list, select =. c. In the field, type portal/mobile. d. Choose Apply.

10. Select the THEN expression of the IF expression you just added.


February 2012 18

11. In the Portal Mobile folder, from the context menu of Mobile Desktop, choose Add Portal Desktop to Expression, to add the mobile desktop to the rule.

12. Choose Apply. 13. Choose Save.

To verify that the URL for the mobile desktop is configured correctly, in a Web browser that supports HTML5, navigate to http://<server>:<port>/irj/portal/mobile. You should see the home page.

4.3.8 Preventing Mobile Content from Being Displayed to Portal Desktop Users

To prevent mobile content from being displayed to portal desktop users, you use a filtering mechanism. You define a filter ID value, such as mobile, which will indicate that a specific entry point (role, page, application) is relevant only for mobile implementations. Then, use this value to perform the following configurations: 1. In SAP NetWeaver Administrator, add the filter ID value to a service that excludes content with

this value from portal desktop applications. 2. When creating mobile content, such as the Home page, set the value of the Filter ID property to

the same value defined in SAP NetWeaver Administrator, mobile in this example.

The following sections describe in detail how to perform these tasks.

4.3.8.1 Configuring the Filter ID in SAP NetWeaver Administrator ...

1. In SAP NetWeaver Administrator, go to Configuration Management Infrastructure Application Modules.

2. In the Module List, find com.sap.portal.navigation.helperservice. 3. In the Web Module Details section, in the Components tab, select

navigation_events_helper. 4. In the Portal Service Details section, configure the FilterByExcludedFilterIDs property by

entering a filter ID value that will exclude content with this value from portal desktop applications. For portal on device, enter, for example, mobile. (Separate values with a semicolon (;).)

Note The FilterbyDesktopView property must be set to true to enable filtering. To do this, you can use either 2, which is the recommended value, or 1 if the property is already configured to this value.

5. Choose Save.

4.3.9 Creating and Configuring the Home Page You need to create a role for mobile, to contain the applications to display in the Home page. The mobile role must be defined as the first role in the portal. ...

1. Create a role (Freestyle) that is an entry point. 2. Set the value of the Sort Priority property to 1.0, so that the role is the first role in the

portal. 3. Set the value of the Filter ID property to mobile, to indicate that this role is relevant for mobile

implementations only, and will not be displayed to portal desktops users.

Note The value of the Filter ID property must match the value configured in SAP NetWeaver Administrator. For more information, see Configuring the Filter ID in SAP NetWeaver Administrator on page 18.


February 2012 19

4. Create a page. 5. Change the layout of the page to AFP Mobile Layout Content. 6. Add the page to the role as a delta link. 7. To this page, add the applications (iViews) to display in the Home Page.

Note The iView properties must be configured as follows:

Height Type = Automatic

Enables adjusting the application height dynamically, according to the amount of content.

Isolation Method = URL

Displays each application as an individual application (iFrame).

4.3.10 Creating and Configuring the More Apps Page You need to create a mobile role to contain all the applications to display in the More Apps page. ...

1. Create a role (Freestyle), and in the Object ID field enter: MoreRole. 2. Create a page with a one column layout, and add it to the role. 3. To this page, add the mobile applications to display in the More Apps page.

Important You must assign mobile users Read permissions for the MoreRole role.

4.3.11 Changing the Portal Login Page (Optional) You can change the standard portal login page to be compatible with the UI of mobile devices.

CAUTION Any changes made to the standard portal login page must be made with caution, as they affect all devices, including desktops.

To change the portal login page, you need to edit the following files: ...

1. Login page C:\usr\sap\SID\Instance\j2ee\cluster\apps\sap.com\com.sap.security.core.logon\servlet_jsp\logon_ui_resources\root\logonPage.jsp

2. Login CSS C:\usr\sap\SID\Instance\j2ee\cluster\apps\sap.com\com.sap.security.core.logon\servlet_jsp\logon_ui_resources\root\css\ur\*.css

Note To apply changes made to these files, you must restart the portal service.

In addition, you need to remove the splash screen, which does not fit a mobile device. To remove the splash screen:

1. In the portal, navigate to Content Administration > Portal Display > Framework Page Configuration.

2. From the Framework Page Name (Desktop Name) dropdown, select the mobile framework page, for example Mobile Framework Page (Mobile Desktop).

3. Under Splash Screen, deselect all the checkboxes. 4. Choose Save.


February 2012 20

5. Known Limitations

Area Limitation

Favorites Page When selecting a favorite that is a folder, the selection propagates to open the first folder or item in that folder.

More Apps Page The order in which you add content to the page determines the order in which the content is displayed. Changing the order of the content items has no effect on the display of the More Apps page. Deselecting the Visible property also has no effect.

Scrolling Down Currently, it is possible to continue scrolling down endlessly.

Adding Legacy Content When adding legacy applications to a page, in some cases, the content, which was not adapted for presentation on mobile devices, may be too wide, and prevent you from reaching the minimize button in the iView tray.

www.sdn.sap.com

Documents

SAP NetWeaver Portal 7.3: Introduction to Portal on Device