topic Re: Overriding a feature's infoTemplate using map.infoWindow.setContent() in ArcGIS JavaScript Maps SDK Questions

Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Tue, 23 Sep 2014 18:10:47 GMT

I have found that if I have an infoTemplate set for a feature layer, when I try to use map.infoWindow.setContent(attributeInspector) the infoTemplate content overrides it and continues to display.

If I first set

feature.setInfoTemplate()

with the blank parameters and then change the content, it works. Anyone know how to use map.infoWindow.destroyDijits or other methods to create a more elegant solution?

This JSFiddle demonstrates an infoTemplate overriding the setContent() method.

Edit fiddle - JSFiddle

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

JonathanUihlein — Tue, 23 Sep 2014 18:32:57 GMT

There are many ways to accomplish what you are trying to do, several of them highlighted in our documentation with complete samples and tutorials.

If you haven't read through our documentation, I highly suggest doing so.

If you don't want to use the infoTemplate defined in your FeatureService, you can create an infoTemplate client-side in your application.

The infoTemplate class also has a setContent() method.

Sample:

Format info window content | ArcGIS API for JavaScript

SDK Reference:

infotemplate-amd | API Reference | ArcGIS API for JavaScript

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Tue, 23 Sep 2014 18:46:33 GMT

Hi Jonathan - Thanks for the reply. I think I did not explain myself well, as I have read the documentation and did see a lot of information on formatting infoTemplates. The Fiddler I linked is also an adjusted sample from your documentation, showing my particular issue.

I am toggling between a feature layer's infoTemplate being displayed in the map infoWindow, and an Attribute Inspector dijit being displayed in the map infoWindow. I click a button to switch between the two, depending on whether a user wants to only view the attributes or to edit them. As the documentation stated, there can only be one infoWindow per map which I like, and the default in the map is to display a feature's infoTemplate in the map's infoWindow when it is clicked. I am trying to use infoWindow's setContent() method to overide the infoTemplate content when I try to substitute in the Attribute Inspector for editing. It does not work. Am I missing something?

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

ScottRutzmoser2 — Sat, 11 Dec 2021 22:22:40 GMT

Hi Sarah,

Have you tried something like:

map.infoWindow.setContent('<div id="tabsWrapper"> <div id="tabs" dojoType="dijit.layout.TabContainer" style="width:385px; height:150px"> <div id="summaryTab" dojoType="dijit.layout.ContentPane" title="Summary">this is tab1</div> <div id="detailTab" dojoType="dijit.layout.ContentPane" title="Detail">this is tab2</div> </div></div>'); 

dojo.parser.parse(dojo.byId("tabsWrapper"));

Looking at your JSFiddle you will also need to include dijit.layout.TabContainer, which should allow you to include tabs in you info window. You should (in theory) be able to attach the attributes using markup like <tr>Name: <td>${field_name}</tr></td> in a div the first tab and the attach the attribute editor to a div in the second tab. I think when you create the AttributeInspector you can pass it the ID of the div and it automagically appears. The key is to create this div in you info template...

Checkout this link, it illustrates how to attach the AttributeInspector to a div in a dojo AccordionContainer...this should be similar to the tab TabContainer

Attribute Inspector with one editable field | ArcGIS API for JavaScript

Hopefully this helps.

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Tue, 23 Sep 2014 22:55:12 GMT

Interesting Scott! I'm not sure if tabs might solve the issue. I would like to avoid more noise in the infoWindow, though. For now I am getting around it with:

feature.setInfoTemplate();
map.infoWindow.setContent(attInspector);

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Tue, 16 Dec 2014 18:08:30 GMT

Sarah,

Did you ever have any luck with this? I'm trying to do the same thing with the attribute inspector and the popupTemplate(to add charts to the infowindow). I've been hung up on being able to edit attributes and include a chart for one of my feature layers. Any ideas?

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Tue, 16 Dec 2014 19:06:47 GMT

Hi William - I haven't worked with charts yet, actually. However I am able to reset the the content of the pop-up to switch between the attribute inspector and a simple feature info template. What issues are you running into?

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Tue, 16 Dec 2014 19:42:09 GMT

Thanks for getting back at me.

I can only get one or the other to work at a time, pending on placement. I've tried a wide array of toggles, removing layers and now I started on the set content path. Still no luck.

Here is a fiddle based on your fiddle that produces the charts through the popup. Edit fiddle - JSFiddle .

I was just wondering how you manipulated initSelectToolbar? or if you even had to.

Thanks!

correction, that was your fiddle... here are the changes to the body.

var map;

var updateFeature;

require([

"esri/map",

"esri/layers/FeatureLayer",

"esri/dijit/AttributeInspector",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/Color",

"esri/dijit/Popup",

"esri/dijit/PopupTemplate",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/config",

"esri/tasks/query",

"dojo/parser",

"dojo/dom-class", "dojo/dom-construct", "dojo/on",

"dijit/form/Button",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function(

Map, FeatureLayer, AttributeInspector,

SimpleLineSymbol, SimpleFillSymbol, Color,Popup, PopupTemplate,

ArcGISDynamicMapServiceLayer, esriConfig,

Query,

parser, domClass, domConstruct, on, Button

) {

parser.parse();

// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/jshelp/ags_proxy.html

esriConfig.defaults.io.proxyUrl = "/proxy/";

var popup = new Popup({

titleInBody: false

}, domConstruct.create("div"));

map = new Map("mapDiv", {

basemap: "gray",

center: [-98.57, 39.82],

zoom: 4,

infoWindow: popup

});

map.on("layers-add-result", initSelectToolbar);

var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/MapServer");

petroFieldsMSL.setDisableClientCaching(true);

map.addLayer(petroFieldsMSL);

var petroFieldsFL = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/FeatureServer/0", {

mode: FeatureLayer.MODE_SELECTION,

outFields: ["approxacre", "objectid", "field_name", "activeprod", "cumm_oil", "cumm_gas", "avgdepth"]

});

var selectionSymbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_NULL,

new SimpleLineSymbol(

"solid",

new Color("yellow"),

null

);

petroFieldsFL.setSelectionSymbol(selectionSymbol);

petroFieldsFL.on("edits-complete", function() {

petroFieldsMSL.refresh();

});

map.addLayers([petroFieldsFL]);

function initSelectToolbar(evt) {

var asdf = evt.layers[0].layer;

var selectQuery = new Query();

map.on("click", function(evt) {

var selectionQuery = new esri.tasks.Query();

var tol = map.extent.getWidth()/map.width * 30;

var x = evt.mapPoint.x;

var y = evt.mapPoint.y;

var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

selectionQuery.geometry = queryExtent;

asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {

//store the current feature

updateFeature = features[0]; console.log("adf");

map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");

map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");

});

var layerInfos = [

{

'featureLayer': petroFieldsFL,

'showAttachments': false,

'isEditable': true,

'fieldInfos': [

{'fieldName': 'Serv_ID', 'isEditable': true, 'tooltip': 'Current Status', 'label': 'Status:'}

]

}

];

var attInspector = new AttributeInspector({

layerInfos: layerInfos

}, domConstruct.create("div"));

//add a save button next to the delete button

var saveButton = new Button({ label: "Save", "class": "saveButton"});

domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

saveButton.on("click", function() {

updateFeature.getLayer().applyEdits(null, [updateFeature], null);

});

var saveButton1 = new Button({ label: "Kill Greg", "class": "saveButton1"});

domConstruct.place(saveButton1.domNode, attInspector.deleteBtn.domNode, "after");

saveButton1.on("click", function() {

updateFeature.getLayer().applyEdits(null, [updateFeature], null);

});

attInspector.on("attribute-change", function(evt) {

//store the updates to apply when the save button is clicked

updateFeature.attributes[evt.fieldName] = evt.fieldValue;

});

attInspector.on("next", function(evt) {

updateFeature = evt.feature;

console.log("Next " + updateFeature.attributes.objectid);

});

attInspector.on("delete", function(evt) {

evt.feature.getLayer().applyEdits(null, null, [evt.feature]);

map.infoWindow.hide();

});

map.infoWindow.setContent(attInspector.domNode);

map.infoWindow.resize(350, 240);

}

var popupTemplate1 = new PopupTemplate({

title: "",

fieldInfos: [{

fieldName: "cumm_oil",

label: "Count of Points",

format: {

places: 0,

digitSeparator: true

}

}, {

fieldName: "cumm_oil",

label: "Sum of species tree count",

format: {

places: 0,

digitSeparator: true

statisticType: "sum"

}, {

fieldName: "cumm_oil",

label: "Common Name"

}, {

fieldName: "BLOCKCE10",

label: "Block"

}],

description: "Daily Beacon Reading",

showAttachments: false,

mediaInfos: [{

title: "",

type: "columnchart",

caption: "",

value: {

theme: "GreySkies",

fields: ["cumm_oil"],

normalizeField: null,

tooltipField: "cumm_oil"

}

}]

});

var featureLayer1 = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/FeatureServer/0", {

mode: FeatureLayer.MODE_SNAPSHOT,

infoTemplate: popupTemplate1,

outFields: ["*"]

});

map.addLayer(featureLayer1);

});

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Tue, 16 Dec 2014 20:23:16 GMT

