Bootstrap Switch Custom Control


Create a cool switch control in your XPages app!  See http://www.bootstrap-switch.org/examples.html for examples. 

Be sure to read the notes at the bottom before trying to implement!

Below is the code for the custom control, create a custom control and call it ccBootstrapSwitch and paste this code into it.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<xp:styleSheet
			href="/switch/bootstrap-switch.min.css"></xp:styleSheet>
		<xp:script
			src="/switch/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>


Below is the custom control properties. To use these create one property on the above custom control, call it anything.
Then go to the Package Explorer and edit the ccBootstrapSwitch.xsp-config file.
Replace the text in that file with what's below.

<?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>ccBootstrapSwitch</component-type>
    <composite-name>ccBootstrapSwitch</composite-name>
    <composite-file>/ccBootstrapSwitch.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>
      </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>
    <property>
      <property-name>switchBinding</property-name>
      <property-class>string</property-class>
      <display-name>switchBinding</display-name>
    </property>
  </composite-component>
</faces-config>



Below is a sample XPage that uses this custom control you can use as a test. Note the data for the checkbox
 is bound to a viewScope variable in this case but you can bind it to anything.

<?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">
	<xc:ccBootstrapSwitch
		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:ccBootstrapSwitch>
	<xp:br></xp:br>
	<xp:br></xp:br>
	<xp:text
		escape="true"
		id="computedField1" value="#{viewScope.sampleValue}">
	</xp:text>
	</xp:view>
All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.
1 comment(s)Login first to comment...
Sergio Georgini
(at 04:15 on 04.10.2016)
Thanks for this