SAP Net Weaver

I nt r oduc t i on t o Port al on Devi c e

Appl i c abl e Rel eases:
SAP Net Weaver 7.3 SPS05

Topi c Ar ea:
Por t al on Devi c e
Capabi l i t y:
SAP Net Weaver Por t al

Ver si on 1.1
Febr uar y 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 SAPs Support Services and may not be
modified or altered in any way.



Doc ument Hi st or y
Document Version Descripti on
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 J AR files






Typogr aphi c Convent i ons
Type Style Descripti on
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
Exampl e t ext 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.

I c ons
Icon Descripti on

Caution

Important

Note

Recommendation or Tip

Example






Tabl e of Cont ent s
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. Over vi ew
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.
Not e
The capabilities of portal on device, as described in this document, are based on SAP
NetWeaver 7.3 SPS05.
Nat i ve Br ow ser Navi gat i on Ex per i enc e
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.
Not e
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.
Assumpt i ons
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
Mul t i -Language Suppor t
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.
Thi s Doc ument
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
An Introduction to Portal on Device
February 2012 2
2. Suppor t ed Appl i c at i on 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 Descripti on 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
An Introduction to Portal on Device
February 2012 3
3. UI Component s of Port al on Devi c e

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.
An Introduction to Portal on Device
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
Not e
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.
Not e
To close the menu, tap anywhere outside the menu and header areas.
An Introduction to Portal on Device
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.
Not e
Home page applications must be configured in the portal as isolated
applications (Isolation Method =URL).
An Introduction to Portal on Device
February 2012 6
3.3 Favor i t es 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.


An Introduction to Portal on Device
February 2012 7
3.4 Sear c h 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. get SAPTop( ) . LSAPI . get Sear chPr ovi der Pl ugi n( ) . get Pr ovi der s
For more information, see
http://help.sap.com/saphelp_nw73/helpdata/en/12/ad264cba3d4b9983698740f6c51e47/framese
t.htm
To retrieve the list of suggestions:
EPCM. get SAPTop( ) . LSAPI . get Suggest i onPl ugi n( ) . get Suggest i ons
For more information, see
http://help.sap.com/saphelp_nw73/helpdata/en/76/0e025d91394fc3bc4813403e63ea37/framese
t.htm
An Introduction to Portal on Device
February 2012 8
3.5 Set t i ngs 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 J Query 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.
An Introduction to Portal on Device
February 2012 9
3.6 Mor e 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.
Not e
You can manage mobile content in other ways; for example, by
defining mobile roles with a custom representation.
An Introduction to Portal on Device
February 2012 10
4. Conf i guri ng t he Port al f or Mobi l e Devi ces
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 Pr er equi si t es
Por t al Per mi ssi ons
You are assigned the System Admin role
You are assigned the Content Admin role
Sof t w ar e Requi r ement s
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
Mobi l e Devi c es
Portal on device runs on iPhone with iOS5.
Portal on device can also be consumed by iPad with iOS5
Know l edge/Sk i l l s
Topic Knowledge
SAP NetWeaver Portal Basic knowledge portal desktop configuration
Basic knowledge portal component development
Client side development Such as: J avaScript, HTML, jQuery
jQuery Mobile For more information, see http://jquerymobile.com/.
Assumpt i ons
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
An Introduction to Portal on Device
February 2012 11
4.2 Support f or HTML5 f or Por t al on Devi c e
The portal currently does not support HTML5. To add support for HTML5, you need to use the
EnhancedPor t al Response class, located in com. sap. Por t al Ut i l sHt ml api . j ar . 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 <met a>, <l i nk> and other tags to the <head> element
To support HTML5, in every custom application, perform the following:
In the doCont ent ( ) method of your component that inherits from
Abst r act Por t al Component , instantiate the class EnhancedPor t al Response as follows:
EnhancedPor t al Response epResponse = new
EnhancedPor t al Response( r equest , t r ue, t r ue) ;
epResponse. set DocTypeToHt ml 5( ) ;
4.3 Conf i gur at i on Work f l ow
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).

