topic Re: ArcGIS Javascript API 3.29 - Get PopupTemplate content in ArcGIS JavaScript Maps SDK Questions

ArcGIS Javascript API 3.29 - Get PopupTemplate content

MaximeDemers — Sun, 12 Dec 2021 01:23:32 GMT

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?

Re: ArcGIS Javascript API 3.29 - Get PopupTemplate content

RobertScheitlin__GISP — Wed, 16 Oct 2019 17:19:57 GMT

Maxime,

Have you looked into the Graphics classes getContent method?

https://developers.arcgis.com/javascript/3/jsapi/graphic-amd.html#getcontent

Re: ArcGIS Javascript API 3.29 - Get PopupTemplate content

MaximeDemers — Wed, 16 Oct 2019 18:17:37 GMT

Hi Robert,

Yes but it returns the same unpopulated domNode.

Re: ArcGIS Javascript API 3.29 - Get PopupTemplate content

RobertScheitlin__GISP — Wed, 16 Oct 2019 18:24:22 GMT

Maxime,

Hmm... Something is off then. The description of that method says:

Returns the content string based on attributes and infoTemplate values

Re: ArcGIS Javascript API 3.29 - Get PopupTemplate content

MaximeDemers — Wed, 16 Oct 2019 18:44:45 GMT

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

Re: ArcGIS Javascript API 3.29 - Get PopupTemplate content

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:23:34 GMT

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"]  
      });‍‍‍‍

Re: ArcGIS Javascript API 3.29 - Get PopupTemplate content

MaximeDemers — Sun, 12 Dec 2021 01:23:37 GMT

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>"