Hello,
I am developping a custom InfoWindow where I show multiple features popupTemplate inside one. However, I am looking for a way to get the content of a feature popupTemplate programmatically.
I have tried to access the content property of the popupTemplate which is a function, but it returns a node element that is not populated with the feature data.
feature.setInfoTemplate(layer.infoTemplate);
feature.infoTemplate.content().innerHTML;
"<div class=\"statusSection hidden\" dojoattachpoint=\"_status\"></div><div class=\"mainSection\"><div class=\"header\" dojoattachpoint=\"_title\"></div><div class=\"hzLine\"></div><div dojoattachpoint=\"_description\"></div><div class=\"break\"></div></div><div class=\"attachmentsSection hidden\"><div>Attachments:</div><ul dojoattachpoint=\"_attachmentsList\"></ul><div class=\"break\"></div></div><div class=\"mediaSection hidden\"><div class=\"header\" dojoattachpoint=\"_mediaTitle\"></div><div class=\"hzLine\"></div><div class=\"caption\" dojoattachpoint=\"_mediaCaption\"></div><div class=\"gallery\" dojoattachpoint=\"_gallery\"><div class=\"mediaHandle prev\" dojoattachpoint=\"_prevMedia\" dojoattachevent=\"onclick: _goToPrevMedia\"></div><div class=\"mediaHandle next\" dojoattachpoint=\"_nextMedia\" dojoattachevent=\"onclick: _goToNextMedia\"></div><ul class=\"summary\"><li class=\"image mediaCount hidden\" dojoattachpoint=\"_imageCount\">0</li><li class=\"image mediaIcon hidden\"></li><li class=\"chart mediaCount hidden\" dojoattachpoint=\"_chartCount\">0</li><li class=\"chart mediaIcon hidden\"></li></ul><div class=\"frame\" dojoattachpoint=\"_mediaFrame\"></div></div></div><div class=\"editSummarySection hidden\" dojoattachpoint=\"_editSummarySection\"><div class=\"break\"></div><div class=\"break hidden\" dojoattachpoint=\"_mediaBreak\"></div><div class=\"editSummary\" dojoattachpoint=\"_editSummary\"></div></div>"
What I would need is the content only with the attributes names and values as defined in Portal. Is there a way to achieve that?
Solved! Go to Solution.
It appears that the popupRenderer of the infoTemplate does not call its startup() method automatically when calling feature.getContent()
This is how I make it works
define(["dijit/registry"], function(registry) {
var infoContent = feature.getContent();
var popupRenderer = registry.byId(infoContent.id);
popupRenderer.startup();
console.log(infoContent.outerHTML)
});
"<div class=\"esriViewPopup\" id=\"esri_dijit__PopupRenderer_0\" widgetid=\"esri_dijit__PopupRenderer_0\"><div class=\"statusSection hidden\" dojoattachpoint=\"_status\"></div><div class=\"mainSection\"><div class=\"header\" dojoattachpoint=\"_title\">Parc</div><div class=\"hzLine hidden\"></div><div dojoattachpoint=\"_description\" class=\"hidden\"></div><div class=\"break\"></div></div><div class=\"attachmentsSection hidden\"><div>Attachments:</div><ul dojoattachpoint=\"_attachmentsList\"></ul><div class=\"break\"></div></div><div class=\"mediaSection\"><div class=\"header hidden\" dojoattachpoint=\"_mediaTitle\"></div><div class=\"hzLine hidden\"></div><div class=\"caption\" dojoattachpoint=\"_mediaCaption\">Jeu modulaire 2-5 ans</div><div class=\"gallery\" dojoattachpoint=\"_gallery\"><div class=\"mediaHandle prev hidden\" dojoattachpoint=\"_prevMedia\" dojoattachevent=\"onclick: _goToPrevMedia\" title=\"Previous media\"></div><div class=\"mediaHandle next hidden\" dojoattachpoint=\"_nextMedia\" dojoattachevent=\"onclick: _goToNextMedia\" title=\"Next media\"></div><ul class=\"summary hidden\"><li class=\"image mediaCount hidden\" dojoattachpoint=\"_imageCount\">0</li><li class=\"image mediaIcon hidden\"></li><li class=\"chart mediaCount hidden\" dojoattachpoint=\"_chartCount\">0</li><li class=\"chart mediaIcon hidden\"></li></ul><div class=\"frame image\" dojoattachpoint=\"_mediaFrame\" style=\"user-select: none;\"><img class=\"esriPopupMediaImage\" src=\"https://mydomain.com/Hyperliens/Parc/foo.jpg\"></div></div></div><div class=\"editSummarySection hidden\" dojoattachpoint=\"_editSummarySection\"><div class=\"break\"></div><div class=\"break hidden\" dojoattachpoint=\"_mediaBreak\"></div><div class=\"editSummary\" dojoattachpoint=\"_editSummary\"></div></div></div>"
Maxime,
Have you looked into the Graphics classes getContent method?
https://developers.arcgis.com/javascript/3/jsapi/graphic-amd.html#getcontent
Hi Robert,
Yes but it returns the same unpopulated domNode.
Maxime,
Hmm... Something is off then. The description of that method says:
Returns the content string based on attributes and infoTemplate values
I tested it like this.
1- I click on a feature on the map to display the infoWindow
2- then I do: window._widgetManager.map.infoWindow.features[0].getContent().outerHTML;
The output string is unpopulated. It does not match the content I see in the infoWindow
Maxime,
Here is the result of my getContent call.
POP2000 = 601<br/>HOUSEHOLDS = 334<br/>HSE_UNITS = 353<br/>TRACT = 000502<br/>BLOCK = 4000<br/>OBJECTID = 1718431<br/>
Based on this layer and infoTemplate:
var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {
infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"),
outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLOCK"]
});
It appears that the popupRenderer of the infoTemplate does not call its startup() method automatically when calling feature.getContent()
This is how I make it works
define(["dijit/registry"], function(registry) {
var infoContent = feature.getContent();
var popupRenderer = registry.byId(infoContent.id);
popupRenderer.startup();
console.log(infoContent.outerHTML)
});
"<div class=\"esriViewPopup\" id=\"esri_dijit__PopupRenderer_0\" widgetid=\"esri_dijit__PopupRenderer_0\"><div class=\"statusSection hidden\" dojoattachpoint=\"_status\"></div><div class=\"mainSection\"><div class=\"header\" dojoattachpoint=\"_title\">Parc</div><div class=\"hzLine hidden\"></div><div dojoattachpoint=\"_description\" class=\"hidden\"></div><div class=\"break\"></div></div><div class=\"attachmentsSection hidden\"><div>Attachments:</div><ul dojoattachpoint=\"_attachmentsList\"></ul><div class=\"break\"></div></div><div class=\"mediaSection\"><div class=\"header hidden\" dojoattachpoint=\"_mediaTitle\"></div><div class=\"hzLine hidden\"></div><div class=\"caption\" dojoattachpoint=\"_mediaCaption\">Jeu modulaire 2-5 ans</div><div class=\"gallery\" dojoattachpoint=\"_gallery\"><div class=\"mediaHandle prev hidden\" dojoattachpoint=\"_prevMedia\" dojoattachevent=\"onclick: _goToPrevMedia\" title=\"Previous media\"></div><div class=\"mediaHandle next hidden\" dojoattachpoint=\"_nextMedia\" dojoattachevent=\"onclick: _goToNextMedia\" title=\"Next media\"></div><ul class=\"summary hidden\"><li class=\"image mediaCount hidden\" dojoattachpoint=\"_imageCount\">0</li><li class=\"image mediaIcon hidden\"></li><li class=\"chart mediaCount hidden\" dojoattachpoint=\"_chartCount\">0</li><li class=\"chart mediaIcon hidden\"></li></ul><div class=\"frame image\" dojoattachpoint=\"_mediaFrame\" style=\"user-select: none;\"><img class=\"esriPopupMediaImage\" src=\"https://mydomain.com/Hyperliens/Parc/foo.jpg\"></div></div></div><div class=\"editSummarySection hidden\" dojoattachpoint=\"_editSummarySection\"><div class=\"break\"></div><div class=\"break hidden\" dojoattachpoint=\"_mediaBreak\"></div><div class=\"editSummary\" dojoattachpoint=\"_editSummary\"></div></div></div>"