ArcGIS JavaScript API Popup Not Referencing REST Service Layer

Question

The content in the popup created through the variable "popupCustom" is displaying string instead of referencing the specified field {IN_COUNTRY}. I followed the ArcGIS JS API Popup Tutorials, & can't see what my error is in failing to grab the attributes associated with that field. Here's the code -- any help is greatly appreciated! *note: feature layer url within "Cyber_Areas" variable points to REST URL for referenced Feature Class. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Search widget with multiple sources - 4.6</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/widgets/BasemapToggle", "esri/widgets/Legend", "esri/layers/TileLayer", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/widgets/LayerList", "esri/PopupTemplate", "dojo/on", "dojo/domReady!" ], function( Map, MapView, BasemapToggle, Legend, TileLayer, FeatureLayer, Search, LayerList, PopupTemplate, on ) { var Cyber_Areas = new FeatureLayer({ url: "*inserturl*", outFields: ["IN_COUNTRY"], popupTemplate: popupCustom }); var map = new Map({ basemap: "osm" }); map.add(Cyber_Areas); var view = new MapView({ container: "viewDiv", map: map, center: [-87.172865, 34.077613], // lon, lat zoom: 16 }); var searchWidget = new Search({ view: view, popupOpenOnSelect: false }); view.ui.add(searchWidget, { position: "top-left", index: 0 }); var popupCustom = searchWidget.on('select-result', function(evt){ //console.info(evt); view.popup.open({ location: evt.result.feature.geometry, // location of the click on the view title: "Service Availability:", // title displayed in the popup content: "

{IN_COUNTRY}" }); }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BenPeters1 · Answer

That helped indeed. I think that I see my error - I was confused & didn't think that I had to initialize a template variable. Thank you!

RobertScheitlin__GISP · Answer

Ben, See if this helps. I have associated the layer in question with the search widget and have define an actual popup template: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Search widget with multiple sources - 4.16</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css"> <script src="https://js.arcgis.com/4.16/"></script> <script> var view, map; require([ "esri/Map", "esri/views/MapView", "esri/widgets/BasemapToggle", "esri/widgets/Legend", "esri/layers/TileLayer", "esri/layers/FeatureLayer", "esri/widgets/Search", "esri/widgets/LayerList", "esri/PopupTemplate", "dojo/on", "dojo/domReady!" ], function ( Map, MapView, BasemapToggle, Legend, TileLayer, FeatureLayer, Search, LayerList, PopupTemplate, on ) { var template = { // autocasts as new PopupTemplate() title: "{Cmn_Name} : {Sci_Name}", content: [ { // It is also possible to set the fieldInfos outside of the content // directly in the popupTemplate. If no fieldInfos is specifically set // in the content, it defaults to whatever may be set within the popupTemplate. type: "fields", fieldInfos: [ { fieldName: "Cmn_Name", label: "Common Name" }, { fieldName: "Sci_Name", label: "Scientific Name" }, { fieldName: "Condition", label: "Condition", }, { fieldName: "Leaf_Area", label: "Leaf Area", format: { digitSeparator: true, places: 0 } } ] } ] }; var Cyber_Areas = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0", outFields: ["*"], popupTemplate: template }); map = new Map({ basemap: "osm" }); map.add(Cyber_Areas); view = new MapView({ container: "viewDiv", map: map, center: [-82.44119304356839, 35.61044834995553], // lon, lat zoom: 16 }); var searchWidget = new Search({ view: view, popupOpenOnSelect: false, sources: [{ layer: Cyber_Areas, searchFields: ["Cmn_Name"], displayField: "Cmn_Name", exactMatch: false, outFields: ["*"], name: "Trees", placeHolder: "example: elm" }], includeDefaultSources: false }); view.ui.add(searchWidget, { position: "top-left", index: 0 }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BenPeters1 · Answer

Hi Robert,

Thanks for the answer. That makes sense - I suppose that I was under the impression that referencing the variable popupCustom with popupTemplate within the Cyber_Areas featurelayer declaration would associate the search widget popup information with that of Cyber_Areas.

That being said, I'm a JS beginner, & am uncertain of how I can properly reference my feature layer. Do you know if it is it still possible using popupTemplate, & if so what I would need to add/look into? Or if the popupTemplate class will not work out for my purposes, what might?

p.s. the custom search widget text code (amongst many other troubleshooting answers I found related to Arc API) were answered by you - thanks for all of your help!