Skip to Content

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 | http://jquery.com/] is a widely used and most popular javascript library. [DataTables | http://datatables.net/index] 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 | http://datatables.net/examples/api/row_details.html]), 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() {

$(‘#tableID’).dataTable();

} );

Please refer http://datatables.net for more information.

To report this post you need to login first.

5 Comments

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

  1. support Internal
    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 ,
    gopal.sattiraju
    (0) 
    1. Kiran ATL
      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.
      (0) 
      1. Srini Here Post author
        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.
        (0) 
    1. Srini Here Post author

      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…

      Thanks

      Srinivas

      (0) 

Leave a Reply