topic Re: tabs inside popup in ArcGIS JavaScript Maps SDK Questions

tabs inside popup

danbecker — Mon, 16 Apr 2012 21:15:00 GMT

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

Re: tabs inside popup

KenBuja — Tue, 17 Apr 2012 12:21:52 GMT

Take a look at this post over in GIS.StackExchange and Derek Swingley's response.

Re: tabs inside popup

derekswingley1 — Tue, 17 Apr 2012 15:27:18 GMT

Thanks, Ken. I knew we'd covered this in the past :).

Re: tabs inside popup

danbecker — Tue, 17 Apr 2012 16:18:44 GMT

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?

Re: tabs inside popup

danbecker — Sat, 11 Dec 2021 19:47:38 GMT

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