Skip to content

Instantly share code, notes, and snippets.

@lpar
Last active Aug 29, 2015
Embed
What would you like to do?
Bootstrap + XPages custom control for easier form fields, with validation via SSJS controller
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<!-- Facets are instantiated on page load, so afterPageLoad is our first chance
to mess with their contents. -->
<xp:this.afterPageLoad><![CDATA[#{javascript:var placeHolder = compositeData.placeholder || "",
dataField = getComponent('field1').children[0];
if (dataField) {
// Store the field ID for later use
compositeData.setString('fieldId', dataField.id);
}
if (dataField && placeHolder) {
dataField.addAttr(new com.ibm.xsp.complex.Attr('placeholder', placeHolder));
} }]]>
</xp:this.afterPageLoad>
<div class="#{javascript:'form-group has-feedback' + (getComponent(compositeData.fieldId).isValid() ? '':' has-error')}">
<xp:label value="#{javascript:compositeData.label}" id="label1"
for="#{javascript:compositeData.fieldId}" styleClass="control-label" />
<xp:callback facetName="field" id="field1" />
<!-- Display icon feedback on field, if we are displaying at least one validation error. -->
<xp:text escape="true"
styleClass="glyphicon form-control-feedback glyphicon-#{javascript:getComponent(compositeData.fieldId).isValid() ? 'ok' : 'remove';}"
rendered="#{javascript:facesContext.getMessages().hasNext();}" />
<!-- Display server-side validation error message for field, if there is one. -->
<xp:message for="#{javascript:compositeData.fieldId}"
styleClass="help-block with-errors" rendered="#{javascript:facesContext.getMessages().hasNext();}" />
<!-- Display hint text, if it exists and we're not displaying an error message -->
<xp:text escape="true" id="computedField2" value="#{javascript:compositeData.help}"
styleClass="help-block">
<xp:this.rendered><![CDATA[#{javascript:compositeData.help && getComponent(compositeData.fieldId).isValid();}]]></xp:this.rendered>
</xp:text>
</div>
</xp:view>
<?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">
<xp:this.querySaveDocument><![CDATA[#{javascript:
var name = getComponent('birdName').getValue(),
species = getComponent('birdSpecies').getValue(), result = true;
if (name === "") {
Validation.postError("birdName", "You must name your bird.");
result = false;
}
if (species === "") {
Validation.postError("birdSpecies", "What kind of bird is it?");
result = false;
}
return result;}]]></xp:this.querySaveDocument></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/Validation.jss" clientSide="false"></xp:script>
</xp:this.resources>
<xc:cc_formfield label="Bird name:" placeholder="Your bird's name">
<xp:this.facets>
<xp:inputText id="birdName" xp:key="field" value="#{document1.birdName}"/>
</xp:this.facets>
</xc:cc_formfield>
<xc:cc_formfield placeholder="Melopsittacus undulatus" help="Latin species name" label="Bird species:">
<xp:this.facets>
<xp:inputText id="birdSpecies" xp:key="field" value="#{document1.birdSpecies}"/>
</xp:this.facets>
</xc:cc_formfield>
<xp:button value="Submit" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete"
immediate="false" save="true">
</xp:eventHandler>
</xp:button>
</xp:view>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment