Friday, August 28, 2015

Liferay Workflow Management Introduction

Liferay portal have many capabilities and its support many other software integration and one of capability that Liferay support workflow management.

What is workflow?

Work flow is sequence small tasks and each task will be processed by different people at different levels finally all together will complete the big task. Here we will divide big task into small tasks and each task will be dependents on other task completion.

What is advantage of workflow?

To automate the complex work. Workflow management will automate the process so that it will be running step by step and work completion will be easy. Minimal physical work and more accurate.

Workflow Example:

Assume we are applying for Learning Driving Licence.


Step: 1

First application will get physical application form RTA (Road Transport Authority Office). Here some application creator/application issuer will give the form to Applicant.

Task/Job:
Issue Driving Licence Application Form
Task Handled By:
Application Form Creator/Application From issuers
Task Result Possibility:
Forward to Further Level /Reject

Step: 2

Applicant will fill the form and submit it at front desk of RTO office. Now Front desk officer will intake the application form and validate all required documents attached to form or not. Address Proof and Date birth certificate like that.

Task/Job
Validate Required Documents those are attached to the application form
Task Handled By
Application Intake Officer
Task Result Possibility
Forward to Further Level /Reject

Step: 3

Now application will be available at Document  Reviewer officer desk and now he/she will  review and validate the documents and here we have some rules like age rule and submitted documents authentication means original or not.

Task/Job
Validate the documents and other required rules.
Task Handled By
Document Validation Officer
Task Result Possibility
Forward to Further Level /Reject

Step: 4

After completion of step: 3 then Examiner call to take some test which is related to traffic rules exam.

Task/Job
Take Traffic Rules Exam, Provide Exam Paper and Conduct Test then evaluate exam score
Task Handled By
Test Conductor

Job/Task: Task Possibility
If Test passed then forward to Next level, If Test failed then Reject.

Step: 5

Based on Step 4 then Licence Issue Officer will sign and issue the licence. It means Licence approved.

Job/Task:
Based on all steps finally Licence will be issued or rejected by Licence Issue Officer
Task Handled By
Licence Issue Officer
Job/Task: Task Possibility
Approve /Reject Licence

Finally Applicant will collect his/her licence from Licence Issuer Desk.
If it reject then Reject Application will be get it from Licence Issuer Desk and will get document related to why it’s get rejected.

In the above process many people are involved and much paperwork and physical work in present. Assume if all the process automate by some software, so that work will be completed faster and it save lot of time, less paperwork and manpower also will be minimal.
Here process will be changed based on type of work and based on work it need different levels of approvals.

Assume some software which can automate work and that can capable of apply different process with minimal configuration then it would pretty good.

To meet above requirements in the real world there workflow software comes into picture so that we can implement application with workflow management so that we can automate work and we can apply different processes on the fly with minimal configuration rather than re-implement new software for each process.

Now we can say workflow is kind of software which can automate  real world complex work and workflow management will divide complex work into different pieces that is task and each task will be processed at different level  by different people finally all successful tasks together complete the complex work.

How do Workflow Management Implemented?

Workflow management followed specification called JBPM (jBoss Business Process Management). Vendors have implemented workflow management software using JBPM specification so that we can use in our application development.


What are the popular Workflow Management software?


What are the workflow management we can integrate to Liferay?

Liferay supported all above workflow integrations at out of box. Liferay default used Kaleo workflow engine and already deployed in Liferay portal so that we can directly use.

From Liferay 6.2 Kaleo workflow available in Liferay portal server bundle if not then you can download relevant version of kaleo-web from Liferay market place and deploy into Liferay portal

What is Kaleo-web?

Kaleo-web is workflow implementation software/application developed by Liferay and we can use in Liferay to enable workflow to Liferay portal applications.it is web application we can download from Liferay market place and we can deploy into Liferay portal and it is available as web application web archive file(.war) .

As we know Liferay have one of the type of plugin called web plugin and Kaleo-web is Liferay web plugin.

How can I check whether my Liferay portal have Kaleo work flow?

Login to Liferay Portal Administrator go to Liferay control panel there you can find the Workflow section under the Portal heading in the control panel. There are three options under Workflow: Definitions, Default Configuration and Submissions. If these are available then we can say portal enabled by Kaleo workflow.

If you are developer go to Liferay Portal Tomcat server webapps directory there you can see web application context Kaleo-web. This indicate Kaleo-web already deployed.


