topic Re: How do I connect to another widget from within my custom widget? in Web AppBuilder Custom Widgets Questions

How do I connect to another widget from within my custom widget?

RyanBrenner1 — Wed, 30 May 2018 16:53:46 GMT

I am looking to call the Select Widget within my own custom widget. The idea is to use the select widget to get the selected area, then post that collected information and send it to my custom widget where it will be used to query my file server using ASP where it will then be populated into a dgrid in a panel. I do NOT want to have the Select widget added to my WAB and do not want the user to have access to this first and then have to click on my custom widget. I only want the user to click once, on my custom widget, in order to give the search results in a dgrid table based on their selection.

I have been told there is a way to call another widget, activate it as hidden, use it, and then populate my dgrid with the passed over information. There seems to be no documentation that I can find on how to do this in detail, let along an example of calling another widget to use its functionality. Does anyone have an idea on how to do this without building your own code or modifying the Select tool? I find the modification route starting to get very complicated and messy...

Looking forward to everyone's answers!

Thanks in advance,

Ryan

Re: How do I connect to another widget from within my custom widget?

RobertScheitlin__GISP — Wed, 30 May 2018 17:16:25 GMT

Ryan,

I have been told there is a way to call another widget, activate it as hidden, use it, and then populate my dgrid with the passed over information.

You have been misinformed.

You will want to build your own select functionality into your custom widget using the jimu drawBox dijit to draw on the map and then run a QueryTask using the geometry from the draw and extract what ever attributes or the ObjectIds you will pass to your ASP app.

Re: How do I connect to another widget from within my custom widget?

RyanBrenner1 — Wed, 30 May 2018 20:26:48 GMT

Hi Robert,

Thanks for the response. This is extremely helpful.

Do you think the jimu drawBox dijit would be better to use than the jimu selectDigit to make selections from the map?

Thanks in advance,

Ryan

Re: How do I connect to another widget from within my custom widget?

RobertScheitlin__GISP — Wed, 30 May 2018 21:33:14 GMT

Ryan,

Unless I am missing it, I do not see a jimu/selectDijit. I have always used the drawBox and a Query task.

Re: How do I connect to another widget from within my custom widget?

RyanBrenner1 — Wed, 30 May 2018 22:32:29 GMT

Robert,

My apologies. What I meant was a comparison using the following:

1. 'jimu/dijit/FeatureSetChooserForMultipleLayers'

this.selectDijit = new FeatureSetChooserForMultipleLayers({
map: this.map,
updateSelection: true,
fullyWithin: 'wholly',
geoTypes: ['EXTENT']
});

This gives me the selection tool which can select multiple layers or so I think... correct me if I am wrong.

2. "esri/toolbars/draw"

_initToolbar: function() {
toolBar = new Draw(this.map);
toolBar.on("draw-end", addGraphic);

   // event delegation so a click handler is not
   // needed for each individual button
   on(dom.byId("info"), "click", function(evt) {
   if (evt.target.id === "info") {
   return;
}

var tool = evt.target.id.toLowerCase();
this.map.disableMapNavigation();
toolBar.activate(tool);
});
},

addGraphic: function(evt){
   //deactivate the toolbar and clear existing graphics
   toolBar.deavtivate();
   this.map.enableMapNavigation();

// assigns a symbol to extent or polygon
   var symbol;
   if (evt.geometry.type === "EXTENT" || evt.geometry.type === "polygon") {
   symbol = fillSymbol;
   }

this.map.graphics.add(new Graphic(evt.geometry, symbol));

}

I will try to build my custom widget using the draw method. I was hoping to get away from clicking for options to draw. I just want to click on my widget, make my selection and have the results populate my table.

Re: How do I connect to another widget from within my custom widget?

RobertScheitlin__GISP — Thu, 31 May 2018 19:40:15 GMT

Ryan,

The drawBox dijit in the jimu folder is adijit that wraps the draw toolbar for WAB into a nice dijit. And you can set the default activated tool to be the extent tool and have it automatically fire the queryTask on draw complete event and automatically populate your grid. So your desired workflow of click on your widget select map feature and populate grid is absolutely possible.

Re: How do I connect to another widget from within my custom widget?

RyanBrenner1 — Fri, 01 Jun 2018 15:37:51 GMT

Hi Robert,

thanks again for the much needed help. I am fairly new to WAB and development of customized widgets. I was trying to track down some documentation on the dijit/drawBox but was unable to find anything. None-the-less, I was able to get the drawBox to work and was able to draw on the screen. One of the issues I am having is being able to default the drawBox to "EXTENT" and where to do this and how to call it appropriately. Additionally, I was wondering where I would activate the tool automatically when the custom widget icon is clicked?
Would I do this in:

1. postCreate?

2. onOpen?

3. onActive?

Also would I hook this to the icon-node from the controller with an event?

Thanks again for the help! It is very appreciated especially the timely responses.

Re: How do I connect to another widget from within my custom widget?

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:21:13 GMT

Ryan,

There are several OTB widget and many custom widgets that use the drawBox dijit that you can use as code examples.

To auto activate a draw tool in your widget just add this:

//If you only want the DrawBox to have an extent draw tool then
drawBox.geoTypes = ["EXTENT"];
//to automatically activate the extent
drawBox.activate("EXTENT");‍‍‍
//Do this in the widgets startup or a function that gets called from the startup.‍‍‍‍‍

Re: How do I connect to another widget from within my custom widget?

RyanBrenner1 — Sat, 02 Jun 2018 14:33:10 GMT

Robert,

Thanks again. This has been a lot of help getting to know WAB.

I actually found an article (Link to other post here) that had some code that was similar to what I need to do and have been modifying that. You have been an invaluable resource on GeoNet. Thank you for taking the time to help me and others out on here. It is greatly appreciated, especially while trying to learn WAB.

Thanks!

Re: How do I connect to another widget from within my custom widget?

RobertScheitlin__GISP — Sat, 02 Jun 2018 14:48:25 GMT

Ryan,

Glad to help. Be sure to mark this question as answered by clicking on the Mark Correct link on the reply that answered your question.

Re: How do I connect to another widget from within my custom widget?

RyanBrenner1 — Fri, 15 Jun 2018 16:17:52 GMT

Hi Robert,

I was just curious as to the best way to handle the results. I am noticing that when my results come in they are not coming in, in the same order they are being queried. Would I use Dojo/Memory module to handle this? Ie. Save it to memory first then process it with some other information so it remains in the same order?

thanks for the help!

Re: How do I connect to another widget from within my custom widget?

RobertScheitlin__GISP — Fri, 15 Jun 2018 16:35:34 GMT

Ryan,

I would have to see some code to be able to see what it going on in your situation.

Re: How do I connect to another widget from within my custom widget?

RyanBrenner1 — Sun, 12 Dec 2021 10:21:16 GMT

queryTask.execute(query);

          // event when complete get the resultant array of features
          
             queryTask.on("complete", lang.hitch(this, function(evt) {
               var featureSet = evt.featureSet;
            console.log('featureSet', featureSet);
            // FeatureSet objects are returned and are set to resultFeatures
            // resultFeatures contains multiple Features
            // The multiple Features contains multiple Attributes which is what we want

            //Performance enhancer - assign featureSet array to a single variable.
               var resultFeatures = featureSet.features;
            console.log('SearchResults: ', resultFeatures);
            console.log('geometryType: ', featureSet.geometryType);



            // customized symbology for the rectangle drawn on the map by the user
            // symbology = red dashdot outline with a pale yellow transparent fill
               var newSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                 new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                   new Color([255, 0, 0, 1]), 2), new Color([255, 255, 0, 0.05]));

            // add the graphic to the map
               this._graphicsLayer.add(new Graphic(geometry, newSymbol));

            //*****************************************************************************
// Highlighting the selected features and displaying it on the m        //*****************************************************************************
            // Creating a variable to handle the highlighting symboloy for the geomteryType
            var highlightSymbol;
            switch(featureSet.geometryType) {
              case 'esriGeometryPoint':
              highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, null, '#00FFFF');
              break;
              case 'esriGeometryPolyline':
              highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, '#00FFFF', 3);
              break;
              case 'esriGeometryPolygon':
              highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, '#00FFFF', 2),
                '#e74c3c');
              break;
            }
            //console.log('highlight', highlightSymbol);


            //Loop through each feature returned
            for (var i = 0; i < resultFeatures.length; i++) {
              //Get the current feature from the featureSet.
              //Feature is a graphic
              var graphic = resultFeatures[i].geometry;

              //Add graphic to the map graphics layer.
              this._graphicsLayer.add(new Graphic(graphic, highlightSymbol));
            }

            // this code puts the Class Name and the search result features together into a global array. Need to package for shipping to another script.
            if (FeatureClassName.length > 0) {
              //console.log('j: ', j);
               if (resultFeatures.length > 0) {
                resultFeaturesALL.push({
                  "ClassName": FeatureClassName[j].ClassName,
                  "Feautes": resultFeatures
                });
              }
              j = j + 1;
              //console.log('j: ', j);
            }

            console.log('Array: ', resultFeaturesALL);

         })); // end queryTask
        } // end for loop‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