Question
Infosys
IN
Last activity: 17 Feb 2021 10:12 EST
How to Configure the Slider functionality in Pega 7.3
Hi,
I want to implement a slider functionality in Pega 7.3.
When I move the slider, the value selected on the slider should get populated in an input box.
When a value is entered in the input box, the slider should automatically move itself & set the value entered in the box. I tired with pySlider control but i couldn't get the expected output.Can anyone help me out to do this requirement without changing HTML code in the section ?
Accepted Solution
Pegasystems Inc.
AU
Hi Poornima,
I have created a code for the pySlider and a textbox, both controls value will be synchronized , Please follow below steps.
1. In Textcontrol properties -Presentation - Advanced Presentation Options - in Cell read write and in Cell read only class text box enter- testcls (This class name will be passed to pySlider control)
2. Open pySlider control by clicking on crosshair from control properties.
3. Private edit control pySlider and save the control in your ruleset.
4. Go to Parameters of tab pySlider and add a new parameter name - otherelement , Description-otherelement, type - String
5. Go To HTML tab of pySlider and replace exiting code with below code .
Hi Poornima,
I have created a code for the pySlider and a textbox, both controls value will be synchronized , Please follow below steps.
1. In Textcontrol properties -Presentation - Advanced Presentation Options - in Cell read write and in Cell read only class text box enter- testcls (This class name will be passed to pySlider control)
2. Open pySlider control by clicking on crosshair from control properties.
3. Private edit control pySlider and save the control in your ruleset.
4. Go to Parameters of tab pySlider and add a new parameter name - otherelement , Description-otherelement, type - String
5. Go To HTML tab of pySlider and replace exiting code with below code .
<head>
<meta charset="utf-8">
<style>#slider { margin: 5px; background-color:darkgrey; }</style>
</head>
<body>
<br/><br/>
<div id="slider"></div>
<span id="lblSP"></span>
<script>
var width1 = <pega:reference name="param.width"/>;
var orient = '<pega:reference name="param.orientation"/>';
var minVal = <pega:reference name="param.minimumVal"/>;
var maxVal = <pega:reference name="param.maximumVal"/>;
var stepC = <pega:reference name="param.stepCount"/>;
var animation = '<pega:reference name="param.animate"/>';
var values = "<%= tools.getActive().toString()%>";
var otherelement = '<pega:reference name="param.otherelement"/>';
console.log('Initial value'+ values);
$("#slider").width(width1+'px');
var val;
function sliderchanged(event,sliderobj){
console.log('sliderchanged called 1 '+otherelement);
if(otherelement!=""&& typeof otherelement!="undefined"){
$('.'+otherelement+' input').val(sliderobj.value);
console.log($('.'+otherelement+' input').val()+" val");
}
}
function dependentChanged(event){
console.log(event.target.value);
var val = event.target.value;
debugger;
var sliderinstance= $( "#slider" ).slider( "instance" );
$( "#slider" ).slider('value',val);
$("#lblSP").text(sliderinstance.options.value);
var id = document.getElementById("prop1");
id.value = sliderinstance.options.value;
var strUrlSF = SafeURL_createFromURL(pega.u.d.url);
var name = "<%= tools.getActive().getEntryHandle()%>";
strUrlSF.put(name, val);
pega.u.d.asyncRequest('POST', strUrlSF, "","","");
}
if(otherelement!=""&& typeof otherelement!="undefined"){
if( typeof $('.'+otherelement+' input') !="undefined"){
$('.'+otherelement+' input').on('change',dependentChanged);
}
}
$( "#slider" ).slider({
value:values,
orientation: orient,
min: minVal,
max: maxVal,
step: stepC,
animate: animation,
change: sliderchanged,
slide: function (event, ui) {
val = ui.value;
var id = document.getElementById("prop1");
id.value = val;
var strUrlSF = SafeURL_createFromURL(pega.u.d.url);
var name = "<%= tools.getActive().getEntryHandle()%>";
strUrlSF.put(name, val);
$("#lblSP").text(ui.value);
pega.u.d.asyncRequest('POST', strUrlSF, "","","");
}
});
$("#lblSP").text(values);
</script>
<input type="hidden" id="prop1" name="<%= tools.getActive().getEntryHandle()%>" value=<%= tools.getActive().toString()%>/>
</body>
6. In you section drag a new button and change the control to pySlider and in parameters tab you have to pass the same classname used for text property as testcls , Like below image.
Infosys
IN
Hi Marc Lasserre,
Thanks for the reply.Yes,I did but as a fresher I am not sure about the configurations that i did.Can you tell me the steps how to configure the pySlider in our section so that I can check ?
Pegasystems Inc.
AU
Hi Poornima,
Pega uses Jquery slider internally, If you want to configure a new slider, Follow these steps.
- Drag a button or any basic control on your section
- Open the control properties and click on Change - Choose custom - and enter pySlider and tab out
These control has some mandatory value in Parameters tab, which is Orientation - It can be horizontal or vertical, Other parameters follows the same like Jquery API, You can go through here once. http://api.jqueryui.com/slider/#method-value
And as per your requirement i understood that you need to create a dependency between text box and slider value, i will update you on it.
Accepted Solution
Pegasystems Inc.
AU
Hi Poornima,
I have created a code for the pySlider and a textbox, both controls value will be synchronized , Please follow below steps.
1. In Textcontrol properties -Presentation - Advanced Presentation Options - in Cell read write and in Cell read only class text box enter- testcls (This class name will be passed to pySlider control)
2. Open pySlider control by clicking on crosshair from control properties.
3. Private edit control pySlider and save the control in your ruleset.
4. Go to Parameters of tab pySlider and add a new parameter name - otherelement , Description-otherelement, type - String
5. Go To HTML tab of pySlider and replace exiting code with below code .
Hi Poornima,
I have created a code for the pySlider and a textbox, both controls value will be synchronized , Please follow below steps.
1. In Textcontrol properties -Presentation - Advanced Presentation Options - in Cell read write and in Cell read only class text box enter- testcls (This class name will be passed to pySlider control)
2. Open pySlider control by clicking on crosshair from control properties.
3. Private edit control pySlider and save the control in your ruleset.
4. Go to Parameters of tab pySlider and add a new parameter name - otherelement , Description-otherelement, type - String
5. Go To HTML tab of pySlider and replace exiting code with below code .
<head>
<meta charset="utf-8">
<style>#slider { margin: 5px; background-color:darkgrey; }</style>
</head>
<body>
<br/><br/>
<div id="slider"></div>
<span id="lblSP"></span>
<script>
var width1 = <pega:reference name="param.width"/>;
var orient = '<pega:reference name="param.orientation"/>';
var minVal = <pega:reference name="param.minimumVal"/>;
var maxVal = <pega:reference name="param.maximumVal"/>;
var stepC = <pega:reference name="param.stepCount"/>;
var animation = '<pega:reference name="param.animate"/>';
var values = "<%= tools.getActive().toString()%>";
var otherelement = '<pega:reference name="param.otherelement"/>';
console.log('Initial value'+ values);
$("#slider").width(width1+'px');
var val;
function sliderchanged(event,sliderobj){
console.log('sliderchanged called 1 '+otherelement);
if(otherelement!=""&& typeof otherelement!="undefined"){
$('.'+otherelement+' input').val(sliderobj.value);
console.log($('.'+otherelement+' input').val()+" val");
}
}
function dependentChanged(event){
console.log(event.target.value);
var val = event.target.value;
debugger;
var sliderinstance= $( "#slider" ).slider( "instance" );
$( "#slider" ).slider('value',val);
$("#lblSP").text(sliderinstance.options.value);
var id = document.getElementById("prop1");
id.value = sliderinstance.options.value;
var strUrlSF = SafeURL_createFromURL(pega.u.d.url);
var name = "<%= tools.getActive().getEntryHandle()%>";
strUrlSF.put(name, val);
pega.u.d.asyncRequest('POST', strUrlSF, "","","");
}
if(otherelement!=""&& typeof otherelement!="undefined"){
if( typeof $('.'+otherelement+' input') !="undefined"){
$('.'+otherelement+' input').on('change',dependentChanged);
}
}
$( "#slider" ).slider({
value:values,
orientation: orient,
min: minVal,
max: maxVal,
step: stepC,
animate: animation,
change: sliderchanged,
slide: function (event, ui) {
val = ui.value;
var id = document.getElementById("prop1");
id.value = val;
var strUrlSF = SafeURL_createFromURL(pega.u.d.url);
var name = "<%= tools.getActive().getEntryHandle()%>";
strUrlSF.put(name, val);
$("#lblSP").text(ui.value);
pega.u.d.asyncRequest('POST', strUrlSF, "","","");
}
});
$("#lblSP").text(values);
</script>
<input type="hidden" id="prop1" name="<%= tools.getActive().getEntryHandle()%>" value=<%= tools.getActive().toString()%>/>
</body>
6. In you section drag a new button and change the control to pySlider and in parameters tab you have to pass the same classname used for text property as testcls , Like below image.