What are the Liferay Portal Application can have Kaleo workflow support?

Liferay portal by default implemented Kaleo workflow support to Document Library, Web Content, Blogs, Wikis, Comments and Wikis.


Can we implement workflow to our custom applications?

Yes we can implement work flow to our custom application and it’s have specific procedure and we will discuss these in the later post.

What is main artefacts required for Workflow?

The main artefact of workflow is workflow definition is xml file there we will define all workflow process as xml tags. We have XML DTD there we can find all definition for each tag and how to use it.

What is use of Workflow definition XML file?

Workflow definition XML is used by workflow engine based on this it will enable workflow process for each application or entity.

How to prepare workflow definition xml file?

Manually we can prepare with editor by follow the workflow definition DTD. Liferay have implemented Kaleo Workflow designer to EE version so that people who are using Liferay EE they can download it from market place

What is Kaleo Workflow Designer?

Kaleo workflow designer is Liferay plugin application provide Graphical User Interface to Design workflow definition so that we can define XML file very easy.
This application only available for Liferay EE and Liferay CE manually prepare the workflow definition xml file.


Author

Sunday, August 2, 2015

Liferay jQuery Data Table

JQuery Data table is way of present our data at client side and we can show case data and we can perform operations like sorting, update, page nation and many other operations we can perform on data table.

JQuery Data table is very popular jQuery plugin which built it on top of JQuery library. JQuery Data table have very good community and plenty of example so that we can use and integrate to our applications.

The following is reference URL


Liferay have search container to display data and make pagination and sorting apart from if you want use some other data gird/data table then JQuery data table is best choice and we can better  support and many examples available.

As we know that JQuery Data table have used JQuery Java script library and its one of plugin for JQuery.

When we want integrate JQuery Data table we need JQuery Core library java scrip, Data table Plugin and Data table required CSS.

Download Liferay JQuery Data Table Portlet


The following are minimum required files.


JavaScript Files

jquery-1.11.1.min.js
jquery.dataTables.min.js

CSS Files

jquery.dataTables.css

Note:

Above specified files available in direct at CDN point we can use those reference or we directly put in our application then refer them, either way is fine.


JQuery Data Table have many examples all example available in the following URL


Down load all Data table related files


JQuery Data table developed with minimum required needs apart from that it we want enable out of box features then we have data table extension and  data table plugins. When we use these then we will get additional capabilities for data tables.



JQuery Data table have API document there we can see all properties and methods which are available in data table.


General Example of Data Table


<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">

 <script>
 $(document).ready(function() {
                $('#userTable').DataTable();
            } );
 </script>
</head>
<body>
<table id="userTable" class="display" cellspacing="0" width="100%">
       <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
        </tbody>
    </table>
</body>
</html>


JQuery Data table have rich set of methods and Properties from these we can full fill our need in the development of applications.

In this post I will take some examples from JQuery Data table and make it work in Liferay Portlet.

Simple Data Table
Load Data in Data Table Using Ajax
Hidden Data Table Columns

Simple Data Table

Simple data table we simply get data from data and present in the JSP page. Here we need to add required JS and CSS files. I already added JS and CSS files in portlet so we simply refer ethos files.

Simple Data Table Example


<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp" %>
<script src="<%=renderRequest.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=renderRequest.getContextPath()%>/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<%=renderRequest.getContextPath()%>/css/jquery.dataTables.css">
<style>
.message-container{
 padding:10px;
 margin:2px;
 display:none;
 background: rgba(128, 128, 128, 0.33);
 border: 1px solid #0A0A0C;
 }
</style>
<h2>Simple Jquery Data Table with Zero Configuration</h2>
<%
List<User> userList=UserLocalServiceUtil.getUsers(-1,-1);
%>
<c:if test="<%=userList!=null&&!userList.isEmpty() %>">
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
        <tbody>
        <%for(User curUser:userList){ %>
            <tr>
                <td><%=curUser.getUserId()%></td>
                 <td><%=curUser.getScreenName()%></td>
                 <td><%=curUser.getFirstName()%></td>
                 <td><%=curUser.getLastName()%></td>
                 <td><%=curUser.getEmailAddress()%></td>
                 <td><%=curUser.getJobTitle()%></td>
            </tr>
          <%} %>
        </tbody>
    </table>
 <script>
 $(document).ready(function() {
                $('#userTable').DataTable();
            } );
 </script>
 </c:if>
 <c:if test="<%=Validator.isNull(userList)||userList.isEmpty()%>">
 <div class="message-container">No data to Display</div>
 </c:if>


