In the last years people are talking more and more about mobile access to SAP information. Today, in most cases people mean apps when they talk about mobile access. These apps are created for a device. You can have apps for Android iPhone / iPad or Blackberry, just to name a few. As apps are getting their data out of the internet, you could also use a mobile browser to access that data. Apps offer superior integration for the device, offline access and sync, but they also need maintenance. And they need to get developed, for every device. For online access, you can use the browser installed on the device to consult (or to approve) actual data.
As SAP has a strong position in this market – specially now with Sybase – there is one SAP product that almost never get’s mentioned when talking about mobiles: the SAP Portal. WebDynpro Java offers support for some mobile devices, but it doesn’t offer portal features like:
- portal profiles and user management
- navigation
- content management
- central place for maintenance
I want to share with you some screenshots that demonstrate that it is possible to access the SAP Portal and to interact with backend system. I used the device / browser simulators provided by Blackberry (OS 5) and Opera (Mobile 10). A “normal” user that logs on to the portal get presented with portal content.
It isn’t possible to run the same portal content on the mobile, the content administrator has to make sure that the mobile end-user will see only adapted content. Instead of creating a mobile only portal or mobile only users, the portal offers the desktop filter functionality for this. The same user can see different content based on the filter ID of the desktop.
Logon
The standard portal logon works also on mobiles, but it is too large for a mobile screen. I developed a simple HTML form that fits the small mobile screen.
| Blackberry | Opera Mobile |
 |
 |
Content
The SAP Portal has the Masthead for branding and logoff and the navigation for giving access to content. The SAP Portal offers access to content based on the user’s profile. Using the SAP Portal on a mobile ensures that this functionality is also available for mobile users. The standard masthead and navigation won`t work with the limited Javascript and CSS support of a mobile device. With my customized versions of the masthead and the navigation they will fit on the mobile screen. As the content get`s defined by the portal role, the content administrator can use the same tools as ever to assign content in the Portal Content Studio. For the examples here I used the Web Page Composer. You could also use the KM document iView and integrate a HTML document.
| Blackberry | Opera Mobile |
 |
 |
|
Start page with news to keep the user updated |
|
 |
 |
|
Full news article |
Mobile SAP users need access to backend information. There is no support for mobiles and Web Dynpro ABAP, but for Web Dynpro Java. Accessing a standard Web Dynpro Java iView of the SAP Portal results in no content being shown.
| Blackberry | Opera Mobile |
 |
 |
