Select to view content in your preferred language

TabContainer event

1043
4
Jump to solution
12-06-2013 08:13 AM
DougKampe
Regular Contributor
I am developing an application with 4 tabs on the left and a map served by ArcGIS Online(AGOL) on the right. What I want to do is when tab1 is active (focused), I want the webmap to be webmap1. When the user clicks tab2 I want the webmap to change to webmap2, and so on.

This is seemingly a simple task, but I cannot find enough documentation for a novice like me to understand how to make this happen. Here's a bit of code starting the initial map that works correctly:

var webmap = "e1cff258e4674ab1985e2303106b0cc8"; arcgisUtils.createMap(webmap,"mapDiv").then(function (response){ map = response.map; });

What if want is to make myvariable webmap dependent upon the active tab:

var webmap = (if tab1.active){"e1cff258e4674ab1985e2303106b0cc8"} (else if tab2.active){"3dea9137545e41eb8d4877ac8970294f"} etc. etc. etc....

Can anyone help me with this?
Thanks
0 Kudos
1 Solution

Accepted Solutions
DougKampe
Regular Contributor
I found the solution, but it took a lot of research. First, thanks for all who responded.


Here's the code:
                tabContainer.watch("selectedChildWidget", function(name,oval,nval){ //tabContainer is the id of my TabContainer
               
                if (nval.id == "popTab"){
                    createMap("e1cff258e4674ab1985e2303106b0cc8");
                }
                else if(nval.id == "ageTab"){
                    createMap("3dea9137545e41eb8d4877ac8970294f");
                }
                else if(nval.id =="raceTab"){
                    createMap("b3ab092a57c14fab9c8b9cc697e25eaf");
                }http://forums.arcgis.com/images/icons/icon11.png
                else{createMap("374ea990475d4db0ad0397543c9539af");}
            });

I discovered I didn't need to do the onshow/onclick etc. event because the watch() method already does this. This is actually in the dojo documentation, but not being a seasoned programmer makes it easy to not understand what is being shown in front of you.

Now, when someone clicks on my population tab with the id of (popTab) it will fire my createMap function. The problem I was running before I successfully implemented watch() was every time I hit a tab it redrew the map even if the map was already present.

Thanks again and hopefully someone will find this helpful.
Doug
dkampe@howardcountymd.gov

View solution in original post

0 Kudos
4 Replies
BenFousek
Deactivated User
The onShow event for the tab itself is what you want. Tab container doesn't have an event to return the "active" tab and/or to let you know that a tab has been changed. It does have myTabs.selectedChildWidget, which is the selected tab (literally the widget).

on(tab1, 'show', function() {
  //do stuff
});

on(tab2, 'show', function() {
  //do stuff
});

//and so on


Then perhaps call a function to handle the web map creation.

on(tab3, 'show', function() {
  switchWebMap('WEB_MAP_ID');
});

switchWebMap function(id) {
  //do stuff
}


Sorry, I don't know much about ago web maps, but hope this helps with your tabs.

Have you been to the dojo Reference Guide and the API Documentation. Most everything you need for developing with dojo.
0 Kudos
SteveCole
Honored Contributor
This may not be ideal but how about creating four map divs (one for each ArcGIS Online webmap) and then use CSS or the esri.show() / esri.hide() methods to manage which web map is visible? You'll have to sync the map extents, of course, but that can be done using the extent-change event.
0 Kudos
DougKampe
Regular Contributor
I found the solution, but it took a lot of research. First, thanks for all who responded.


Here's the code:
                tabContainer.watch("selectedChildWidget", function(name,oval,nval){ //tabContainer is the id of my TabContainer
               
                if (nval.id == "popTab"){
                    createMap("e1cff258e4674ab1985e2303106b0cc8");
                }
                else if(nval.id == "ageTab"){
                    createMap("3dea9137545e41eb8d4877ac8970294f");
                }
                else if(nval.id =="raceTab"){
                    createMap("b3ab092a57c14fab9c8b9cc697e25eaf");
                }http://forums.arcgis.com/images/icons/icon11.png
                else{createMap("374ea990475d4db0ad0397543c9539af");}
            });

I discovered I didn't need to do the onshow/onclick etc. event because the watch() method already does this. This is actually in the dojo documentation, but not being a seasoned programmer makes it easy to not understand what is being shown in front of you.

Now, when someone clicks on my population tab with the id of (popTab) it will fire my createMap function. The problem I was running before I successfully implemented watch() was every time I hit a tab it redrew the map even if the map was already present.

Thanks again and hopefully someone will find this helpful.
Doug
dkampe@howardcountymd.gov
0 Kudos
KenBuja
MVP Esteemed Contributor
Doug,

You should click the check mark on your post to help those who are searching for an answer on this question.
0 Kudos