function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Angello Camacho DragoAngello Camacho Drago 

jQuery Control doesn't work in visualforce page

I have an issue, I tried to use a [jQuery Time Range Slider][1] inside a visualforce page but doesn't work, I tried different jquery versions, can any one help me?

this is my code:
 
<apex:page controller="SeekerController" sidebar="false" title="Posiciones Fuerza de Ventas" docType="html-5.0">
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyAtxPCGB4rExpez5r0kzHibcs94FsPpj9U"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style type="text/css" media="print">
	#time-range p {
	    font-family:"Arial", sans-serif;
	    font-size:14px;
	    color:#333;
	}
	.ui-slider-horizontal {
	    height: 8px;
	    background: #D7D7D7;
	    border: 1px solid #BABABA;
	    box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
	    clear: both;
	    margin: 8px 0;
	    -webkit-border-radius: 6px;
	    -moz-border-radius: 6px;
	    -ms-border-radius: 6px;
	    -o-border-radius: 6px;
	    border-radius: 6px;
	}
	.ui-slider {
	    position: relative;
	    text-align: left;
	}
	.ui-slider-horizontal .ui-slider-range {
	    top: -1px;
	    height: 100%;
	}
	.ui-slider .ui-slider-range {
	    position: absolute;
	    z-index: 1;
	    height: 8px;
	    font-size: .7em;
	    display: block;
	    border: 1px solid #5BA8E1;
	    box-shadow: 0 1px 0 #AAD6F6 inset;
	    -moz-border-radius: 6px;
	    -webkit-border-radius: 6px;
	    -khtml-border-radius: 6px;
	    border-radius: 6px;
	    background: #81B8F3;
	    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
	    background-size: 100%;
	    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
	    background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
	    background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
	    background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
	    background-image: linear-gradient(top, #A0D4F5, #81B8F3);
	}
	.ui-slider .ui-slider-handle {
	    border-radius: 50%;
	    background: #F9FBFA;
	    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
	    background-size: 100%;
	    background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
	    background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
	    background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
	    background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
	    background-image: linear-gradient(top, #C7CED6, #F9FBFA);
	    width: 22px;
	    height: 22px;
	    -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
	    -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
	    box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
	    -webkit-transition: box-shadow .3s;
	    -moz-transition: box-shadow .3s;
	    -o-transition: box-shadow .3s;
	    transition: box-shadow .3s;
	}
	.ui-slider .ui-slider-handle {
	    position: absolute;
	    z-index: 2;
	    width: 22px;
	    height: 22px;
	    cursor: default;
	    border: none;
	    cursor: pointer;
	}
	.ui-slider .ui-slider-handle:after {
	    content:"";
	    position: absolute;
	    width: 8px;
	    height: 8px;
	    border-radius: 50%;
	    top: 50%;
	    margin-top: -4px;
	    left: 50%;
	    margin-left: -4px;
	    background: #30A2D2;
	    -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
	    -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
	    box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
	}
	.ui-slider-horizontal .ui-slider-handle {
	    top: -.5em;
	    margin-left: -.6em;
	}
	.ui-slider a:focus {
	    outline:none;
	}
	
	#slider-range {
	  width: 90%;
	  margin: 0 auto;
	}
	#time-range {
	  width: 400px;
	}
</style>

