Select to view content in your preferred language

tabs inside popup

1725
4
04-16-2012 02:15 PM
danbecker
Frequent Contributor
when replacing the map's default infoWindow with the popup class, how do you insert .tabContainer - with 2 (tabs) ContentPanes?

map.infoWindow.setContent(getWindowContent(secondTabContent,evtObj.graphic))

function getWindowContent(secondTabContent,graphic){
    //make a tab container
    var infoTabCont = new dijit.layout.TabContainer({
 style: "width: 100%;height:100%;background-color:transparent;"
        }, dojo.create("div", {doLayout:"false" }));
    
 //display attribute info in first tab
 var cp1 = new dijit.layout.ContentPane({
  style: "background-color:transparent;color:White;",
  title: "Details",
  content: "FacID: " + graphic.attributes.site_code + "<br /> Fac Name: " + graphic.attributes.facil_name
 })
  
 //create 2nd tab for future related info
 var cp2 = new dijit.layout.ContentPane({
  style: "background-color:transparent;color:white;overflow:auto;",
  title: "Cmd Structure",
  content: str
 })
  
 //add the content panes to the tab container
 infoTabCont.addChild(cp1);
 infoTabCont.addChild(cp2);
 return infoTabCont.domNode;
}    


the above results in something like the attached
0 Kudos
4 Replies
KenBuja
MVP Esteemed Contributor
Take a look at this post over in GIS.StackExchange and Derek Swingley's response.
0 Kudos
derekswingley1
Deactivated User
Thanks, Ken. I knew we'd covered this in the past :).
0 Kudos
danbecker
Frequent Contributor
my problem is kind of complex (for me atleast)

I Have 5 different feature layers added to the map, 2 point, 3 poly.

At full scale, I'd like user's to be able click over a point and have an infoWindow display the attributes, but due to scale, they will likely select 5 total points (example):
2 pts on featlayer1
3 pts on featlayer2
(we wont' get into the poly featlayers for now)

If I opt to use the built-in map.infoWindow I can use tabs to display featlayer1 & featlayer2 and their respective features, like so:
featlayer1 - Tab
---Table
------Row1 - graphic.attributes.field1, graphic.attributes.field3
------Row2 - graphic.attributes.field1, graphic.attributes.field3
featlayer2 - Tab
---Table
------Row1 - graphic.attributes.field1, graphic.attributes.field8
------Row2 - graphic.attributes.field1, graphic.attributes.field8
------Row2 - graphic.attributes.field1, graphic.attributes.field8

Is this a workaround for native map.infoWindow not being able to display an array of esri.tasks.IdentifyTask results??

My other option is to replace the map.infoWindow with the popup class, which would then accept an array of esri.tasks.IdentifyTask results?
0 Kudos
danbecker
Frequent Contributor
maybe this is easier, but still related to my popup question...

I click select a feature, then query 3 different related tables for info and combine into an array of objects called data.

Could someone help me get data out of the following function?
return {data:data}; //doesn't work



function findRelatedRecords(features,evtObj){  
 var selFeat = features
 var featObjId = selFeat[0].attributes.OBJECTID_1  
 var relatedBranch = new esri.tasks.RelationshipQuery();
 relatedBranch.outFields = ["*"];
 relatedBranch.relationshipId = 1; //fac -to- Branch
 relatedBranch.objectIds = [featObjId];
 facSel.queryRelatedFeatures(relatedBranch, function(relatedBranches) {
  var branchFound = false;
  if(relatedBranches.hasOwnProperty(featObjId) == true){
   branchFound = true;
   var branchSet = relatedBranches[featObjId]
   var cmdBranch = dojo.map(branchSet.features, function(feature){
    return feature.attributes;
   })
  }
   
  //regardless of whether a branch is found or not, we have to run the cmdMain relationship query
  //the parent is still fac, no advantage of the parent being branch since cmcMain query has to be run regardless
  //fac - branch - cmdMain - cmdSub <--sometimes
  //fac - cmdMain - cmdSub <-- sometimes   
  var relatedQuery = new esri.tasks.RelationshipQuery();
         relatedQuery.outFields = ["*"];
         relatedQuery.relationshipId = 0; //fac -to- cmdMain
         relatedQuery.objectIds = [featObjId];
  //rather then listen for "OnSelectionComplete" we are using the queryRelatedFeatures callback function
  facSel.queryRelatedFeatures(relatedQuery, function(relatedRecords) {
   var data = []   
   //if any cmdMain records were found, relatedRecords object will have a property = to the OBJECTID of the clicked feature
   //i.e. if cmdMain records are found, true will be returned; and continue with finding cmdSub records
   if(relatedRecords.hasOwnProperty(featObjId) == true){
    var fset = relatedRecords[featObjId]
    var cmdMain = dojo.map(fset.features, function(feature) {
     return feature.attributes;
    })
    //we need to fill an array with the objectids of the returned cmdMain records
    //the length of this list == total number of mainCmd records returned for the clicked facility
    objs = []
    for (var k in cmdMain){
     var o = cmdMain;
     objs.push(o.OBJECTID)      
    }
    //second relationship query to find records related to cmdMain (cmdSub)
    var subQuery = new esri.tasks.RelationshipQuery();
    subQuery.outFields = ["*"];
    subQuery.relationshipId = 2;
    subQuery.objectIds = [objs]
    subTbl.queryRelatedFeatures(subQuery)
    //when the cmdMain to cmdSub query gets finished fire this function
    dojo.connect(subTbl,"onQueryRelatedFeaturesComplete",function (subRecords){
     //subRecords is an object where each property is the objectid of a cmdMain record
     //if a cmdRecord objectid is present in subRecords property, cmdMain has sub records
     //we no longer need these objectids, so we'll remove them and put the array into cmdsub
     var cmdSub = []
     for (id in subRecords){
      dojo.forEach(subRecords[id].features, function(rec){
       cmdSub.push(rec.attributes)
      })
     }
     var j = cmdSub.length;
     var p;
     var sub_key;
     var obj;
     if (branchFound == true){
      var p1 = "branch";
      obj1 = {};
      obj1[p1] = [cmdBranch[0].Branches]
      data.push(obj1)
     }       
     for (var i=0, iLen = cmdMain.length; i<iLen; i++) {
        p = cmdMain.ASGMT_Name
        obj = {};
        obj
 = [];
        sub_key = cmdMain.sub_key;
        for (var j=0, jLen=cmdSub.length; j<jLen; j++) {
          if (cmdSub.sub_key == sub_key) {
             obj
.push(cmdSub.Long_Name);
          }
        }
        data.push(obj);
     }
     //showWin(data,evtObj)
     return {data:data};
      
    })
   }
   //no returned cmdRecords; cmdData not available
   else{
    p = "No Data Available"
    obj = {}
    obj
 = []
    data.push(obj)
   }
   //showWin(data,evtObj)
   return {data:data};
  })
 })
}
function newFunc (){
        var dataArray = findRelatedRecords(feat,evt)
        console.log(dataArray) //would like to access data array here??
}

0 Kudos