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

515
4
10-09-2019 11:43 AM
GiovanniPopulis
New Contributor II

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.

arcade-execution-error TypeError: Cannot read property

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();
        }
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
4 Replies
Noah-Sager
Esri Regular Contributor

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 

0 Kudos
SaffiaHossainzadeh2
New Contributor

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.  

0 Kudos
GiovanniPopulis
New Contributor II

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.

0 Kudos
Claire_Peterson
Occasional Contributor

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

0 Kudos