|
The iView gets loaded, but isn`t able to load the Web Dynpro Java application inside the iFrame. |
The page loads with no content at all. |
To be able to access Web Dynpro Java from a mobile device, you need to add a specific parameter to the URL. This parameter depends on your device. Distributing these parameters is easy when using the portal as a central access point. Only create a page with the link and assign the content to the user’s role.
When the user clicks the link to start the application, the necessary parameter is transmitted. As you can see, the same parameter renders different results in both mobile browsers. You need to experiment which parameter best works with your mobile browser.
| Blackberry | Opera Mobile |
 |
 |
Web Dynpro Java on a mobile gives you almost immediately mobile access to your data, but also brings limitations in regards to performance, layout and usability. Using the JCA of the portal, you can create your own portal applications that deliver mobile optimized content. For the following example I created a Portal Application that is using the datatables JQuery libray (http://www.datatables.net/) and their sample data.
| Blackberry | Opera Mobile |
 |
 |
 |
 |
The same portal application can be accessed by a mobile browser and “normal” desktop browser and renders the same results / functionality:
| Internet Explorer (7) |  |
| Firefox (3.6) |  |
| Opera (10) |  |
(These screenshots were taken from a standard installation and I made no modifications to the CSS. The JQuery application makes extensive usage of Javascript and AJAX).
What is your approach to deal with horizontal scrolling and small fonts? Displaying more than just a few records at a time may deter users from accessing the info. Do you know if Droid and Blackberry support rotation and multitouch? Any plans to support Safari?
the table is a dynamic table. The Javascript from datatables.net allows to hide and show several columns. To add more information, I can add a column and the user can also click on the “details” image to get more information.
Generally, the information visible should be the minimum information necessary to process the information.
br, Tobias
Safari 4 is supported with at least 7.0 SP 21.
Kai
service.sap.com/pam: Safari will be supported with 7.0 EHP2 SP4
br, Tobias
having a portal that runs 100% on every device would be nice, but when you think about multiple device support when you start developing your applications the costs are minimal. When you develop your apps in Web Dynpro ABAP, you’ll have to develop a completly new application. When you start developing in the portal und use JCA to interact with the backend, your application can run on the browser of a device or desktop.
br, Tobias
In the example above I used AJAX to retrieve the data (filter, show X records, pagination of the table). Having AJAX or REST for standard portal applications like UWL would definitly ease the development of a mobile version. We depend on the SAP roadmap of the portal.
br, Tobias
do you kwonw if it´s possible to access to the Universal Work List from Mobile device, Windows Mobile or Android..
We want to approve the task from the mobile device, is there any way to do ?
thanks
the standard Portal UWL won’t work on a mobile. The UWL offers an API to interact with, so you can write your own portal application that uses the UWL API to retrieve and approve the tasks of a user.
br, Tobias
In my example I’m using a lightwighted framework page on the Intranet.
br, Tobias
did you try anything to show this on the native Blackberry browser ?
The issue i have is that only certain browsertypes are allowed in the portal.
Kai
the BB simulator is using the native BB browser. To enable the access to the portal with a not officially supported browser, you have to configure the SupportedUserAgents attribute to (*,*,*):
http://help.sap.com/saphelp_nw70/helpdata/en/44/ccf6bf687f3b9ae10000000a1553f6/content.htm
As for the application: this one is accessed without an iView (/irj/servlet/prt/portal/prtroot/xyz).
br, Tobias
I see in a previous post there is support for safari, does this include safari on the iphone?
also, if you create a filter id for a new portal desktop, how would you distinguish between mobile and non-mobile users?
Thanks!
for the portal (WPC, navigation), safari will show the HTML correctly, as it is simple HTML code.
For the application, the HTML code generated is XHTML 1.0 Transitional, the Javascript isn’t too complicated (DOM, CSS), so the mobile browser will also interpret it correctly.
The differentiation between mobile and non-mobile users is done via the portal URL: /irj/portal vs /irj/portal/mobile. Of course this could also be done by a proxy, DNS or portal application.
br, Tobias
This is really interesting.
I am a functional consultant, so most of the technology stuff is wasted on me.
However the thing I am interested in is the process.
Are you saying – that with some clever coding, and SAP portal screen could be accessed via mobile device?
“some clever coding”: the coding of the application doesn’t need to be smart, just XHTML compliant and using sane Javascript.
The portal is easier: adopt the masthead and navigation, the rest is done with no coding at all (Web Page Composer). Afterwards, the content can be accessed, even by IE mobile.
The rest depends on the requirement: what content and functionality should be on the mobile? That’s the same process as when you opt to use an app.
br, Tobias
Rgds,
Nirmal
I’d like to mention that the PIE client (Pocket Internet Explorer client) is basically meant for the Windows Mobile devices for which the following URL parameters are relavent:
�œ sap-wd-client=PieClient
�œ sap-wd-client=Pie03Client
For BlackBerry Wireless Handhelds: The WML client i.e. Wireless Markup Language client is used. In this case the URL parameter changes to:
�œ sap-wd-client=WmlClient
For Nokia Series 80 devices (Nokia Communicator 9500 and 9300) NokiaS80 Client is used. In this case the URL parameter changes to:
�œ sap-wd-client=NokiaS80Client
Please refer the following link for the list of supported UI elements by Mobile Web Dynpro: http://help.sap.com/saphelp_rc10/helpdata/en/7d/28fa3e7cb1d861e10000000a114084/content.htm
this really depends on the browser. For instance, for Blackberry and OS 5, using the WmlClient renders an unusable result, whereas Pie03Client works.
br, Tobias
The thing with Mobile Web Browsers is that these are device dependent. The differences in the display of an Internet service doesn’t only depend on the browser variant. The same content on different browser can appear different owing to the screen size, input method, markup language etc.
The rendering of the UI elements for Mobile Web Dynpro Java is dependent on the url parameter recived at the server side. So that explains you observation.
To see how the different UI controls behave in different devices and their supported browsers it makes sense to go through the specifics of these clients at http://help.sap.com/saphelp_nwce72/helpdata/en/45/5821c52d251feee10000000a1553f7/frameset.htm
Can you please let me know what is the pre-requisite for mobile integration with portal.
thanks
Anil
I am excited with this possibility you shown in this blog.
Can I have step-by-step tutorial for this?
I am very new to these technologies…. a tutorial will help me catch up fast.
Thanks.
Regards,
Ram.
Very useful information, thanks for posting the same.
VengalRao
if you want to have better access to the KM of the netweaver portal you should enable the WebDAV access and connect via a WebDAV client. See https://www.greenbytes.de/flash/7Collaboration.swf
Great mobile stuff, thanks. From the intro. “Apps offer superior integration for the device, offline access and sync, but they also need maintenance.”
Your examples refer to app integration via Portal with specific smartphones, and info regarding “offline access and sync”
Thanks, Ed
Great mobile stuff, thanks. From the intro. “Apps offer superior integration for the device, offline access and sync, but they also need maintenance.”
Your examples refer to app integration via Portal with specific smartphones, any info regarding “offline access and sync”
Thanks, Ed
Web Dynpro ABAP won’t work with the mobile browsers (Web Dynpro Java does). If it’s your own WDA application, maybe writing it in Java (not WDJ) and access the data via JCA is an option to get the same web application on the mobile and desktop.
The post was informative enough. I am pretty much interested in portals and had/have a particular interest in mobile integration of SAP. But would not the mobile portal even after chopping off of most of the data to suit the mobile device take lot of time to be loaded. And wont have the functionality as in your comp’s. For ex. I saw an android app of SAP for sales order in this website. It was so tedious typing in the data and the main drawback could be the integration of lot of elements into the mobile sap. I was wondering how competent the mobile SAP division would be considering these drawbacks.
you cannot put the portal 1:1 on a mobile device. The example in this blog shows that you can use the portal to publish specific information without the need of writing an app or using a new software. When you decide to bring a process to a mobile, you really need to define what part and how much. In the example application in this blog, you don’t need to type information, just links, checkboxes and submit buttons.
br,
Tobias
Hi Tobias,
We developed some WebDynpro Java applications and deployed on Portal NW 7.01 server. We are not planning to use these applications through Portal (even though deployed on Portal.). But we are planning to use directly through URL.
We have SSO to backend from WDJ app. SO, we have enabled login page for these WDJ applications.
Now, issue is, it shows standard Login page which still works but ugly look & feel for the mobile device.
I see you created custom HTML page for the same. But in my case, how can I use that custom login page for just above WDJ applications without distrubing the Standard login for the Portal?
I really appreciate your help in this regards.
-Bhavik