Skip to content

Instantly share code, notes, and snippets.

Last active Aug 29, 2015
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="" xmlns:xe="">
<!-- 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
if (dataField && placeHolder) {
dataField.addAttr(new'placeholder', placeHolder));
} }]]>
<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="#{}"
<xp:this.rendered><![CDATA[#{ && getComponent(compositeData.fieldId).isValid();}]]></xp:this.rendered>
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp=""
<xp:dominoDocument var="document1">
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:script src="/Validation.jss" clientSide="false"></xp:script>
<xc:cc_formfield label="Bird name:" placeholder="Your bird's name">
<xp:inputText id="birdName" xp:key="field" value="#{document1.birdName}"/>
<xc:cc_formfield placeholder="Melopsittacus undulatus" help="Latin species name" label="Bird species:">
<xp:inputText id="birdSpecies" xp:key="field" value="#{document1.birdSpecies}"/>
<xp:button value="Submit" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete"
immediate="false" save="true">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment