Popup Template not working on feature layer

[Rmoser3]

Hello, 

I'm upgrading a web app from 3.18 to 4.24. I'm trying to get the popup template for a feature layer to work and I'm running into an issue. Here's some of my code:

this.map = newMap({
    basemap: {
        baseLayers: []
    },
});

var highlight = {
    color: new DojoColor([255, 255, 0, 0]),
    haloColor: new DojoColor([255, 0, 0]),
};

this.mapView = new MapView({
    container: containerName,
    map: this.map,
    extent: new GeometryExtent({
        xmin: -10006366.616730398,
        ymin: 3439317.824438894, 
        xmax: -9309260.918769779, 
        ymax: 4215918.031816076, 
        spatialReference: new SpatialReference({ wkid: 102100 })
    }),
    highlightOptions: highlight,
    popup: {
        dockEnabled: true,
        dockOptions: {
            buttonEnabled: false,
            breakpoint: false
        }
    }
});

var featureLayer = new FeatureLayer(layerUri,
{
    id: layerListItem.layerId,
    outFields: ['*'],
    opacity: 0.6,
    visible: true,
    spatialReference: new SpatialReference({ wkid: 102100 }),
    popupTemplate: {
        title: "Test"
    }
});

this.map.layers.add(featureLayer);

The feature layer is visible on the map after adding it and I'm even able to highlight the features within by clicking on them. However, the popup does not appear under any circumstance. Anyone have any ideas?

[ReneRubalcava · Accepted solution]

This snippet looks like you are mixing some 3x code with 4x code. For example, there is no Dojo in 4x, so you don't need to use Dojo color modules. Layers are not initialized with url string and params, it's a single constructor object. You don't provide the id, the layer will handle that.

Here is a popup sample that might help. I think it has more to do with how you create the FeatureLayer

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#construc...

https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/

[Rmoser3]

Thank you for your reply. Good catch, I probably missed that because my map is working so I thought there were no issues. I've updated the code to be as close to the demonstration as possible, yet the popup still doesn't appear. I've also disabled my browsers popup blocker to be sure that isn't the cause. Here's the new code:

var featureLayer = new FeatureLayer(
{
    outFields: ['*'],
    opacity: 0.6,
    visible: true,
    spatialReference: new SpatialReference({ wkid: 102100}),
    popupTemplate: {
        title: "Test",
        content: "Testing"
    },
    url: layerUrl
});

// Create Map
this.map = new Map({
    basemap: "gray-vector",
    layers: [featureLayer]
});

var highlight = {
    color: new Color([255, 255, 0, 0]),
    haloColor: new Color([255, 0, 0]),
};

// map view needed for rendering
this.mapView = new MapView({
    container: containerName,
    map: this.map,
    extent: new GeometryExtent({
        xmin: -10006366.616730398,
        ymin: 3439317.824438894, 
        xmax: -9309260.918769779, 
        ymax: 4215918.031816076, 
        spatialReference: new SpatialReference({ wkid: 102100 })
    }),
    highlightOptions: highlight,
    popup: {
        dockEnabled: true,
        dockOptions: {
            buttonEnabled: false,
            breakpoint: false
        }
    }
});

Let me know if you have any ideas. Thanks again!

[Rmoser3]

After a couple weeks of confusion, I found out that I had a reference to the old 3.18 CSS stylesheet while I was using the new API. I updated the stylesheet and bam, popups everywhere. I should have caught this when someone told me to check for old code, so I'm accepting this solution. Thank you!