Highlighting selected features interfering with population of arcade expressions in popup.

GiovanniPopulis — Sat, 11 Dec 2021 15:13:10 GMT

In my web app I'm loading all services as MapImageLayers from an Enterprise server (10.6). Each MapImageLayer has a set of sublayers, each of them with its own popupTemplate. Some of the popupTemplates have arcade expression utilized through expressionInfos. With this setup I'm able to click on the map and get a popup populated with each intersected feature and all of the associated data formatted properly.

My issue shows up when I attempt to add a highlight graphic to the view. If the first feature returned is one with a popupTemplate utilizing arcade expressions, the first attribute table in the popup is blank for all attributes with arcade expressions (labels show up but no data), but attributes with no arcade expression show up fine. For each subsequent feature in the popup everything is populated fine whether it has arcade expressions or not. I think this might be related to something happening before a promise has been returned, but I can't figure it out.

The whole app is fairly large, so I am including what I think is the relevant code, but I did have to remove the URL to the specific server I'm using.

This is the error message that shows up in chrome console.

require([
    "esri/Map",
    "esri/request",
    "esri/views/MapView",
    "esri/widgets/Home",
    "esri/layers/GroupLayer",
    "esri/layers/MapImageLayer",
    "esri/widgets/BasemapGallery",
    "esri/widgets/LayerList",
    "esri/widgets/Legend",
    "esri/widgets/Expand",
    "esri/widgets/Popup",
    "esri/widgets/ScaleBar",
    "esri/widgets/Search",
    "esri/widgets/DistanceMeasurement2D",
    "esri/widgets/AreaMeasurement2D"

], function (Map, esriRequest, MapView, Home, GroupLayer, MapImageLayer, BasemapGallery, LayerList, Legend, Expand, Popup, Search, ScaleBar, DistanceMeasurement2D, AreaMeasurement2D) {
    var activeWidget = null;

    var map = new Map({
        basemap: "topo-vector"
    });

    //CREATE VIEW//
    var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-122.1148, 37.6888],
        zoom: 10
    });

//POPUP TEMPLATES
var BlockGroupDemographicspopup = {

        title: "Block Group Demographics",
        outFields: ["*"],
        content: [{
            type: "fields", // Autocasts as new FieldsContent()
            // Autocasts as new FieldInfo[]
            fieldInfos: [{
                fieldName: "Map_Label",
                label: "Block Group"
            }, {
                fieldName: "Total_Population",
                label: "Population",
                format: {
                    digitSeparator: true,
                    places: 0
                }
            },
            {
                fieldName: "expression/Growth"
            }, {
                fieldName: "expression/Poverty"
            }, {
                fieldName: "expression/Minority"
            }, {
                fieldName: "expression/Unemployed"
            }, {
                fieldName: "expression/75"
            }, {
                fieldName: "expression/HS"
            }, {
                fieldName: "expression/esl"
            }, {
                fieldName: "expression/Renting"
            }, {
                fieldName: "expression/Vacancy"
            }, {
                fieldName: "expression/vehicle"
            }, {
                fieldName: "expression/commuters"
            }
            ]
        }],
        // autocasts to ExpressionInfo class
        expressionInfos: [{
            name: "Growth",
            title: "Growth Since 2010",
            expression: "Round(($feature.Growth_Since_2010)*100,2) + '%'"
        }, {
            name: "Poverty",
            title: "Below Poverty Level",
            expression: "Round(($feature.Pct_Below_Pvty)*100,2) + '%'"
        }, {
            name: "Minority",
            title: "Percent Minority",
            expression: "Round(($feature.Pct_Minority)*100,2) + '%'"
        }, {
            name: "Unemployed",
            title: "Unemployed",
            expression: "Round(($feature.Pct_Unemployed)*100,2) + '%'"
        }, {
            name: "75",
            title: "Over 75",
            expression: "Round(($feature.Pct_Over75)*100,2) + '%'"
        }, {
            name: "HS",
            title: "Less than a HS Diploma",
            expression: "Round(($feature.Pct_LessThanHS)*100,2) + '%'"
        }, {
            name: "esl",
            title: "Limited English Proficiency",
            expression: "Round(($feature.Pct_LEP)*100,2) + '%'"
        }, {
            name: "Renting",
            title: "Renting",
            expression: "Round(($feature.Pct_Renting)*100,2) + '%'"
        }, {
            name: "Vacancy",
            title: "Housing Vacancy Rate",
            expression: "Round(($feature.Vacancy_Rate)*100,2) + '%'"
        }, {
            name: "vehicle",
            title: "Zero Vehicle Households",
            expression: "Round(($feature.Pct_ZeroVehicle)*100,2) + '%'"
        }, {
            name: "commuters",
            title: "Share of Commuters who take Transit",
            expression: "Round(($feature.Pct_Transit)*100,2)"
        }]
    };
    var communityConcernedPopup = {

        title: "Communities of Concern",
        outFields: ["*"],
        content: [{
            type: "fields", // Autocasts as new FieldsContent()
            // Autocasts as new FieldInfo[]
            fieldInfos: [{
                fieldName: "Map_Label",
                label: "Block Group"
            }, {
                fieldName: "tot_pop_ci",
                label: "Population",
                format: {
                    digitSeparator: true,
                    places: 0
                }
            }, {
                fieldName: "tot_hh",
                label: "Households",
                format: {
                    digitSeparator: true,
                    places: 0
                }
            }, {
                fieldName: "expression/college"
            }, {
                fieldName: "expression/nocollege"
            }, {
                fieldName: "expression/75"
            }, {
                fieldName: "expression/singleparent"
            }, {
                fieldName: "expression/esl"
            }, {
                fieldName: "expression/disabled"
            }, {
                fieldName: "expression/nocars"
            }]
        }],
        // autocasts to ExpressionInfo class
        expressionInfos: [{
            name: "college",
            title: "Below 200% of Poverty Level",
            expression: "Round(($feature.pct_below2)*100,2) + '%'"
        }, {
            name: "nocollege",
            title: "Percent Minority",
            expression: "Round(($feature.pct_minori)*100,2) + '%'"
        }, {
            name: "75",
            title: "Over 75",
            expression: "Round(($feature.pct_over75)*100,2) + '%'"
        }, {
            name: "singleparent",
            title: "Single-Parent Families",
            expression: "Round(($feature.pct_spfam)*100,2) + '%'"
        }, {
            name: "esl",
            title: "Limited English Proficiency",
            expression: "Round(($feature.pct_lep)*100,2) + '%'"
        }, {
            name: "disabled",
            title: "Disabled Population",
            expression: "Round(($feature.pct_disab)*100,2) + '%'"
        }, {
            name: "nocars",
            title: "Zero Vehicle Households",
            expression: "Round(($feature.pct_zvhhs)*100,2) + '%'"
        }]
    };

    var projPopGrowth2040 = {
        title: "Projected Population Growth 2040",
        outFields: ["*"],
        content: [{
            type: "fields",
            fieldInfos: [
                { fieldName: "expression/popGrowth" }
            ]
        }],
        expressionInfos: [
            {
                name: "popGrowth",
                title: "Forecasted Percent Growth to 2040",
                expression: "Round(($feature.MTC_PopGrowth)*100,2) + '%'"
            }
        ]
    };

