nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Anonymous User

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

Find more posts tagged with

Accepted answers

All comments

YungKaiChin

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)

Anonymous User

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?

williamcarr

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?

Anonymous User

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);

ScottRutzmoser2

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.

Anonymous User

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?

JonathanUihlein

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.