Load Data in Data Table Using Ajax

In this example we will use Ajax call to Portlet server resource method there we will prepare JSON data as for data table required format so that data will be loaded in the table.

Data as Array


Data Table Java Script

$(document).ready(function() {
                $(document).ready(function() {
                    $('#userTable').dataTable( {
                        "ajax": "<%=usersArrayURL%>"
                    } );
                } );
} );

Data Format

{
   "data":[
      [
         20199,
         "joebloggs",
         "Joe",
         "Bloggs",
         "test@liferay.com",
         ""
      ],
      [
         20536,
         "ord1",
         "Test",
         "ORD 1",
         "test.ord.1@liferay.com",
         ""
      ],
      [
         20543,
         "ord2",
         "Test",
         "ORD 2",
         "test.ord.2@liferay.com",
         ""
      ],
      [
         20550,
         "ord3",
         "Test",
         "ORD 3",
         "test.ord.3@liferay.com",
         ""
      ]
   ]
}


Data as Array of Objects

Here data is array of user objects and this will be referred by key “data” in the object.


Data Table Java Script

$(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": "<%=usersObjectArrayURL%>",
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ]
                } );
            } );

Data Format

{
   "data":[
      {
         "lastName":"Bloggs",
         "email":"test@liferay.com",
         "screeName":"joebloggs",
         "userId":20199,
         "firstName":"Joe",
         "jobTitle":""
      },
      {
         "lastName":"ORD 1",
         "email":"test.ord.1@liferay.com",
         "screeName":"ord1",
         "userId":20536,
         "firstName":"Test",
         "jobTitle":""
      },
      {
         "lastName":"ORD 2",
         "email":"test.ord.2@liferay.com",
         "screeName":"ord2",
         "userId":20543,
         "firstName":"Test",
         "jobTitle":""
      },
      {
         "lastName":"ORD 3",
         "email":"test.ord.3@liferay.com",
         "screeName":"ord3",
         "userId":20550,
         "firstName":"Test",
         "jobTitle":""
      }
   ]
}


Flat Data

In this example data will be like array of user objects and in the scrip we need to specify the column names and these should match to JSON object keys.


Data Table Java Script

$(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": {
                      "url":"<%=usersFlatDataSourceURL%>",
                      "dataSrc": ""
                     },
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ]
                } );
            } );

Data Format

[
   {
      "lastName":"Bloggs",
      "email":"test@liferay.com",
      "screeName":"joebloggs",
      "userId":20199,
      "firstName":"Joe",
      "jobTitle":""
   },
   {
      "lastName":"ORD 1",
      "email":"test.ord.1@liferay.com",
      "screeName":"ord1",
      "userId":20536,
      "firstName":"Test",
      "jobTitle":""
   },
   {
      "lastName":"ORD 2",
      "email":"test.ord.2@liferay.com",
      "screeName":"ord2",
      "userId":20543,
      "firstName":"Test",
      "jobTitle":""
   },
   {
      "lastName":"ORD 3",
      "email":"test.ord.3@liferay.com",
      "screeName":"ord3",
      "userId":20550,
      "firstName":"Test",
      "jobTitle":""
   }
]


Custom Data Source Property

Here we will refer our data as “mytabledata” key in JSON object same key we have to use in the script for property “dataSrc


Data Table Java Script

$(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": {
                      "url":"<%=usersCustomDataSourceURL%>",
                      "dataSrc": "mytabledata"
                     },
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ]
                } );
            } );

Data format

{
   "mytabledata":[
      {
         "lastName":"Bloggs",
         "email":"test@liferay.com",
         "screeName":"joebloggs",
         "userId":20199,
         "firstName":"Joe",
         "jobTitle":""
      },
      {
         "lastName":"ORD 1",
         "email":"test.ord.1@liferay.com",
         "screeName":"ord1",
         "userId":20536,
         "firstName":"Test",
         "jobTitle":""
      },
      {
         "lastName":"ORD 2",
         "email":"test.ord.2@liferay.com",
         "screeName":"ord2",
         "userId":20543,
         "firstName":"Test",
         "jobTitle":""
      },
      {
         "lastName":"ORD 3",
         "email":"test.ord.3@liferay.com",
         "screeName":"ord3",
         "userId":20550,
         "firstName":"Test",
         "jobTitle":""
      }
            ]
}