//FIRST TWO MAPIMAGELAYERS SHOWN FOR REFERENCE ONLY
//var employment = new MapImageLayer...
//var landuse = new MapImageLayer...

//ONE OF THE LAYERS EXPERIENCING ISSUES
var demographics = new MapImageLayer({
        url: "removed",
        title: "Demographics",
        visible: false,
        opacity: 0.6,
        sublayers: [
            { id: 2, title: "Projected Population Growth 2040", popupTemplate: projPopGrowth2040 },
            { id: 1, title: "Communities of Concern", popupTemplate: communityConcernedPopup },
            { id: 0, title: "Census Block Group Demographics", popupTemplate: BlockGroupDemographicspopup }
        ]
    });
var LandUseAndDemo = new GroupLayer({
        title: "Land Use And Demographics",
        visible: false,
        visibilityMode: "independent",
        layers: [/*employment, landuse,*/ demographics]
    })
map.add(LandUseAndDemo)


    view.popup.watch('selectedFeature', function (gra) {
        if (gra && gra.geometry) {
            view.graphics.removeAll();
            if (gra.geometry.type === "point") {
                gra.symbol = {
                    type: "simple-marker",
                    color: [0, 255, 255, 1],
                    outline: {
                        color: [0, 255, 255, 1],
                        width: 2
                    }
                };
            } else if (gra.geometry.type === "polyline") {
                gra.symbol = {
                    type: "simple-line",
                    color: [0, 255, 255, 0.8],
                    width: 2
                };
            } else if (gra.geometry.type === "polygon") {
                gra.symbol = {
                    type: "simple-fill",
                    //color: [0,255,255,0.4],
                    outline: {
                        color: [0, 255, 255, 1],
                        width: 2
                    }
                };
            } else {
                console.log(gra.sourceLayer.title + " is a " + gra.geometry.type)
            }
            view.graphics.add(gra);
        } else {
            view.graphics.removeAll();
        }
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Highlighting selected features interfering with population of arcade expressions in popup.

Noah-Sager — Wed, 09 Oct 2019 20:44:31 GMT

Not 100% sure, but it does sound like a synchronicity issue. I would try making the function at 239 an asynchronous function.

Here's some doc on async and await in JavaScript.

Async/await

Re: Highlighting selected features interfering with population of arcade expressions in popup.

SaffiaHossainzadeh2 — Thu, 07 Nov 2019 22:54:45 GMT

I am having a very similar issue. I apply a popupTemplate that uses Arcade expressions on a featureLayer and it works fine. But, if I query that feature layer, and return the results in a graphicsLayer (similar to QueryTask | ArcGIS API for JavaScript 4.13), then the Arcade expressions no longer work in the popup and I get the same error in the console as mentioned above. I will look into applying the async/await suggestion by Noah Sager (did that help @Giovanni Populis?), but in the mean time, just wanted to document my similar issue.

Re: Highlighting selected features interfering with population of arcade expressions in popup.

GiovanniPopulis — Tue, 12 Nov 2019 18:03:07 GMT

Saffia Hossainzadeh‌, I wasn't able to figure this out, but I'm also not very proficient in the use of async/await so I may not have applied it correctly when I tried.

Re: Highlighting selected features interfering with population of arcade expressions in popup.

Claire_Peterson — Thu, 27 Aug 2020 17:17:32 GMT

Saffia Hossainzadeh‌ - I am trying to accomplish the same thing. Have you been successful at all?

Re: Highlighting selected features interfering with population of arcade expressions in popup.

M_Most — Tue, 18 Oct 2022 22:07:08 GMT

I'm having the same issue. I'm also not very proficient with async/await, so I wanted to check in here to see if anyone had any additional tips on using it in this context.

topic Re: Highlighting selected features interfering with population of arcade expressions in popup. in ArcGIS JavaScript Maps SDK Questions

Highlighting selected features interfering with population of arcade expressions in popup.

Re: Highlighting selected features interfering with population of arcade expressions in popup.

Re: Highlighting selected features interfering with population of arcade expressions in popup.

Re: Highlighting selected features interfering with population of arcade expressions in popup.

Re: Highlighting selected features interfering with population of arcade expressions in popup.

Re: Highlighting selected features interfering with population of arcade expressions in popup.