Wednesday, 25 October 2017

Extended Bootstrap Panels in XPages Using the jQuery LobiPanel Plugin

In my continuous search for modern plugins for my XPages applications I came across LobiPanel. LobiPanel is a jQuery plugin for Bootstrap panels. The plugin extends Bootstrap panels with several common and useful functions. LobiPanel depends on jQuery, jQuery ui and Bootstrap. LobiPanel initialization is simple, just create correct markup of a Bootstrap panel and call the plugin.

Features:
- Sort, drag, expand, resize, minimize bootstrap panels
- Specify url and load content in panel from this url
- Change the name of the panel
- Customize action icons and action tooltips
- Works for nested panels
- HTML5 localStorage support:
- Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
- Save panel position among siblings and apply on next time

The plugin creates some additional buttons on the right side of the Bootstrap panel heading which can perform several actions.

Below a short explanation of these extra buttons form right to left.
The first button removes the panel from document. This operation can not be undone!
The second button expands the panel on full screen.
The third button loads content in .panel-body from specified URL.
The fourth button takes out the panel from its position in DOM hierarchy and makes it floating. Anytime with the same button you can put the panel in its position.
The fifth button  has two functions. It collapses and expands the panel. It  also minimizes the panel at the bottom of the page when panel is taken out from DOM hierarchy.
On small screen panel controls are hidden and dropdown toggle  button is shown.


In order to use LobiPanel, the JavaScript en CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from from Github: LobiPanel
Below a basic example using LobiPanel in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder lobipanel has been added in the WebContent Folder.
Next the JavaScript and CSS files lobipanel.js and lobipanel.css must be included on the XPage or Custom Control. In this example I added the file to an XPage. Also I included the jQueru-UI files because these are required for using the LobiPanel plugin.

<link rel="stylesheet" href="lobipanel/css/lobipanel.css" />
<link rel="stylesheet" href="jquery-ui/jquery-ui.css" />
<script type="text/javascript" src="lobipanel/js/lobipanel.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:panel2}" ).lobiPanel({        
reload: false,
close: false,
editTitle: false
}); 
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is an extended responsive Bootstrap Panel with several common and useful functions including some additional options in the initial setup.


Sample Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="lobipanel/css/lobipanel.css" />
<link rel="stylesheet" href="jquery-ui/jquery-ui.css" />
<script type="text/javascript" src="lobipanel/js/lobipanel.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:panel}" ).lobiPanel();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:panel2}" ).lobiPanel({     
reload: false,
close: false,
editTitle: false
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="panel panel-default" id="panel">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title</h4>
</div>
</div>
<div class="panel-body">
jQuery Plugin LobiPanel. It extends panels with several common and useful functions.
</div>
</div>
<xp:br></xp:br>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title</h4>
</div>
</div>
<div class="panel-body">
jQuery Plugin LobiPanel. LobiPanel depends on jQuery, jQuery ui and Bootstrap.
</div>
</div>
<xp:br></xp:br>
<div class="panel panel-info lobipanel">
<div class="panel-heading">
<div class="panel-title">
<h4>LobiPanel title</h4>
</div>
</div>
<div class="panel-body">
<div class="panel panel-warning lobipanel">
<div class="panel-heading">
<div class="panel-title">
<h4>Nested LobiPanel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 1
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 2
</div>
</div>
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 3
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title"
<h4>Panel Title</h4>
</div>
</div>
<div class="panel-body">
Panel 4
</div>
</div>
<div class="panel panel-default lobipanel" data-sortable="true">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title</h4>
</div>
</div>
<div class="panel-body">
Panel 5
</div>
</div>
</div>
</div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: LobiPanel documentation

No comments:

Post a Comment