Query, highlight, zoom and center on feature

[KirstenFrost_Andersen]

Need a little guidance for an ArcGIS for JavaScript newbie.

I have a custom set of layers from a MapImageLayer displaying over an ESRI basemap.  I'm trying to take a parameter from the URL (in this case a unique parcel number) and find it in a layer (in this case Parcels layer), highlight that feature, zoom to it and center the map on it.  A colleague did that in JavaScript 3.16, however I'm using JS 4.4 and the methods and objects have changed a bit.  Below is a subset of my code that was pulled from the JS 3.16 example and I've been trying to massage it into something useful in JS 4.4.  The object graphicsUtils doesn't appear to exist in 4.4, the query results in a blank map screen, the method setSelectionSymbol breaks my code...  Can anyone give me some sample code I can use to fix this to result in my goals to find the parcel, zoom to, center and highlight it?  Thank you. 

             //Parcel Selection Layer

            parcels = new FeatureLayer("http://[myServer]/arcgis/rest/services/[mapservicename]/MapServer/0", {
                 outFields: ["*"],
                 //Needs to be Selection Mode, on demand results in odd parcel shapes
                 mode: FeatureLayer.MODE_SELECTION
             });

             parcels.setSelectionSymbol(sfs); //sfs = simplefillsymbol
             map.addLayers([parcels]);

             var parcelid = document.getElementById("<%= hfParcel.ClientID%>").value;// prompt("Give me input");
             selectParcel(parcelid);

             //select parcel from the feature layer by creating a query to look for the input parcel id
             function selectParcel(parcelid) {
                 if (parcelid) {
                     var query = new Query();
                     query.where = "PID_NUM = '" + parcelid + "'";
                     var deferred = parcels.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) {
                         var center = graphicsUtils.graphicsExtent(selection).getCenter();
                         var extent = esri.graphicsExtent(selection);
                         var extHandler = map.on("extent-change", function () {
                             extHandler.remove();
                             //zoom to the center then display the popup
                             map.infoWindow.setFeatures(selection);
                         });
                         map.setExtent(extent.getExtent().expand(2));
                         map.centerAt(center);
                     });
                 }
             }

[KenBuja]

Take a look at this thread

https://community.esri.com/thread/198994-query-highlight-and-zoom-to-graphics-js-api-44 

[KirstenFrost_Andersen]

Thank you Ken.  I did try to implement the suggested fix from that thread (see green text below), but something still isn't right.  I get a blank window, no basemap, no widgets, suggesting the JS isn't right.  Any obvious thing I'm missing here that  you can see? 

var parcelid = document.getElementById("<%= hfParcel.ClientID%>").value;// prompt("Give me input");
  selectParcel(parcelid);

        function selectParcel(parcelid) {
         if (parcelid) {
          var queryParcelsTask = new QueryTask({
           url:  "http://[myServer]/arcgis/rest/services/[mapServiceName]/MapServer/0"
          });

          var query = new Query();
          query.where = "PID_NUM = '" + parcelid + "'";
          queryParcelsTask.execute(query).then(zoomparcel);
         }
     }

     function zoomparcel(result) {
      var AOI = result.features;
      view.goTo(AOI);
     }

[KirstenFrost_Andersen]

It seems I wasn't getting the parcel number from the URL.  I've since fixed that, however still not getting the map to zoom into the feature and highlight it.  Will keep fighting it, but am certainly appreciative of any suggestions.

var urlParams = urlUtils.urlToObject(document.URL);
        if (urlParams.query){
   var urlParcelIDParam = parseFloat(urlParams.query.PID);
  }
  selectParcel(urlParcelIDParam);

        function selectParcel(urlParcelIDParam) {
         if (urlParcelIDParam) {
          var queryParcelsTask = new QueryTask({
             url:  "http://[myServer]/arcgis/rest/services/[mapServiceName]/MapServer/0"
          });

          var query = new Query();
          query.where = "PID_NUM = '" + urlParcelIDParam + "'";
          queryParcelsTask.execute(query).then(zoomparcel);
         }
     }

     function zoomparcel(result) {
      view.goTo(result.features);
     }

  });

[KenBuja]

Have you used the debugging tools to see if you're getting any results from your query? Are there any errors showing up in the console?

[KirstenFrost_Andersen]

It does appear that I'm passing in the URL parameter value, but while I am not getting any errors from the queryParcelsTask call, it's also not going into the zoomparcel function.  So I'm guessing that no, it's not returning results.  I verified that I have the field name right that I'm passing into query.where.  I'm using IE F12 Developer Tools to debug, but am struggling to figure out how to put a watch on queryParcelsTask results to see if I can get a "count" of results from that.  Will keep plugging away...  thank you.

[KenBuja]

Try adding a function that will give you a result if the promise doesn't resolve. The QueryTask example uses

qTask.execute(params)
    .then(getResults)
    .otherwise(promiseRejected);
}

function promiseRejected(err) {
    console.error("Promise rejected: ", err.message);
}‍‍‍‍‍‍‍‍

[KirstenFrost_Andersen]

Thanks for that.  I didn't see that example before.  I implemented it and it did fail to execute the query with that "promise rejected" code.  So I must have some syntax wrong.  I verified that the query works when I go directly to the map service rest endpoint Query tool. 

[KenBuja]

When you verified that the query works on the REST endpoint, did you copy the query.where syntax from the Developers Tools?

[KirstenFrost_Andersen]

No, I'm not sure where to find that in the Developer Tools.  Is that on the Network tab?  This is what I saw there:

http://[myServer]/arcgis/rest/services/[MapServiceName]/MapServer/0/query?where=PID_NUM%3D%2745214.9...

If I return the JSON instead of HTML from the Rest Query tool, it DOES tell me it failed to execute the query.  If I tell it to Return Count Only, I get a result of

{  "count": 1 }

which was why I thought it was working.
That makes no sense, because this feature layer is used for an existing web app and is functioning fine there (see the original syntax in my original post).