Skip to Content

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

To report this post you need to login first.

38 Comments

You must be Logged on to comment or reply to a post.

  1. Gregory Misiorek
    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?

    (0) 
    1. Tobias Hofmann 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

      (0) 
  2. Michael Nicholls
    Thanks, Tobias, for putting this together. It is certainly a good example of the possibilities for persenting portal content on different front end devices.
    (0) 
  3. Erhan Keseli
    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.
    (0) 
    1. Tobias Hofmann 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

      (0) 
  4. 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.
    (0) 
    1. Tobias Hofmann 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

      (0) 
  5. Gonzalo Del Castillo
    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

    (0) 
    1. Tobias Hofmann 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
      (0) 
  6. Kitty Ch
    How users can connect from mobile? Portal should be external facing? or any VPN/company network connection like desktop systems.
    (0) 
    1. Tobias Hofmann 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

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

    (0) 
  8. Robert Moore
    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!

    (0) 
    1. Tobias Hofmann 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

      (0) 
  9. Mark Chalfen
    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?

    (0) 
    1. Tobias Hofmann 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

      (0) 
  10. Nirmal sivakumar
    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

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

    (0) 
    1. Tobias Hofmann 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

      (0) 
      1. 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
        (0) 
  12. 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.

    (0) 
  13. Ed Taylor
    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

    (0) 
    1. Ed Taylor
      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

      (0) 
  14. 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?
    (0) 
    1. Tobias Hofmann 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.

      (0) 
  15. Sunil Murali
    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.
    (0) 
    1. Tobias Hofmann 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

      (0) 
  16. Bhagat Sanjay

    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

    (0) 

Leave a Reply