Widget Help

RickeyFight — Sun, 12 Dec 2021 10:47:15 GMT

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.

EDIT:

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:

javascript

//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'";  
                break;  
              case "1":  
                defExp =  "crime ='Vehicle Theft'";  
                break;  
              case "2":  
                defExp ="crime ='Assult'";  
                break;  
              case "6":  
                defExp ="crime ='Other'";  
                break; 
              case "7":  
                defExp ="crime ='DUII'";  
                break; 
              case "8":  
                defExp ="crime ='Fraud'";  
                break; 
              case "9":  
                defExp ="crime ='Burglary'";  
                break; 
              case "Clear":  
                defExp = "";  
                break;  
              case "3":  
                defExp2 = "Month='August'";  
                break;  
              case "4":  
                defExp2 =  "Month='July'";  
                break;  
              case "5":  
                defExp2 = "Time_1 >= '1:00' AND Time_1 <= '5:00'";
                                 
                break; 
              case "Clear2":  
                defExp2 = "";  
                break; 
            }  
            var fDefExpr = (defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : "");  
            lLayer.setDefinitionExpression(fDefExpr);  
                         console.log((defExp !== "") ? ((defExp2 !== "") ? defExp + " AND " + defExp2 : defExp) : ((defExp2 !== "") ? defExp2 : ""));
            }); 
         });

html

<div>

    </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>

    </select>

    </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>
    </select>
    </br>
    </br>
    </br>
    <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>
    </div>

</div>

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

Re: Widget Help

JunshanLiu — Mon, 01 Jun 2015 02:34:11 GMT

Put the expressions in config file solve you question?

Re: Widget Help

RickeyFight — Mon, 01 Jun 2015 21:05:54 GMT

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.

Re: Widget Help

RobertScheitlin__GISP — Tue, 02 Jun 2015 02:21:14 GMT

Rickey,

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.

Re: Widget Help

RickeyFight — Tue, 02 Jun 2015 14:44:59 GMT

Robert,

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.

topic Widget Help in Web AppBuilder Custom Widgets Questions

Widget Help

Re: Widget Help

Re: Widget Help

Re: Widget Help

Re: Widget Help