AnsweredAssumed Answered

TabContainer event

Question asked by dkampe on Dec 6, 2013
Latest reply on Dec 11, 2013 by kenbuja

Like • Show 0 Likes0
Comment • 4

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

dkampe Dec 11, 2013 4:21 AM

Correct Answer

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

See the reply in context

No one else had this question

Outcomes

btfou Dec 6, 2013 8:37 AM

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.

Actions

evtguy Dec 6, 2013 8:43 AM

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.

Actions

dkampe Dec 11, 2013 4:21 AM

Actions

kenbuja Dec 11, 2013 7:16 AM

Doug,

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

Actions

4 Replies

btfou Dec 6, 2013 8:37 AM
Mark Correct
Correct Answer
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.
Like • Show 0 Likes0
Actions
evtguy Dec 6, 2013 8:43 AM
Mark Correct
Correct Answer
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.
Like • Show 0 Likes0
Actions
dkampe Dec 11, 2013 4:21 AM
Unmark Correct
Correct Answer
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
Like • Show 0 Likes0
Actions
kenbuja Dec 11, 2013 7:16 AM
Mark Correct
Correct Answer
Doug,

You should click the check mark on your post to help those who are searching for an answer on this question.
Like • Show 0 Likes0
Actions

GeoNet

The Esri Community

TabContainer event

Outcomes

Related Content

Recommended Content