Custom filter option ranges - with a JQuery Slider!

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
I'm wondering if it is possible to set custom filter options using numeric ranges. I have a currency field on accounts that ranges from 0 to 2 billion, and I'd like to split that up into a handful of ranges that I can filter by, such as:

0 - 5 million
5 million - 50 million
50 million - 200 million
200 million - 500 million
500 million +

Is it possible to do this with the manual filter options settings?
Photo of pFranzen

pFranzen

  • 222 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Yes, this is totally doable. What you need is two filterable conditions on your model: a LessThan condition and a GreaterThan condition. Then, you can go in manually and for each filter option activate and set the amount for the Less Than and Greater Than condition. Here's the XML for a simple page that demonstrates how to do this:
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true">   <models>
      <model id="opportunities" limit="20" query="true" createrowifnonefound="false" sobject="Opportunity" doclone="" type="">
         <fields>
            <field id="AccountId"/>
            <field id="Account.Name"/>
            <field id="Amount"/>
            <field id="Id"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="0.0" enclosevalueinquotes="false" field="Amount" state="filterableoff" inactive="true" name="LessThan" operator="lte"/>
            <condition type="fieldvalue" value="500" enclosevalueinquotes="false" field="Amount" operator="gte" state="filterableoff" inactive="true" name="greaterthan"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <skootable showconditions="true" showsavecancel="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="opportunities" buttonposition="" mode="read">
         <fields>
            <field id="AccountId" valuehalign="" type=""/>
            <field id="Amount" decimalplaces="" valuehalign="" type=""/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
         <filters>
            <filter type="select" filteroffoptionlabel="All Amounts" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="manual" labelmode="no" condition="LessThan">
               <sources>
                  <source type="manual" effectsbehavior="justdefault">
                     <options>
                        <option label="&lt; $500" type="simple" value="500"/>
                        <option label="$500-1000" type="complex">
                           <effects>
                              <effect action="set" value="1000" condition="LessThan"/>
                              <effect action="set" value="500" condition="greaterthan"/>
                           </effects>
                        </option>
                        <option label="&gt;$1000" type="complex" value="1000">
                           <effects>
                              <effect action="set" value="1000" condition="greaterthan"/>
                           </effects>
                        </option>
                     </options>
                  </source>
               </sources>
            </filter>
         </filters>
      </skootable>
   </components>
   <resources>
      <labels/>
      <javascript/>
      <css/>
   </resources>
</skuidpage>
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks Anna! 
Photo of pFranzen

pFranzen

  • 222 Points 100 badge 2x thumb
Perfect. Thanks so much!
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
You're welcome!
Photo of Rajendra Rathore

Rajendra Rathore

  • 1,480 Points 1k badge 2x thumb
Hi Anna,

Is there any way we can use JQuery Slider for this range input?
https://jqueryui.com/slider/#range


Thanks,
Rajendra
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
Hmmm.  It might be possible - sometimes we create "standalone" filter components linked to separate models which use model actions to filter other models (see Model Actions, Use Case #3).  Your filter model could contain two ui-only fields "max value" and "min value" and then you can create a custom component to display and modify these values via this slider. Then, when max and min is modified, the model actions would activate and set conditions on your table model, and requery it.
Photo of Rajendra Rathore

Rajendra Rathore

  • 1,480 Points 1k badge 2x thumb
Hi Anna,

Thanks for your reply.

Finally i completed work for use Jquery Slider for numeric fields.

Thanks,
Rajendra


 
Photo of Rajendra Rathore

Rajendra Rathore

  • 1,480 Points 1k badge 2x thumb
I am posting code that Jquery Slider as filter, so it will benefits  to others.





<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="true" theme="Lightning Design">
   <models>
      <model id="opportunities" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="Opportunity">
         <fields>
            <field id="Name"/>
            <field id="StageName"/>
            <field id="CloseDate"/>
            <field id="Amount"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="0.0" enclosevalueinquotes="false" field="Amount" state="filterableoff" inactive="true" name="AmountLessThanEqual" operator="lte"/>
            <condition type="fieldvalue" value="0.0" enclosevalueinquotes="false" field="Amount" operator="gte" state="filterableoff" inactive="true" name="AmountGreaterThanEqual"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="opportunities" uniqueid="sk-ivb_q-108">
         <actions>
            <action type="multi" label="Apply Amount Filter" uniqueid="ApplyAmountFilterBtn">
               <actions>
                  <action type="blockUI" message="Please Wait..."/>
                  <action type="custom" snippet="ApplyAmountFilter"/>
                  <action type="requeryModel" model="opportunities" behavior="standard"/>
                  <action type="unblockUI" window="self"/>
               </actions>
            </action>
         </actions>
         <maintitle>Opportunities</maintitle>
      </pagetitle>
      <grid uniqueid="sk-ixiQW-156">
         <divisions>
            <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top" uniqueid="AmountTemplate">
               <components>
                  <template multiple="false" uniqueid="AmountTemplate" allowhtml="true">
                     <contents/>
                  </template>
               </components>
            </division>
            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
               <components/>
            </division>
            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
               <components/>
            </division>
         </divisions>
         <styles>
            <styleitem type="background" bgtype="none"/>
         </styles>
      </grid>
      <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="false" model="opportunities" buttonposition="" mode="read" uniqueid="sk-ivh9w-114">
         <fields>
            <field id="Name"/>
            <field id="StageName" valuehalign="" type=""/>
            <field id="CloseDate"/>
            <field id="Amount"/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
         </rowactions>
         <massactions usefirstitemasdefault="true">
            <action type="massupdate"/>
            <action type="massdelete"/>
         </massactions>
         <views>
            <view type="standard"/>
         </views>
      </skootable>
   </components>
   <resources>
      <labels/>
      <javascript>
         <jsitem location="inline" name="PageIoad" cachelocation="false" url="">(function(skuid){
	var $ = skuid.$;
	$(document.body).one('pageload',function(){
		 var $ = skuid.$;
		 var htmlBody ='&lt;p&gt;';

           htmlBody +='  &lt;label for="amount"&gt;Amount range:&lt;/label&gt;';
           htmlBody+='  &lt;input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"&gt;';
           htmlBody +='&lt;/p&gt;';
             
           htmlBody +='&lt;div&gt;&lt;div style="float:left;width:60%;margin-top:2%" id="slider-range"&gt;&lt;/div&gt;';
           htmlBody +='&lt;input type="hidden" id="amountStart" /&gt;';
           htmlBody +='&lt;input type="hidden" id="amountEnd" /&gt;';
           htmlBody +='&lt;div onclick="skuid.$('  +'\'#ApplyAmountFilterBtn\').click();" style="float:left;width:30%" id="applyAmountFilter" ';
           htmlBody +='class="nx-pagetitle-action ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"&gt;';
           htmlBody +='&lt;span class="ui-button-text"&gt;Apply Filter&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;';


		 $("#AmountTemplate").html(htmlBody);
        $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 1000000,
              slide: function( event, ui ) {
                    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                    $( "#amountStart" ).val( ui.values[ 0 ]  );
                    $( "#amountEnd" ).val( ui.values[ 1 ]  );
               }
         });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
          " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });
})(skuid);</jsitem>
         <jsitem location="inlinesnippet" name="ApplyAmountFilter" cachelocation="false">
var $ = skuid.$;

var opportunitiesModel = skuid.model.getModel('opportunities');

var  greaterThanCondition = opportunitiesModel.getConditionByName('AmountGreaterThanEqual');    
opportunitiesModel.activateCondition(greaterThanCondition);
opportunitiesModel.setCondition(greaterThanCondition,$("#amountStart").val());
console.log($("#amountStart").val());
var  lessThanCondition = opportunitiesModel.getConditionByName('AmountLessThanEqual');    
opportunitiesModel.activateCondition(lessThanCondition);
opportunitiesModel.setCondition(lessThanCondition,$("#amountEnd").val());
    
console.log($("#amountEnd").val());</jsitem>
      </javascript>
      <css>
         <cssitem location="inline" name="SliderCSS" cachelocation="false">.ui-slider-horizontal .ui-slider-handle {

	border: 1px solid #ccc;

	background: #eee;

}


.ui-slider-horizontal {

	border: 1px solid #ccc;

	background: #f9f9f9;

}
#applyAmountFilter {
    cursor : pointer;
}
#ApplyAmountFilterBtn{
    display:none !important;
}</cssitem>
      </css>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
(Edited)
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks For Sharing Rajendra! 
Photo of Rajendra Rathore

Rajendra Rathore

  • 1,480 Points 1k badge 2x thumb
You're welcome Rob!
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
yes, thanks!