Thursday, 27 October 2016

Using the Updated Bootstrap Fileinput Plugin in XPages Part II - Styling the File Download Control

In my previous blog post, Using the Updated Bootstrap Fileinput Plugin in XPages Part I - Initial Setup of the Plugin in XPages, I described the initial setup of the Bootstrap FileInput Plugin. In response to some questions about the styling of the File Download Control (Bootstrap UI) in this blog post first some examples of how this can be easily resolved.
In this blog post I describe two examples, a File Download Control styled as a Striped Table with a Hover Effect and a File Download Control where the Delete Icon is customized with a button wherein use is made of a Font Awesome icon.

Striped Tabel Hover Effect
The File Download Control consists of a table. In Bootstrap we can style a table in a simple manner by making use of CSS as well as by adding an attribute to the File Download Control itself. In the example below the attribute styleClass has been added to the File Download Control.

<xp:fileUpload id="fileUpload1"
value="#{document1.Attachments}">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs></xp:fileUpload>
<br /><br />
<xp:fileDownload rows="30"
id="fileDownload1"
displayLastModified="false"
hideWhen="true"
allowDelete="true"
value="#{document1.Attachments}"
styleClass="table table-striped table-hover">
</xp:fileDownload>

Furthermore, the XPage uses a Stylesheet, custom.css, in which the following code is included.

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
  background-color: #550055;
  color:#eeeeee;
}

The final result is a good looking Bootstrap Styled Responsive File Download Control.


Change Delete Icon
Some time age I came across a very nice blog post by Frank van der Linden, Give the XPages File download control a bootstrap UI. In this blog post Frank described how to change the Delete Icon in the File Download Control. For more detailed information please take a look at the above mentioned blog post by Frank van der Linden. A very nice customization of the standard Delete Icon in the File Download Control. The only thing required for changing the Delete Icon in the File Download Control is to add the following script on the XPage or Custom Control.

<script>
$(document).ready(function(){
$(".table a[role='button']").addClass("btn btn-danger btn-sm");
$(".table a[role='button']").html('<icon class='fa fa-recycle' title ="Delete File"></icon>');
})
</script>

The final result is a new Bootstrap File Delete Button including a Font Awesome Icon in the File Download Control.


In the next blog posts the the additional functionalities of the Bootstrap FileInput Plugin will be discussed in more detail.

No comments:

Post a Comment