topic Re: Custom query widget in Web AppBuilder Custom Widgets Questions

Custom query widget

MatejCunder1 — Sun, 12 Dec 2021 09:07:43 GMT

Hello everyone,

I have a script, that works as a standalone application, but would like to make it a Custom widget. I don't know anything about javascript, so would need help on how to make my script into widget.js and widget.html file.

The widget is intended as a structured query. First you make a query on kadaster administrative unit and then on the filtered parcels, which belong only to that kadaster unit. I named my variables as State and City, so it's easier to imagine what I mean.

Second think I would like to add is query, that would work both with names of the Administrative unit and also with administrative numbers of units. At the moment the search works only with names.

Thank you in advance,

Matej

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
     <html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples  
      on iOS devices-->  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>  
    <title>Dojo Dropdown Demo</title>  
  
    <link rel="stylesheet" href="https://community.esri.com//serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">  
    <!-- ArcGIS API for JavaScript -->  
    <script type="text/javascript" src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0compact">
    
    </script>  
  
  
  
    <script type="text/javascript">  
  
      dojo.require("esri.map");  
      dojo.require("esri.tasks.Query");  
      dojo.require("dijit.form.FilteringSelect");  
      dojo.require("dojo.data.ItemFileReadStore");  
        
      dojo.addOnLoad(init);  
  
      var map,queryTask, queryTask1;  
  
      function init() {       
        queryTask = new esri.tasks.QueryTask("https://gis.arso.gov.si/arcgis/rest/services/Portal/Atlasokolja_javni_PORTAL/MapServer/511");  
        queryTask1 = new esri.tasks.QueryTask("https://gis.arso.gov.si/arcgis/rest/services/Portal/Atlasokolja_javni_PORTAL/MapServer/5");
        map = new esri.Map("map");  
      
        dojo.connect(map, "onLoad", function() {  
          //populate dropdown   
          executeQuery();
		  //executeQuerySecond();		  
        });  
  
        // Add the campus basemap   
        var campusMap = new esri.layers.ArcGISTiledMapServiceLayer('https://gis.arso.gov.si/arcgis/rest/services/Topografske_karte_ARSO_nova_MGI3912/MapServer');  
        map.addLayer(campusMap);  
      }  
  
      function executeQuery() {  
  
            
        //execute the query task then populate the dropdown menu with list of building names   
        var query = new esri.tasks.Query();  
        query.returnGeometry = true;  
        query.outFields = ["KO_IME", "KO_ID","OBJECTID"];  
        query.where = "1=1";  
        queryTask.execute(query,populateMenu);  
          
      }  
      function populateMenu(featureSet){  
         var items = dojo.map(featureSet.features, function (item) {  
                    return {  
                        name: item.attributes.KO_IME,
						ko_id: item.attributes.KO_ID,		
                        id:item.attributes.OBJECTID,
						label: item.attributes.KO_ID + " - " + item.attributes.KO_IME
                    };  
                });  
             var data = {  
              identifier:"id",  
              items:items  
              };  
             var objStore = new dojo.data.ItemFileReadStore({data:data});  
			 
			
          var filteringSelect = new dijit.form.FilteringSelect({  
            style:'width:300px;',  
            placeHolder:'CHOOSE STATE',  
            store:objStore,  
            required:false,  
            labelAttr:'label',
            fetchProperties:[{sort:[{attribute:'name'}]} ],
            onChange:function(val){
			
                if(val){ 				
					executeQuerySecond(this.item.ko_id[0]);
                  var selectQuery = new esri.tasks.Query();  
                  selectQuery.returnGeometry = true;  
                  selectQuery.objectIds = [val];  
                  queryTask.execute(selectQuery,function(featureSet){
				  
                    map.graphics.clear(); //clear any existing map graphics   
                    //get the first feature and add to map   
                        if(featureSet.features.length > 0){  
                          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  
                           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  
                           new dojo.Color([255,0,0]), 10),new dojo.Color([255,255,0,0.25]));  
                          var feature = featureSet.features[0];  
                          var graphic = new esri.Graphic(feature.geometry,symbol);  
                          map.graphics.add(graphic);
							var Obcina = graphic.geometry.getExtent();   
							map.setExtent(Obcina);						  
                    }  
                });  
                }  
            }              
          },'STATE');  
  
  
  
  
      }  
  function executeQuerySecond(sifko) {  
  
            
        //execute the query task then populate the dropdown menu with list of building names   
        var izbor = new esri.tasks.Query();  
        izbor.returnGeometry = true;  
        izbor.outFields = ["PARCELA","SIFKO","OBJECTID"];  
        izbor.where = "SIFKO = '" + sifko + "'";;  
        queryTask1.execute(izbor,populateMenu1);  
          
      }
