Skip to Content

So, what is this post all about?

In this post I will describe how to write a simple mobile Portal application that consumes data from an RFC. The application retrieves a list of employees, and enables to show each employee’s data.

We will see how to write a simple mobile Portal application based on the existing Portal development tools, and do so with HTML5 and jQuery Mobile UI.

We will use the following interaction model:

  1. Business logic is encapsulated in the mobile-oriented Portal components
  2. Data exchange between mobile UI and the business logic components is based on AJAX and JSON
  3. Decoupling the business logic and UI provides the freedom to choose any mobile UI library (jQuery Mobile in our example)
  4. Minimizing the data volume transferred on the mobile network

777.JPG

In this example, JCA (Java EE Connector Architecture) will be used to connect to the ECC system.


So, what does this application look like?

Here is a quick review of the application.


Once you open it, you get the following search input field:


111.JPG

In our case, the search is for the employees’ last names. So let’s say that you want to search for employees whose last name starts with the letter “A”:


222.JPG

You enter “A” and press “Search”. Then, you get the results screen:


333.JPG
In this screen you see the list of returned results. For each item, you can see the employee’s name and organization unit. At the top of the list you have a filter field that can be used to narrow down the results:


444.JPG

To get more information about an employee – just press on the desired one and you get the employee’s details page:


555.JPG

So, what do I need to do to make this sample project up and running?

The sample project can be cloned from this GitHub repository.

As an initial step, please import the project into your SAP NetWeaver Developer Studio version 7.3 SP08 or 7.3 EHP1 SP05, and above.

To solve the project dependencies, you need to refer to the following APIs.


  • engine.j2ee14.facade

  • tc/je/usermanagement/api

  • tc/epbc/connectivityfw/api

  • tc/ep/connectivity/services/api

  • tc/epbc/prt/api


To solve the above dependencies, you can use the Class Jar Locator.


One last dependency that needs to be solved is:


  • tc/ep/connectivity/api


To solve it you need to perform the following steps:


  1. Open the SAP NetWeaver Installation DVD.
  2. Navigate to the directory \sapinst\JAVA_DVD\J2EE_OSINDEP\UT.
  3. Use WinRAR to open the file EPCONNECTIVITY08_2.SCA.
    (Note that you may have a different patch level.)
  4. Navigate to the directory BUILDARCHIVES.
  5. Use WinRAR to open the file sap.com~tc~ep~connectivity~api~_comp~dcia.zip
  6. Use WinRAR to open the file api.ppa.
  7. Navigate to the folder lib\java.
  8. Obtain the JAR file tc~ep~connectivity~api.jar

Once you are done importing and solving all of the references, export the project into an EAR file and deploy it to your Portal.

You can then add the application to your mobile role as a Home page or as an application in the Launcher or the Toolbox. For more information, see Implementing Portal on Device.

/wp-content/uploads/2012/11/888_157278.jpg

Stuff worth paying attention to

Let’s review some main parts of the application that make it work 🙂


  1. HTML5

    Default Portal pages are not compliant with HTML5. To render the mobile pages correctly, we need set the following property in the portalapp.xml file:

    /wp-content/uploads/2012/11/xml_157279.png
    This adds the <!DOCTYPE> declaration to the application’s markup.
    For more information, see Configuring Support for HTML5

  2. Client-side resources

    By including the jQuery, jQuery Mobile, JavaScript, HTML and CSS resources in the
    includeResources method, you get all of the rich libraries in the client. In real production application, you should pay attention to include the minified versions of the JavaScript and CSS files, to improve performance.

  3. AJAX

    We are calling the application asynchronically from the client (JavaScript) by using the jQuery.ajax() method, and passing arguments on the request. This enables us to do several things:

    • Decoupling the business logic and UI provides the freedom to choose any mobile UI library (jQuery mobile in our example)
    • Minimizing the data volume transferred on the mobile network (by passing only the necessary data on each round-trip)

  4. Getting the data

    We are using a standard RFC call mechanism by using the Connector Gateway service (opening a connection via the portal service). In this code example, we are connecting to a backend system with the “ERP” alias. For more information, see Using the SAP System Connector

  5. JSON

    • We are returning a JSON response to the client by using the HttpServletResponse  –

             HttpServletResponse servletRes = request.getServletResponse(true);

      and setting its content type to “application/json”.

    • In this example we are using the json.org open source JSON implementation for Java. You can use any other implementation 🙂

To sum it up

As you can see, creating a mobile RFC Portal application is pretty simple to implement.
Just follow these basic guidelines and you can have a blast with all of your backend scenarios 🙂


Happy coding,

Doron


To report this post you need to login first.

11 Comments

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

  1. Tobias Hofmann

    Just a quick comment:

    The parameter

    private String BACKEND_SYSTEM_ALIAS = “ERP”;

    for the system should be read from an iView property. This way it will make it clearer the benefit of portal JCA from a portal system compared to WDJ JCo destinations.

    (0) 
    1. German Meneses

      You can use that in your source:

      BACKEND_SYSTEM_ALIAS = request.getComponentContext().getProfile().getProperty(“SystemAlias”);

      In the portalapp.xml

            <component-profile>

           <property name=”com.sap.portal.prt.html5.compliant” value=”true”/>

              <property name=”SystemAlias” value=”YOURALIASSYSTEM”/>

         </component-profile>

      (0) 
  2. Simon Kemp

    Hi Doron,

    I am running NWDS 7.3 SP05 P0 and would like to update to SP08 P8… do I need to download the full SP08 installation of NWDS and reinstall it or should I be able to use the update site feature in eclipse to update to that version?

    Btw… thanks for taking the time to write this blog. I assume there are some new mobile APIs available in SP08 P8 that would be useful when developing mobile portal apps.

    Thanks,

    Simon

    (0) 
    1. Doron Lehmann Post author

      Hi Simon,

      You can simply use the update site feature in eclipse in order to get the latest version.

      And thanks for the kind feedback, hopefully I will write some more posts in the near future.

      Thanks,

      Doron

      (0) 
  3. Deepak Salokhe

    Hi Doron

    thanks for such nicely explained document. I could create Portal application which consumes RFCs from backend systems. Also I am able to access the application in browser properly.

    However when I try to access this application through Portal using POD Framework, i found that all included JAVASCRIPT resources are getting ignored. Have you faced any similar issues??

    Regards,

    Deepak

    (0) 

Leave a Reply