AnsweredAssumed Answered

Multiple accordion panes js

Question asked by gmforthun on Sep 29, 2014
Latest reply on Sep 29, 2014 by timw1984

I am using an older version of accordion panes and can only figure out how to add one pane to the legend pane.  I need multiple panes but I don't know what to change in my js to tell it to go into the other pane. 

 

This is the JS

var map, GeoRSSLayer, legendLayers = [];

function init() {
   
  var popupOptions = {
   marginLeft: "20",
   marginTop: "20"
    };

//create a popup to replace the map's info window
  var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));

 

var popupTemplate = new esri.dijit.PopupTemplate({
   title: "Traffic Control Points",
   fieldInfos: [
   {fieldName: "Location", visible: true, label:"Location"},
   {fieldName: "County", visible: true, label:"County"},
   {fieldName: "TCP_Number", visible: true, label:"TCP ID"},
   {fieldName: "One_Op_Per", visible: true, label:"Agency(ies) and # on Shift"},
   {fieldName: "OPS_Sec__C", visible: true, label:"Ops Section"},
   {fieldName: "DIV_Sup__C", visible: true, label:"Div Supervisor"},
   {fieldName: "AGENCY__CG", visible: true, label:"Agency"},
   ],
   showAttachments:true
  });
  var tcpLayer = new esri.layers.FeatureLayer("http",{
   mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
   infoTemplate: popupTemplate,
   outFields: ["Location", "County", "TCP_Number", "One_Op_Per", "OPS_Sec__C", "DIV_Sup__C", "AGENCY__CG"]
  });
   legendLayers.push({layer:tcpLayer, title:'Traffic Control Points'});
    tcpLayer.setDefinitionExpression();    
     tcpLayer.setVisibility(false);

//Begin legend
   dojo.connect(map, 'onLayersAddResult', function (results) {
 
  var legend = new esri.dijit.Legend({
   map:map,
   layerInfos:legendLayers
  }, "legendDiv");
   legend.startup();
  });   
     
  map.addLayers([ tcpLayer ]);
 
  

//add check boxes
   dojo.connect(map, 'onLayersAddResult', function (results) {

//add check boxes
   dojo.forEach(legendLayers, function (layer) {
  var layerName = layer.title;
  var checkBox = new dijit.form.CheckBox({
   name:"checkBox" + layer.layer.id,
   value:layer.layer.id,
   checked:layer.layer.visible,
   onChange:function (evt) {
  var clayer = map.getLayer(this.value);
   clayer.setVisibility(!clayer.visible);
   this.checked = clayer.visible;
   }
  });

//add the check box and label to the toc
   dojo.place(checkBox.domNode, dojo.byId("toggle"), "after");
  var checkLabel = dojo.create('label', {'for':checkBox.name, innerHTML:layerName}, checkBox.domNode, "after");
   dojo.place("<br />", checkLabel, "after");
   });
  });

}
   dojo.addOnLoad(init);

 

So this goes into the first pane after the legend pane called DPS.  Now I need to do the same thing but have the layer go to another pane call Pane2.  What needs to be changed in the above code to do this?

 

This is the html

<div data-dojo-type="dijit/layout/AccordionContainer">

  

   <div data-dojo-type="dijit/layout/ContentPane" id="legend"

    data-dojo-props="title:'Legend', selected:true">

       <div id="legendDiv"></div> 

   </div>

 

   <div data-dojo-type="dijit/layout/ContentPane" id="DPS"

    data-dojo-props="title:'DPS'">

    <div id="toggle" style="padding: 2px 2px;"></div>

    </div>

  

  

   <div data-dojo-type="dijit/layout/ContentPane" id="Pane2"

    data-dojo-props="title:'Pane2'">

     <div id ="toggle" style="padding: 2px 2px;"></div>

   </div>

 

</div>

  </div>

map section

</div>

 

Thank you.

Outcomes