var global_filteringSelect1 = undefined;	  
      function populateMenu1(featureSet){  
        
         var items = dojo.map(featureSet.features, function (item) {  
                    return {  
                        name: item.attributes.PARCELA,
						sifko: item.attributes.SIFKO,						
                        id1:item.attributes.OBJECTID  
                    };  
                });  
				
             var data = {  
              identifier:"id1",  
              items:items  
              };  
             var objStore = new dojo.data.ItemFileReadStore({data:data});  
			
			if(global_filteringSelect1 != undefined){
				global_filteringSelect1.destroy();
			}
			let select_container = document.getElementById("select-container");
			let new_input_node = document.createElement("input");
			new_input_node.id = "CITY";
			select_container.appendChild(new_input_node);
			
          global_filteringSelect1 = new dijit.form.FilteringSelect({  
            
			style:'width:300px;',  
            placeHolder:'CHOOSE CITY',  
            store:objStore,  
            required:false,  
            labelAttr:'name',  
            fetchProperties:{sort:[{attribute:'name'}]},  
            onChange:function(val){  
                if(val){  
                  var selectQuery1 = new esri.tasks.Query();  
                  selectQuery1.returnGeometry = true;  
                  selectQuery1.objectIds = [val];  
                  queryTask1.execute(selectQuery1,function(featureSet){
					
                    map.graphics.clear(); //clear any existing map graphics   
                    //get the first feature and add to map   
                        if(featureSet.features.length > 0){  
                          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  
                           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  
                           new dojo.Color([255,0,0]), 2),new dojo.Color([255,255,0,0.25]));  
                          var feature = featureSet.features[0];  
                          var graphic = new esri.Graphic(feature.geometry,symbol);  
                          map.graphics.add(graphic);
						var Parcela = graphic.geometry.getExtent();   
						map.setExtent(Parcela);  						  
                    }  
                });  
                }  
            }              
          },'CITY');   
      }  
    </script>  
  </head>  
  
  <body class='claro' style="font-family: Arial Unicode MS,Arial,sans-serif;">  
	<div id="select-container">
		<input id='STATE'/>
	</div>
	<div id="wrapper" style="position: relative; width: 700px; height: 500px; border:1px solid #000;">  
      <!-- Map canvas -->  
      <div id="map" style="position: absolute; width: 700px; height: 500px; z-index: 1;"></div>  
    </div> 
	
  </body>  
  
</html>  
  ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Custom query widget

shaylavi — Thu, 29 Aug 2019 07:08:33 GMT

Hi Matej Cunder,

I've attached some links to step-by-step tutorials of how you can create custom widgets for WAB.

I strongly suggest you start with these tutorials. They will help you understand better about the process and what you need to know.

Once you'll manage to complete the tutorials, you should feel more comfortable working with widgets development and then you might have more specific guidance questions which i'm sure people would be happy to help with.

The following tutorial would be a good place to start and you can probably stop half way through it to have the basic knowledge -

Get started—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Some more good resources to play with -

Create a custom widget | ArcGIS API for JavaScript 4.12

Create a ListView widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Regards,

Shay.

Re: Custom query widget

MatejCunder1 — Sun, 12 Dec 2021 09:07:46 GMT

Helo Shay,

thx for the links, some of them I have already checked, but unfortunately I can't programme in JS, so I find it difficult to follow.

However my college helped me get the code into widget, meaning separating the HTML file into widget.js and Widget.html. Only thing, that still doesn't work is getting the basemap as a layer from the current basemap into the widget. The function that doesnt' work is thisone here:

 map = new esri.Map("map");  
      
        dojo.connect(map, "onLoad", function() {  
          //populate dropdown   
          executeQuery();
            //executeQuerySecond();            
        });  
  
        // Add the campus basemap   
        var campusMap = new esri.layers.ArcGISTiledMapServiceLayer('https://gis.arso.gov.si/arcgis/rest/services/Topografske_karte_ARSO_nova_MGI3912/MapServer');  
        map.addLayer(campusMap);