Hidden Data Table Columns

Sometime data we may have many columns but some of columns you want hidden while display in table that we can do with following script and we need specify the columns index that you are going to hide.


Html

<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
    </table>

Java Script

$(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": "<%=usersObjectArrayURL%>",
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ],
                    "columnDefs": [
                                   {
                                       "targets": [ 0 ],
                                       "visible": false,
                                       "searchable": false
                                   },
                                   {
                                       "targets": [ 5 ],
                                       "visible": false
                                   }
                               ]
                } );
            } );


Complete Code Example

Simple Data Table Example


<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp" %>
<script src="<%=renderRequest.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=renderRequest.getContextPath()%>/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<%=renderRequest.getContextPath()%>/css/jquery.dataTables.css">
<style>
.message-container{
 padding:10px;
 margin:2px;
 display:none;
 background: rgba(128, 128, 128, 0.33);
 border: 1px solid #0A0A0C;
 }
</style>
<h2>Simple Jquery Data Table with Zero Configuration</h2>
<%
List<User> userList=UserLocalServiceUtil.getUsers(-1,-1);
%>
<c:if test="<%=userList!=null&&!userList.isEmpty() %>">
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
        <tbody>
        <%for(User curUser:userList){ %>
            <tr>
                <td><%=curUser.getUserId()%></td>
                 <td><%=curUser.getScreenName()%></td>
                 <td><%=curUser.getFirstName()%></td>
                 <td><%=curUser.getLastName()%></td>
                 <td><%=curUser.getEmailAddress()%></td>
                 <td><%=curUser.getJobTitle()%></td>
            </tr>
          <%} %>
        </tbody>
    </table>
 <script>
 $(document).ready(function() {
                $('#userTable').DataTable();
            } );
 </script>
 </c:if>
 <c:if test="<%=Validator.isNull(userList)||userList.isEmpty()%>">
 <div class="message-container">No data to Display</div>
 </c:if>


Load Data Using Ajax as Array of Objects


JSP Page

<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp" %>
<script src="<%=renderRequest.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=renderRequest.getContextPath()%>/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<%=renderRequest.getContextPath()%>/css/jquery.dataTables.css">
<portlet:resourceURL var="usersObjectArrayURL">
            <portlet:param name="cmd" value="jsonUserObjectArray"/>
</portlet:resourceURL>
<style>
.message-container{
 padding:10px;
 margin:2px;
 display:none;
 background: rgba(128, 128, 128, 0.33);
 border: 1px solid #0A0A0C;
 }
</style>
<h2>Jquery Data Table with Array Of Ojbects from Server Through Ajax</h2>
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
    </table>
 <script>
 $(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": "<%=usersObjectArrayURL%>",
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ]
                } );
            } );
 </script>

Portlet Serve Resource Code

public void arrayOfJSONUserObjects(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
JSONArray usersJsonArray = JSONFactoryUtil.createJSONArray();
try {
logger.info("====serveResource========");
JSONObject jsonUser = null;

List<User> userList = UserLocalServiceUtil.getUsers(1,UserLocalServiceUtil.getUsersCount());
for (User userObj : userList) {
jsonUser = JSONFactoryUtil.createJSONObject();
jsonUser.put("userId", userObj.getUserId());
jsonUser.put("screeName", userObj.getScreenName());
jsonUser.put("firstName", userObj.getFirstName());
jsonUser.put("lastName", userObj.getLastName());
jsonUser.put("email", userObj.getEmailAddress());
jsonUser.put("jobTitle", userObj.getJobTitle());
usersJsonArray.put(jsonUser);
}
} catch (Exception e) {
e.printStackTrace();
}

JSONObject tableData = JSONFactoryUtil.createJSONObject();
tableData.put("data", usersJsonArray);
logger.info("tableData:"+tableData.toString());
ServletResponseUtil.write(PortalUtil.getHttpServletResponse(resourceResponse),
tableData.toString());
}


Load Data Using Ajax as Array


JSP Page

<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp" %>
<script src="<%=renderRequest.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=renderRequest.getContextPath()%>/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<%=renderRequest.getContextPath()%>/css/jquery.dataTables.css">
<portlet:resourceURL var="usersArrayURL">
            <portlet:param name="cmd" value="jsonUsersArray"/>