An Introduction to Portal on Device
February 2012 12
4.3.1 Depl oyi ng t he Por t al on Devi c e Sof t w ar e Pac k age
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. Mobi l eHeader l essLayout
com. sap. Mobi l eLayout
com. sap. Mobi l ePer sonal i zedDat a
com. sap. Mobi l eResour ces
com. sap. Mobi l eSer vi ces
com. sap. Por t al Ut i l sHt ml
You need to import these projects into SAP NetWeaver Developer Studio, configure the J ava 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.
Proc edur e
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 J AR 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
J AR 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.
Not e
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.
An Introduction to Portal on Device
February 2012 13
4.3.2 Cr eat i ng t he Mobi l e Por t al Fr amew or k
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. Mobi l eLayout ,
com. sap. Mobi l eResour ces, Mobi l eHeader l essLayout :
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 Cr eat i ng and Conf i gur i ng t he Mobi l e Fr amew or k 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.
An Introduction to Portal on Device
February 2012 14
The Mobile Framework Page should look as follows:

The Portal Mobile folder should now look as follows:

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


An Introduction to Portal on Device
February 2012 15
4.3.4 Addi ng a Header l ess Page t o t he Mobi l e Fr amew or k
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. por t al . page. bui l der . opt i mi zat i on. l evel property from 1 to 0.
15. Choose Save.
The Mobile Framework Page should now look as follows:

An Introduction to Portal on Device
February 2012 16
4.3.5 Cr eat i ng a Theme f or t he Mobi l e Desk t op
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 Cr eat i ng a Desk t op f or t he Mobi l e Fr amew or k 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 Fi l t er I D property, and define the filter ID for the desktop; for example mobi l e.
For more information, see Preventing Mobile Content from Being Displayed to Portal Desktop
Users on page 18.
13. Choose Save.
An Introduction to Portal on Device
February 2012 17
The Mobile Desktop desktop should look as follows:

4.3.7 Cr eat i ng a Desk t op Rul e t o Ac c ess t he Mobi l e Desk t op
You access the mobile desktop using the following URL:
ht t p: / / <ser ver >: <por t >/ i r j / por t al / mobi l e.
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: ht t p: / / <ser ver >: <por t >/ i r j .
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.
An Introduction to Portal on Device
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 Pr event i ng Mobi l e Cont ent f r om Bei ng Di spl ayed t o
Por t al Desk t op User s
To prevent mobile content from being displayed to portal desktop users, you use a filtering
mechanism. You define a filter ID value, such as mobi l e, 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, mobi l e in this example.
The following sections describe in detail how to perform these tasks.
4.3.8.1 Conf i gur i ng t he Fi l t er I D i n SAP Net Weaver Admi ni st r at or
...
1. In SAP NetWeaver Administrator, go to Configuration Management Infrastructure
Application Modules.
2. In the Module List, find com. sap. por t al . navi gat i on. hel per ser vi ce.
3. In the Web Module Details section, in the Components tab, select
navi gat i on_event s_hel per .
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 (;).)
Not e
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 Cr eat i ng and Conf i gur i ng t he 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 Sor t Pr i or i t y 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.
Not e
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.
An Introduction to Portal on Device
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.
Not e
The iView properties must be configured as follows:
Hei ght Type = Aut omat i c
Enables adjusting the application height dynamically, according to the amount of
content.
I sol at i on Met hod = URL
Displays each application as an individual application (iFrame).
4.3.10 Cr eat i ng and Conf i gur i ng t he Mor e 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.
I mport ant
You must assign mobile users Read permissions for the Mor eRol e role.
4.3.11 Changi ng t he Por t al Logi n Page (Opt i onal )
You can change the standard portal login page to be compatible with the UI of mobile devices.
CAUTI ON
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\ SI D\ I nst ance\ j 2ee\ cl ust er \ apps\ sap. com\ com. sap. secur i t y. cor
e. l ogon\ ser vl et _j sp\ l ogon_ui _r esour ces\ r oot \ l ogonPage. j sp
2. Login CSS
C: \ usr \ sap\ SI D\ I nst ance\ j 2ee\ cl ust er \ apps\ sap. com\ com. sap. secur i t y. cor
e. l ogon\ ser vl et _j sp\ l ogon_ui _r esour ces\ r oot \ css\ ur \ *. css
Not e
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.
An Introduction to Portal on Device
February 2012 20
5. Know n Li mi t at i ons

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.





w w w .sdn. sap. c om