topic Re: How to Place info window in sidebar in ArcGIS JavaScript Maps SDK Questions

How to Place info window in sidebar

aubinmaynard — Sat, 11 Dec 2021 06:11:40 GMT

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]

Re: How to Place info window in sidebar

JeffJacobson — Fri, 14 Jun 2013 14:51:31 GMT

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"?

Re: How to Place info window in sidebar

aubinmaynard — Fri, 14 Jun 2013 18:42:02 GMT

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>$ ' + graphic.attributes.Cost + " " +
'<b>Cost/Imp. Acre:</b>$ ' + ARP_costperimp + "<br></div>" +
'<div id="popuplinestyle"> <b>Modified ARP/New Est.Cost:</b>$ ' + cost + " " +
'<b>Cost/Imp. Acre:</b>$ ' + 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]

Re: How to Place info window in sidebar

BrittneyGibbons — Fri, 14 Jun 2013 19:36:51 GMT

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.

Re: How to Place info window in sidebar

aubinmaynard — Tue, 18 Jun 2013 11:01:32 GMT

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......