How to Place info window in sidebar

[aubinmaynard]

Is there a way to place the infowindow in a sidebar using infoWindow.place or some other method, rather than having it open in the map?  I"m using version 3.5, although much of the code is transitional. I cannot implement this sample (http://developers.arcgis.com/en/javascript/jssamples/popup_sidepanel.html) at this time. 


Here is some more background.  I create the infoWindow:

var infoWindow = new esri.dijit.InfoWindow(null, dojo.create("map_infowindow"));
        infoWindow.startup();

Then infowindow is populated when a user clicks a graphic created from results of a query, using a template (not shown)

[HTML]var graphics = map.graphics.graphics;

var intersectedGraphics =[];


        //Create items array to be added to store's data
          var items = []; //all items to be stored in data store

          for (var i=0, il=results.features.length; i<il; i++) {
            
      var featureAttributes = results.features.attributes;
       var graphic = results.features;
   intersectedGraphics.push(graphic);
      items.push(featureAttributes);
              graphic.setSymbol(symbol);

var template = new esri.InfoTemplate();
//Set the infoWindow to open at the top right of the point at all times

            map.infoWindow.resize(400,350);
        template.setTitle("<b>${ProjID}</b>");
        template.setContent(getWindowContent);
         //template.show(getWindowContent);
    graphic.setInfoTemplate(template);
//Add graphic to the  graphics layer.
              map.graphics.add(graphic);
  //enable graphics to work with mouse events
     map.graphics.enableMouseEvents(graphic);
        map.infoWindow.place(dojo.byId("map_infowindow"), dojo.byId("sidebarinfo"), "first");



    }[/HTML]

[JeffJacobson]

I don't understand why you're using an info window if you don't want to display it on top of the map.

For what reason can you not "implement this sample"?

[aubinmaynard]

I don't understand why you're using an info window if you don't want to display it on top of the map.

For what reason can you not "implement this sample"?

First, I was suddenly asked to add the graphics attributes to a side panel rather than a info window on the map.  I've got a priority complicated page, and thought it would be easiest to add my existing tabbed infowindow template (below) to the sidebar somehow.  I've not implemented the on method and don't quite grasp how the sample is forcing the popup into the sidebar, so don't have time to switch the whole page over.  I realize this is a poor answer, but i was hoping there was a easy solution (its never easy).  Any pointers?

[HTML]var imagelist;