<script>              
   $j = jQuery.noConflict(); 
 
  //this function will be called as soon as page load is complete
		$j("#slider-range").slider({
		    range: true,
		    min: 0,
		    max: 1440,
		    step: 15,
		    values: [540, 1020],
		    slide: function (e, ui) {
		        var hours1 = Math.floor(ui.values[0] / 60);
		        var minutes1 = ui.values[0] - (hours1 * 60);
		
		        if (hours1.length == 1) hours1 = '0' + hours1;
		        if (minutes1.length == 1) minutes1 = '0' + minutes1;
		        if (minutes1 == 0) minutes1 = '00';
		        if (hours1 >= 12) {
		            if (hours1 == 12) {
		                hours1 = hours1;
		                minutes1 = minutes1 + " PM";
		            } else {
		                hours1 = hours1 - 12;
		                minutes1 = minutes1 + " PM";
		            }
		        } else {
		            hours1 = hours1;
		            minutes1 = minutes1 + " AM";
		        }
		        if (hours1 == 0) {
		            hours1 = 12;
		            minutes1 = minutes1;
		        }
		
		
		
		        $j('.slider-time').html(hours1 + ':' + minutes1);
		
		        var hours2 = Math.floor(ui.values[1] / 60);
		        var minutes2 = ui.values[1] - (hours2 * 60);
		
		        if (hours2.length == 1) hours2 = '0' + hours2;
		        if (minutes2.length == 1) minutes2 = '0' + minutes2;
		        if (minutes2 == 0) minutes2 = '00';
		        if (hours2 >= 12) {
		            if (hours2 == 12) {
		                hours2 = hours2;
		                minutes2 = minutes2 + " PM";
		            } else if (hours2 == 24) {
		                hours2 = 11;
		                minutes2 = "59 PM";
		            } else {
		                hours2 = hours2 - 12;
		                minutes2 = minutes2 + " PM";
		            }
		        } else {
		            hours2 = hours2;
		            minutes2 = minutes2 + " AM";
		        }
		
		        $j('.slider-time2').html(hours2 + ':' + minutes2);
		    }
		});
</script>

<div id="time-range">
    <p>Time Range: <span class="slider-time">9:00 AM</span> - <span class="slider-time2">5:00 PM</span>

    </p>
    <div class="sliders_step1">
        <div id="slider-range"></div>
    </div>
</div>
</apex:page>

 
Alain CabonAlain Cabon
Hello Angello,

https://jqueryui.com/slider/#range
 
