Monday, 15 June 2015

Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I

Many Bootstrap Plugins have moved during the past period to a new version. Examples include among others are Select2 and the Bootstrap Date-Time Picker. Also the Bootstrap FileInput Plugin has moved to a new version, at this point version 4. In this mini-series I will show how the new version can be used in XPages. In this introduction I will explain the basic setup.

The Bootstrap FileInput Plugin is an enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging and dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
In order to use the Bootstrap FileInput Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap-FileInput.

Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bootstrapfileinput4 has been added in the WebContent Folder.


Next the JavaScript and CSS files, fileinput.js and fileinput.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script>
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" />

Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries.


<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. In this example I use a few Options. In the next few blog posts these options will be explained in more detail.

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>

Basic Setup fileUpload in XPages
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>

Remark: In this example I use the data-attribute  accept with a value image/*. This means that only images can be added to the FileInput. The data attributes will be described in more detail in the next few blog posts.

The result is a  good looking Bootstrap FileInput.


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.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script>
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" />
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="page-header">
<h1>
FileInput
<xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap FileInput Plugin</small>
</h1>
</div>
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>
<xp:br></xp:br>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="true" value="#{document1.fileAttachment}"
hideWhen="true" allowDelete="true">
</xp:fileDownload>
<xp:button value="Save Document" id="button1" styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument></xp:saveDocument>
<xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog posts we will also look more closely at the new features of this Plugin. So stay tuned, there is more to come. For more information, see also my previous blog post Using FileInput in XPages.

No comments:

Post a Comment