Skip to Content
Author's profile photo Tobias Hofmann

Mobile SAP Portal

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.

image

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
image image

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 
image image

Start page with news to keep the user updated

 
image image

 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
image image

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.

image

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 
image image

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 
image image
image image

The same portal application can be accessed by a mobile browser and “normal” desktop browser and renders the same results / functionality:

 

Internet Explorer (7)  image
Firefox (3.6)  image
Opera (10)  image

(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).

Assigned Tags

      38 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member
      Tobias,

      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?

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Greg,

      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

      Author's profile photo Kai Unewisse
      Kai Unewisse
      Hi Greg,
      Safari 4 is supported with at least 7.0 SP 21.

      Kai

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Kai,

      service.sap.com/pam: Safari will be supported with 7.0 EHP2 SP4

      br, Tobias

      Author's profile photo Former Member
      Former Member
      Thanks, Tobias, for putting this together. It is certainly a good example of the possibilities for persenting portal content on different front end devices.
      Author's profile photo Former Member
      Former Member
      That's not way to reach to solution. Because you have to re-develop portal applications. And that's too expensive. So may be SAP makes a proxy which renders portal and make it avaiable for mobile devices.
      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Erhan,

      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

      Author's profile photo Vivek Nidhi
      Vivek Nidhi
      Good work, but instead of redeveloping the entire portal can we some framework to get a RESTFUL services for SAP Portal, so its easy to have Mobile application developed.
      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Vivek,
      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

      Author's profile photo Former Member
      Former Member
      Hi,

      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

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Guillermo,
      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
      Author's profile photo Former Member
      Former Member
      We have an app on the iTunes store that will let you get your alerts. Check out www.milliapps.com.  We have an enterprise version that allows for workflow approval, but requires you to install some software on your SAP instance.  In the future we hope to eliminate this need. 
      Author's profile photo Former Member
      Former Member
      How users can connect from mobile? Portal should be external facing? or any VPN/company network connection like desktop systems.
      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      How the user accesses the application / portal with his mobile browser depends on the landscape. It can be public, Intranet or VPN, as long as the browser can access the portal.
      In my example I'm using a lightwighted framework page on the Intranet.

      br, Tobias

      Author's profile photo Kai Unewisse
      Kai Unewisse
      Hi 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

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      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

      Author's profile photo Former Member
      Former Member
      Tobias thanks for the great article!
      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!

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Robert,

      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

      Author's profile photo Former Member
      Former Member
      you can seperate users from portal alias master rule collection. irj/portal/mobile login page then desktop?
      Author's profile photo Former Member
      Former Member
      Hi there,

      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?

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Mark,

      "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

      Author's profile photo Former Member
      Former Member
      Interesting thought... I have a query here... Can we have 2 different login pages for 2 different URLs? I know we can differentiate the desktop framework using portal alias, how can we handle the 2 login pages (for mobile&desktop)?

      Rgds,
      Nirmal

      Author's profile photo Former Member
      Former Member
      you can customize your login page using javascript by checking url
      Author's profile photo Divya Tiwari
      Divya Tiwari
      Hi,
      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

      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Divya,

      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

      Author's profile photo Divya Tiwari
      Divya Tiwari
      Hello 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
      Author's profile photo Former Member
      Former Member
      Hi Tobias,
      Can you please let me know what is the pre-requisite for mobile integration with portal.

      thanks
      Anil

      Author's profile photo Former Member
      Former Member
      sorry, but it is very weak from sap, not to support webdynpro for abap.
      Author's profile photo Ram Bilas Yadav
      Ram Bilas Yadav
      Hi Tobias,

      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.

      Author's profile photo Former Member
      Former Member
      Hi,
      Very useful information, thanks for posting the same.
      VengalRao
      Author's profile photo Former Member
      Former Member
      Hi,

      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

      Author's profile photo Former Member
      Former Member
      Tobias,

      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

      Author's profile photo Former Member
      Former Member
      Tobias,

      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

      Author's profile photo John Moy
      John Moy
      Thanks Tobias for your blog.  But what about the underlying content?  If you have plenty of Web Dynpro ABAP in your portal, that (to my understanding) isn't supported for mobile clients currently on 7.0 EHP1?
      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      John,

      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.

      Author's profile photo Former Member
      Former Member
      Hi Tobias,
      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.
      Author's profile photo Tobias Hofmann
      Tobias Hofmann
      Blog Post Author
      Sunil,

      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

      Author's profile photo Former Member
      Former Member

      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