cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X

Determining Active Tabs

BradC
7-Bedrock

Determining Active Tabs

Question:

Is there an elegant method of determining which tab is active in a set of tabs using JavaScript?

 

Use Case:

I have a set of tabs showing operational information for each sub-assembly of an assembly. I would like the corresponding  sub-assembly to be highlighted in the 3D model depending on the currently active tab.

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @BradC ,

so I will suppose that you have the following situation :

2019-02-14_16-13-18.gif

 

We have here 5 different tabs with index 0-4

But the name could differ.

then check on the chrome console in debug mode (Strg-Shift-I)

 

2019-02-14_16-23-11.gif

 

So, to check it further used Tab click event to call some code like this:

 

$scope.testClickTab=function() {
console.log("$scope.testClickTab");
//////////////////////////////////////////////
    angular.forEach(  
        $element.find('twx-tab'), function(value, key) {
   
          console.log("key");
          console.warn(key);
          console.log("value");
          console.warn(value);
        } )//for each
       
/////////////////////////////////////////////  
};

 

And now  test the code  for the TAB widget:

 

2019-02-14_16-29-12.gif

 

So when we test this code and check the warn printing in the console - in this case we can find a little more about the twx-tab properties:

 

2019-02-14_16-33-35.gif

 

So now the code could be changed to :

 

$scope.testClickTab=function() {

 angular.forEach( 
 $element.find('twx-tab'), function(value, key) {
     
          console.log(value['title']);
          console.log(value['style']['display']);
          if(value['style']['display']=='block') console.error("selected was = " +value['title'] + "::number =" + key);
        } )//for each
       
        /////////////////////////////////////////////  
};

So now we can idetify the selection when a tab is selected:

2019-02-14_16-40-38.gif

 

So now we can identify the selection when a tab is selected:

So here the function $scope.testClickTab() is called when the tab is set /changed the value. So in this case you can set an application parameter which should track the current tab setting

 

... But you can call this function from any other widgets or events. It will check for all tabs in the current View - so if you have more then one Tab widgets it will find all tabs. So in this case you need additional to check the tab names to be sure which tabs was selected.

View solution in original post

2 REPLIES 2

Hi @BradC ,

so I will suppose that you have the following situation :

2019-02-14_16-13-18.gif

 

We have here 5 different tabs with index 0-4

But the name could differ.

then check on the chrome console in debug mode (Strg-Shift-I)

 

2019-02-14_16-23-11.gif

 

So, to check it further used Tab click event to call some code like this:

 

$scope.testClickTab=function() {
console.log("$scope.testClickTab");
//////////////////////////////////////////////
    angular.forEach(  
        $element.find('twx-tab'), function(value, key) {
   
          console.log("key");
          console.warn(key);
          console.log("value");
          console.warn(value);
        } )//for each
       
/////////////////////////////////////////////  
};

 

And now  test the code  for the TAB widget:

 

2019-02-14_16-29-12.gif

 

So when we test this code and check the warn printing in the console - in this case we can find a little more about the twx-tab properties:

 

2019-02-14_16-33-35.gif

 

So now the code could be changed to :

 

$scope.testClickTab=function() {

 angular.forEach( 
 $element.find('twx-tab'), function(value, key) {
     
          console.log(value['title']);
          console.log(value['style']['display']);
          if(value['style']['display']=='block') console.error("selected was = " +value['title'] + "::number =" + key);
        } )//for each
       
        /////////////////////////////////////////////  
};

So now we can idetify the selection when a tab is selected:

2019-02-14_16-40-38.gif

 

So now we can identify the selection when a tab is selected:

So here the function $scope.testClickTab() is called when the tab is set /changed the value. So in this case you can set an application parameter which should track the current tab setting

 

... But you can call this function from any other widgets or events. It will check for all tabs in the current View - so if you have more then one Tab widgets it will find all tabs. So in this case you need additional to check the tab names to be sure which tabs was selected.

Thank you so much @RolandRaytchev, that's exactly what I was looking for.

Top Tags