Copied to clipboard

Flag this post as spam?

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


  • Kim Andersen 1447 posts 2196 karma points MVP
    Aug 13, 2013 @ 20:00
    Kim Andersen
    0

    Possible to deeplink from dashboard to specific tab on a content-node?

    Hi there folks!

    I have a question regarding linking from a custom dashboard to a specific content-node, on a specifc tab. All in the content section.

    So, from what I understand I can link from my dashboard to a content node with this piece of code:

    <a title="Edit this node" href="/umbraco/editContent.aspx?id=1397">Edit this node</a>

    But in my situation, it would be pretty neat if I could link to that content-node, and have it starting on a specific tab on the node. So can I in some way extend the link above and then make sure that when a user clicks on a link form my dashboard, he goes to the right node, and on the third tab called "Gallery"?

    Maybe I need some kind of javascript also or something like that?

    If anyone have any pointers it would be great.

    Thanks in advance!

    /Kim A

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    Aug 13, 2013 @ 20:26
    Bo Damgaard Mortensen
    0

    Hi Kim,

    Not sure how much help this is really ;-) But looking at the markup, switching between the tabs, their visibility seems to be controlled by a css class:

    enter image description here

    I'm by no means a frontend-guru, so I'm not sure if you can tell a given tab to use css class: "tabOn" and set the rest to css class: "tabOff" in the link somehow? ;-)

    I just love answering questions with questions.

  • Mads Krohn 211 posts 504 karma points c-trib
    Aug 13, 2013 @ 21:48
    Mads Krohn
    102

    Hi Kim

    The href that you suggested is spot on and will indeed link to a content node in the content tree. There are various way to open content like that, but the thing they all have in common is, that none on them has a default way of executing an action after the page is loaded. So, in order to do what you want to do, we have to get a bit creative :)

    First, we need to find a way to carry data from the dashboard through to the editcontent.aspx page. Lets go with a good old query string value. Note, later on, that the tab numbers starts at 1 not 0. We can do something like this:

    <a title="Edit this node" href="/umbraco/editContent.aspx?id=1397&tab=2">Edit this node</a>
    

    Now, that's the easy part. Next, we need a way to register a script on the editcontent.aspx page, so that we can set the active tab. It's a bit long, so I gist'ed it.

    Basically, what the code does is it registers an oninit event for the editcontent.aspx which is an umbracoPage. In the oninit event, we inject some javascript that will call a native Umbraco function called setActiveTab with the correct parameters, including the tab we want to switch to.

    And that's that...

    Note, that there are more ways of doing this. You could also use the dependency loader and inject a .js file with the code instead of injecting the code directly.

    if (!path.EndsWith("/create.aspx"))
        return;
    bool created;
    var loader = UmbracoClientDependencyLoader.TryCreate(dialog, out created);
    if (loader == null) return;
    loader.AddPath("Scripts", IOHelper.ResolveUrl("~/Scripts/Modules/"));
    loader.RegisterDependency(990, "umbraco.tabswitcher.js", "Scripts", ClientDependencyType.Javascript);
    

    Works on my machine :)

    Cheers
    - Mads

  • Kim Andersen 1447 posts 2196 karma points MVP
    Aug 14, 2013 @ 07:45
    Kim Andersen
    0

    Thanks Mads!

    But how do I register the code on my editcontent.aspx page?

    Can I just copy/paste the code into the existing code in that file or do I have to do something in C# or something like that to register it the right place?

    /Kim A

  • Mads Krohn 211 posts 504 karma points c-trib
    Aug 14, 2013 @ 09:34
    Mads Krohn
    0

    That depends :)

    Firstly, yes, you have to register a handler in C# to use the code I posted. But you can definitely put the code directly in the editcontent.aspx page with some slight alterations. Personally I do prefer the handler approach though, simply to avoid messing with core files.

    Let me know which approach you're planning on taking, I'd be happy to help get everything to work, should be fairly easy no matter what.

  • Kim Andersen 1447 posts 2196 karma points MVP
    Aug 14, 2013 @ 13:31
    Kim Andersen
    0

    Great. Asked my backend colleague and he knew just what to do, so it's working now :)

    Thanks Mads!

    /Kim A

  • Mads Krohn 211 posts 504 karma points c-trib
    Aug 14, 2013 @ 13:36
    Mads Krohn
    0

    Awesome :)

  • Kim Andersen 1447 posts 2196 karma points MVP
    Aug 14, 2013 @ 14:05
    Kim Andersen
    0

    Hi again Mads.

    Actually I just ran into to a small issue with this functionality.

    When I'm on my dashboard I'm linking to different types of document types. All of these document types has the "Gallery"-tab that I want to link to. But, the tab is not in the same position on all of the different document types. So: On doc type 1 the tab is number 2. On doc type 2 the tab is number 4. And on doc type 3 the tab is the last tab before the "Properties" tab.

    Would it be possible to link to the correct tab by using the name of the tab instead of the number? Something like this for example:

    <a title="Edit this node" href="/umbraco/editContent.aspx?id=1397&tab=Gallery">Edit this node</a>
    

    Or maybe I could link to the right tab if I always knew that the tab was the last tab before the "Properties"-tab on all of the document types.

    I hope that you can follow what I'm trying to do :)

    Not sure that this can be done at all, but just wanted to hear if you have any experience with this?

    /Kim A

  • Mads Krohn 211 posts 504 karma points c-trib
    Aug 14, 2013 @ 14:45
    Mads Krohn
    1

    Of course it can be done :P

    You probably wan't to move the javascript part to a dedicated .js file, otherwise it will get ugly fast. Here is the updated code:

    Dashboard:

    <a title="Edit this node" href="/umbraco/editContent.aspx?id=1397&tab=gallery">Edit this node</a>
    

    Handler:

    if (!path.EndsWith("/editcontent.aspx"))
        return;
    
    var tab = request.QueryString["tab"];
    if (!string.IsNullOrEmpty(tab))
    {
        bool created;
        var loader = UmbracoClientDependencyLoader.TryCreate(page, out created);
        if (loader == null) return;
        loader.AddPath("Scripts", IOHelper.ResolveUrl("~/Scripts/Modules/"));
        loader.RegisterDependency(1400, "umbraco.tabswitcher.js", "Scripts", ClientDependencyType.Javascript);
    
        page.Page.ClientScript.RegisterClientScriptBlock(GetType(), "ActiveTab", "<script>var activeTab = '" + tab + "';</script>");
    }
    

    JavaScript:

    $(function () {
        $("#body_TabView1 > .header li a").each(function () {
            var tabLink = $(this);
            var tabName = $.trim(tabLink.text().toLowerCase());
            if (tabName === activeTab) {
                var tabId = tabLink.closest("li").attr("id");
                setActiveTab('body_TabView1', tabId, body_TabView1_tabs);
            }
        });
    });
    

    You can of course tweak the javascript but this works on my machine at least :)

  • Kim Andersen 1447 posts 2196 karma points MVP
    Aug 15, 2013 @ 12:48
    Kim Andersen
    0

    You are the man Mads!

    Works like a charm.

    Thank you very much :)

    /Kim A

  • Mads Krohn 211 posts 504 karma points c-trib
    Aug 15, 2013 @ 12:50
    Mads Krohn
    0

    Yay :D

  • Kim Andersen 1447 posts 2196 karma points MVP
    Dec 04, 2013 @ 18:54
    Kim Andersen
    0

    Hi again Mads

    We just found a strange "bug" in the code above. It seems that the code only works if you are logged into Umbraco with a user of the type "Administrator". Any other user types are just sent to the first tab of the node they are linked to.

    Do you have any clue on why this happens?

    /Kim A

     

  • Mads Krohn 211 posts 504 karma points c-trib
    Dec 04, 2013 @ 21:47
    Mads Krohn
    0

    Hi Kim

    That sounds odd.
    Just tested this on a vanilla 6.1.6 with a user that's not an admin. Worked with no issues.
    Are you sure it isn't a casing issue? Do you get any errors in the console ?

    Cheers
    - Mads

  • Kim Andersen 1447 posts 2196 karma points MVP
    Dec 04, 2013 @ 22:06
    Kim Andersen
    0

    Yeah, it's very weird. There's no errors in the console as far as I can see.

    I tried this on two seperate Umbraco solutions, but with the same "error". One of them was v4.11.8 and the other was on a v4.11.10.

    Did you try a user type that you created yourself, or just one of the other "standard" user types?

    I tried in different browsers, with different users/user types, clearing cache, also tried on diferent machines etc., so I don't think it's caching. Otherwise it would cache like crazy :)

    /Kim A

  • Mads Krohn 211 posts 504 karma points c-trib
    Dec 04, 2013 @ 22:23
    Mads Krohn
    0

    Ok, just tried the same things on an 4.11.6 installation.
    Also tried with a user belonging to a custom user type, still worked flawlessly.

    If you are *not* running in debug mode, then yes, the cache can be very aggressive, since ClientDependency caches stuff to the disk, default location at -> /App_Data/TEMP/ClientDependency. Try clearing that out perhaps.

    The next step is to start debugging. Are you following the examples and having a separate javascript file, eg. umbraco.tabswitcher.js ? If so, try and add a few console.log parts to see where the problems starts, for example:

    var tabName = $.trim(tabLink.text().toLowerCase());
    console.log(tabName, activeTab);
    

    What does that give you? And remember not to get bitten by caching issues :P

    Cheers
    - Mads

  • Kim Andersen 1447 posts 2196 karma points MVP
    Dec 05, 2013 @ 07:57
    Kim Andersen
    0

    Hi Mads

    We tried debugging this way:

    $(function () {
      $("#body_TabView1 > .header li a").each(function () {
        var tabLink = $(this);
        var tabName = $.trim(tabLink.text().toLowerCase());
                             console.log(tabName, activeTab,"test");
        if (tabName === activeTab) {
                                 console.log("Vi er inde");
            var tabId = tabLink.closest("li").attr("id");
                                 console.log("TabId",tabId);
            setActiveTab('body_TabView1', tabId, body_TabView1_tabs);
        }
      });
    });
    

    The above debugging gave the following result in the console, with both the admin- user type and with another user type:

    indhold kvalitet test 
    tilvalg kvalitet test 
    selvbetjening kvalitet test 
    relateret indhold kvalitet test 
    opmærkning kvalitet test 
    script kvalitet test 
    seo kvalitet test 
    kvalitet kvalitet test 
    Vi er inde 
    TabId body_TabView1_tab08
    statistik kvalitet test
    egenskaber kvalitet test
    

    So the code finds the right tab "bodyTabView1tab08", but it just doesn't switch to that tab when you're any other user type than administrator.

    Does that give you anything?

    /Kim A

  • Mads Krohn 211 posts 504 karma points c-trib
    Dec 05, 2013 @ 08:59
    Mads Krohn
    0

    Hi Kim

    Ok, that's seriously odd :P Could you try and execute the following line directly in the Chrome console, when on the given page?

    UmbClientMgr.contentFrame().setActiveTab('body_TabView1','body_TabView1_tab08', UmbClientMgr.contentFrame().body_TabView1_tabs);
    

    And then see if you can switch the tabs manually. Also, try checking the id of the li tab elements, do they have the id's we are expecting? They should look something like this:

    <li id="body_TabView1_tab01" class="tabOn"><a>...</a></li>
    

    Cheers

  • Kim Andersen 1447 posts 2196 karma points MVP
    Dec 05, 2013 @ 09:46
    Kim Andersen
    0

    Hi again Mads

    Just tried excecuting the code manually in the Chrome console, when standing on a given page. When excecuting the script on the page manually, the tab switches to the right tab as expected. Damn that's strange :-/

    /Kim A

  • Mads Krohn 211 posts 504 karma points c-trib
    Dec 05, 2013 @ 09:51
    Mads Krohn
    0

    Indeed it is :P

    Ok, just for the fun of it, try wrapping the code in a timeout like so:

    $(function () {
        setTimeout(function() {
            $("#body_TabView1 > .header li a").each(function() { ... });
        }, 2000);
    });
    
Please Sign in or register to post replies

Write your reply to:

Draft