Developing an RFC Mobile Portal Application

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

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:

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”:

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

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:

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

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.

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:

   
   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