detecting activation of tab for custom dashboard

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Nicholas Westby 2054 posts 7103 karma points c-trib

Mar 30, 2015 @ 23:46

0

Detecting Activation of Tab for Custom Dashboard

I have a dashboard I'm developing that I've configured like so in the dashboard.config:

Just a typical Umbraco 7 AngularJS dashboard (the controller is loaded using a package.manifest in the App_Plugins folder). My question relates to this tab:

Is there a nice way in my JavaScript controller to detect when "My New Tab" is activated?

Basically, I have to hit an API controller with a computationally expensive operation, and I'd like to avoid doing that unless users actually view the tab. My current workaround is to just hit the API controller when a button is clicked by the user.

My thought is that there must be some event that Umbraco emits whenever a tab is activated.

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Mar 31, 2015 @ 09:20

0

Hello,

I'm currently unaware of such a feature. What you could try and do is inject some custom js and add an onclick on the tab for example. Have a look at this package to inject custom js: https://our.umbraco.org/projects/collaboration/backoffice-tweaking

Jeroen

Copy Link
Nicholas Westby 2054 posts 7103 karma points c-trib

Mar 31, 2015 @ 19:52

0

Hi Jeroen,

Thanks for the tip. I can probably refer to the source code for that project to figure out how to target tabs, though I already have the technique I'd need to inject custom JS: https://our.umbraco.org/forum/developers/extending-umbraco/63379-Custom-CSSJavaScript-for-Umbraco-Backoffice

For now, I think I'll just stick with the button unless somebody else can chime in with an event that Umbraco emits whenever a tab is switched.

Copy Link

Jonas Mersholm 2 posts 24 karma points

Apr 08, 2015 @ 12:40

Hi Nicholas.

I use the following script to handle TAB clicks in my custom section

In your HTML, add an ID to the elemnt containing your "controller" attribute for angular Etc.

<div id="myId" ng-controller="Section.Module.Controller" ng-show="loaded">

Then add this Jquery to your html

<script type="text/javascript">

                $(function() {

                        $(document).on('click', 'a', function() {

                                if( $(this).attr('data-toggle') == "tab" ) {

                                    if( $(this).attr('href') == "#tab3" ) {

                                       var $scope = angular.element('#myID').scope();
                                       // Method to call in your Angular Controller
                                       $scope.logTab();
                                       // Digest the changes done by the controller
                                       $scope.$apply();
                                    }

                                }

                        });

                });

</script>

Hope it helps. Jonas

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?