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:
- Business logic is encapsulated in the mobile-oriented Portal components
- Data exchange between mobile UI and the business logic components is based on AJAX and JSON
- 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
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.
To solve the above dependencies, you can use the Class Jar Locator.
One last dependency that needs to be solved is:
To solve it you need to perform the following steps:
- Open the SAP NetWeaver Installation DVD.
- Navigate to the directory \sapinst\JAVA_DVD\J2EE_OSINDEP\UT.
- Use WinRAR to open the file EPCONNECTIVITY08_2.SCA.
(Note that you may have a different patch level.)
- Navigate to the directory BUILDARCHIVES.
- Use WinRAR to open the file sap.com~tc~ep~connectivity~api~_comp~dcia.zip
- Use WinRAR to open the file api.ppa.
- Navigate to the folder lib\java.
- 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 🙂
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
- Client-side resources
- 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)
- 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
- 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 🙂
- We are returning a JSON response to the client by using the HttpServletResponse – HttpServletResponse servletRes = request.getServletResponse(true);
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 🙂