Troubles getting identify attributes into a TabContainer

ShelleyDesautels1 — Wed, 28 May 2014 19:44:56 GMT

**Edit**

So I was able to get everything to work fine, still not sure what fixed it. Anyways, in a Content Pane, can I still run a switch case on my data so that calculations can be performed to populate my attributes field?

For example in an InfoTable i would have had:

//"<br><tr><b>Calculation needed: </b><td>${calculate:compare6}Ha</tr></td>"

And then below I would have put in

compare6 = function (value,key,data) {
 var result = "", diff;
perform calculation to get area
 switch (key) {
    case "calculate":
      diff = data.calculation1 - data.calculation2;
      break;
   
 }

How would this same task be performed when using graphic.attributes.data??

**END EDIT**
I have been struggling to get my attributes to show up in my TabContainer which I have placed inside an InfoTemplate.

 var infoWindow = new InfoWindow(null, domConstruct.create("div"));
 infoWindow.startup();
 map.infoWindow.resize(300,300);
//Operating area
var opareaTemplate = new InfoTemplate("Operating Area", "${OP_AREA}" )

//Create info template to hold the content inside
var vliTemplate = new esri.InfoTemplate();
vliTemplate.setTitle("VLI");
vliTemplate.setContent(getWindowContent);
//
function getWindowContent(graphic) {
//VQO
//make a tab container
var tc = new dijit.layout.TabContainer({
style:"width:100%;height:100%;",
useMenu: false,
useSlider:false,
}, dojo.create("div"));

//add content pane 1 and 2 - these are the tabs
var cp1 = new dijit.layout.ContentPane({
title: "Current",
content: "Visual: <tr><b>VLI Number:</b> <td>" + graphic.attributes.Tbl_ResultSummary_VQO_CFLBarea + "</tr></td>"
});
var cp2 = new dijit.layout.ContentPane({
title: "Approved",
content: "<br><tr><b>VQO: </b><td>\${Tbl_ResultSummary_VQO_EVQO_CD}</tr></td>"
});

tc.addChild(cp1);
tc.addChild(cp2);
return tc.domNode;
}

When I click on my layer service, I get the popup with the tabs as desired, however the attributes that are supposed to be collected from graphic.attributes.data shows up as "Undefined" and where I tried to replicate the code from my original infoTemplate code in my cp2 tab just show up as text: VQO: ${Tbl_ResultSummary_VQO_EVQO_CD}

What am I missing?

Re: Troubles getting identify attributes into a TabContainer

BenCamp — Thu, 29 May 2014 15:27:45 GMT

Were you able to get the first tab to populate on initial click? I used your code as an example and the first tab did not populate on initial click. The second tab populated on click and the first tab populated upon switching back from the second tab.

Does that make sense?

Re: Troubles getting identify attributes into a TabContainer

ShelleyDesautels1 — Sat, 11 Dec 2021 20:13:47 GMT

Were you able to get the first tab to populate on initial click? I used your code as an example and the first tab did not populate on initial click. The second tab populated on click and the first tab populated upon switching back from the second tab.

Does that make sense?

Actually, I did get it to work - i copied my cp2 stuff into cp1 and it worked just fine and I just built from there with beautiful results. I'm now faced with another issue though.

I have multiple service layers that I need to create these popups for. The first one (as shown above) works fine when clicked on, but then when I add a second infoTemplate and TabContainer, the window shows up empty (no error, no words...just empty) How do I make it work for multiple layers? Somehow it seems to only be calling the graphics layer for my first infoTemplate.

//VQO
//Create info template to hold the content inside
var vliTemplate = new InfoTemplate();
vliTemplate.setTitle("VLI");
vliTemplate.setContent(getWindowContent);

function getWindowContent(graphic) {
//make a tab container
var tc1 = new TabContainer({
style:"width:100%;height:100%;",
useMenu: false,
useSlider:false,
}, dojo.create("div"));

//add content pane 1 and 2 - these are the tabs
//set variables for calculations and for font colour changes
var cl = "green"
var greenedcur = number.round(graphic.attributes.Tbl_ResultSummary_VQO_HA - graphic.attributes.Tbl_ResultSummary_VQO_Not_Greened_Up_Ha,0);
var greenedapp = number.round(graphic.attributes.HA - graphic.attributes.Not_Greened_Up_Ha,0);
var surplusDefcur = number.round(graphic.attributes.Tbl_ResultSummary_VQO_Target_Ha - graphic.attributes.Tbl_ResultSummary_VQO_Not_Greened_Up_Ha,0);
 if (surplusDefcur < 0) 
 {
  cl = "red"
 };
var surplusDefapp = number.round(graphic.attributes.Target_Ha - graphic.attributes.Not_Greened_Up_Ha,0);
 if (surplusDefapp < 0)
 {
  cl = "red"
 };
var cp1vli = new ContentPane({
//add content to identity popup based on attributes of layer service
title: "Current",
content: "<b>VLI Number:</b><td>"+graphic.attributes.VLI_VLI_NO+"</tr></td>"+
"<br><tr><b>VQO: </b><td>"+graphic.attributes.Tbl_ResultSummary_VQO_EVQO_CD+"</tr></td>"+
"<br><tr><b>VAC: </b><td>"+graphic.attributes.Tbl_ResultSummary_VQO_VAC_FIN_CD+"</tr></td>"+
"<br><tr><b>CFLB Area: </b><td>"+number.round(graphic.attributes.Tbl_ResultSummary_VQO_CFLBarea,0)+" Ha</tr></td>"+
"<br><tr><b>THLB Area: </b><td>"+number.round(graphic.attributes.Tbl_ResultSummary_VQO_THLBarea,0) +" Ha</tr></td>"+
"<br><tr><b>Total Area: </b><td>"+number.round(graphic.attributes.Tbl_ResultSummary_VQO_HA,0) +" Ha</tr></td>"+
"<br><tr><b>Greened Up Height: </b><td>"+number.round(graphic.attributes.Tbl_ResultSummary_VQO_Height,0)+" m</tr></td>"+
"<br><tr><b>Not Greened Up CFLB: </b><td>"+number.round(graphic.attributes.Tbl_ResultSummary_VQO_Not_Greened_Up_Ha,0)+" Ha</tr></td>"+
"<br><tr><b>Greened Up CFLB:</b><td>"+greenedcur+" ha</tr></td>"+
"<br><tr><b>Maximum Target Percent: </b><td>"+number.round(graphic.attributes.Tbl_ResultSummary_VQO_Pct_tgt,0)+"%</tr></td>"+
"<br><tr><b>Maximum Target: </b><td>"+number.round(graphic.attributes.Tbl_ResultSummary_VQO_Target_Ha,0)+" Ha</tr></td>"+
"<br><tr><b>Surplus/Deficit: </b><td><font color = "+cl+">"+surplusDefcur+" Ha</font></tr></td>"
});

var cp2vli = new ContentPane({
title: "Approved",
content: "<b>VLI Number:</b><td>"+graphic.attributes.VLI_NO+"</tr></td>"+
"<br><tr><b>VQO: </b><td>"+graphic.attributes.EVQO_CD+"</tr></td>"+
"<br><tr><b>VAC: </b><td>"+graphic.attributes.VAC_FIN_CD+"</tr></td>"+
"<br><tr><b>CFLB Area: </b><td>"+number.round(graphic.attributes.CFLBarea,0)+" Ha</tr></td>"+
"<br><tr><b>THLB Area: </b><td>"+number.round(graphic.attributes.THLBarea,0) +" Ha</tr></td>"+
"<br><tr><b>Total Area: </b><td>"+number.round(graphic.attributes.HA,0) +" Ha</tr></td>"+
"<br><tr><b>Greened Up Height: </b><td>"+number.round(graphic.attributes.Height,0)+" m</tr></td>"+
"<br><tr><b>Not Greened Up CFLB: </b><td>"+number.round(graphic.attributes.Not_Greened_Up_Ha,0)+" Ha</tr></td>"+
"<br><tr><b>Greened Up CFLB:</b><td>"+greenedapp+" ha</tr></td>"+
"<br><tr><b>Maximum Target Percent: </b><td>"+number.round(graphic.attributes.Pct_tgt,0)+"%</tr></td>"+
"<br><tr><b>Maximum Target: </b><td>"+number.round(graphic.attributes.Target_Ha,0)+" Ha</tr></td>"+
"<br><tr><b>Surplus/Deficit: </b><td><font color = "+cl+">"+surplusDefapp+" Ha</font></tr></td>"
});
tc1.addChild(cp1vli);
tc1.addChild(cp2vli);
return tc1.domNode;
}
//#########################################################################################################################################
//Okanagan Mule Deer

var okmdTemplate = new InfoTemplate();
okmdTemplate.setTitle("Okanagan Mule Deer");
okmdTemplate.setContent(getWindowContent2);
function getWindowContent2(graphic2) {
//make a tab container
var tc2 = new TabContainer({
style:"width:100%;height:100%;",
useMenu: false,
useSlider:false,
}, dojo.create("div"));

//add content pane 1 and 2 - these are the tabs
//set variables for calculations and for font colour changes
//var cl = "green"
//var EarlyPCTcur = number.round(graphic2.attributes.CFLBarea * 0.3,0);
//var EarlyPCTapp = number.round(graphic2.attributes.CFLBarea_1 * 0.3,0);
/*var surplusDefcur1 = number.round((graphic2.attributes.CFLBarea*0.3) - graphic2.attributes.EarlyArea,0);
 if (surplusDefcur1 < 0) 
 {
  cl = "red"
 };
var surplusDefapp1 = number.round((graphic2.attributes.CFLBarea_1*0.3) - graphic2.attributes.EarlyArea_1,0);
 if (surplusDefapp1 < 0)
 {
  cl = "red"
 };
var surplusDefcur2 = number.round(graphic2.attributes.Total_Habitat - graphic2.attributes.SIC_Target_HA,0);
 if (surplusDefcur2 < 0) 
 {
  cl = "red"
 };
var surplusDefapp2 = number.round(graphic2.attributes.Total_Habitat_1 - graphic2.attributes.SIC_Target_HA_1,0);
 if (surplusDefapp2 < 0)
 {
  cl = "red"
 }; */
var cp1okmd = new ContentPane({
//add content to identity popup based on attributes of layer service
title: "Current",
content: "<tr><b>Planning Cell:</b> <td>"+graphic2.attributes.tuwr_u_8_001_pcell+" </tr></td>"+
"<br><tr><b>Contains Mod SPZ: </b><td>"+graphic2.attributes.Contains_Mod_SPZ+"</tr></td>"+
"<br><tr><b>IDFmw: </b><td>"+graphic2.attributes.IDFmw_1+"</tr></td>"+
"<br><tr><b>CFLB Area: </b><td>"+number.round(graphic2.attributes.CFLBarea,0)+" Ha</tr></td>"+
"<br><tr><b>Early Seral: </b><td>"+number.round(graphic2.attributes.EarlyArea,0)+" Ha</tr></td>"+
//"<br><tr><b>Early Max[30%] Target: </b><td>"+EarlyPCTcur+" Ha</tr></td>"+
//"<br><tr><b>Surplus Deficit: </b><td><font color = "+cl+">"+surplusDefcur1+" Ha</font></tr></td>"+
"<br><tr><b>THLB Cover Habitat: </b><td>"+number.round(graphic2.attributes.THLB_Habitat,0)+" Ha</tr></td>"+
"<br><tr><b>CFLB Cover Habitat: </b><td>"+number.round(graphic2.attributes.CFLB_Habitat,0)+" Ha</tr></td>"+
"<br><tr><b>Total Cover Habitat: </b><td>"+number.round(graphic2.attributes.Total_Habitat,0)+" Ha</tr></td>"+
"<br><tr><b>Cover [SIC] Minimum Target: </b><td>"+number.round(graphic2.attributes.SIC_Target_HA,0)+" Ha</tr></td>"
//"<br><tr><b>Surplus/Deficit: </b><td><font color = "+cl+">"+surplusDefcur2+" Ha</font></tr></td>"
});

var cp2okmd = new ContentPane({
title: "Approved",
content: "<tr><b>Planning Cell:</b> <td>"+graphic2.attributes.tuwr_u_8_001_pcell_12+" </tr></td>"+
"<br><tr><b>Contains Mod SPZ: </b><td>"+graphic2.attributes.Contains_Mod_SPZ_1+"</tr></td>"+
"<br><tr><b>IDFmw: </b><td>"+graphic2.attributes.IDFmw_1_1+"</tr></td>"+
"<br><tr><b>CFLB Area: </b><td>"+number.round(graphic2.attributes.CFLBarea_1,0)+" Ha</tr></td>"+
"<br><tr><b>Early Seral: </b><td>"+number.round(graphic2.attributes.EarlyArea_1,0)+" Ha</tr></td>"+
//"<br><tr><b>Early Max[30%] Target: </b><td>"+EarlyPCTapp+" Ha</tr></td>"+
//"<br><tr><b>Surplus Deficit: </b><td><font color = "+cl+">"+surplusDefapp1+" Ha</font></tr></td>"+
"<br><tr><b>THLB Cover Habitat: </b><td>"+number.round(graphic2.attributes.THLB_Habitat_1,0)+" Ha</tr></td>"+
"<br><tr><b>CFLB Cover Habitat: </b><td>"+number.round(graphic2.attributes.CFLB_Habitat_1,0)+" Ha</tr></td>"+
"<br><tr><b>Total Cover Habitat: </b><td>"+number.round(graphic2.attributes.Total_Habitat_1,0)+" Ha</tr></td>"+
"<br><tr><b>Cover [SIC] Minimum Target: </b><td>"+number.round(graphic2.attributes.SIC_Target_HA_1,0)+" Ha</tr></td>"
//"<br><tr><b>Surplus/Deficit: </b><td><font color = "+cl+">"+surplusDefapp2+" Ha</font></tr></td>"
});
tc2.addChild(cp1okmd);
tc2.addChild(cp2okmd);
return tc2.domNode;
}

topic Re: Troubles getting identify attributes into a TabContainer in ArcGIS JavaScript Maps SDK Questions

Troubles getting identify attributes into a TabContainer

Re: Troubles getting identify attributes into a TabContainer

Re: Troubles getting identify attributes into a TabContainer