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

7280
19
09-23-2014 11:10 AM
by Anonymous User
Not applicable

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

0 Kudos
19 Replies
JonathanUihlein
Esri Regular Contributor

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

0 Kudos
by Anonymous User
Not applicable

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?

0 Kudos
ScottRutzmoser2
New Contributor III

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.

0 Kudos
by Anonymous User
Not applicable

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

0 Kudos
williamcarr
Occasional Contributor II

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?

0 Kudos
by Anonymous User
Not applicable

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?

0 Kudos
williamcarr
Occasional Contributor II

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

                2

            ),

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

     

 

     

     

             

      });

0 Kudos
by Anonymous User
Not applicable

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.

0 Kudos
williamcarr
Occasional Contributor II

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

0 Kudos