Problem with PopupTemplate Content by Function on Feature Widget in API 4.14/4.15

[Björn]

Hello,

when I try to use a function on the the content property from the popuptemplate in API 4.14 or 4.15 and try to show it on a "Feature" widget it doesn't work nearly all the time. The div doesn't show anything and is just flickering most of the time. But it works as expected with API 4.13.

Here is an example: https://codepen.io/hjmd/pen/QWjBvpN?editors=1010 

(origin: PopupTemplate - use functions to set content | ArcGIS API for JavaScript 4.15)

What could be the reason for that?

[RobertScheitlin__GISP · Accepted solution]

Björn,

  You had one major issue in your code that you were not specifying the fields that needed to be returned from the layer so there were many fields that you were attempting to use in your code that were not part of the returned graphic. And the performance in the code the way it was would be bad due to the highlight getting remove and applied each small mouse move even if it did not leave the same county. So here is the code improved and fixed.

(notice line 9 were it specifies all fields to be returned)

(line 20 and 21 are checking if this is the right layer and checking to see if the name of the county has changed)

...
      Layer.fromPortalItem({
        portalItem: {
          // autocasts as new PortalItem()
          id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
        }
      }).then(function (layer) {
        // add the layer to the map
        layer.outFields = ["*"];
        map.add(layer);
...
          view.whenLayerView(layer).then((layerView) => {
            let highlight, lResult = {attributes:{NAME:null}};
            view.on("pointer-move", (event) => {
              view.hitTest(event).then(({
                results
              }) => {
                const result = results[0];
                if (result) {
                  if(result.graphic.layer.id === layer.id){
                    if(lResult.attributes.NAME !== result.graphic.attributes.NAME){
                      highlight && highlight.remove();
                      highlight = layerView.highlight(result.graphic);
                      feature.graphic = result.graphic;
                      lResult = result.graphic;
                    }
                  }
                }else{
                  highlight && highlight.remove();
                  feature.graphic = graphic
                }
              });
            });
          });
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Björn]

Robert, thank you very much!

Yes you are right. I didn't thought about specifying the fields of the layer. And thank you for the other edits.

I made a fork of the example with your edits, if anyone reading this is interessted seeing it work right: https://codepen.io/hjmd/pen/eYpjMYr