Bootstrap Slider Control

Language

XPages

Tags

Author

Howard Greenberg

Submitted on

September 27, 2016 at 10:16 AM

Rating

Downloads

Notes

Bootstrap Sliders are a neat way to allow users to enter data by sliding a slider rather than typing or using a combo box. You can see demos of what it can do here http://seiyria.com/bootstrap-slider/

This code will allow you to easily create a slider on your XPage. Note that you must download the javascript and css file from GitHub. Using Package Explorer, create a folder in the WebContent folder called slider. Copy the bootstrap-slider.min.css and bootstrap-slider.min.js files into this folder. Or, create them as file resources. If the path changes you will have to adjust the paths in the custom control code.

These fiiles can be downloaded at https://github.com/seiyria/bootstrap-slider/archive/master.zip. Extract that zip and go to the dist folder to get the javascript file. The css file is in the css folder.

Note you need to add the css above in a CSS file or put the CSS in your own stylesheet and change the resource tag.

I put comments into the properties of the custom control for each property. Note that my custom control does not implement all of the capabilities. But, you can add those yourself! See https://github.com/seiyria/bootstrap-slider/blob/master/README.md for more details on what the bootstrap slider can do....

Have fun!!!

Create a cool slider control in your XPages app!  See http://seiyria.com/bootstrap-slider/ for examples. 

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


Custom control, call it ccBootstrapSlider

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<!-- temporary redefine define.amd object  (Dojo AMD loader) -->
		<xp:script
			clientSide="true"
			type="text/javascript">
			<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
		</xp:script>
		<xp:script
			src="slider/bootstrap-slider.min.js"
			clientSide="true">
		</xp:script>
		<!-- restore define.amd object (Dojo AMD loader) -->
		<xp:script
			clientSide="true">
			<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
		</xp:script>
		<xp:styleSheet
			href="slider/bootstrap-slider.min.css"></xp:styleSheet>
		<xp:styleSheet
			href="/sliderCustom.css"></xp:styleSheet>
	</xp:this.resources>
	<xp:panel
		id="sliderPanel">
		<xp:this.styleClass><![CDATA[#{javascript:return (compositeData.orientation == "horizontal" && compositeData.tooltip_position == "top") ? "horizontalSlider" : "";}]]></xp:this.styleClass>
		<xp:inputText
			id="sliderInput">
			<xp:this.value><![CDATA[${javascript:"#{"+compositeData.sliderBinding+"}"}]]></xp:this.value>
			<xp:this.attrs>
				<xp:attr name="data-slider-ticks">
					<xp:this.value><![CDATA[#{javascript:if (compositeData.SliderTicks == null || compositeData.SliderTicks == ""){
	return "";
} else {
  	return "[" + compositeData.SliderTicks + "]";
}}]]></xp:this.value>
				</xp:attr>
				<xp:attr name="data-slider-ticks-labels">
					<xp:this.value><![CDATA[#{javascript:
if (compositeData.SliderTickLabels == null || compositeData.SliderTickLabels == ""){
	return "";
} else {
  	return "[" + compositeData.SliderTickLabels + "]";
}

}]]></xp:this.value>
				</xp:attr>
				<xp:attr
					name="data-slider-step"
					value="#{javascript:return compositeData.step;}">
				</xp:attr>
				<xp:attr
					name="data-slider-value"
					value="#{javascript:return compositeData.initialValue;}">
				</xp:attr>
				<xp:attr
					value="#{javascript:return compositeData.min;}"
					name="data-slider-min">
				</xp:attr>
				<xp:attr
					value="#{javascript:return compositeData.max;}"
					name="data-slider-max">
				</xp:attr>
				<xp:attr
					name="data-slider-handle">
					<xp:this.value><![CDATA[#{javascript:var typeHandle = compositeData.HandleType;
if (!!typeHandle){
	return typeHandle;
} else {
	return "round"	
}
}]]></xp:this.value>
				</xp:attr>
				<xp:attr
					name="data-slider-orientation"
					value="#{javascript:return compositeData.orientation;}">
				</xp:attr>
			</xp:this.attrs>
		</xp:inputText>
		<xp:eventHandler
			event="onClientLoad"
			submit="false">
			<xp:this.script><![CDATA[$(document).ready( function() {
	//compute text for tooltip
	var tooltipText = "#{javascript:compositeData.tooltip_text}";
	if (tooltipText!= null || tooltipText != ""){
		tooltipText = tooltipText + " ";
	} else {
		tooltipText = "";
	}
	x$('#{id:sliderInput}').slider( {
		tooltip_position: '#{javascript:compositeData.tooltip_position}',
		formatter : function(value) {
			return tooltipText + value;
		}
	});
});



function x$(idTag, param) { // Updated 18 Feb 2012
	idTag = idTag.replace(/:/gi, "\\:") + (param ? param : "");
	return ($("#" + idTag));
}]]></xp:this.script>
		</xp:eventHandler>
	</xp:panel>
</xp:view>