</portlet:resourceURL>
<style>
.message-container{
 padding:10px;
 margin:2px;
 display:none;
 background: rgba(128, 128, 128, 0.33);
 border: 1px solid #0A0A0C;
 }
</style>
<h2>Jquery Data Table with Array Data from Server Through Ajax</h2>
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
    </table>
 <script>
 $(document).ready(function() {
                $(document).ready(function() {
                    $('#userTable').dataTable( {
                        "ajax": "<%=usersArrayURL%>"
                    } );
                } );
            } );
 </script>


Portlet Serve Resource Code

public void arrayOfJSONUserData(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
JSONArray allUsersJsonArray = JSONFactoryUtil.createJSONArray();
try {
logger.info("====serveResource========");
JSONArray jsonUserArray = null;

List<User> userList = UserLocalServiceUtil.getUsers(1,UserLocalServiceUtil.getUsersCount());
for (User userObj : userList) {
jsonUserArray = JSONFactoryUtil.createJSONArray();
jsonUserArray.put(userObj.getUserId());
jsonUserArray.put( userObj.getScreenName());
jsonUserArray.put(userObj.getFirstName());
jsonUserArray.put(userObj.getLastName());
jsonUserArray.put(userObj.getEmailAddress());
jsonUserArray.put(userObj.getJobTitle());
allUsersJsonArray.put(jsonUserArray);
}
} catch (Exception e) {
e.printStackTrace();
}
JSONObject tableData = JSONFactoryUtil.createJSONObject();
tableData.put("data", allUsersJsonArray);
logger.info("tableData:"+tableData.toString());
ServletResponseUtil.write(PortalUtil.getHttpServletResponse(resourceResponse),
tableData.toString());
}


Load Data Using Ajax as Flat Data


JSP Page

<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp" %>
<script src="<%=renderRequest.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=renderRequest.getContextPath()%>/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<%=renderRequest.getContextPath()%>/css/jquery.dataTables.css">
<portlet:resourceURL var="usersFlatDataSourceURL">
            <portlet:param name="cmd" value="flatDataSource"/>
</portlet:resourceURL>
<style>
.message-container{
 padding:10px;
 margin:2px;
 display:none;
 background: rgba(128, 128, 128, 0.33);
 border: 1px solid #0A0A0C;
 }
</style>
<h2>Jquery Data Table with Flat Array Of Ojbects from Server Through Ajax</h2>
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
    </table>
 <script>
 $(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": {
                      "url":"<%=usersFlatDataSourceURL%>",
                      "dataSrc": ""
                     },
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ]
                } );
            } );
 </script>


Portlet Serve Resource Code

public void flatDataSource(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
JSONArray usersJsonArray = JSONFactoryUtil.createJSONArray();
try {
logger.info("====serveResource========");
JSONObject jsonUser = null;

List<User> userList = UserLocalServiceUtil.getUsers(1,UserLocalServiceUtil.getUsersCount());
for (User userObj : userList) {
jsonUser = JSONFactoryUtil.createJSONObject();
jsonUser.put("userId", userObj.getUserId());
jsonUser.put("screeName", userObj.getScreenName());
jsonUser.put("firstName", userObj.getFirstName());
jsonUser.put("lastName", userObj.getLastName());
jsonUser.put("email", userObj.getEmailAddress());
jsonUser.put("jobTitle", userObj.getJobTitle());
usersJsonArray.put(jsonUser);
}
} catch (Exception e) {
e.printStackTrace();
}

logger.info("tableData:"+usersJsonArray.toString());
ServletResponseUtil.write(PortalUtil.getHttpServletResponse(resourceResponse),
usersJsonArray.toString());
}


Load Data Using Ajax using Custom Property


JSP Page

<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp" %>
<script src="<%=renderRequest.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=renderRequest.getContextPath()%>/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<%=renderRequest.getContextPath()%>/css/jquery.dataTables.css">
<portlet:resourceURL var="usersCustomDataSourceURL">
            <portlet:param name="cmd" value="customDataProperty"/>
</portlet:resourceURL>
<style>
.message-container{
 padding:10px;
 margin:2px;
 display:none;
 background: rgba(128, 128, 128, 0.33);
 border: 1px solid #0A0A0C;
 }
