Copied to clipboard

Flag this post as spam?

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


  • Vuong Nguyen 1 post 21 karma points
    Jun 18, 2014 @ 09:36
    Vuong Nguyen
    0

    Catch content page load event in umbraco 7.0.4

    Hi,

    I'm a newbie in Umbraco. I'm working version 7.0.4. I'm developing a package that hide custom tab in content like AttackMonkey.TabHider

    I'm trying to catch event when content page load to get HTML document but it doesn't work. 

    Could someone tell me how to catch it up?

    Many thanks

     

     

  • Matt Brailsford 4125 posts 22222 karma points MVP 9x c-trib
    Jun 19, 2014 @ 19:27
    Matt Brailsford
    3

    Hi Vuong,

    As the editor for content in v7 is now all angular js based, there isn't really the concept of a "page load" like there was in the old version using master pages.

    That said, what you want to do should still be possible, you'll just have to come at it from a JS perspective, rather than a .NET perspective.

    WARNING! What I'm about to suggest assumes you know some advanced Angular concepts so if you don't you might want to look into those mentioned first

    If you look in to the angular code in the Umbraco core you'll see that there is a view Umbraco.Web.UI.Client > src > views > content > edit.html which is the view used by the content editor. This view renders the tabs and properties etc needed to edit your content. Now that view uses the ContentEditController angular controller defined at Umbraco.Web.UI.Client > src > views > content > content.edit.controller.js as it's controller.

    Looking into that class, we can see that it makes a call to the contentResource in order to get all the tabs / properties for the piece of content to edit. Now if we could intercept that call and filter out the relevant tabs / properties, this then would make an ideal entry point for our filter. But the question is how without modifying the core files?

    Well, Angular provides a couple of ways we could do this.

    1 - Redirect the contentResource request
    One way could be to create an interceptor on the $httpProvider (https://docs.angularjs.org/api/ng/service/$http) for any requests to the relevant contentResource end point and redirect it to a different URL (this could be a custom API URL that does the same functionality as the previous call, but filters out the tabs). For example:

    angular.module('umbraco.services').config([
        '$httpProvider',
        function ($httpProvider) {
    
            $httpProvider.interceptors.push(function ($q) {
                return {
                    'request': function (config) {
    
                        // Redirect any requests to the login dialog to our custom dialog
                        if (config.url == "old/url")
                            config.url = '/new/url';
    
                        return config || $q.when(config);
                    }
                };
            });
    
        }]);
    

    2 - Decorate the contentResource entity
    Using a decorator (https://docs.angularjs.org/api/auto/object/$provide#decorator), you can define a wrapper around an existing class and have it perform additional or completely different steps from it's decorated counterpart.

    angular.module('umbraco.resources').config([
        '$provide',
        function ($provide) {
    
            $provide.decorator('contentResource', [
                "$delegate",
                function ($delegate) {
    
                    $delegate.getById = function(id){
                        //Do something else
                    }
    
                    return $delegate;
                }]);
    
         }]);
    

    Now either one of these should do the trick, however as mentioned they are fairly advanced angular topics. My suggestion then would be for you to familiarize yourself with some of the angular basics and look into the concepts mentioned above and then come back with any specific issues you are having during implementation.

    Unfortunately it's a bit of a steep learning curve, and not something too easy to explain fully how to do. Hopefully the above gives you some kind of starting point however.

    Many thanks

    Matt

  • Lucas Kwasnik 8 posts 78 karma points
    Aug 24, 2015 @ 19:30
    Lucas Kwasnik
    0

    Matt, I know I'm a year late, but I'm working on something that could potentially benefit from the snippets you provided.

    I got your example #2 working, but it is overriding what Umbraco would normally run when the Edit Content page loads. How do I make it run my code in addition to what Umbraco normally runs as opposed to instead of it? Hope that makes sense.

    Thank you very much!

    Lucas

Please Sign in or register to post replies

Write your reply to:

Draft