<apex:page sidebar="false" title="Posiciones Fuerza de Ventas" docType="html-5.0">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" href="/resources/demos/style.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #time-range p {
        font-family:"Arial", sans-serif;
        font-size:14px;
        color:#333;
        }
        .ui-slider-horizontal {
        height: 8px;
        background: #D7D7D7;
        border: 1px solid #BABABA;
        box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
        clear: both;
        margin: 8px 0;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        }
        .ui-slider {
        position: relative;
        text-align: left;
        }
        .ui-slider-horizontal .ui-slider-range {
        top: -1px;
        height: 100%;
        }
        .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        height: 8px;
        font-size: .7em;
        display: block;
        border: 1px solid #5BA8E1;
        box-shadow: 0 1px 0 #AAD6F6 inset;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        -khtml-border-radius: 6px;
        border-radius: 6px;
        background: #81B8F3;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background-size: 100%;
        background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
        background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
        background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
        background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
        background-image: linear-gradient(top, #A0D4F5, #81B8F3);
        }
        .ui-slider .ui-slider-handle {
        border-radius: 50%;
        background: #F9FBFA;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background-size: 100%;
        background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
        background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
        background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
        background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
        background-image: linear-gradient(top, #C7CED6, #F9FBFA);
        width: 22px;
        height: 22px;
        -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
        -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
        box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
        -webkit-transition: box-shadow .3s;
        -moz-transition: box-shadow .3s;
        -o-transition: box-shadow .3s;
        transition: box-shadow .3s;
        }
        .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 22px;
        height: 22px;
        cursor: default;
        border: none;
        cursor: pointer;
        }
        .ui-slider .ui-slider-handle:after {
        content:"";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        top: 50%;
        margin-top: -4px;
        left: 50%;
        margin-left: -4px;
        background: #30A2D2;
        -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
        -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
        box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
        }
        .ui-slider-horizontal .ui-slider-handle {
        top: -.5em;
        margin-left: -.6em;
        }
        .ui-slider a:focus {
        outline:none;
        }
        
        #slider-range {
        width: 90%;
        margin: 0 auto;
        }
        #time-range {
        width: 400px;
        }
    </style>
    <script>
    $( function() {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 1440,
            step: 15,
            values: [540, 1020],
            slide: function (e, ui) {
                var hours1 = Math.floor(ui.values[0] / 60);
                var minutes1 = ui.values[0] - (hours1 * 60);
                
                if (hours1.length == 1) hours1 = '0' + hours1;
                if (minutes1.length == 1) minutes1 = '0' + minutes1;
                if (minutes1 == 0) minutes1 = '00';
                if (hours1 >= 12) {
                    if (hours1 == 12) {
                        hours1 = hours1;
                        minutes1 = minutes1 + " PM";
                    } else {
                        hours1 = hours1 - 12;
                        minutes1 = minutes1 + " PM";
                    }
                } else {
                    hours1 = hours1;
                    minutes1 = minutes1 + " AM";
                }
                if (hours1 == 0) {
                    hours1 = 12;
                    minutes1 = minutes1;
                }                   
                $('.slider-time').html(hours1 + ':' + minutes1);                 
                var hours2 = Math.floor(ui.values[1] / 60);
                var minutes2 = ui.values[1] - (hours2 * 60);
                
                if (hours2.length == 1) hours2 = '0' + hours2;
                if (minutes2.length == 1) minutes2 = '0' + minutes2;
                if (minutes2 == 0) minutes2 = '00';
                if (hours2 >= 12) {
                    if (hours2 == 12) {
                        hours2 = hours2;
                        minutes2 = minutes2 + " PM";
                    } else if (hours2 == 24) {
                        hours2 = 11;
                        minutes2 = "59 PM";
                    } else {
                        hours2 = hours2 - 12;
                        minutes2 = minutes2 + " PM";
                    }
                } else {
                    hours2 = hours2;
                    minutes2 = minutes2 + " AM";
                }
                
                $('.slider-time2').html(hours2 + ':' + minutes2);
            }
        });
    });
    </script>   
    <div id="time-range">   
        <p>Time Range: <span class="slider-time">9:00 AM</span> - <span class="slider-time2">5:00 PM</span></p>       
        <div id="slider-range"></div>       
    </div>        
</apex:page>

All the best.

Alain
Alain CabonAlain Cabon
The target was this complicated jQuery UI code: https://codepen.io/caseymhunt/pen/kertA
and that works with Salesforce too but the versions of the tools are important because of the new terrible locker service of SF (+ a doubt with $j = jQuery.noConflict(); strange here because it is always recommanded but not always necessary ).
Angello Camacho DragoAngello Camacho Drago
hello @Alain Cabon, thanks for you response, I tried your code, but doesn't work I only get the text.
Alain CabonAlain Cabon
Hi,



User-added image


