topic Re: Clear Checkboxes and remove map click event in Web AppBuilder Custom Widgets Questions

Clear Checkboxes and remove map click event

TaN — Tue, 04 Aug 2015 20:06:57 GMT

Hi Robert!

Thank you! I added in a button that clears the graphics and I would like for it to uncheck the checkboxes as well.

I also tried to tweak onClose so that when you close the widget, and click on a feature, the buffer is still there, and you get a pop-up describing the feature. I haven't been able to figure how to get the original map.on(.'click') to be silent.

in Widget.html:

<div><button data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-event="click:_clearall" id="clearGraphics">Clear Graphics</button></div>

in Widget.js:

_clearall: function() {

console.log("button clicked");

this.map.graphics.clear();

var n = query(".box");

n.checked=false;

//onClose is placed after startup()

onClose: function(){

console.log('onClose');

var q = query(".box");

q.forEach(domConstruct.destroy);

}

Can you provide some tips? Thank you so much!

Re: Clear Checkboxes and remove map click event

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:51:50 GMT

TA,

Here is your code updated for that:

define(['dojo/_base/declare',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
        'esri/map',
        'esri/tasks/BufferParameters',
        'esri/tasks/GeometryService',
        'esri/graphic',
        'esri/symbols/SimpleFillSymbol',
        'esri/symbols/SimpleLineSymbol',
        'esri/Color',
        'dojo/_base/array',
        'dojo/_base/lang',
        'jimu/dijit/CheckBox',
        'dojo/domReady!'
       ],
  function (declare, _WidgetsInTemplateMixin, BaseWidget, Map, BufferParameters, GeometryService, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color, array, lang) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
      // Custom widget code goes here
      name: 'BufferTool',
      baseClass: 'jimu-widget-buffertool',
      distances: null,
      clickEvt: null,
      gsvc: null,

      postCreate: function () {
        this.inherited(arguments);
        this.distances = [];
        this.gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      },

      _onChkboxesClicked: function() {
        this.distances = [];
        if(this.cbx05.getValue()){
          this.distances.push(0.5);
        }
        if(this.cbx10.getValue()){
          this.distances.push(1);
        }
        if(this.cbx15.getValue()){
          this.distances.push(1.5);
        }
        if(this.cbx20.getValue()){
          this.distances.push(2);
        }
      },

      _clearall: function() {
        console.log("button clicked");
        this.distances = [];
        this.map.graphics.clear();
        this.cbx05.setValue(false);
        this.cbx10.setValue(false);
        this.cbx15.setValue(false);
        this.cbx20.setValue(false);
      },

      //---------------------------------------
      startup: function () {
        this.inherited(arguments);
        console.log('startup');
      },

      onClose: function(){
       console.log('onClose');
       this.clickEvt.remove();
      },

      onOpen: function(){
        this.clickEvt = this.map.on('click', lang.hitch(this, function (evt) {
          this.map.graphics.clear();
          var params = new BufferParameters();
          params.geometries = [evt.mapPoint];

          //buffer in linear units such as meters, km, miles etc.
          params.distances = this.distances;
          params.unit = GeometryService.UNIT_STATUTE_MILE;
          params.outSpatialReference = this.map.spatialReference;

          if(this.distances.length === 0){
            return false;
          }

          this.gsvc.buffer(params, lang.hitch(this, function (geoms) {
            geoms.reverse();
            var symbol = new SimpleFillSymbol(
              SimpleFillSymbol.STYLE_NULL,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new Color([0, 0, 255, 0.65]), 2),
              new Color([0, 0, 255, 0.35])
            );

            var symbol2 = new SimpleFillSymbol(
              SimpleFillSymbol.STYLE_NULL,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new Color([255, 0, 0, 0.65]), 2),
              new Color([255, 0, 0, 0.35])
            );

           var symbol3 = new SimpleFillSymbol(
              SimpleFillSymbol.STYLE_NULL,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new Color([0, 255, 255, 0.65]), 2),
              new Color([0, 0, 255, 0.35])
            );

             var symbol4 = new SimpleFillSymbol(
              SimpleFillSymbol.STYLE_NULL,
              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                new Color([255, 255, 0, 0.65]), 2),
              new Color([255, 0, 0, 0.35])
            );

            var syms = [symbol, symbol2, symbol3, symbol4];

            var graphic;
            array.map(geoms, lang.hitch(this, function(bufferGeom, index){
              graphic = new Graphic(bufferGeom, syms[index]);
              this.map.graphics.add(graphic);
            }));
          }));

        }));
      }
    });
  });

Re: Clear Checkboxes and remove map click event

TaN — Wed, 05 Aug 2015 14:50:45 GMT

Hi Robert!

Thank you for your help! I wish I had been able to figure this out without having to ask for your help so much ><

I do have several questions, if that's ok. If they're too broad or confusing, please let me know.

1. According to dojo documentation, _WidgetsInTemplateMixin goes along with _TemplatedMixin. How can this module be called by itself? *WidgetsInTemplateMixin is used with templated widgets, I think. So is this widget template invoked by jimu/BaseWidget? (where does "jimu" come from?)

2. What is the difference between a sub-widget and a DOM node?

3. How come you used jimu/dijit/CheckBox rather than dijit/form/CheckBox? when I google jimu/dijit/CheckBox I only get dojo/form/CheckBox

4. this.distances in _onChkboxesClicked looks like a local variable. How can params.distances see this.distances?

5. What does a leading underscore do for a function? Make it private?

Thank you!

Re: Clear Checkboxes and remove map click event

RobertScheitlin__GISP — Wed, 05 Aug 2015 15:24:00 GMT

TA,

Yes _WidgetBase and _TemplatedMixin are invoked by jimu/BaseWidget
The sub-widget is the js code that the html template is used by (i.e. data-dojo-attach-point="start" in the template means that in the Widget.js you can use this.start to get a reference to the html element from the template).
I like the appearance of jimu/dijit/CheckBox over dijit/from/Checkbox
The var this.Distances it a global var because of where it is declared in the Widget.js code
The is really no private functions in JS but the leading underscore is a developer standard that says the function should be considered private.