Hi All
Got the sample code from the link below
https://developers.arcgis.com/javascript/latest/sample-code/popup-custom-action/index.html
I have modified the attribute table to fit to my attribute table.
so from the sample if you click on the bewrey info, instead of linking to a website.
I want to Location attribute to be return as a table or json.
see the code below. I have set var info to get the LOCATION. How do I parse it so it shows as as a json format or table?
Solved! Go to Solution.
Henry,
You will have to have a table in your layout and then use domConstruct to dynamically add rows to that table. You can't just say return me an html table.
Henry,
Here is your code returning the location attribute to the console and some comments:
<!DOCTYPE html>
<html>
<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 - 4.4</title>
<style>
body {
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
<script src="https://js.arcgis.com/4.4/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/dom",
"dojo/domReady!"
], function(
Map, MapView, FeatureLayer, dom
) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [0.46564130, 51.736810],
zoom: 17
});
/********************
* Add feature layer
********************/
// sampling of breweries
var featureLayer = new FeatureLayer({
url: "https://services1.arcgis.com/BZNs0xaSHDSi4V6G/arcgis/rest/services/Esri_carparks/FeatureServer/0",
outFields: ["*"],
// definitionExpression: "country = 'United States'",
// add a custom action
popupTemplate: {
title: "{name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "LOCATION",
label: "Location"
}, {
fieldName: "NO_SPACES",
label: "No Spaces"
}, {
fieldName: "SATURDAY",
label: "Saturday"
}, {
fieldName: "WHO_OWNS",
label: "Owner"
}, {
fieldName: "USE_TIME",
label: "Use Time"
}, {
fieldName: "USE_TYPE",
label: "Use Type"
}]
}],
actions: [{
id: "find-ADDRESS",
title: "Parking Info"
}]
}
});
map.add(featureLayer);
//you do not have a html element with id of tbl.
// var resultsTable = dom.byId("tbl");
function showResults(response) {
// var results = response.results;
// Clear the cells and rows of the table to make room for new results
// resultsTable.innerHTML = "";
// if (results.length === 0) {
// resultsTable.innerHTML = "<i>No results found</i>";
// loadingImg.style.visibility = "hidden";
// return;
// }
console.info(response);
}
view.then(function() {
var popup = view.popup;
popup.viewModel.on("trigger-action", function(event) {
if (event.action.id === "find-ADDRESS") {
var attributes = popup.viewModel.selectedFeature.attributes;
// Get the "website" field attribute
var info = attributes.LOCATION;
// Make sure the "website" attribute value is not null
if (info !== null) {
// Open up a new browser using the URL value in the 'website' field
//CELL.open(info.trim());
showResults(info.trim());
// If the "website" value is null, open a new window and Google search the name of the brewery
}
}
});
});
});
</script>
</head>
<body class="light">
<div id="viewDiv">
</div>
</body>
</html>
Thanks Robert Scheitlin. Will the console get the attribution as html table or a text string?
Henry,
Just a text string.
I want to be able to see this text string in a table next to the mapview, how do I do this. I thought the tablediv will be useful
how do will the text string be played as a html or table div
Henry,
You will have to have a table in your layout and then use domConstruct to dynamically add rows to that table. You can't just say return me an html table.
Alright thank you
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question.