topic Re: Communicate values between functions in Web AppBuilder Custom Widgets Questions

Communicate values between functions

AlbertoCañivano — Sun, 12 Dec 2021 09:05:56 GMT

Good morning, everyone.
The following code makes two requests to two different services of the Spanish Cadastre, depending on the data entered by the User. If the User introduces the Cadastral Reference, the service of the cadastre that returns the coordinate X and Y of the point is consulted, to later make a Zoom and paint the point.
If on the contrary, the user introduces other alphanumeric fields, another service is consulted that will return the Cadastral Reference. Later this Cadastral Reference would be used to look for the information of the first service and to give the corresponding geometry.
The problem I'm having is that the two queries work well separately, due to all the conditionals I'm putting in the code and that surely is not necessary and this making my code inefficient.
I would like my code to execute queries according to the fields that the user has completed: if you have this value do this but if you have this other value, do this other. Any suggestions? Thank you all very much.

define([
  'dojo/_base/declare',
  'jimu/BaseWidget',
  "dojox/xml/parser",
  'dijit/form/Button',
  'dojo/dom',
  'dojo/on',
  "esri/request",
  "esri/config",   
  "esri/graphic",
  "esri/symbols/PictureMarkerSymbol",
  'esri/geometry/Point',
  "esri/Color",
  "esri/SpatialReference",
  "esri/geometry/webMercatorUtils",
  'dojo/_base/lang'
  
],
function(
  declare, BaseWidget, xmlParser, Button, dom,  on,esriRequest,esriConfig,Graphic,PictureMarkerSymbol,Point,Color,SpatialReference,webMercatorUtils,lang) {
  return declare([BaseWidget], {
     baseClass: 'jimu-widget-zoomTo',
     name: 'Referencia Catastral',
     symbol: null,
     
     
     
    postCreate: function() {
      this.inherited(arguments);
      this.symbol = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Basic/YellowStickpin.png', 51, 51);         
    },



    onOpen:function(){
        dom.byId("CoordX").innerHTML = ""
        dom.byId("CoordY").innerHTML = ""
        dom.byId("RC").innerHTML = ""
        dom.byId("dir").innerHTML = ""  
        dom.byId("error").innerHTML = ""
    },

    

    onZoomClick: function(){
      //llamando al proxy---descomentar cuando esté en el servidor
      //esriConfig.defaults.io.proxyUrl = "PHP/proxy.php?";

      var RC = dom.byId("RC").value.substring(0,14);
      var url = "https://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_CPMRC?Provincia=&Municipio=&SRS=EPSG%3A4326&RC=" + RC
      if(RC!=""){
        console.log("lleno")
        //consulta por Referencia catastral    
      var requestHandle = esriRequest({
        "url": url,
        "handleAs": "xml"
            //para evitar problemas de scope al usar el this hay que usar lang
      }).then(lang.hitch(this,function(response){
          dom.byId("status").value = xmlParser.innerXML(response);
          var respuesta = dom.byId("status").value;
                           
          
          var xcen = response.getElementsByTagName('xcen');
          var ycen = response.getElementsByTagName('ycen');
          var dir = response.getElementsByTagName('ldt');
          var error = response.getElementsByTagName('des');
          

          if (xcen.length==0) {
            dom.byId("error").value = xmlParser.textContent(error[0]);
            var errores = dom.byId("error");
            dom.byId("error").innerHTML = errores.value;
            dom.byId("CoordX").innerHTML = ""
            dom.byId("CoordY").innerHTML = ""
            dom.byId("RC").innerHTML = ""
            dom.byId("dir").innerHTML = "" 


          } else {
            dom.byId("CoordX").value = xmlParser.textContent(xcen[0]);
            var coordX = dom.byId("CoordX");
            console.log(coordX)
            dom.byId("CoordX").innerHTML = coordX.value;
            dom.byId("CoordY").value = xmlParser.textContent(ycen[0]);
            var coordY = dom.byId("CoordY");
            dom.byId("CoordY").innerHTML = coordY.value;
            dom.byId("error").innerHTML = ""

            //direccion
            dom.byId("dir").value = xmlParser.textContent(dir[0]);
            var dir = dom.byId("dir");
            dom.byId("dir").innerHTML = dir.value

            //creo y añado un punto
            var punto = new Point(coordX.value, coordY.value, new SpatialReference({wkid:4326}));
            var geom = webMercatorUtils.geographicToWebMercator(punto); // project the point to webmercator since that is what esri basmaps are
            var graphic = new Graphic(geom, this.symbol);
            this.map.graphics.add(graphic);
            this.map.centerAndZoom(punto, 20); //esri basemaps are tiled so the level is a value like 12 Not 100
            
            }                             
       }));
      } else{
            
      //consulta por Parcela
      var prov =dom.byId("prov").value;
      var mun= dom.byId("muni").value;
      var pol= dom.byId("pol").value;
      var parc = dom.byId("parc").value;
      
      var url_parcela = "https://ovc.catastro.meh.es//ovcservweb/OVCSWLocalizacionRC/OVCCallejero.asmx/Consulta_DNPPP?Provincia="+prov+"&Municipio="+mun+"&Poligono="+pol+"&Parcela="+parc

      console.log(url_parcela)

      var requestHandle1 = esriRequest({
        "url": url_parcela,
        "handleAs": "xml"
            //para evitar problemas de scope al usar el this hay que usar lang
      }).then(lang.hitch(this,function(response){
          dom.byId("status").value = xmlParser.innerXML(response);
          var respuesta = dom.byId("status").value;
          console.log(respuesta)                 
          
          var pc_1 = response.getElementsByTagName('pc1');
          dom.byId("pc1").value = xmlParser.textContent(pc_1[0]);
          var pc1 = dom.byId("pc1").value;
          console.log(pc1)
          
          var pc_2 = response.getElementsByTagName('pc2');
          dom.byId("pc2").value = xmlParser.textContent(pc_2[0]);
          var pc2 = dom.byId("pc2").value;
          console.log(pc2)

          var RC_total = pc1+pc2;
          console.log(RC_total)
                                       
       }));


      };
            
            
      },
      //end of zoomclick()

           

    onClose: function(){
      this.map.on("click", function(){
        console.log("click_close");
      });
      this.map.graphics.clear();

      
    }
  });
  
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Communicate values between functions

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:06:00 GMT

Alberto,

Here is my optimization of your code:

define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    "dojox/xml/parser",
    'dijit/form/Button',
    'dojo/dom',
    'dojo/on',
    "esri/request",
    "esri/config",
    "esri/graphic",
    "esri/symbols/PictureMarkerSymbol",
    'esri/geometry/Point',
    "esri/Color",
    "esri/SpatialReference",
    "esri/geometry/webMercatorUtils",
    'dojo/_base/lang'
  ],
  function(
    declare, BaseWidget, xmlParser, Button, dom, on, esriRequest, esriConfig, Graphic,
    PictureMarkerSymbol, Point, Color, SpatialReference, webMercatorUtils, lang) {
    return declare([BaseWidget], {
      baseClass: 'jimu-widget-zoomTo',
      name: 'Referencia Catastral',
      symbol: null,
      RC: null,
      
      postCreate: function() {
        this.inherited(arguments);
        this.symbol = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Basic/YellowStickpin.png', 51, 51);
      },

      onOpen: function() {
        dom.byId("CoordX").innerHTML = ""
        dom.byId("CoordY").innerHTML = ""
        dom.byId("RC").innerHTML = ""
        dom.byId("dir").innerHTML = ""
        dom.byId("error").innerHTML = ""
      },

      onZoomClick: function() {
        //llamando al proxy---descomentar cuando esté en el servidor
        //esriConfig.defaults.io.proxyUrl = "PHP/proxy.php?";

        this.RC = dom.byId("RC").value.substring(0, 14);
        var url = "https://ovc.catastro.meh.es/ovcservweb/OVCSWLocalizacionRC/OVCCoordenadas.asmx/Consulta_CPMRC?Provincia=&Municipio=&SRS=EPSG%3A4326&RC=" + this.RC
        if (this.RC == "") {
          var prov = dom.byId("prov").value;
          var mun = dom.byId("muni").value;
          var pol = dom.byId("pol").value;
          var parc = dom.byId("parc").value;
          url = "https://ovc.catastro.meh.es//ovcservweb/OVCSWLocalizacionRC/OVCCallejero.asmx/Consulta_DNPPP?Provincia=" + prov + "&Municipio=" + mun + "&Poligono=" + pol + "&Parcela=" + parc
        }

        var requestHandle = esriRequest({
          "url": url,
          "handleAs": "xml"
          //para evitar problemas de scope al usar el this hay que usar lang
        }).then(lang.hitch(this, function(response) {
          dom.byId("status").value = xmlParser.innerXML(response);
          var respuesta = dom.byId("status").value;
          
          if (this.RC != "") {
            var xcen = response.getElementsByTagName('xcen');
            var ycen = response.getElementsByTagName('ycen');
            var dir = response.getElementsByTagName('ldt');
            var error = response.getElementsByTagName('des');

            if (xcen.length == 0) {
              dom.byId("error").value = xmlParser.textContent(error[0]);
              var errores = dom.byId("error");
              dom.byId("error").innerHTML = errores.value;
              dom.byId("CoordX").innerHTML = "";
              dom.byId("CoordY").innerHTML = "";
              dom.byId("RC").innerHTML = "";
              dom.byId("dir").innerHTML = "";
            } else {
              dom.byId("CoordX").value = xmlParser.textContent(xcen[0]);
              var coordX = dom.byId("CoordX");
              console.log(coordX);
              dom.byId("CoordX").innerHTML = coordX.value;
              dom.byId("CoordY").value = xmlParser.textContent(ycen[0]);
              var coordY = dom.byId("CoordY");
              dom.byId("CoordY").innerHTML = coordY.value;
              dom.byId("error").innerHTML = "";

              //direccion
              dom.byId("dir").value = xmlParser.textContent(dir[0]);
              var dir = dom.byId("dir");
              dom.byId("dir").innerHTML = dir.value;

              //creo y añado un punto
              var punto = new Point(coordX.value, coordY.value, new SpatialReference({
                wkid: 4326
              }));
              var geom = webMercatorUtils.geographicToWebMercator(punto); // project the point to webmercator since that is what esri basmaps are
              var graphic = new Graphic(geom, this.symbol);
              this.map.graphics.add(graphic);
              this.map.centerAndZoom(punto, 20); //esri basemaps are tiled so the level is a value like 12 Not 100
            }
          } else {
            var pc_1 = response.getElementsByTagName('pc1');
            dom.byId("pc1").value = xmlParser.textContent(pc_1[0]);
            var pc1 = dom.byId("pc1").value;
            console.log(pc1)

            var pc_2 = response.getElementsByTagName('pc2');
            dom.byId("pc2").value = xmlParser.textContent(pc_2[0]);
            var pc2 = dom.byId("pc2").value;
            console.log(pc2)

            var RC_total = pc1 + pc2;
            console.log(RC_total)
          }
        }));
      },

      onClose: function() {
        this.map.on("click", function() {
          console.log("click_close");
        });
        this.map.graphics.clear();
      }
    });
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Communicate values between functions

AlbertoCañivano — Sun, 12 Dec 2021 09:06:02 GMT

Thanks for helping me clean up the code, Richard. But I have a problem: I have changed the name of the variable (line 111) thinking that this way, the value that takes RC will pass to the first part of the conditional thus obtaining the coordinates of the point and its corresponding zoom.

How should I pass the value of the variable RC to the first part of the conditional to make the query (line 62)? Thank you again

var RC = pc1 + pc2;
console.log(RC)
‍‍

Re: Communicate values between functions

RobertScheitlin__GISP — Mon, 28 Jan 2019 17:04:46 GMT

Alberto,

The old RC var is now this.RC.

Re: Communicate values between functions

AlbertoCañivano — Wed, 30 Jan 2019 07:45:26 GMT

Great, Richard. It works very well. Thank you!!