Instead of adding my one basemap, I want Mywidget to use the basemap from the App. Could you please help me add the right set of code to pull the current basemap.

BR,

Matej

Re: Custom query widget

shaylavi — Sun, 12 Dec 2021 09:07:49 GMT

Matej,

If youdon't have any background with programming you will find this very hard to follow.

Creating a map with a custom basemap is one thing and creating a widget in a web appbuilder environment is like a whole different animal.

Creating a map with a custom basemap is the first tutorial in the API guide. This is very basic, unlike creating/customizing widgets.

1- Create a map | ArcGIS API for JavaScript 3.29

2- esri/basemaps | API Reference | ArcGIS API for JavaScript 3.29

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Basemap Toggle</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body, #map {
padding:0;
margin:0;
height:100%;
}
#BasemapToggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map;
require([
"esri/basemaps",
"esri/map",
"dojo/domReady!"
], function (esriBasemaps, Map){
esriBasemaps.delorme = {
baseMapLayers: [{url: "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"}
],
thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",
title: "Delorme"
};

var map = new Map("ui-map", {
basemap: "delorme",
center: [-111.879655861, 40.571338776], // long, lat
zoom: 13,
sliderStyle: "small"
});
});
</script>
</head>
<body>
<div id="map" class="map">
<div id="ui-map"></div>
</div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Custom query widget

MatejCunder1 — Sun, 12 Dec 2021 09:07:52 GMT

Hi Shay,

I know that creating widgets is an advanced task in WEB APP, but I already have the working widget, which just needs to define proper basemap, which is any basemap that is used at the moment in the web app.

Instead of:

map = new esri.Map("map"); 

dojo.connect(map, "onLoad", function() { 
//populate dropdown 
executeQuery();
//executeQuerySecond(); 
}); 

// Add the campus basemap 
var campusMap = new esri.layers.ArcGISTiledMapServiceLayer('https://gis.arso.gov.si/arcgis/rest/services/Topografske_karte_ARSO_nova/MapServer'); 
map.addLayer(campusMap);‍‍‍‍‍‍‍‍‍‍‍

I need the widget to add layers to the current basemap which is present in the WEB APP

And one other thing that would like to add is search option based on two columns: State name and state ID. At the moment the search is based only on State name (KO_IME):

     function executeQuery() {  
	  
        //execute the query task then populate the dropdown menu with list of state names   
        var query = new esri.tasks.Query();  
        query.returnGeometry = true;  
        query.outFields = ["KO_IME", "KO_ID","OBJECTID"];  
        query.where = "1=1";  
        queryTask.execute(query,populateMenu);  

      }  
      function populateMenu(featureSet){  
         var items = dojo.map(featureSet.features, function (item) {  
                    return {  
                        name: item.attributes.KO_IME,
						ko_id: item.attributes.KO_ID,		
                        id:item.attributes.OBJECTID,
						label: item.attributes.KO_ID + " - " + item.attributes.KO_IME
                    };  
                });  
             var data = {  
              identifier:"id",  
              items:items  
              };  
             var objStore = new dojo.data.ItemFileReadStore({data:data});  
			 
			
          var filteringSelect = new dijit.form.FilteringSelect({  
            style:'width:300px;',  
            placeHolder:'CHOOSE STATE',  
            store:objStore,  
            required:false,  
            labelAttr:'label',
            fetchProperties:[{sort:[{attribute:'name'}]} ],
            onChange:function(val){
			
                if(val){ 				
					executeQuerySecond(this.item.ko_id[0]);
                  var selectQuery = new esri.tasks.Query();  
                  selectQuery.returnGeometry = true;  
                  selectQuery.objectIds = [val];  
                  queryTask.execute(selectQuery,function(featureSet){
				    console.log(map);
                    map.graphics.clear(); //clear any existing map graphics   
                    //get the first feature and add to map   
                        if(featureSet.features.length > 0){  
                          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  
                           new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  
                           new dojo.Color([255,0,0]), 10),new dojo.Color([255,255,0,0.25]));  
                          var feature = featureSet.features[0];  
                          var graphic = new esri.Graphic(feature.geometry,symbol);  
                          map.graphics.add(graphic);
							var Obcina = graphic.geometry.getExtent();   
							map.setExtent(Obcina);						  
                    }  
                });  
                }  
            }          ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Matej