topic Re: How to add Widgets in excisting code. in ArcGIS JavaScript Maps SDK Questions

How to add Widgets in excisting code.

irtizahussain — Fri, 10 Dec 2021 21:28:47 GMT

I have a code where drop down is use to show different state and countries, in which i use Map image layer for layer of version 4.9. The problem is i want to add different widgets on my project such as search widget and other widgets but i have not succeed.

My code,

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>

  <script>
    var map;
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/on",
      "esri/tasks/support/Query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/parser",
      "dijit/registry",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry
    ) {
      parser.parse();
      map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        container: "map",
        map: map,
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_NAME&returnDistinctValues=true&f=json',
      {
        responseType:'json',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        registry.byId("stateSelect").set('store',store2);
        var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        registry.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
        outFields: ["*"]
      });

      var Counties = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
        outFields: ["*"]
      });

      //map.addMany([States,Counties]);

      app = {
        zoomRow: function(id, which){
          var sym = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [255, 0, 0, 0.5],
            outline: {  // autocasts as new SimpleLineSymbol()
              color: [128, 128, 128, 1],
              width: "0.5px"
            }
          }, gra;
          view.graphics.removeAll();
          var query = States.createQuery();
          var thePoly, theExtent;
          if(which == "State"){
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
            esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME='" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
            {
              responseType: "json",
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              registry.byId("countySelect").set('store',store2);
              var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              registry.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            query = Counties.createQuery();
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            query.returnGeometry = true;
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            Counties.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:28:51 GMT

Irtiza,

Here is that code with the Search widget added:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 32px;
      overflow:visible;
      border:none;border-bottom: 3px solid #CC9900;
      font-family: Windows;
      font-size:14pt;
      color: #FFFFFF;
      background: #000000;
      z-index: 99;
      line-height: 32px;
    }
    .searchDiv {
      float: right;
      z-index: 99;
    }
    #viewDiv {
      width: 100%;
      height: calc(100% - 32px);
      border: none;padding:0px;
      margin: 0px;
    }
  </style>

  <script>
    var map;
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/on",
      "esri/tasks/support/Query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/parser",
      "dijit/registry",
      "esri/widgets/Search",

      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search
    ) {
      parser.parse();
      map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      var searchWidget = new Search({
        view: view,
        container: "searchDiv"
      });

      esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_NAME&returnDistinctValues=true&f=json',
      {
        responseType:'json',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        registry.byId("stateSelect").set('store',store2);
        var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        registry.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
        outFields: ["*"]
      });

      var Counties = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
        outFields: ["*"]
      });

      //map.addMany([States,Counties]);

      app = {
        zoomRow: function(id, which){
          var sym = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [255, 0, 0, 0.5],
            outline: {  // autocasts as new SimpleLineSymbol()
              color: [128, 128, 128, 1],
              width: "0.5px"
            }
          }, gra;
          view.graphics.removeAll();
          var query = States.createQuery();
          var thePoly, theExtent;
          if(which == "State"){
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
            esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME='" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
            {
              responseType: "json",
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              registry.byId("countySelect").set('store',store2);
              var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              registry.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            query = Counties.createQuery();
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            query.returnGeometry = true;
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            Counties.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');"  data-dojo-props="maxHeight: 200" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
      <div id="searchDiv" class='searchDiv'></div>
    </div>
    <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to add Widgets in excisting code.

irtizahussain — Wed, 05 Dec 2018 10:02:34 GMT

thanks for the help Robert Scheitlin, GISP‌ can i add more widgets on this like home widget etc on this project?

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Wed, 05 Dec 2018 13:34:50 GMT

Yes

Re: How to add Widgets in excisting code.

irtizahussain — Thu, 06 Dec 2018 13:30:06 GMT

but i tried different widgets they are not working properly like home, legend and layer list widget!! they just appeared on screen in incorrect format.

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Thu, 06 Dec 2018 14:03:50 GMT

Show me the code changes you tried.

Re: How to add Widgets in excisting code.

irtizahussain — Fri, 07 Dec 2018 11:12:03 GMT

The code is below , in this code when i try to add widgets the home widget code is treated as search widget and search widget code is treated as home widget code. Why this is happening?? what's the reason behind??

After this i want to add more widgets like Base map Gallery widget , layer list widget,Direct Line Measurement3D and Area Measurement 3D widget, but unfortunately i am fail to do this.

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Drop Down Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#mainWindow {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
font-family: "Trebuchet MS";
}
#header {
height: 32px;
overflow:visible;
border:none;border-bottom: 3px solid #CC9900;
font-family: Windows;
font-size:14pt;
color: #FFFFFF;
background: #000000;
z-index: 99;
line-height: 32px;
}
.searchDiv {
float: right;
z-index: 99;
}
.homeDiv{
float: right;
z-index:99;
}
.galleryDiv{
float: left;
z-index:99;
}

#viewDiv {
width: 100%;
height: calc(100% - 32px);
border: none;padding:0px;
margin: 0px;
}
</style>

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search, Home, LayerList, BasemapGallery
) {
parser.parse();
map = new Map({
basemap: "topo"
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-98.1883, 37.0868],
zoom: 5
});

var searchWidget = new Search({
view: view,
container: "searchDiv"
});
view.ui.add(searchDiv,"top-left");

var homeWidget = new Home({
view: view,
container: "homeDiv"
});

var layer = new LayerList({
view: view,
container: "galleryDiv"
});
view.ui.add(layer,"top-right");

var search1 = new Home({
view : view,
container: "search1Div"
});
view.ui.add(search1,"top-right");

esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outFields=STATE_NAME&returnGeometry=false&orderByFields=STATE_NAME&returnDistinctValues=true&f=json',
{
responseType:'json',
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("stateSelect").set('store',store2);
var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.STATE_NAME;
var value = feat.attributes.STATE_NAME;
var dataItem = {
id:index,
name:name,
value:value
};
return dataItem;
}));
store2 = new Memory({data:data});
registry.byId("stateSelect").set('store',store2);
}));

var States = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
outFields: ["*"]
});

var Counties = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
outFields: ["*"]
});

//map.addMany([States,Counties]);

app = {
zoomRow: function(id, which){
var sym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [255, 0, 0, 0.5],
outline: { // autocasts as new SimpleLineSymbol()
color: [128, 128, 128, 1],
width: "0.5px"
}
}, gra;
view.graphics.removeAll();
var query = States.createQuery();
var thePoly, theExtent;
if(which == "State"){
query.outFields=[];
query.outSpatialReference = view.spatialReference;
query.where = "STATE_NAME='" + (id).toString() + "'";
console.info(query.where);
query.returnGeometry = true;
States.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME='" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
{
responseType: "json",
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("countySelect").set('store',store2);
var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.NAME;
var dataItem = {
id:index,
name:name
};
return dataItem;
}));
store2 = new Memory({data:data});
registry.byId("countySelect").set('store',store2);
document.getElementById('countySelect').value = "Select County";
}));
}else if(which == "County"){
query = Counties.createQuery();
var county = (id).toString();
county = county.replace(" County", "");
query.where = "NAME='" + county + "'";
query.returnGeometry = true;
query.outFields=[];
query.outSpatialReference = view.spatialReference;
Counties.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
}
}
};

});
</script>
</head>

<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> Select a State/County and zoom to it on the map:
<input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
<input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" data-dojo-props="maxHeight: 200" />
<input type="hidden" name="stateabbr" id="stateabbr" />
<div id="searchDiv" class='searchDiv'></div>
<div id="homeDiv" class='homeDiv'></div>
<div id="galleryDiv" class='galleryDiv'></div>
<div id="search1Div" class='search1Div'></div>
</div>

</html>

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:28:54 GMT

Irtiza,

OK you are missing a very basic concept of AMD JavaScript programming.

You have:

require([
"esri/Map",
"esri/views/MapView",
"dojo/on",
"esri/tasks/support/Query",
"esri/layers/FeatureLayer",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/_base/lang",
"esri/request",
"dojo/parser",
"dijit/registry",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery",

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search, Home, LayerList, BasemapGallery
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AMD style programming requires the require array list and the subsequent vars to be in the same order.

require([
...
"esri/request",
"dojo/parser",
"dijit/registry",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery",
...‍‍‍‍‍‍‍‍‍‍
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Home, Search, LayerList, BasemapGallery
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notice that the above require array has registry, Home, Search, LayerList, BasemapGallery and the functions vars has then listed in the same order.

Re: How to add Widgets in excisting code.

irtizahussain — Mon, 10 Dec 2018 11:25:39 GMT

yeah that's the exact thing i was looking for, thanks

Re: How to add Widgets in excisting code.

irtizahussain — Mon, 10 Dec 2018 11:26:05 GMT

there is another issue, when i select any state from drop down then it focus on that particular area, can you tell me how can i remove that focus after i search the state!?

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Mon, 10 Dec 2018 14:01:32 GMT

Irtiza,

You need to try an understand the code. You will see that the zoomRow function is what zooms to the state and county . So you need to remove code that call this function.

onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');"‍

Re: How to add Widgets in excisting code.

irtizahussain — Tue, 18 Dec 2018 04:36:58 GMT

sir, i changed the drop down fields from state and county to region and city. First we have to select the region then the cities drop down allows us to select city, the service that i provide to the city, there are many cities but in drop down only the name of selected region is appearing. It is like when we select a region x then in city column only x is shown instead of name of different cities!! how can i fix this??

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Tue, 18 Dec 2018 14:19:59 GMT

Irtiza,

Sounds like you have something wrong in your code changes. It is had to tell without seeing your changes.

Re: How to add Widgets in excisting code.

irtizahussain — Wed, 19 Dec 2018 11:40:26 GMT

Thanks Robert,

i sort out the issue. I was placing the wrong field name.

Can you tell me is there is any way to remove the highlighted area automatically !! how can i remove the highlighted area automatically which appear on screen after choose any option from drop down.

Here is the picture

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Wed, 19 Dec 2018 14:34:18 GMT

Irtiza,

I answered that question a week ago.

https://community.esri.com/message/818378-re-how-to-add-widgets-in-excisting-code?commentID=818378#comment-818378

Re: How to add Widgets in excisting code.

irtizahussain — Fri, 21 Dec 2018 09:00:32 GMT

yess but i didn't get how to do this!!

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Fri, 10 Dec 2021 21:28:57 GMT

Irtiza,

Hmm not sure how much simpler I could make it.. Remove the onchange property.

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" data-dojo-props="maxHeight: 200" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
      <div id="searchDiv" class='searchDiv'></div>
    </div>
    <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
  </div>
</body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to add Widgets in excisting code.

irtizahussain — Mon, 24 Dec 2018 12:52:07 GMT

sir i did the same as above but still it is still not working!!

Re: How to add Widgets in excisting code.

RobertScheitlin__GISP — Mon, 24 Dec 2018 13:55:35 GMT

I am not sure I can help you. You can not expect someone to write your code for you. I have provided guidance and code that I know works so the issue is on your end.

Re: How to add Widgets in excisting code.

irtizahussain — Fri, 28 Dec 2018 11:59:54 GMT

ok sir thanks for your guidance.