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.