I see, I think we had different goals because I only wanted one to show at a time. I did not test having them display at the same time.

I would suggest, assuming they cannot show at the same time since you tried that, putting a "chart" and "edit" button in your infoWindow. When either is clicked, it could switch the pop-ups display. In order to switch to the attribute inspector, destroy any infoTemplates by making that property blank (featureLayer.setInfoTemplate()) and then set the content to the attribute inspector.

This JS Fiddle has a button at the top that changes the chart display to the attribute inspector: Edit fiddle - JSFiddle

Sorry if you had thought of that. My only idea for displaying at the same time is to put the chart in a div on the side of the screen rather than trying to share the popup area.

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

YungKaiChin — Tue, 16 Dec 2014 20:40:55 GMT

When you get the result from your query (aka features), set template for each feature and then set features (an array of features) to infoWindow. Pseudo codes:

for (var feature in features){

feature.setInfoTemplate(new InfoTemplate(title, content));

}

map.infoWindow.setFeatures(features)

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Tue, 16 Dec 2014 21:03:51 GMT

Sarah Clark for the WIN!!! that is exactly what I was looking for. Thanks for the help and the insight!

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Mon, 22 Dec 2014 19:20:29 GMT

Sarah,

Sorry for bugging you again, but I ran into another issue. When I try to put this in with my current attribute inspector setup(working fine) it claims that the 'evt' is not defined. It will still allow the infowindows to be clicked on. Any ideas?

Thanks again.

map.on("click",function()

{

var option= registry.byId("selectfield");

var optionValue = option.value;

if (optionValue == "ON")

{console.log("adfasdfasdf");

asdf.setInfoTemplate();

initSelectToolbar(evt);

}

else { beacon1.setInfoTemplate(popupTemplate1);}

}

)

function initSelectToolbar(evt) {

var asdf = evt.layers[0].layer;

var selectQuery = new Query();

map.on("click", function(evt) {

var selectionQuery = new esri.tasks.Query();

var tol = map.extent.getWidth()/map.width * 15;

var x = evt.mapPoint.x;

var y = evt.mapPoint.y;

var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);

selectionQuery.geometry = queryExtent;

asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {

//store the current feature

updateFeature = features[0]; console.log("adf");

map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");

map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");

});

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Mon, 22 Dec 2014 19:25:21 GMT

You need to pass in 'evt' as a parameter, so at the very top in order to capture the click event ('evt') and pass it on, try putting:

map.on('click', function(evt) {....

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Mon, 22 Dec 2014 19:47:55 GMT

Now it's not liking this part... Is it an issue where my layers are added?

var asdf = evt.layers[0].layer;

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Mon, 22 Dec 2014 19:50:38 GMT

Yes, in this part it's assuming the first layer in the map's layer array is the one you want to be working with. You can print your map object to the console to find the index for the layer you actually want.

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Mon, 22 Dec 2014 20:17:52 GMT

Hrrmmm... Little stumped where to go from here. I'm not sure I understand why it's all of the sudden not defined upon adding popupTemplate. Is there an internal 'click' event that goes on in the popupTemplate? I'm not having luck with arrayUtils either.

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Mon, 22 Dec 2014 20:26:07 GMT

Is 'evt' still not defined, or the layer part is not working? If it's the layer you can try to automatically add it at index '0':

map.addLayer(yourLayer, 0);

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Mon, 22 Dec 2014 20:38:44 GMT

It's the 'evt'. I'm trying a different route, leaving the attribute inspector on and toggle off different infoWindows. I can get the toggle to work but destroying an info window is proving odd.

Appreciate your help, Sarah.

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

Anonymous User — Mon, 22 Dec 2014 20:42:22 GMT

I see. Well my 2 cents is that an infoWindow is a dijit and dealing with dijits is awful. Make sure you are deleting not the just the variable, but also using the 'destroy' method on the dijit.

Re: Overriding a feature's infoTemplate using map.infoWindow.setContent()

williamcarr — Mon, 22 Dec 2014 20:55:58 GMT

OH crap, you're right.. I'll keep tinkering to find something that works.