Populating a Popup from a dojoGrid feature

JayHill · ‎05-18-2017

We have populated a dojoGrid with the search results from a feature class and now when it zooms to a selected feature in the grid it zooms and opens a blank popup but cannot figure out how to populate it. This is with the 4.3 API

grid.on("RowClick", function(evt){
console.log(results);
   var idx = evt.rowIndex;
   //console.log(idx);
   rowData = grid.getItem(idx);
   //console.log(rowData);
   document.getElementById("results").innerHTML =
   "You have clicked on " + rowData.SampleID + ".";
   //console.log(rowData.OBJECTID);

var cnt = results[idx].extent.center;
console.log(cnt);

   app.view.goTo({
   center: cnt, // position:
   zoom: 13
   });

   console.log(results[idx].feature);
   app.view.popup.open({
   features: results[idx].feature,
   //updateLocationEnabled: true,
   content: results[idx].feature.attributes,
   location: cnt
   });

}, true);

KellyHutchins · ‎05-19-2017

When you create the feature layer in the map you can define a popup template that determines how the popup will be populated when it is displayed for the selected feature. Here's a link to a sample from the help that shows how to define a popup template.

ArcGIS API for JavaScript Sandbox

JayHill · ‎05-22-2017

We have defined the popup but we are passing search results from the search widget as an array to a dataGrid. When the user clicks on a row item then the map zooms to that feature by pulling geometry and cannot figure how to fire the popup correctly with this method.

thejuskambi · ‎05-22-2017

Jay,

The features property in the parameter for popup.open method, is an array of Graphics, not a single feature. Also content will not take attributes, below is the documentation of Popup.content.

The content of the popup. When set directly on the Popup, this content is static and cannot use fields to set content templates. To set a template for the content based on field or attribute names, see PopupTemplate.content.

Do you get any errors in the console?

See if setting popup.visible = true helps.

KellyHutchins · ‎05-22-2017

If you already have the popup template defined then you should be able to display the popup using popup.open and passing in an array with your selected feature. Here's a snippet from a help sample that shows this.

if (result) {
// open the popup at the centroid of zip code polygon
// and set the popup's features which will populate popup content and title.
view.popup.open({
features: [result],
location: result.geometry.centroid
});
}

And here is the full sample.

ArcGIS API for JavaScript Sandbox

If this approach isn't working for you do you have a working version of your code that you can share?

JayHill · ‎05-22-2017

Popup still not working. Below is the code.

