features widget not working?

[LefterisKoumis]

For some feature layers,  when you click on a feature, you expect the popup to be displayed on the features widget panel, but it just opens and closes the widget immediately! 

https://codepen.io/lkoumis1/pen/poXqjxR 

It's similar to the example posted here. The only difference is that I added a feature Layer instead of using a webmap.

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-features 

[KenBuja]

The map layer that you're providing doesn't have a popupTemplate defined, whereas the web map does. Once you add a template (like in this sample), the Features widget works as expected.

        const template = {
          title: 'This is a test'
        }

        const featureLayer = new FeatureLayer({
          url: "https://gis.cnra.ca.gov/arcgis/rest/services/Boundaries/CCED_AccessType/MapServer/0",
           outFields:['*'],
           popupTemplate: template
        });

[LefterisKoumis]

Thank you for the response @KenBuja . Yes, your solution works for that layer. I used that layer in my example because it is visible on the public. However, my issue is with another layer that I cannot share.

I am sharing the code of how I define the template, and a brief video to show the issue.

       const featureLayer = new FeatureLayer({
         url: "https://xyz/MapServer/0",
          outFields:['*'],
         
       });
        map.add(featureLayer);
        view.when(() =>{
          const popupTemplate = featureLayer.createPopupTemplate();
          featureLayer.popupTemplate = popupTemplate;
        })

[KenBuja]

I substituted another layer and the code would work sometimes, returning content in the Features widget, but it wasn't consistent. Sometimes it would throw the error "popupTemplate is null". Are you getting that in your console?

I changed the view.when to featureLayer.when and that seemed be more consistent with a layer that takes a while to load.

I also tried using an await function with the FeatureLayerView and that seemed pretty consistent also.

view.when(() =>{
  (async () => { 
    const layerView = await view.whenLayerView(featureLayer);
    await reactiveUtils.whenOnce(() => !layerView.updating);
    const popupTemplate = featureLayer.createPopupTemplate();
    popupTemplate.title = 'This is a test'; 
    featureLayer.popupTemplate = popupTemplate;
  })()
})

[LefterisKoumis · Accepted solution]

Thank you Ken. After hours of working on this problem, found out that the issue was of how the REST service for this layer was published. After it was republished, the issue went away. However, you script assisted with faster loading of large datasets.