Skip to Content
Author's profile photo Former Member

Light weight portal apps using jQuery and DataTables

Web Dynpro is a great MVC framework to develop portal applications. The drag-drop wizards make it easy to develop fast, the UI elements are controlled automatically by the web dynpro framework once they are bound to the context nodes/attributes, etc…

In this blog I am going to describe an alternate way to create light weight portal application using “Abstract portal component (APC)”, that uses a jQuery plugin called DataTables. By avoiding HTMLB controls, we can make the portal applications more agile and faster, specially when using client side javascript libraries such as jQuery.
[jQuery |] is a widely used and most popular javascript library. [DataTables |] is a jQuery plugin that makes the table run faster, whether it be searching the results while we type instantly (similar to google instant), or row level details ( as shown in this[example |]), etc.

Create an APC. For more details on this, refer SAP help

Download jQuery and Datatables javascript files. Copy paste the jquery-1.4.3.min.js and jquery.dataTables.min.js (or latest versions of these files) under “dist/scripts” folder in the portal project. Copy paste the style sheet demo_table.css file from the DataTables download into “dist/css” folder. Write the following code in the doContent() method of the APC

IResource cssResource = request.getResource(IResource.CSS,”css/demo_table.css”);

response.include(request, cssResource);

Similarly write the following javascript code in the JSP.

<%String mimeUrl = componentRequest.getWebResourcePath(); %>

<script type=”text/JavaScript” src=”<%=mimeUrl%>/scripts/jquery-1.4.3.min.js”>

<script type=”text/JavaScript” src=”<%=mimeUrl%>/scripts/jquery.dataTables.min.js”></script> 

Here is the final code, to invoke the plugin

$(document).ready(function() {


} );

Please refer for more information.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member
      I dont prefer sliding a technology like java webdynpro into traditional javascript or jquery.
      There are other ways to come across performance issues.
      Congrats on your first blog
      Thanks ,
      Author's profile photo Former Member
      Former Member
      Good good.. you are telling that webdynpro either Java and ABAP both will take lot of time to display data from backend and user can not wait so, AJAX based ,sleek UIs are required for clients.
      Author's profile photo Former Member
      Former Member
      My intention in writing this blog, is to use DataTables plugin for jQuery.
      I am not experienced in ABAP Web Dynpro. Hence there is no mention of ABAP Web Dynpro in the blog. By using DataTables, we were able to increase the table UI element performance, at the same time it has a instant search capability.
        If you know any techniques to increase the performance of a java web dynpro table UI element (specially if it has thousands of rows), please feel free to share here.
      Thanks for your comment.
      Author's profile photo Leslie Calderon
      Leslie Calderon

      Hi, I liked your blog.

      My question: it is possible to use jQuery in a j2ee application with jsp (no portal) ?



      Author's profile photo Former Member
      Former Member

      Hi Les,

      Somehow I missed your comment as lot changed on SCN ever since I wrote this blog. Yes you can use jQuery in a j2ee application as well.  Please search on SCN...