Thursday, 31 March 2016

Bootstrap Plugins in XPages Part II - Bootstrap FileStyle

In this blog post I will show how the Bootstrap FileStyle plugin can be used in XPages. Bootstrap FileStyle is a quick and simple plugin to help style your form's file upload inputs.
Bootstrap FileStyle can be downloaded from GitHub.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap

Recommended blog post: Using the new Bootstrap Fileinput Plugin in XPages.
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.

Below is a description of the setup of the Bootstrap FileStyle plugin.

1. Adding the JS and CSS files
The JavaScript file needs to be added to the WebContent Folder in the Package Explorer. In this example a Folder 'bootstrapfilestyle' has been added in the WebContent Folder.


Next the JavaScript file, bootstrap-filestyle.js need to be included on the XPage or Custom Control. In this example I add the files to an XPage. There is no need for an AMD Fix,

<script type="text/javascript" src="bootstrapfilestyle/bootstrap-filestyle.js"></script>

2. Setup Bootstrap FileStyle using JavaScript

<?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">
<script type="text/javascript" src="bootstrapfilestyle/bootstrap-filestyle.js"></script>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h2>Bootstrap FileStyle</h2>
<h4>Bootstrap FileStyle is a quick and simple plugin to help style your form's file upload inputs.</h4>
<xp:br></xp:br>
<xp:fileUpload id="fileUpload1"></xp:fileUpload>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>$(":file").filestyle({buttonName: "btn-primary", placeholder: "No file", iconName: "glyphicon glyphicon-upload"});</script>
</xp:view>

3. Setup Bootstrap FileStyle using jQuery Selector for XPages

<?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="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapfilestyle/bootstrap-filestyle.js"></script>
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
 $(document).ready( 
 function() {
 $('input[type=file]').filestyle({
buttonName: 'btn-primary',
placeholder: 'No file',
iconName: 'glyphicon glyphicon-upload'
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h2>Bootstrap FileStyle</h2>
<h4>Bootstrap FileStyle is a quick and simple plugin to help style your form's file upload inputs.</h4>
<xp:br></xp:br>
<xp:fileUpload id="fileUpload1"></xp:fileUpload>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The final result is a nice Bootstrap look and feel file upload button including a placeholder and a button icon.


For more information and examples: Bootstrap FileStyle

No comments:

Post a Comment