function getWindowContent(graphic) {

//get images and process emptyimage.  Must be coded to accept variables for subwatershed and id

var x="";
for (var i=1;i<11;i++)
  {

  x=x + text + subw + "/photo/" + pid + "_" + i + '.jpg" width="200" height="267"  onerror="this.style.visibility = ' + "'hidden'" + '"/>' + "<br>";
  }
var imagelist=x;
 
var namea= graphic.attributes.Project_Name;
    var nameb= graphic.attributes.Name;
  //make a tab container
        var tc = new dijit.layout.TabContainer({
          style: "width:100%;height:100%;"
        }, dojo.create("div"));
//displays new name, else ARP name
if(namea && namea!=""){
var name = namea;

}else {
var name = nameb;
console.log("test name3", namea +" B:"+nameb);

}

//calculate cost per imperviousness for ARP project
 
        var new_cost =graphic.attributes.EST_Cost;
     console.log("namea", namea + " nameb" + nameb);

      var ARPcost = graphic.attributes.Cost;
    var ARPImp_ac=graphic.attributes.Imp_ac;
    console.log("cost", new_cost);
  var new_imp_ac = graphic.attributes.Impervious_Ac;
   var ARP_costperimp = parseFloat(Math.round((ARPcost/ARPImp_ac) * 100) / 100).toFixed(0);
   var new_cost_imperv = parseFloat(Math.round((new_cost/new_imp_ac) * 100) / 100).toFixed(0);
   console.log("test name3", new_cost +" B:"+new_cost_imperv);

  if (new_cost && new_cost != "") {
var  cost= new_cost;
  var imp_ac = new_cost_imperv;
  }
  else {
   cost= "TBD";
   imp_ac = "TBD";
  }
        //display attribute information
    var cp1 = new dijit.layout.ContentPane({
          title: "Overview",
          content: '<div id="popuplinestyle"> <b>Status:</b><br></div>' +
'<div id="popuplinestyle"> <b>Name:</b> ' + name + "<br></div>" +
'<div id="popuplinestyle"> <b>Subwatershed:</b> ' + graphic.attributes.SubWS + "<br></div>" +
'<div id="popuplinestyle"> <b>Catchment/Tributary:</b> ' + graphic.attributes.Sub_Catchment + "<br></div>" +
'<div id="popuplinestyle"> <b>Hydrologic Unit:</b> ' + graphic.attributes.Unit + "<br></div>" +
'<div id="popuplinestyle"> <b>Project Type:</b> ' + graphic.attributes.ProjectTyp + "<br></div>" +
'<div id="popuplinestyle"> <b>Project Description:</b> ' + graphic.attributes.Desc_ + "<br></div>" +
'<div id="popuplinestyle"> <b>Ownership:</b> ' + graphic.attributes.Ownership + "<br></div>" +
'<div id="popuplinestyle"> <b>Drainag Area (ac):</b> ' + graphic.attributes.Drainage_Area + "<br></div>" +
'<div id="popuplinestyle"> <b>Impervious Area(ac):</b> ' + graphic.attributes.Imp_ac + "<br></div>" +
'<div id="popuplinestyle"> <b>ARP Est.Cost:</b>&#36; ' + graphic.attributes.Cost + "  " +
'<b>Cost/Imp. Acre:</b>&#36; ' + ARP_costperimp + "<br></div>" +
'<div id="popuplinestyle"> <b>Modified ARP/New Est.Cost:</b>&#36; ' + cost + "  " +
'<b>Cost/Imp. Acre:</b>&#36; ' + imp_ac + "<br></div>"
        });
        var cp2 = new dijit.layout.ContentPane({
          title: "Prioritization",
         content: '<div id="popuplinestyle"> <b>2009 ARP Imp. Score:</b> ' + graphic.attributes.Imp__Ac_ + "<br></div>" +
'<div id="popuplinestyle"> <b>2009 Tier Ranking:</b> ' + graphic.attributes.Rank + "<br></div>" +
'<div id="popuplinestyle"> <b>2009 Adjusted Benefit Score:</b> ' + graphic.attributes.Adj_Scor + "<br></div>" +
'<b>"Step Two" Project Score:</b>' + "TBD" + "<br></div>" +
'<div id="popuplinestyle"> <b>Cost Per Impervious Acre (Max 5pts.):</b> ' + "TBD" + "<br></div>" +
'<div id="popuplinestyle"> <b>Priority Subwatershed ( 5 pts.):</b> ' + "TBD" + "<br></div>" +
'<div id="popuplinestyle"> <b>Landownership (Max 10pts.):</b> ' + "TBD" + "<br></div>" +
'<div id="popuplinestyle"> <b>Estimated CPv(%) (Max 10pts.):</b> ' + "TBD" + "<br></div>" +
'<div id="popuplinestyle"> <b>Project Field Verified Status (Y):</b> ' + graphic.attributes.Field_Verification + "<br></div>" +
'<div id="popuplinestyle"> <b>ARP Project Concept Modification:</b> ' + graphic.attributes.ARP_Project_Concept_Modification + "<br></div>" +
'<div id="popuplinestyle"> <b>(Download Project Concept Report)TBD </b><Br>Must add verbal prioity </div>' 
        });

   var cp3 = new dijit.layout.ContentPane({
          title: "Images",
         //create array to cycle through photos and print if present
  
   content: "test" + graphic.attributes.SubWS + imagelist
  
        });
  var cp4 = new dijit.layout.ContentPane({
          title: "Documents/Maps",
         //'<b>Supplemental Maps</b><br>'
   content: '<div id="popuplinestyle"> <b>Supplemental Maps</b>' +  '<div id="popuplinestyle"><a href="http://www.anacostia.net/maps/dev/docs/sup/' + graphic.attributes.SubWS + '/landuse.pdf' +  '" target="_blank">Land Use</a></div> '+
'<div id="popuplinestyle"><a href="http://www.anacostia.net/maps/dev/docs/sup/' + graphic.attributes.SubWS + '/soils.pdf' +  '" target="_blank">Hydrologic Soils Group</a></div> '+
   
  '<div id="popuplinestyle"> <a href="http://www.anacostia.net/maps/dev/docs/sup/' + graphic.attributes.SubWS + '/imperviousness.pdf' +  '" target="_blank">Imperviousness</a> </div>'+
   
' <a href="http://www.anacostia.net/maps/dev/docs/sup/' + graphic.attributes.SubWS + '/outfalls.pdf' +  '" target="_blank">Storm Drain Outfalls</a> '+
   

    '<br><br>' +

'<b>Supplemental Documents</b><br>' +
  ' <a href="http://www.anacostia.net/maps/dev/docs/sup/Indian Creek/form/IC-L-01-S-3_SWM_Form.pdf' +  '" target="_blank"><div style="color:red">Project Concept Report</div></a> '+
   
  ' <a href="http://www.anacostia.net/maps/dev/docs/sup/' + graphic.attributes.SubWS + '/base.pdf' +  '" target="_blank">Subwatershed Baseline Conditions Report</a> '+
   
'<a href="' + graphic.attributes.SubWS +  '#search=' +  graphic.attributes.ProjID + ' " target="blank"/> ' + 'ARP Project Inventory</a>' 
   +  

  'Warning: Documents may take up to several minutes to load.' +

'<br>'  
        });
 
 
        tc.addChild(cp1);
        tc.addChild(cp2);
        tc.addChild(cp3);
        tc.addChild(cp4);



       
        return tc.domNode;
      }[/HTML]

[BrittneyGibbons]

I have something similar in one of my codes. Basically, as I loop through my query results, I generate p elements and then append these to a div in my side panel. Would you be able to append the tc.domNode generated by your function getWindowContent to a div rather than setting it as the content for the infoTemplate?  I haven't used tabbed infoWindows before so I'm not sure if the same would work for you, but it worked pretty nicely for me.

[aubinmaynard]

I have something similar in one of my codes. Basically, as I loop through my query results, I generate p elements and then append these to a div in my side panel. Would you be able to append the tc.domNode generated by your function getWindowContent to a div rather than setting it as the content for the infoTemplate?  I haven't used tabbed infoWindows before so I'm not sure if the same would work for you, but it worked pretty nicely for me.

Thanks, Should have thought of that.  I've successfully appended the getWindowContent to the sidebar, but cannot get those pesky tabs working (or even to appear).  I thought they would work like putting a dojo accordion container in a border container, but......