Skip to Content

An iPad/iPhone menu for SAP NetWeaver portal

When most users launch the SAP NetWeaver Portal, they use a browser to launch it and they get a menu which might look like this:    imageMy aim was to build a portal component that could be used to create a menu system a bit like this:imageWhen the user launches the portal component from Safari, they get a screen similar to this:imageThe user stores their username and password to access the SAP NetWeaver Portal using the Settings option:imageUsing the Save option then saves the values and relaunches the URL, appending the user’s username and password. The user must have already logged on to the SAP NetWeaver Portal successfully so that they do not have an initial or expired password. Selecting an option leads through the different navigation levels until you get a screen that lets you actually start an iView:imageCreating the portal component in NWDS involved creating a new portal project. I called mine Mobile. There is a set of JavaScript code that I need to use, and to make things easy, I put it under the dist/images folder and called it Includeme.js. Here is the project structure:image
You must be Logged on to comment or reply to a post.
  • That's great using iPad for access!

    Although I sometimes use the solution manager for checking owr SAP systems, would your programs be able to use for the Solution Manager Work Center,too?

    • A couple of things would make use of this for Solution Manager Work Centers unlikely.

      First of all, this is a portal component. Most Solution manager systems don't have the portal runtime components installed, and I think your NetWeaver people would not want to install them.

      Secondly, the work centers are based on Web Dynpro ABAP features and the menu system is built using that technology. Trying to replicate the work center menus would be quite challenging, I think.

      • If only SAP provided a new GUI for HTML5... They could stop patching the Windows and Java GUIs in just a few years, as soon as the new node gets available in all system's SICF...
  • Micheal,

    this is brilliant, we have just rolled out the normal version of the portal on the iPad its working fine, but your approach is cool. have tested on the iPhone 4 and iPad aswell amazing, we are trying to add the logout page for this now. once again thanks for the xcellent stuff..

  • Hi Michael,
      I tried creating a Par project and deploying it. May be I am missing something here, but when i try to put in the URL after deploying, it just shows a blank page. There are no error messages or anything in the log file either. Am I missing a step?

    thanks in advance

    • Hi Preet
      Did you make the component anonymous? Have you tried running it on Safari on a PC? Have you tried using the PAR file which I have the link to in the blog?
      • Hi Michael,
          Thanks a lot for your reply. Yes. I did try uploading your file as it is. I tried calling the app from iPad Safari. Is there a portal version that it is dependent on?
        Appreciate your help.


          • Hi Michael,
              Thanks a lot for your answer. When I put in the URL, it shows me a portal page with just the home tab. I tried putting in some logging in the doContent method. The logging does not show up either in the log files.

            thanks so much

          • Hi Kelly,
              I was getting a blank screen too. Here is what I did to fix this issue.
            In the method protected void doOnNodeReady
            there is this line
            File jsfile = new File(pubPath+"\\images\\Includeme.js");

            Comment out the line above and replace it with
            File jsfile = new File(pubPath+"/images/Includeme.js");

            See if this helps. If this does not work, i can look into my code a bit deeper to see what other changes i had made.

            thanks a lot

          • that works! thanks preet.

            It builds out my menu,
            However, i don't see any of the stylesheet or look and feel elements applied to the menu...seems to be just raw html with big links to with text

          • I had developed pn a Windows platform. I think the above change would be necessary for Unix based platforms as they have a different directory separator character.
          • OK, so I'm replying to myself! However, I found that using the / directory separator works on Windows as well, so I have been able to update the PAR file to hopefully be platform agnostic.
          • Hi Michael,
              Thanks a lot for posting this blog and keeping it updated. I have a small issue though. When I try to run this par file, the first page that shows up has a back button, news, launch the content etc. on it.
            It is a few clicks to go to the settings page where you can enter your id & pwd. Is there a way to open up the id/pwd page by default?

            P.S.- If you run this app in IE, it shows a bunch of links. But, if you open it in Firefox or Safari, it displays buttons and a nicer screen.

            thanks a lot

          • In Includeme.js I have changed function onBodyLoad  to

            function onBodyLoad() {

            chich removes the strange initial links - most of the time. Changing the above to "Mobile.SiteMap?dummy#settingsConnection" should go to the id/pwd page.