numeric range filter

  • 4
  • Idea
  • Updated 2 years ago
  • Implemented
Just like date range but with numeric/currency fields.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 3 years ago

  • 4
Photo of Anna Wiersema

Anna Wiersema

  • 10,890 Points 10k badge 2x thumb
It would be great if this were a thing.  For now, here's how to do manually via conditions: https://community.skuidify.com/skuid/topics/custom-filter-option-ranges
Photo of Rajendra Rathore

Rajendra Rathore

  • 1,480 Points 1k badge 2x thumb
Here is alernate solution for that range filter.

As i used Jquery Slider as filter for take range input for Opportunity Amount.





<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>
Photo of Shannon Hale

Shannon Hale

  • 312 Points 250 badge 2x thumb
We'll be announcing this officially in our next major feature release, but I couldn't wait any longer to tell you: it's available for use right now, as of the Brooklyn Update 1 - Iteration 4 maintenance release (9.5.4).

We're also looking at other ways to represent this type of filter (such as a slider) in a future release. No target date on that yet though.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Woot Wooot!!!

Photo of Rajendra Rathore

Rajendra Rathore

  • 1,480 Points 1k badge 2x thumb
Wow!!! Thanks :)