Wednesday, 3 June 2015

Reusable Bootstrap Text Fields including Validation and Font Awesome icons in XPages

A few months ago I wrote a blog post about Reusable Bootstrap Text Fields. In the past period I have received some questions about Reusable Bootstrap Text Fields and  Reusable Bootstrap Rich Text Fields. This concerned in particular the validation of these fields and the use of Font Awesome icons. For detailed information I refer to the blog post Validation Reusable Text Fields. For those who have asked questions on this subject via Direct Messages on Twitter or for those who missed my blog posts on this subject below is a summary of the code for the Custom Control, the Custom Properties, the XPage and the final end result.

Code Custom Control
Remark: Add the following code to a Custom Control and save the Custom Control (in this example as ccvalidationBSTextField)

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xpt="http://www.openntf.org/xsp/xpt"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:div>
<xp:this.styleClass><![CDATA[#{javascript:"form-group" + ( getComponent("inputText1").isValid() ? "" : " has-error" )}]]></xp:this.styleClass>
<xp:label styleClass="col-sm-2 control-label" for="inputText1"
value="${compositeData.fieldLabel}" />
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon">
<xp:text escape="true" id="computedField2" styleClass="${compositeData.faicon}" tagName="i">
</xp:text>
</span>
<xp:inputText type="text" id="inputText1"
loaded="${!empty compositeData.placeholder}"
value="#{compositeData.dataSource[compositeData.fieldName]}"
required="${compositeData.required}">
<xp:this.attrs>
<xp:attr name="placeholder" value="${compositeData.placeholder}"></xp:attr>
</xp:this.attrs>
<xp:this.validators>
<xp:validateRequired message="#{javascript:compositeData.fieldLabel + ' is required'}">
</xp:validateRequired>
</xp:this.validators>
</xp:inputText>
</div>
<xp:text escape="true" id="computedField1" styleClass="help-block" value="${compositeData.helpText}">
<xp:this.rendered><![CDATA[#{javascript:getComponent("inputText1").isValid() && compositeData.helpText != null && currentDocument.isEditable()}]]></xp:this.rendered>
</xp:text>
<xp:message id="message1" for="inputText1" styleClass="help-block"></xp:message>
</div>
</xp:div>
</xp:view>

Remark: After adding the Custom Control on the XPage there are for the Reusable Bootstrap Text Field some Custom Properties available.


Code XPage
Remark: Add the Custom Control to the XPage and enter the correct information/date in the Custom Properties. Save the XPage and view the XPage in the browser. Try saving the document without entering data and check out the validation.

<?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>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Bootstrap Reusable Fields<xp:span style="color:rgb(255,255,255)"></xp:span>
<small>Including Validation</small></h1>
</div>
<xp:br></xp:br>
<xc:ccvalidationBSTextField required="true"
dataSource="#{document1}" fieldLabel="FirstName"
fieldName="FirstName" helpText="FirstName is a mandatory field"
placeholder="First Name" faicon="fa fa-user">
</xc:ccvalidationBSTextField>
<xp:br></xp:br>
<xc:ccvalidationBSTextField required="true"
dataSource="#{document1}" fieldLabel="LastName"
fieldName="LastName" helpText="LastName is a mandatory field"
placeholder="Last Name" faicon="fa fa-user">
</xc:ccvalidationBSTextField>
<xp:br></xp:br>
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<xp:button value="Save" id="button1" styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:openPage name="/BootstrapTextFieldsWithValidation.xsp"></xp:openPage>
</xp:this.action></xp:eventHandler></xp:button>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The End Result
A Reusable Bootstrap Text Field including Validation and Font Awesome icons



For detailed information regarding Reusable Bootstrap Rich Text Fields including validation I refer to the blog post: Validation Rich Text Field.

No comments:

Post a Comment