Search code examples
xpages

Getting Bootstrap Switch Custom Control to work

[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>&lt;?xml version="1.0" encoding="UTF-8"?&gt;&#xd;
&lt;xp:view&#xd;
  xmlns:xp="http://www.ibm.com/xsp/core"&gt;&#xd;
  &lt;B&gt;Bootstrap Switch Custom Control&lt;/B&gt;&lt;/xp:view&gt;</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&#xd;
small&#xd;
normal&#xd;
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&#xd;
info&#xd;
success&#xd;
warning&#xd;
danger&#xd;
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&#xd;
info&#xd;
success&#xd;
warning&#xd;
danger&#xd;
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&#xd;
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>
Solution

  • 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