User-added image


 
<apex:page sidebar="false" title="Posiciones Fuerza de Ventas" docType="html-5.0">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
    <link rel="stylesheet" href="/resources/demos/style.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #time-range p {
        font-family:"Arial", sans-serif;
        font-size:14px;
        color:#333;
        }
        .ui-slider-horizontal {
        height: 8px;
        background: #D7D7D7;
        border: 1px solid #BABABA;
        box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset;
        clear: both;
        margin: 8px 0;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        }
        .ui-slider {
        position: relative;
        text-align: left;
        }
        .ui-slider-horizontal .ui-slider-range {
        top: -1px;
        height: 100%;
        }
        .ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        height: 8px;
        font-size: .7em;
        display: block;
        border: 1px solid #5BA8E1;
        box-shadow: 0 1px 0 #AAD6F6 inset;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        -khtml-border-radius: 6px;
        border-radius: 6px;
        background: #81B8F3;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background-size: 100%;
        background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3));
        background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3);
        background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3);
        background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3);
        background-image: linear-gradient(top, #A0D4F5, #81B8F3);
        }
        .ui-slider .ui-slider-handle {
        border-radius: 50%;
        background: #F9FBFA;
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background-size: 100%;
        background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA));
        background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA);
        background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA);
        background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA);
        background-image: linear-gradient(top, #C7CED6, #F9FBFA);
        width: 22px;
        height: 22px;
        -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
        -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
        box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset;
        -webkit-transition: box-shadow .3s;
        -moz-transition: box-shadow .3s;
        -o-transition: box-shadow .3s;
        transition: box-shadow .3s;
        }
        .ui-slider .ui-slider-handle {
        position: absolute;
        z-index: 2;
        width: 22px;
        height: 22px;
        cursor: default;
        border: none;
        cursor: pointer;
        }
        .ui-slider .ui-slider-handle:after {
        content:"";
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        top: 50%;
        margin-top: -4px;
        left: 50%;
        margin-left: -4px;
        background: #30A2D2;
        -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
        -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white;
        box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF;
        }
        .ui-slider-horizontal .ui-slider-handle {
        top: -.5em;
        margin-left: -.6em;
        }
        .ui-slider a:focus {
        outline:none;
        }
        
        #slider-range {
        width: 90%;
        margin: 0 auto;
        }
        #time-range {
        width: 400px;
        }
    </style>
    <script>
    $( function() {
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 1440,
            step: 15,
            values: [540, 1020],
            slide: function (e, ui) {
                var hours1 = Math.floor(ui.values[0] / 60);
                var minutes1 = ui.values[0] - (hours1 * 60);
                
                if (hours1.length == 1) hours1 = '0' + hours1;
                if (minutes1.length == 1) minutes1 = '0' + minutes1;
                if (minutes1 == 0) minutes1 = '00';
                if (hours1 >= 12) {
                    if (hours1 == 12) {
                        hours1 = hours1;
                        minutes1 = minutes1 + " PM";
                    } else {
                        hours1 = hours1 - 12;
                        minutes1 = minutes1 + " PM";
                    }
                } else {
                    hours1 = hours1;
                    minutes1 = minutes1 + " AM";
                }
                if (hours1 == 0) {
                    hours1 = 12;
                    minutes1 = minutes1;
                }                   
                $('.slider-time').html(hours1 + ':' + minutes1);                 
                var hours2 = Math.floor(ui.values[1] / 60);
                var minutes2 = ui.values[1] - (hours2 * 60);
                
                if (hours2.length == 1) hours2 = '0' + hours2;
                if (minutes2.length == 1) minutes2 = '0' + minutes2;
                if (minutes2 == 0) minutes2 = '00';
                if (hours2 >= 12) {
                    if (hours2 == 12) {
                        hours2 = hours2;
                        minutes2 = minutes2 + " PM";
                    } else if (hours2 == 24) {
                        hours2 = 11;
                        minutes2 = "59 PM";
                    } else {
                        hours2 = hours2 - 12;
                        minutes2 = minutes2 + " PM";
                    }
                } else {
                    hours2 = hours2;
                    minutes2 = minutes2 + " AM";
                }
                
                $('.slider-time2').html(hours2 + ':' + minutes2);
            }
        });
    });
    </script>   
    <div id="time-range">   
        <p>Time Range: <span class="slider-time">9:00 AM</span> - <span class="slider-time2">5:00 PM</span></p>       
        <div id="slider-range"></div>       
    </div>        
</apex:page>

setup > security > session settings

User-added image
 
Alain CabonAlain Cabon
By the way, Salesforce also uses this jQuery UI slider for all its orgs.

Apex Jobs > Click here to go to the new batch jobs page

User-added image

User-added image
 
Alain CabonAlain Cabon

This solution works for all the orgs I could found, could you show us your result, please?
Angello Camacho DragoAngello Camacho Drago

Hello @Alain Cabon, sorry for the delay reply, but I was on vacation, I tried yuor code and works.

 

Thanks.