require([

"dojo/query",
"esri/layers/MapImageLayer",
"esri/layers/FeatureLayer",
"esri/PopupTemplate",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Popup",
"esri/widgets/Search",
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
"dojo/request",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/data/ItemFileReadStore",
"dojox/grid/DataGrid",
"dojox/math/round",
"dojo/domReady!"

], function(query, MapImageLayer, FeatureLayer, PopupTemplate, LayerList, Legend, Popup, Search, SimpleMarkerSymbol, SimpleRenderer, QueryTask, Query, GraphicsLayer, request, Memory, ObjectStore, ItemFileReadStore, DataGrid, mathRound, dom) {

// create popup template content for use clicks
function createClickContentCarbon(featureSet){
var content = "";
var att = featureSet.graphic.attributes;

if(att.SampleID){
content += "Sample ID: " + "" + att.SampleID + " ";
}
if(att.SampleMaterial){
content += "Sample Material: " + att.SampleMaterial + " ";
}
if(att.Project){
content += "Project Name: " + att.Project + " ";
}
if(att.DatingType){
content += "Dating Type: " + att.DatingType + " ";
}
if(att.ConventionalAge){
content += "Age: " + att.ConventionalAge + " ± " + att.Conventional1Sigma + " ";
}
if(att.CalibratedAge1A != null && att.CalibratedAge1B != null && att.CalibratedAge1Unit != null && att.CalibratedAge1Sigma != null){
content += "Calibrated Age: " + att.CalibratedAge1A + " - " + att.CalibratedAge1B + att.CalibratedAge1Unit + ", " + att.CalibratedAge1Sigma + " ";
} else if (att.CalibratedAge1A == null && att.CalibratedAge1B != null && att.CalibratedAge1Unit != null && att.CalibratedAge1Sigma != null){
content += "Calibrated Age: " + "" + " - " + att.CalibratedAge1B + att.CalibratedAge1Unit + ", " + att.CalibratedAge1Sigma + " "
} else if (att.CalibratedAge1A != null && att.CalibratedAge1B == null && att.CalibratedAge1Unit != null && att.CalibratedAge1Sigma != null){
content += "Calibrated Age: " + att.CalibratedAge1A + " - " + "" + att.CalibratedAge1Unit + ", " + att.CalibratedAge1Sigma + " "
} else if (att.CalibratedAge1A != null && att.CalibratedAge1B != null && att.CalibratedAge1Unit == null && att.CalibratedAge1Sigma != null){
content += "Calibrated Age: " + att.CalibratedAge1A + " - " + att.CalibratedAge1B + "" + ", " + att.CalibratedAge1Sigma + " "
} else if (att.CalibratedAge1A != null && att.CalibratedAge1B != null && att.CalibratedAge1Unit != null && att.CalibratedAge1Sigma == null){
content += "Calibrated Age: " + att.CalibratedAge1A + " - " + att.CalibratedAge1B + att.CalibratedAge1Unit + ", " + "" + " "
}
if(att.LabReportsRS){
content += "Detailed Report: " + "<a href=" + "https://geodata.geology.utah.gov/pages/view.php?ref=" + att.LabReportsRS + " target='_blank'>Opens in new tab";
} else if (att.LabReportsRS == null){
content += "Detailed Report: Detailed report not currently available";
}
return content;
}

// create popup template content for use clicks
function createClickContentLum(featureSetLum){
var contentLum = "";
var att = featureSetLum.graphic.attributes;

if(att.SampleID){
contentLum += "Sample ID: " + "" + att.SampleID + " ";
}
if(att.SampleMaterial){
contentLum += "Sample Material: " + att.SampleMaterial + " ";
}
if(att.Project){
contentLum += "Project Name: " + att.Project + " ";
}
if(att.DatingType){
contentLum += "Dating Type: " + att.DatingType + " ";
}
if(att.ConventionalAge){
contentLum += "Age: " + att.ConventionalAge + " ± " + att.Conventional1Sigma + " ";
}
if(att.LabReportsRS){
contentLum += "Detailed Report: " + "<a href=" + "https://geodata.geology.utah.gov/pages/view.php?ref=" + att.LabReportsRS + " target='_blank'>Opens in new tab";
} else if (att.LabReportsRS == null){
contentLum += "Detailed Report: Detailed report not currently available";
}
return contentLum;

}

function createClickContentArgon(featureSetAr){
var contentAr = "";
var att = featureSetAr.graphic.attributes;

if(att.SampleID){
contentAr += "Sample ID: " + "" + att.SampleID + " ";
}
if(att.SampleMaterial){
contentAr += "Sample Material: " + att.SampleMaterial + " ";
}
if(att.Project){
contentAr += "Project Name: " + att.Project + " ";
}
if(att.DatingType){
contentAr += "Dating Type: " + att.DatingType + " ";
}
if(att.Age){
contentAr += "Age: " + att.Age + " ± " + att.AgeRange + " ";
}
if(att.LabReportRS){
contentAr += "Detailed Report: " + "<a href=" + "https://geodata.geology.utah.gov/pages/view.php?ref=" + att.LabReportRS + " target='_blank'>Opens in new tab";
} else if (att.LabReportRS == null){
contentAr += "Detailed Report: Detailed report not currently available";
}
return contentAr;

}

function createClickContentPro(featureSetPro){
var contentPro = "";
var att = featureSetPro.graphic.attributes;

if(att.ProjectID){
contentPro += "Project ID: " + "" + att.ProjectID + " ";
}
if(att.ProjectName){
contentPro += "Project Name: " + att.ProjectName + " ";
}
if(att.ProjectType){
contentPro += "Project Type: " + att.ProjectType + " ";
}
if(att.OrgName){
contentPro += "Organization Name: " + att.OrgName + " ";
}
return contentPro;

}

var layer = new MapImageLayer({
url: "https://maps.geology.utah.gov/arcgis/rest/services/Hazards/Geochronology/MapServer",
title: "Geochronology Samples",
sublayers: [
{
id: 0,
visible: true,
title: "Radiocarbon",
popupTemplate: {
title: "Radiocarbon",
content: createClickContentCarbon
},
},
{
id: 1,
visible: true,
title: "Argon",
popupTemplate: {
title: "Argon",
content: createClickContentArgon },
},
{
id: 2,
visible: true,
title: "Luminescence",
popupTemplate: {
title: "Luminescence",
content: createClickContentLum },
},
{
id: 3,
visible: true,
title: "Project",
popupTemplate: {
title: "Project Area",
content: createClickContentPro },
}
]
});

app.view.map.add(layer);

var lgdiv = query("#collapseLegend > .panel-body"); //returns an array with 1 item.
app.legend = new Legend({
view: app.view,
}, lgdiv[0]);

var lyrdiv = query("#collapseLayers > .panel-body"); //returns an array with 1 item.
app.layerList = new LayerList({
view: app.view,
}, lyrdiv[0]);

var grid = new DataGrid({
class: "grid",
//store: test_store,
//query: { id: "*" },
structure: [
{ name: "Sample ID", field: "SampleID", width: "15%" },
{ name: "Project", field: "Project", width: "15%" },
{ name: "Material", field: "SampleMaterial", width: "15%" },
{ name: "objectid", field: "OBJECTID", width: "50%", hidden:true },
{ name: "Dating Type", field: "DatingType", width: "50%" }

]
}, "grid");
grid.startup();

/// START SEARCH code
//app.searchWidgetNav.search(app.searchWidgetNav.selectedResult.name);
app.searchWidgetNav.allPlaceholder = "Find Project or Sampled By";
app.searchWidgetNav.activeSourceIndex = "1"; // to make faults default source, change to 0 ?

app.searchWidgetNav.on("search-complete", function(e){
//console.log(e);
app.view.popup.clear(); // close popup if its open from last search
var results = null; // clear old searches
var results = e["results"][0].results;
console.log(results);

var srch = {"items": [ ]};
console.log(srch);
results.forEach(function (ftrs, n) {
//srch = dojo.map(results, function(ftrs, n){
//console.log(ftrs.feature.attributes);
var att = ftrs.feature.attributes;
// we need to somehow add the geometry or at least center point to the attributes, and hide it in the table
// then when user clicks on table, we'll get that att and zoom to the feature
// att.geometry.push("stuff");
console.log(att);
srch.items.push( att );
// return ftrs.feature.attributes;
});

if (srch){

console.log("lets see if it works now!");
console.log(srch);

var newgrid = dijit.byId("grid");
//console.log(newgrid);

// var newstore = new Memory({ data: items }); //, idProperty: "id"
// var test_store = new ObjectStore({objectStore: store});
var test_store = new ItemFileReadStore({data: srch});

grid.setStore(test_store);

grid.on("RowClick", function(evt){
console.log(results);
var idx = evt.rowIndex;
//console.log(idx);
rowData = grid.getItem(idx);
//console.log(rowData);
document.getElementById("results").innerHTML =
"You have clicked on " + rowData.SampleID + ".";
//console.log(rowData.OBJECTID);

var cnt = results[idx].extent.center;
console.log(cnt);

app.view.goTo({
center: cnt, // position:
zoom: 13
});

console.log(results[idx]);
// do we have to .clone() the feature? Or getEffectivePopupTemplate()
//app.view.popup.visible = true;
app.view.popup.open({
//features: [results[idx]],
//updateLocationEnabled: true,
//title: "I am a feature",
//content: results[idx],
location: cnt
});

}, true);

} // end if

});

app.searchWidgetNav.on("search-start", function(e) {
app.view.popup.close(); //close previous popup when starting new search
});

app.searchWidgetNav.on("search-clear", function(e) {
//console.log(e);
// I only want to hide fault search panel here NOT, other calicite panels like layer legend
query("#panelMessage").collapse("hide"); // so I use these instead
query("#collapseMessage").collapse("hide");
});

var sources = [
{
featureLayer: new FeatureLayer({
url: "https://maps.geology.utah.gov/arcgis/rest/services/Hazards/Geochronology/MapServer/0",
outFields: ["Project", "SampleID", "SampleMaterial", "DatingType","ConventionalAge", "CalibratedAge1A", "Conventional1Sigma", "CalibratedAge1B", "CalibratedAge1Unit", "LabReportsRS"],
popupTemplate: {
title: "Radiocarbon",
content: createClickContentCarbon
// visible: true
}
}),
popupEnabled: true,
displayField: "Project", // see FeatureLayerSource API Reference
searchFields: ["Project","SampledBy"], // see FeatureLayerSource API Reference
name: "Carbon Search",
maxResults: 100,
maxSuggestions: 16,
minSuggestCharacters: 2,
//enableInfoWindow: true,
//exactMatch: false, // default is false, unneeded
popupOpenOnSelect: true,
resultSymbol: new SimpleMarkerSymbol({
size: 10,
color: [255, 255, 0], //[255, 255, 0, .9]
width: 3
}),
//zoomScale: 100000, // use this or searchExtent
//searchExtent: extent, // use this or zoomScale
},
{
featureLayer: new FeatureLayer({
url: "https://maps.geology.utah.gov/arcgis/rest/services/Hazards/Geochronology/MapServer/1",
outFields: ["Project", "SampleID", "SampleMaterial", "DatingType","Age", "AgeRange", "LabReportRS"],
popupTemplate: {
title: "Argon",
content: createClickContentArgon
// visible: true
}
}),
popupEnabled: true,
displayField: "Project", // see FeatureLayerSource API Reference
searchFields: ["Project","SampleBy"], // see FeatureLayerSource API Reference
name: "Argon Search",
maxResults: "100",
maxSuggestions: 16,
minSuggestCharacters: 2,
//enableInfoWindow: true,
//exactMatch: false, // default is false, unneeded
popupOpenOnSelect: true,
resultSymbol: new SimpleMarkerSymbol({
size: 10,
color: [255, 255, 0], //[255, 255, 0, .9]
width: 3
}),
//zoomScale: 100000, // use this or searchExtent
//searchExtent: extent, // use this or zoomScale
},
{
featureLayer: new FeatureLayer({
url: "https://maps.geology.utah.gov/arcgis/rest/services/Hazards/Geochronology/MapServer/2",
outFields: ["Project", "SampleID", "SampleMaterial", "DatingType","Age", "AgeRange", "LabReportRS"],
popupTemplate: {
title: "Luminescence",
content: createClickContentLum
// visible: true
}
}),
popupEnabled: true,
displayField: "Project", // see FeatureLayerSource API Reference
searchFields: ["Project","SampleBy"], // see FeatureLayerSource API Reference
name: "Luminescence Search",
maxResults: "100",
maxSuggestions: 16,
minSuggestCharacters: 2,
//enableInfoWindow: true,
//exactMatch: false, // default is false, unneeded
popupOpenOnSelect: true,
resultSymbol: new SimpleMarkerSymbol({
size: 10,
color: [255, 255, 0], //[255, 255, 0, .9]
width: 3
}),
//zoomScale: 100000, // use this or searchExtent
//searchExtent: extent, // use this or zoomScale
}

];

app.searchWidgetNav.sources = sources; // or for new source searchWidget.sources.push({ ... });

});

KellyHutchins · ‎05-22-2017

Looks like you've commented out setting the feature?

app.view.popup.open({
//features: [results[idx]],

Also if you could put the code into something like JSBin so you have a working sample it would make it easier to test and troubleshoot.

JayHill · ‎05-22-2017

JS Bin - Collaborative JavaScript Debugging

JayHill · ‎05-22-2017

Ya sorry I was trying some different options, forgot to un comment it.

KellyHutchins · ‎05-22-2017

The JSBin doesn't seem to be working? Looks like there is some crucial code missing or the code needs to be simplified to remove the unnecessary bits of code.