Widget Help

05-29-2015 09:18 AM
MVP Regular Contributor

I am writing a filter widget. Based on Crime Mapper

I need advice on how to proceed with my widget.

A demo of what my widget does (not the current version) filter demo Application.


Version 2 Filter Demo2

I used the local Layer widget and added some of my own code. At this point the widget will apply a definition expression to the layers that have been configured when setting up the widget. The user can then update the expression with pre defined values.

The problem is that one definition is applied to all layers. And it is also not easy to configure.

Right now to configure the definition expression someone has to open the widget.js file and update this:


//setup click event for buttons

                 query("select").forEach(function (node) {

                     on(node, "click", function (e) {

                     var target = e.target || e.srcElement;

                         switch (target.value) {

               case "0": 

                defExp = "crime ='Larceny/Theft'"; 


              case "1": 

                defExp =  "crime ='Vehicle Theft'"; 


              case "2": 

                defExp ="crime ='Assult'"; 


              case "6": 

                defExp ="crime ='Other'"; 


              case "7": 

                defExp ="crime ='DUII'"; 


              case "8": 

                defExp ="crime ='Fraud'"; 


              case "9": 

                defExp ="crime ='Burglary'"; 


              case "Clear": 

                defExp = ""; 


              case "3": 

                defExp2 = "Month='August'"; 


              case "4": 

                defExp2 =  "Month='July'"; 


              case "5": 

                defExp2 = "Time_1 >= '1:00' AND Time_1 <= '5:00'";



              case "Clear2": 

                defExp2 = ""; 



            var fDefExpr = (defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : ""); 


                         console.log((defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : ""));





    </center> Crime:

    <select id="s5" data-dojo-id="s5" data-dojo-attach-point="test" data-dojo-type="dijit/form/Select" data-dojo-props='name:"s5", onChange: myOnClick'>

        <option value="0" selected="selected">Larceny/Theft</option>

        <option value="1">Vehicle Theft</option>

        <option value="2">Assult</option>

        <option value="6">Other</option>

        <option value="7">DUII</option>

        <option value="8">Fraud</option>

        <option value="9">Burglary</option>

        <option value="" disabled="true">----------</option>

        <option value="Clear">All</option>


    </br> Month:

    <select id="s12" data-dojo-id="s12" data-dojo-attach-point="s12" data-dojo-type="dijit/form/Select" onclick="" data-dojo-props='name:"s12"'>

        <option value="3">August</option>

        <option value="4">July</option>

        <option value="5">6am-1pm</option>

        <option value="" disabled="true">----------</option>

        <option value="Clear2" selected="selected">All</option>





    <div><span id="cmap_info" class="textshadow round shadow" style="background-color:#222;color:#fff;font-size:16px;text-align:center;padding:5px 10px;z-index:99;"> Loading ..... </span>



I am looking for a way to allow the person who configs the widget to edit either a json page in the config set up page and change what features and attributes to be filtered.

Do you have any advice on how this could be handled or how to proceed?

Thank you

0 Kudos
4 Replies
Occasional Contributor III

Put the expressions in config file solve you question?

0 Kudos
MVP Regular Contributor

I don't think so,

I don't want the user to match up the html and js in the config file.

I am thinking of a more automated way.

0 Kudos
MVP Esteemed Contributor


   Widget UI development can be as much or more work then actual widget development. The best way to learn is take one of the simple OTB widget and just examine the widgets settings folder and all the files in that folder. There you will find a settings.js and settings.html.The settings html is the actual html UI portion and the settings.js is the UI logic. If you have some more specific questions I do my best to answer/explain.

MVP Regular Contributor


I talked to my boss and he says since I can configure the app for anyone who works at my department that I should not spend all my time writing the settings for my widget.

So my "filter" widget will take a lot of time to finish. I am going to try to learn and write the settings in 30-60 min a day. 

Thank you for a direction to start.