Formatting the Filter Widget

[WilliamMobley]

I have one filter that I would like to add to a web map. It will filter one file, but has four options, three which are binary. While one has 4 options. I'd prefer for the filter to have buttons instead of drop downs since most of the options are binary. And perhaps a slider for the last option. 

Would turn into :

I'm struggling to tweak the final interface to look how I want. Initially, I wanted to just hide the actual filters, and create my own buttons and use Javascript to change the drop downs to preconfigured values. I tried adding this into the widget.html file but can't seem to pass working javascript through the widget. Does anybody have any better ideas how I can configure this?

[RobertScheitlin__GISP]

William,

   You would be better off developing your own custom widget for this then trying to work with the filter widget and all of it's complexity. The Filter Widget folder is less than half of the code that actually makes up the filter widgets functionality. The UI for the filter widgets individual parameters come from the jimu dijits folder. The type of UI control is decided by the jimu/dijit/_filter/ValueProviderFactory.js. There is also the dijit templates (the html portion of the jimu dijits). The _SingleFilter.js is the dijit that get added to the filter widget based on the jimu/dijit/FilterParameters.js and the _SingleFilterParameter.js. Bottom line is it is a very hard workflow to follow.

Doing a custom widget would allow you to define your own UI like you are wanting and then you simply set the definition expression for your layer using the users choices. Either way if you are a beginner developer this will be hard.

[WilliamMobley · Accepted solution]

I'm glad you suggested that this is more difficult than I would expect. It has been quite frustrating. By the time you answered yesterday I had made some headway. And this morning, I was going to show you where my code was going wrong, and see if you had a better idea.Then I changed one line and fixed it:  

Test Page (note: not all the data is there so only the first button currently works.)

So what I did was add this code to the top of the widget.html and the css from here.

<div>
<p> Turn on the coastal spine rise:</p>
<div class="Spineonoffswitch">
    <input type="checkbox" name="Spineonoffswitch" class="Spineonoffswitch-checkbox" id="Spinemyonoffswitch"   data-dojo-attach-event="ondijitclick:_onClickSpine">
    <label class="Spineonoffswitch-label" for="Spinemyonoffswitch">
    
        <span class="Spineonoffswitch-inner"></span>
        <span class="Spineonoffswitch-switch"></span>
    </label>‍‍‍‍‍‍‍‍‍

And then the following code after the style on the widget.js file. 

       _onClickSpine: function() {
               var SLR = document.getElementById("dijit_form_ValidationTextBox_0");
               if (SLR.value === "True"){
                    SLR.value = "False";
               } else{ SLR.value = "True";
               }
               document.getElementById("dijit_form_ValidationTextBox_0").value = SLR.value;               
               document.getElementsByClassName("header")[0].click();
               ‍‍‍‍‍‍‍‍‍

I then hid all of the original text boxes using css:

visibility: hidden;

Which allows me to use the boxes still but not see them. Its not optimal, but it seems to work. 

[Anonymous User]

Hi, 

I have a similar problem, except I have filter ranges (see below). I want to replace the input boxes with sliders. What is the best and easiest way to do this? Many thanks!

[WilliamMobley]

Hi Rachael,

I forgot I asked this question and added a sample page. I then rewrote my project because I decided that building it from the ground up in javascript was simpler than building with widgets. For others this may not be the case. So, just a warning that test page is not made in app builder. However, What I initially did was create my own widget/tile which I formatted how I wanted with css. I hid the filter widget but could access the values using the css id's. So any changes in my widget would transfer. Then, you can set up an apply button that clicks the widgets apply. 

It worked, however, it was inconsistent. I found using the javascript definition query was more consistent and performance increased. Which is why that test page is different.

I hope this will be some help for you. Good luck with your project.