2 November 2017 Thursday

My XPAGES Plugin Series Part 2: Footable

XPages JQuery/Boostrap Plugin Series – Volume 2: Footable

Hello,

in the first volume of this series, I took a look at dualselect to build a nice select/deselect interface for a listbox.
In this part, I will take a look on formatting table data in a convenient way to add pagination, search, sort and action into a table.

Like in the first example, my table will be fed from a backend Java Bean. The bean contains a list of objects coming from Notes Documents and will be presented as rows inside of the table. Some columns of the table will be sortable and I want a filter component as well. Also, I want an action submenu for each row of the table to interact with the content of the specific row. Overall, I want something like this:

Image:My XPAGES Plugin Series Part 2: Footable

For this purpose, I will use the plugin „Footable“:
https://fooplugins.com/plugins/footable-jquery/

First, we will load the plugin via a head tag in the xpage:


<
xp:headTag tagName="script">
     
<xp:this.attributes>
             
<xp:parameter name="type" value="text/javascript" />
                     
<xp:parameter name="src"
                     
value="js/plugins/footable/footable.all.min.js" />
     
</xp:this.attributes>
<
/xp:headTag>



BTW, I organize my plugins using package explorer and the WebContent Folder of the Notes Application:

Image:My XPAGES Plugin Series Part 2: Footable

Before we can use the table, we have to enable the plugin using a call in an output script block inside of the $(document.)ready() event:



$('.footable').footable();


We will use the css class footable insinde of our table definition to do this (see below):

After having loaded all the moving parts of the plugin, let’s code the table. I will define the table, header and footer inside of the xpages code. The rows will be rendered by a repeat control.

If you go through the code below, you will run into a line of code that starts with „swal(...)“ – this will be covered in the next part of this series on how to prettify alert boxes using the the SWAL plugin.

The table will be enclosed in a DIV from the bootstrap theme I use in the overall application. Right before the code of the table, we will define a html field for the text filter of the table:


<
input type="text" class="form-control input-sm m-b-xs" id="filter" placeholder="Search in table"></input>

The filter element gets  defined via ist ID in the page definitions. The code for the table itself looks like this:


<
table class="footable table table-stripped" data-page-size="8" data-filter="#filter">
<
thead>
     
<tr>
             
<th>Account type</th>
             
<th>E-Mail Address</th>
             
<th>Actions</th>
     
</tr>
</
thead>
<
tbody>

Inside of the repeat control, I retrieve the row data as a JSON Object and refer to it using the variable jRowData. My Java Bean has a method the returns the account objects as a JSON list.


<
xp:repeat id="repeatAccounts" rows="30" var="jRowData"
     
indexVar="jRow" disableOutputTag="true">
<
xp:this.value><![CDATA[#{javascript:var list=UserBean.getAccountsAsJSON();
return eval("("+list+")");}
]]></xp:this.value>
     
<tr class="gradeA">
             
<td>
     
<xp:label value="#{javascript:jRowData.type}" id="labeltype"></xp:label>
             
</td>
             
<td>
             
<xp:label value="#{javascript:jRowData.emailaddress}" id="label1">
             </
xp:label>
             
</td>
             
<td class="center">
             
<div class="btn-group">
                     
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Actions&#160; <span class="caret"></span></button>
                     
<ul class="dropdown-menu">
<
li><xp:link escape="true" text="Edit" id="link2" value="#modal-form">
     
<xp:this.attrs>
     
<xp:attr name="data-toggle" value="modal"></xp:attr>
     
</xp:this.attrs>
     
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="popupform">
<
xp:this.action><![CDATA[#{javascript:UserBean.setSelectedAccount(jRowData.emailaddress);
sessionScope.put("SelectedAccount",jRowData.emailaddress)}
]]></xp:this.action>
</
xp:eventHandler>
     
</xp:link></li>
<
li>
<
xp:link escape="true" text="Delete" id="link3" value="#">
             
<xp:eventHandler event="onclick" submit="false"
action
="#{javascript:UserBean.disableAccount(jRowData.emailaddress);}">
<
xp:this.script><![CDATA[swal({  
         title: "Are you sure ?",  
         text: "Do you really want to delete this account ?",  
         type: "warning",  
         showCancelButton: true,  
         confirmButtonColor: "#DD6B55",  
         confirmButtonText: "Yes, please delete !",  
         closeOnConfirm: false,
         closeOnCancel:false

     }, function(isConfirm){

             if(isConfirm) {

                     var myhiddenButton = '#{
javascript:getClientId("saveAll")}';
                     document.getElementById(myhiddenButton).click();

                     return true;

             } else {

                     swal("Not deleted !", "The account has not been deleted.", "success");
                     return false;

             }

});

]]></
xp:this.script>
</
xp:eventHandler>
</
xp:link></li>
</
ul>
</
div>

Inside the action code, (Action delete) I display an alert box before deleting the account. As I will have to let data travel back to the server depending on a client side event in an alert box, I took a shortcut and created a hidden button with the server side code that gets triggered in the alertbox if the user decides to really delete the account. I will go into further details of this section in the next episode about the SWAL plugin.


<
xp:button value="Hidden Button for Save !" id="saveAll“ style="display:none">
<
xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<
xp:this.action>
<
xp:actionGroup>
<
xp:executeScript
script
="#{javascript:UserBean.disableAccount(jRowData.emailaddress);}">
</
xp:executeScript>
</
xp:actionGroup>
</
xp:this.action>
</
xp:eventHandler>
</
xp:button>
</
td>
</
tr>
</
xp:repeat>
</
tbody>

Inside of the table footer, the pagination will show up.


<
tfoot>
     
<tr>
     
<td colspan="5">
                     
<ul class="pagination pull-right"></ul>
             
</td>
     <
/tr>
</
tfoot>
</
table>

The edit action as well as the add function will trigger a model dialog that allows me to enter/alter the account data. For the sake of the code size of this post, I decided to leave that part out of this post for the moment. The modal form resides in a DIV called „popupform“.

For your convenience, I will pull a demo template together with all the code inside and put that out on github within the next week or so – so stay tuned for more to come....

Heiko.
Heiko Voigt   |   2 November 2017 07:00:00   |    Domino  Xpages  jQuery  Bootstrap  Footable    |  
  |   Next Document   |   Previous Document

Discussion for this entry is now closed.

Comments (0)

No Comments Found