From my (3D) custom widget in WAB Developer Edition 2.17, I need to define featureLayer popupTemplate that will display a table of the field names and field values, very much like the default popup (e.g. when I click on a feature).
The reason is that I need to "immitate" esri default popupTemplate.
I will appreciate help.
I tried:
featureLayer.popupTemplate = {
"title": `${layerTitle}`,
"content": featurePointed => {
const dv = document.createElement("div");
let num = featureLayer.fields.length;
dv.style.height = `${num * 20}px`;
featureLayer.fields.forEach(field => {
let row = document.createElement('li');
row.feature = featurePointed;
row.textContent = `Name: ${field.name} Value: ${featurePointed.graphic.attributes[field.name]}`;
dv.appendChild(row);
});
return dv;
}
};
But the values are all "undefined", I want it to be sorted by name, and this is yet not a table....
I saw in esri Featurelayer doc, that by setting Popup.defaultPopupTemplateEnabled = true I can enable the default popup, but I don't know how to do it.
note: See also my other question
Help will be greatly appreciated.
Michael
Solved! Go to Solution.
Michael,
In that case then use the defaultPopupTemplateEnabled property you mentioned earlier.
this.view.popup.defaultPopupTemplateEnabled = true;
Michael,
This 4.x sample shows what you need to do to get a table like display in a popup.
Dear Robert Scheitlin, GISP,
That example "knows" all field names.
I need this popup for my "AddShapefile" custom widget.
I elaborated in my other question that somehow, I don't know why, the shapefile is added to the scene, but the default pop-up is NOT opened (is there a solution?)
So I am forced to CREATE a popupTemplate... As the widget code knows NOTHING about field names, I am forced to create popupTemplate that will act similar to the default popupTemplate without knowing a-priory the field names. So, that example you pointed is not relevant.
I tried to use FeatureTable widget, but it displaye the whole attribute table, whilst I need only for the pointed feature...
I tried to implement definitionExpression, then the FeatureTable displayed only for the pointed feature, but all other features has been eliminated from the scene...
I tried to query the layer in order to get the attributes of the single pointed feature, but then I need to create FeatureLayer from the result in order to activate the FeatureTable on it, but I don't know how to create FeatureLayer from the result...
So my question remains - How to display a table of all field values for a pointed feature (like the default popupTemplate)?
Please help me since I'm stuck...
Michael
Michael,
In that case then use the defaultPopupTemplateEnabled property you mentioned earlier.
this.view.popup.defaultPopupTemplateEnabled = true;
Dear Robert Scheitlin, GISP,
Thank you! it works!
Please, can you help me know if one of the other options could also be implemented:
featureLayer.popupTemplate = {
"title": `${layerTitle} - ${featureLayer.fields.length} fields`,
"content": featurePointed => {
let idName = featureLayer.fields[0].name;
let idValue = featurePointed.graphic.attributes[idName];
const query = featureLayer.createQuery();
query.where = `${idName} = ${idValue}`;
query.outFields = ['*'];
query.returnGeometry = false;
ofekUtils.log(`idName: "${idName}", idValue: "${idValue}"`);
//featureLayer.definitionExpression = query.where;
featureLayer.queryFeatures(query)
.then(result => {
resultAsText = JSON.stringify(result);
console.log(resultAsText);
let p = result.features[0].attributes;
let dvContainer = document.createElement("div");
let dvTable = document.createElement("div");
dvContainer.setAttribute("class", "container");
dvTable.setAttribute("id", "tableDiv");
dvTable.style.height = `240px`;
dvContainer.appendChild(dvTable);
for (let key in p) {
if (p.hasOwnProperty(key)) {
let row = document.createElement('li');
row.textContent = `${key} -- ${p[key]}`;
dvTable.appendChild(row);
}
}
return dvContainer;
})
.catch(er =>
alert('Error executing query to get types ' + er));
}
};