Specialty component example: jQuery slider in a text input
In the following example, there are two inputs – a slider and a number input. The slider is a jQuery slider that you can use to set an amount. You can use a slider to enter a numerical value, for instance to set a price or set an interest rate percentage in a loan calculator. The number input is a text input control that is tied to the same property as the slider. Values set by using the slider are reflected on the input, and values set by using the text input are also reflected on the slider.
The JQuery slider that you can create as a specialty component
The slider specialty component also defines parameter values that can be passed in where the component is used.
The slider specialty component parameters
To use the slider specialty component in your UI, drop in a section include and set the Section name to the slider that you created. Next, provide parameter values and specify any additional presentation-related configuration. If the property is bound to the control by passing in the value to the Value parameter, the slider is bound to .Amount
. In addition, the slider has a minimum value and a maximum value.
The following code snippet is for the slider. Insert this snippet into the HTML Source area on the HTML tab of the section rule.
<pega:choose>
<%-- Set what the code looks like at design time --%>
<pega:when test="pxRequestor.pyPegaDesignMode= 'true'">Slider Widget</pega:when>
<pega:otherwise>
<%--
A "Pega-aware" JQuery UI slider control
This control can work in conjunction with a Pega input control, such that when bound to the same property changing the value in the Pega control will update the slider, and vice-versa. --%>
<%--No CSS and JS include for this example as Pega UI comes in with JQuery UI library by default--%>
<%--JS support code--%>
<script>
var getPropHandleBoundToWidget = function(componentId) {
var entryHandlesObj = window['pzEntryHandles_' + componentId];
var widgetProp = entryHandlesObj["Value"];
return pega.u.property.toHandle(widgetProp);
}
</script>
<%--
Append the specialty component id as there can be many sliders on the page
--%>
<div id='slider_<pega:reference name="param.pzComponentId"/>'></div>
<%--SPECIALITY CONTROL JS SUPPORT CODE BEGIN--%>
<%--Template - Change as necessary--%>
<!--
Notes:
1. Component ID for an instance of a speciality component can be referenced like <pega:reference name="param.pzComponentId"/>.
This unique id can be used to generate instance specific markup, CSS and JS.
2.
/**
* To get data from Clipboard objects on loading the page
*
* @param componentId unique component id to get data
*
* @return json object from clipboard properties
*/
pega.u.d.specialtyComponent.getClipboardData
3.
/**
* To store data back to Clipboard objects before submitting the page
*
* @param componentId unique component id to set data
* @param json object to submit values to clipboard properties
*
* @return void
*/
pega.u.d.specialtyComponent.setClipboardData
-->
<script>
/* SpecialtyComponent requires div having id speciality_<pega:reference name="param.pzComponentId"/> */
if(document.getElementById("speciality_<pega:reference name="param.pzComponentId"/>")) {
pega.u.d.registerAsHarnessElement({
/* onLoad function will be run on load of the page and can be use to initialize the special control with default values from clipboard properties */
onLoad : function() {
var componentId = "<pega:reference name="param.pzComponentId"/>";
/* Fetch data for this component from the harness container */
var data = pega.u.d.specialtyComponent.getClipboardData(componentId);
/* Put in code that sets this data onto the component
Return if the component is already rendered */
if(document.getElementById("slider_" + componentId).hasChildNodes()) {
return;
}
var textInput = $('[name="' + getPropHandleBoundToWidget(componentId) +'"]');
// Initialize the slider
$("#slider_" + componentId).slider({
range: "min",
value: parseInt(data.Value),
min: parseInt(data.MinValue),
max: parseInt(data.MaxValue),
slide: function( event, ui ) {
textInput.val(ui.value);
}
});
/* Add an on-change event listener to update the widget if data in the text input is updated */
textInput.change(function() {
$("#slider_" + componentId).slider("value", textInput.val());
});
}
},pega.u.d.getContainerSectionElement("speciality_<pega:reference name="param.pzComponentId"/>"));
}
</script>
<%--SPECIALITY CONTROL JS SUPPORT CODE END--%>
</pega:otherwise>
</pega:choose>