Getting Bootstrap Switch Custom Control to work - xpages

Question

[Updated - SOLVED]
This turned out not to be an AMD issue. The problem was I was using the incorrect version of the Bootstrap-Switch code. I switched to 3.3.4 and everything worked just fine. Thank you Howard.
[Updated - I have added the code I am using to overcome the AMD issue]
See at the end of this post.
I am trying to get Howard Greenberg's Bootstrap Switch Custom Control to work.
I believe I followed the instructions exactly. The only problem I ran into was that in his Custom Control Properties there wasn't a switchBinding, which I think is necessary, so I added one.
I do not get any errors, but all I see is a blank page with the computed field on it ["Bryan"].
What am I doing wrong?
Xpage
<?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.beforePageLoad><![CDATA[#{javascript:viewScope.sampleValue = "Bryan"}]]></xp:this.beforePageLoad>
<xc:cc_CommonFieldCheckBox3
refreshId="computedField1"
checkedValue="checked"
uncheckedValue="not checked"
offLabel="OFF"
onLabel="ON"
labelText="Label"
dataSize="normal"
offColor="success"
onColor="warning"
handleWidth="auto"
labelWidth="auto"
inverse="false"
switchBinding="viewScope.sampleValue">
</xc:cc_CommonFieldCheckBox3>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:text
escape="true"
id="computedField1" value="#{viewScope.sampleValue}">
</xp:text>
</xp:view>
Custom Control
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet
href="/bootstrap-switch/css/bootstrap-switch.min.css"></xp:styleSheet>
<xp:script
src="/bootstrap-switch/js/bootstrap-switch.min.js"
clientSide="true">
</xp:script>
</xp:this.resources>
<xp:panel
id="checkBoxPanel">
<xp:eventHandler
event="onClientLoad"
submit="false">
<xp:this.script><![CDATA[x$("#{id:checkBox1}").bootstrapSwitch();
var refreshId = "#{javascript: (compositeData.refreshId!=null) ? getClientId(compositeData.refreshId):''}";
if (refreshId != null || refreshId != "") {
// set the partial refresh if the user put an id in the cc property
x$("#{id:checkBox1}")
.on(
'switchChange.bootstrapSwitch',
function(event, state) {
XSP
.partialRefreshPost("#{javascript: (compositeData.refreshId!=null) ? getClientId(compositeData.refreshId):''}");
});
}
function x$(idTag, param) { // Updated 18 Feb 2012
idTag = idTag.replace(/:/gi, "\\:") + (param ? param : "");
return ($("#" + idTag));
}]]></xp:this.script>
</xp:eventHandler>
<xp:checkBox
id="checkBox1"
checkedValue="${javascript:return compositeData.checkedValue;}"
uncheckedValue="${javascript:return compositeData.uncheckedValue;}"
defaultChecked="false">
<xp:this.value><![CDATA[${javascript:"#{"+compositeData.switchBinding+"}"}]]></xp:this.value>
<xp:this.attrs>
<xp:attr
name="data-on-text"
value="${javascript:return compositeData.onLabel;}">
</xp:attr>
<xp:attr
name="data-off-text"
value="${javascript:return compositeData.offLabel;}">
</xp:attr>
<xp:attr
name="data-label-text"
value="${javascript:return compositeData.labelText;}">
</xp:attr>
<xp:attr
name="data-size"
value="${javascript:return compositeData.dataSize;}">
</xp:attr>
<xp:attr
name="data-on-Color"
value="${javascript:return compositeData.onColor;}">
</xp:attr>
<xp:attr
name="data-off-Color"
value="${javascript:return compositeData.offColor;}">
</xp:attr>
<xp:attr
name="data-handle-width"
value="${javascript:return compositeData.handleWidth;}">
</xp:attr>
<xp:attr
name="data-label-width"
value="${javascript:return compositeData.labelWidth;}">
</xp:attr>
<xp:attr
name="data-inverse"
value="${javascript:return compositeData.inverse;}">
</xp:attr>
</xp:this.attrs>
</xp:checkBox>
</xp:panel>
</xp:view>
Custom Control Properties
<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
<faces-config-extension>
<namespace-uri>http://www.ibm.com/xsp/custom</namespace-uri>
<default-prefix>xc</default-prefix>
</faces-config-extension>
<composite-component>
<component-type>cc_CommonFieldCheckBox3</component-type>
<composite-name>cc_CommonFieldCheckBox3</composite-name>
<composite-file>/cc_CommonFieldCheckBox3.xsp</composite-file>
<composite-extension>
<designer-extension>
<in-palette>true</in-palette>
<render-markup><?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<B>Bootstrap Switch Custom Control</B></xp:view></render-markup>
<category>Custom Controls - Fields</category>
</designer-extension>
</composite-extension>
<property>
<property-name>refreshId</property-name>
<property-class>string</property-class>
<display-name>refreshId</display-name>
<description>If you supply a control Id than that control will be partially refreshed upon change. If this is empty than no refresh happens.</description>
<property-extension>
<required>false</required>
</property-extension>
</property>
<property>
<property-name>checkedValue</property-name>
<property-class>string</property-class>
<display-name>checkedValue</display-name>
<property-extension>
<required>true</required>
</property-extension>
</property>
<property>
<property-name>uncheckedValue</property-name>
<property-class>string</property-class>
<display-name>uncheckedValue</display-name>
<property-extension>
<required>true</required>
</property-extension>
</property>
<property>
<property-name>onLabel</property-name>
<property-class>string</property-class>
<display-name>onLabel</display-name>
<property-extension>
<required>true</required>
<designer-extension>
<default-value>ON</default-value>
</designer-extension>
</property-extension>
</property>
<property>
<property-name>offLabel</property-name>
<property-class>string</property-class>
<display-name>offLabel</display-name>
<property-extension>
<required>true</required>
<designer-extension>
<default-value>OFF</default-value>
</designer-extension>
</property-extension>
</property>
<property>
<property-name>labelText</property-name>
<property-class>string</property-class>
<display-name>labelText</display-name>
<property-extension>
<required>true</required>
<designer-extension>
<default-value>Label</default-value>
</designer-extension>
</property-extension>
</property>
<property>
<property-name>dataSize</property-name>
<property-class>string</property-class>
<display-name>dataSize</display-name>
<property-extension>
<designer-extension>
<editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
<editor-parameter>mini
small
normal
large</editor-parameter>
<default-value>normal</default-value>
</designer-extension>
</property-extension>
<description>Size of the switch</description>
</property>
<property>
<property-name>onColor</property-name>
<property-class>string</property-class>
<display-name>onColor</display-name>
<property-extension>
<designer-extension>
<editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
<editor-parameter>primary
info
success
warning
danger
default</editor-parameter>
<default-value>primary</default-value>
</designer-extension>
</property-extension>
<description>Color of left side of switch</description>
</property>
<property>
<property-name>offColor</property-name>
<property-class>string</property-class>
<display-name>offColor</display-name>
<property-extension>
<designer-extension>
<editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
<editor-parameter>primary
info
success
warning
danger
default</editor-parameter>
<default-value>default</default-value>
</designer-extension>
</property-extension>
<description>Color of right side of switch</description>
</property>
<property>
<property-name>labelWidth</property-name>
<property-class>string</property-class>
<display-name>labelWidth</display-name>
<property-extension>
<designer-extension>
<default-value>auto</default-value>
</designer-extension>
</property-extension>
<description>Width of the center handle in pixels, default is auto</description>
</property>
<property>
<property-name>handleWidth</property-name>
<property-class>string</property-class>
<display-name>handleWidth</display-name>
<property-extension>
<designer-extension>
<default-value>auto</default-value>
</designer-extension>
</property-extension>
<description>Width of the left and right sides in pixels, default is auto</description>
</property>
<property>
<property-name>inverse</property-name>
<property-class>string</property-class>
<display-name>inverse</display-name>
<description>Inverse switch direction</description>
<property-extension>
<designer-extension>
<default-value>false</default-value>
<editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
<editor-parameter>true
false</editor-parameter>
</designer-extension>
</property-extension>
</property>
<description/>
<property>
<property-name>switchBinding</property-name>
<property-class>string</property-class>
</property>
</composite-component>
</faces-config>
<xp:this.resources>
<xp:styleSheet
href="/bootstrap-switch/css/bootstrap-switch.min.css"></xp:styleSheet>
</xp:this.resources>

Answer 1

It seems like the properties at the OpenNTF snippet are missing a property called switchBinding (it is a string). Make sure to add that to the custom control property definition.
<property>
<property-name>switchBinding</property-name>
<property-class>string</property-class>
<display-name>switchBinding</display-name>
</property>
If you did not include this you would get an error in Designer.
Also, be sure to check your browser console to see if any errors are thrown (like it can't find the css or js files).
Note that the AMD issue referred to above is not a factor with this.
Let me know if you still have issues. I can send you the entire working database if needed.
Howard