</style>
<h2>Jquery Data Table with Custom data source property from Server Through Ajax</h2>
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
    </table>
 <script>
 $(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": {
                      "url":"<%=usersCustomDataSourceURL%>",
                      "dataSrc": "mytabledata"
                     },
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ]
                } );
            } );
 </script>


Portlet Serve Resource Code

public void customDataObjects(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
JSONArray usersJsonArray = JSONFactoryUtil.createJSONArray();
try {
logger.info("====serveResource========");
JSONObject jsonUser = null;

List<User> userList
UserLocalServiceUtil.getUsers(1,UserLocalServiceUtil.getUsersCount());
for (User userObj : userList) {
jsonUser = JSONFactoryUtil.createJSONObject();
jsonUser.put("userId", userObj.getUserId());
jsonUser.put("screeName", userObj.getScreenName());
jsonUser.put("firstName", userObj.getFirstName());
jsonUser.put("lastName", userObj.getLastName());
jsonUser.put("email", userObj.getEmailAddress());
jsonUser.put("jobTitle", userObj.getJobTitle());
usersJsonArray.put(jsonUser);
}
} catch (Exception e) {
e.printStackTrace();
}

JSONObject tableData = JSONFactoryUtil.createJSONObject();
tableData.put("mytabledata", usersJsonArray);
logger.info("tableData:"+tableData.toString());
ServletResponseUtil.write(PortalUtil.getHttpServletResponse(resourceResponse),
tableData.toString());
}
}


Data Table Hidden Columns


JSP

<%@page import="com.liferay.portal.model.User"%>
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@include file="init.jsp" %>
<script src="<%=renderRequest.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
<script src="<%=renderRequest.getContextPath()%>/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="<%=renderRequest.getContextPath()%>/css/jquery.dataTables.css">
<portlet:resourceURL var="usersObjectArrayURL">
            <portlet:param name="cmd" value="jsonUserObjectArray"/>
</portlet:resourceURL>
<style>
.message-container{
 padding:10px;
 margin:2px;
 display:none;
 background: rgba(128, 128, 128, 0.33);
 border: 1px solid #0A0A0C;
 }
</style>
<h2>Jquery Data Table Hidden Columns</h2>
<table id="userTable" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>User Id</th>
                <th>Screen Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email Address</th>
                <th>Job Title</th>
            </tr>
        </tfoot>
    </table>
 <script>
 $(document).ready(function() {
                $('#userTable').dataTable( {
                    "ajax": "<%=usersObjectArrayURL%>",
                    "columns": [
                        { "data": "userId" },
                        { "data": "screeName" },
                        { "data": "firstName" },
                        { "data": "lastName" },
                        { "data": "email" },
                        { "data": "jobTitle" }
                    ],
                    "columnDefs": [
                                   {
                                       "targets": [ 0 ],
                                       "visible": false,
                                       "searchable": false
                                   },
                                   {
                                       "targets": [ 5 ],
                                       "visible": false
                                   }
                               ]
                } );
            } );
 </script>

Portlet Serve Resource Code

public void arrayOfJSONUserObjects(ResourceRequest resourceRequest,
ResourceResponse resourceResponse) throws IOException,
PortletException {
JSONArray usersJsonArray = JSONFactoryUtil.createJSONArray();
try {
logger.info("====serveResource========");
JSONObject jsonUser = null;

List<User> userList
UserLocalServiceUtil.getUsers(1,UserLocalServiceUtil.getUsersCount());
for (User userObj : userList) {
jsonUser = JSONFactoryUtil.createJSONObject();
jsonUser.put("userId", userObj.getUserId());
jsonUser.put("screeName", userObj.getScreenName());
jsonUser.put("firstName", userObj.getFirstName());
jsonUser.put("lastName", userObj.getLastName());
jsonUser.put("email", userObj.getEmailAddress());
jsonUser.put("jobTitle", userObj.getJobTitle());
usersJsonArray.put(jsonUser);
}
} catch (Exception e) {
e.printStackTrace();
}

JSONObject tableData = JSONFactoryUtil.createJSONObject();
tableData.put("data", usersJsonArray);
logger.info("tableData:"+tableData.toString());
ServletResponseUtil.write(PortalUtil.getHttpServletResponse(resourceResponse),
tableData.toString());
}


Portlet Screens

Screen: 1


Screen: 2



Screen: 3



Author

Popular Posts

Recent Posts

Recent Posts Widget