Trying to get data from popup attribute table into html element as value. Where the code below brings an array into the popup as content, i want to bring just one piece of that data into an input element as text i.e from the code below fieldinfos, fieldName: “name”. Name is one of the attribute columns from the attribute table of the map, i want to use that in separate query (which i know how to do). Sorry, I’m a real novice with javascript. Any help greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Custom popup actions per feature attribute | Sample | ArcGIS Maps SDK for
JavaScript 4.26
</title>
<style>
body {
padding: 0;
margin: 0;
height: 80%;
width: 80%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.26/"></script>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (
Map,
MapView,
FeatureLayer
) => {
const map = new Map({
basemap: "streets-navigation-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-101.94981250000075, 41.20977753557709],
zoom: 5
});
/********************
* Add feature layer
********************/
// sampling of breweries
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/OpenBeerDB/FeatureServer/0",
popupTemplate: {
title: "{name}",
lastEditInfoEnabled: false,
actions: [
{
id: "find-brewery",
image:
"https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/live/beer.png",
title: "Brewery Info"
}
],
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "name"
},
{
fieldName: "address1",
label: "address"
},
{
fieldName: "city"
},
{
fieldName: "state"
},
{
fieldName: "phone"
},
{
fieldName: "website"
}
]
}
]
}
});
map.add(featureLayer);
view.when(() => {
// Watch for when features are selected
view.popup.watch("selectedFeature", (graphic) => {
if (graphic) {
// Set the action's visible property to true if the 'website' field value is not null, otherwise set it to false
const graphicTemplate = graphic.getEffectivePopupTemplate();
graphicTemplate.actions.items[0].visible = graphic.attributes
.website
? true
: false;
}
});
const popup = view.popup;
popup.viewModel.on("trigger-action", (event) => {
if (event.action.id === "find-brewery") {
const attributes = popup.viewModel.selectedFeature.attributes;
document.getElementById("name") = "test";
// Get the 'website' field attribute
const info = attributes.website;
// Make sure the 'website' field value is not null
if (info) {
// Open up a new browser using the URL value in the 'website' field
window.open(info.trim());
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv" class="esri-widget" style="width:600px;height:600px;"></div>
</body>
</html>