nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Tab Container & Flip Through Identified Results

JohnWall

I am attempting to create an infoWindow/pop-up which has two tabs within one container and allows a user to tab through multiple results at a given point. I have been able to successively code the tab container and identify separately, but am struggling to combine them. Here is my tab container code:

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

        //display attribute information1
        var cp1 = new dijit.layout.ContentPane({
          title: "Info (Deutsch)",
    content: "<b>Project Title:</b> " + graphic.attributes.Projekt + "<p><b>Laufzeit:</b> "+graphic.attributes.Laufzeit + "</p>" + "<p><b>Ansprechpartner:</b> " + graphic.attributes.Ansprechpa + "</p>" + "<a href="+graphic.attributes.Link__Deut+">Project Website</a>"
        });
  
        //display attribute information2
        var cp2 = new dijit.layout.ContentPane({
          title: "Info (English)",
    content: "<b>Project Title:</b> " + graphic.attributes.Project_Na + "<p><b>Years of Research:</b> "+graphic.attributes.Laufzeit + "</p>" + "<p><b>Contact Person:</b> " + graphic.attributes.Ansprechpa + "</p>" + "<a href="+graphic.attributes.Link__Deut+">Project Website</a>"
        });
  
        tc.addChild(cp1);
        tc.addChild(cp2);
  
  return tc.domNode;
      }

Find more posts tagged with

Accepted answers

All comments

JohnWall

Oops code is too big. I have attached it to this message.

David

Hi David,
Thanks for getting back to me and providing your code. Unfortunately, I was not able to get the code to work for me either by loading exactly what you have nor after tooling around with it for a little bit. As such, I think I am going to scrap the idea for tabs and try multiple container panels within a border container. But, I am even having issues with that. Here is the code I have for that:

function getWindowContent(graphic) {
        var bc = new dijit.layout.BorderContainer({
   style: "width:600px;height:600px;background-color:lightblue;"
        }, dojo.create("div"));
  
  //display attribute information1
        var german = new dijit.layout.ContentPane({
          region: "leading",
    content: "<p>Hallo Welt!</p><p>info</p><p>info</p><p>info</p>"
        }, dojo.create("div"));
  
  //display attribute information2
        var french = new dijit.layout.ContentPane({
          region: "center",
    content: "<p>Bonjour tout le monde!</p><p>info</p><p>info</p><p>info</p>"
        }, dojo.create("div"));
  
        //display attribute information3
        var english = new dijit.layout.ContentPane({
          region: "trailing",
    content: "<p>Hello World!</p><p>info</p><p>info</p><p>info</p>"
        }, dojo.create("div"));
  
  bc.addChild(german);
  bc.addChild(french);
  bc.addChild(english);
  
  return bc.domNode;
      }

Do you have any ideas as to why my 'german' container is not showing while the 'english' one is depicted just fine and the 'french' one is compressed? I've tried various things, but cannot seem to get it to work.
Thanks,
John

DavidAglietti

Oops code is too big. I have attached it to this message.

David

PopupExample.zip

Clip_248.jpg

DavidAglietti

Hello,
I wasn't having the graphics problem, but if I were, I would try that code in the init function. Also, I was able to get the tabcontainer to display itself the right way. It turns out that I had to call the tabcontainer's resize method in the poup's onShow event. I figured this using this example by Derek Swingley: http://jsfiddle.net/wKue4/12/. However, I am using point data and I almost always return more than one result feature. So everything worked fine for the first record, but when I navigate using the left and right arrows in the popup the tabcontainer was collapsing again. I couldn't just call resize again on the onSelectionChange event, because then the first record's tabcontainer collapsed again. Good grief! So I came up with this solution where I switch the selected child tab programatically and it started to work correclty. Also note that I could not assign an ID to the tabcontainer as in Derek's example because you end up in a situation with multiple dijits with the same Id and the code errors (this only occurs if your identify returns multiple results). So, instead I assigned a class to the tabcontainer so that I could get a reference to it. There is probably a better way to do all this but I'm running out of time:(. I'll post my code below....

David

JohnWall

Hello,
You might try this to get solve the graphic problem:

dojo.connect(map.infoWindow, "onHide", function(){
map.graphics.clear();
});
David

David,
Out of curiosity, are you basically trying to combine the Identify and Tab/Chart Samples?

Where are you placing that code snippet? I have attempted to get it to work in each of my functions, but it does not seem to clear the graphics.
-John

DavidAglietti

Hello,
You might try this to get solve the graphic problem:

dojo.connect(map.infoWindow, "onHide", function(){
map.graphics.clear();
});
David

DavidAglietti

Sweet, thanks John! That worked for me. I am also having the problem where the tabs are collapsed. I have to click on them to make them expand vertically and show their contents. I'd appreciate it if you would let me know if you find a solution and I'll do the same.

Thanks again,
David

JohnWall

Hello,
I am having the same problem. I think they are the menu and slider features of the tab container. There are properties to turn them off, but they are not working for me.

tc.useMenu=false;
tc.useSlider=false;

Anyone know how to make them go away?
[ATTACH=CONFIG]16402[/ATTACH]

Hi David,
I posted on the Dojo forums and got the answer. You were really close with what you had. The code needs to look something like this:

var tc = new dijit.layout.TabContainer({
   style: "width:100%;height:100%;",
   useMenu: false,
   useSlider: false,
        });

That solves most of the issues. I'm still having issues with needing to click repeatedly on tabs to get them to display all of their contents and some of the graphics getting stuck on screen. Let me know if you're having the same issues or not. If I get a response on how to fix any of these other issues, would you like to know as well?

JohnWall

Hello,
I am having the same problem. I think they are the menu and slider features of the tab container. There are properties to turn them off, but they are not working for me.

tc.useMenu=false;
tc.useSlider=false;

Anyone know how to make them go away?
[ATTACH=CONFIG]16402[/ATTACH]

Hi David,
Thanks for responding. I took a look at your attached image and it's the exact same problem I have been having. Have you been able to find any posts online regarding this issue? I've posted on several other forums, but have recieved little help.
-John

DavidAglietti

Hello,
I am having the same problem. I think they are the menu and slider features of the tab container. There are properties to turn them off, but they are not working for me.

tc.useMenu=false;
tc.useSlider=false;

Anyone know how to make them go away?
[ATTACH=CONFIG]16402[/ATTACH]

menus.jpg

JenniferAcunto_0-1713271384735.png

image001.jpg

JohnWall

I've been able to edit the executeIdentifyTask to look like this:

function executeIdentifyTask(evt) {
        identifyParams.geometry = evt.mapPoint;
        identifyParams.mapExtent = map.extent;
       
        var deferred = identifyTask.execute(identifyParams);

        deferred.addCallback(function(response) {     
          // response is an array of identify result objects    
          // Let's return an array of features.
          return dojo.map(response, function(result) {
            var feature = result.feature;
            feature.attributes.layerName = result.layerName;
            console.log(feature.attributes.OBJECTID);
            var template = new esri.InfoTemplate();
   template.setTitle("</b>Hello World</b>");
   template.setContent(getWindowContent);
   feature.setInfoTemplate(template);
            return feature;
          });
        });

      
        // InfoWindow expects an array of features from each deferred
        // object that you pass. If the response from the task execution 
        // above is not an array of features, then you need to add a callback
        // like the one above to post-process the response and return an
        // array of features.
        map.infoWindow.setFeatures([ deferred ]);
        map.infoWindow.show(evt.mapPoint);
      }

But now I get three pull down tabs and the tab container. Does anyone have any ideas?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.