Sign in Register
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 7104 karma points c-trib
    Mar 30, 2015 @ 23:46
    Nicholas Westby
    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:

    enter image description here

    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:

    enter image description here

    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 4909 posts 12266 karma points MVP 5x admin c-trib
    Mar 31, 2015 @ 09:20
    Jeroen Breuer
    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 7104 karma points c-trib
    Mar 31, 2015 @ 19:52
    Nicholas Westby
    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
    Jonas Mersholm
    2

    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies