Custom filter option ranges - with a JQuery Slider!

edited December 13, 2019 in Questions
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?


  • Anna WiersemaAnna Wiersema 🛠️ 
    edited December 13, 2019
    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:
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited January 6, 2016
    <skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true">   <models>
          <model id="opportunities" limit="20" query="true" createrowifnonefound="false" sobject="Opportunity" doclone="" type="">
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="Amount"/>
                <field id="Id"/>
                <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"/>
          <skootable showconditions="true" showsavecancel="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="opportunities" buttonposition="" mode="read">
                <field id="AccountId" valuehalign="" type=""/>
                <field id="Amount" decimalplaces="" valuehalign="" type=""/>
                <action type="edit"/>
                <action type="delete"/>
             <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
                <view type="standard"/>
                <filter type="select" filteroffoptionlabel="All Amounts" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="manual" labelmode="no" condition="LessThan">
                      <source type="manual" effectsbehavior="justdefault">
                            <option label="&lt; $500" type="simple" value="500"/>
                            <option label="$500-1000" type="complex">
                                  <effect action="set" value="1000" condition="LessThan"/>
                                  <effect action="set" value="500" condition="greaterthan"/>
                            <option label="&gt;$1000" type="complex" value="1000">
                                  <effect action="set" value="1000" condition="greaterthan"/>
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Thanks Anna! 
  • edited May 26, 2015
    Perfect. Thanks so much!
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited November 23, 2015
    You're welcome!
  • edited October 7, 2016
    Hi Anna,

    Is there any way we can use JQuery Slider for this range input?

  • Anna WiersemaAnna Wiersema 🛠️ 
    edited December 13, 2019
    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.
  • edited October 7, 2016
    Hi Anna,

    Thanks for your reply.

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


  • edited October 7, 2016
    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> 
  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    Thanks For Sharing Rajendra! 
  • edited October 7, 2016
    You're welcome Rob!
  • Anna WiersemaAnna Wiersema 🛠️ 
    edited January 13, 2016
    yes, thanks!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!