Custom Control Properties File. To import this create one custom control property, call it anything. Then go to Package Explorer and overwrite what you have in the ccBootstrapSlider.xsp-config file under Custom Controls with the contents 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>ccBootstrapSlider</component-type>
    <composite-name>ccBootstrapSlider</composite-name>
    <composite-file>/ccBootstrapSlider.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 Slider Custom Control&lt;/B&gt;&lt;/xp:view&gt;</render-markup>
      </designer-extension>
    </composite-extension>
    <property>
      <property-name>SliderTicks</property-name>
      <property-class>string</property-class>
      <display-name>SliderTicks</display-name>
      <description>Used to define the values of ticks. Tick marks are indicators to denote special values in the range. This option overwrites min and max options. Must be a number. This OVERRIDES the min and max settings. If you set the values for ticks than you can use SliderTickLabels.&#xd;
&#xd;
Enter numbers separated by commas like 1,2,3,4,5</description>
      <property-extension>
        <required>false</required>
      </property-extension>
    </property>
    <property>
      <property-name>step</property-name>
      <property-class>string</property-class>
      <display-name>step</display-name>
      <description>increment step</description>
      <property-extension>
        <designer-extension>
          <default-value>1</default-value>
        </designer-extension>
        <required>true</required>
      </property-extension>
    </property>
    <property>
      <property-name>SliderTickLabels</property-name>
      <property-class>string</property-class>
      <display-name>SliderTickLabels</display-name>
      <property-extension>
        <required>false</required>
      </property-extension>
      <description>Enter the labels, one for each tick, Use a quote around each value, separate by commas. Use an empty string for no labels. Must use the SliderTicks if you want tick labels.</description>
    </property>
    <property>
      <property-name>initialValue</property-name>
      <property-class>string</property-class>
      <description>Initial value of the slider</description>
    </property>
    <property>
      <property-name>showToolTip</property-name>
      <property-class>string</property-class>
      <display-name>showToolTip</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>show&#xd;
hide&#xd;
always</editor-parameter>
          <default-value>show</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>HandleType</property-name>
      <property-class>string</property-class>
      <display-name>HandleType</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>round&#xd;
square</editor-parameter>
          <default-value>round</default-value>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>sliderBinding</property-name>
      <property-class>string</property-class>
      <display-name>sliderBinding</display-name>
    </property>
    <property>
      <property-name>orientation</property-name>
      <property-class>string</property-class>
      <display-name>orientation</display-name>
      <property-extension>
        <designer-extension>
          <default-value>horizontal</default-value>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>horizontal&#xd;
vertical</editor-parameter>
        </designer-extension>
      </property-extension>
    </property>
    <property>
      <property-name>tooltip_position</property-name>
      <property-class>string</property-class>
      <display-name>tooltip_position</display-name>
      <property-extension>
        <designer-extension>
          <editor>com.ibm.workplace.designer.property.editors.comboParameterEditor</editor>
          <editor-parameter>top&#xd;
bottom&#xd;
left&#xd;
right</editor-parameter>
          <default-value>top</default-value>
        </designer-extension>
      </property-extension>
      <description>Choose top or bottom for horizontal orientation, left or right for vertical orientation</description>
    </property>
    <property>
      <property-name>tooltip_text</property-name>
      <property-class>string</property-class>
      <display-name>tooltip_text</display-name>
      <description>Enter text that will appear BEFORE the value in the toolip</description>
    </property>
    <property>
      <property-name>min</property-name>
      <property-class>string</property-class>
      <display-name>min</display-name>
      <property-extension>
        <designer-extension>
          <default-value>0</default-value>
        </designer-extension>
      </property-extension>
      <description>Minimum possible value</description>
    </property>
    <property>
      <property-name>max</property-name>
      <property-class>string</property-class>
      <display-name>max</display-name>
      <property-extension>
        <designer-extension>
          <default-value>10</default-value>
        </designer-extension>
      </property-extension>
      <description>Maximum Possible Value</description>
    </property>
  </composite-component>
</faces-config>



CSS Resource needed. Create a CSS resource called sliderCustom.css or move this css into your own css and change the resource path in the control.

   			
 /*fix to override the xsp css that screws up the slider */
 
 .horizontalSlider .slider .tooltip {
    top: 0px !important;
   
}

Sample XPage that uses this custom control (bound to a viewScope variable in this case, you can bind to any EL type binding like document1.myField....

<?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.testBind="";}]]></xp:this.beforePageLoad>
	<div class="container">
	<xp:br></xp:br><xp:br></xp:br><xp:br></xp:br>
		<xc:ccBootstrapSlider
			step="10"
			initialValue="0"
			showToolTip="always"
			HandleType="square"
			sliderBinding="viewScope.testBind"
			orientation="horizontal"
			tooltip_position="top"
			tooltip_text="You chose"
			max="100"
			min="0">
		</xc:ccBootstrapSlider>
		<xp:br></xp:br>
	<xp:br></xp:br>
	<xp:br></xp:br>
	<xp:button
		value="Update value of slider"
		id="button1">
	<xp:eventHandler
		event="onclick"
		submit="true"
		refreshMode="partial" refreshId="computedField1">
	</xp:eventHandler></xp:button>
	<xp:br></xp:br>
	<xp:br></xp:br>
	<xp:text
		escape="true"
		id="computedField1" value="#{viewScope.testBind}">
		
	</xp:text>
	</div>
	
	</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.

No comments yetLogin first to comment...