Bootstrap Switch Custom Control

Language

XPages

Tags

Author

Howard Greenberg

Submitted on

September 28, 2016 at 1:52 PM

Rating

Downloads

Notes

This custom control uses the bootstrap switch at http://www.bootstrap-switch.org/examples.html

You will have to download the zip file from https://github.com/nostalgiaz/bootstrap-switch/archive/master.zip. Extract that and go to the dist folder. In the CSS folder get the bootstrap-switch.min.css and the bootstrap-switch.min.js file from the js folder. Put them under the WebContent folder in a folder called switch or just import in as file resources (change the path in the custom control code so the resources are pointing to the right place.)

That is about it, just create the custom control, add in the custom control properties (see notes above) and drag to an XPage. The documentation on the options are at http://www.bootstrap-switch.org/options.html.

In the custom control properties you must supply the binding for the control. The property is called switchBinding. For example, to bind to a test1 field on the document1 data source enter "document1.test1" without the quotes into this property.

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