Ok I've been looking into the source code of Umbraco 4.5 and I'm on to something. There are 2 pages which are related to deeplinking. The /umbraco/umbraco.aspx page has some javascript for deeplinking and /umbraco/actions/editContent.aspx is also created for deeplinking. 

I tried calling the editContent.aspx page from my custom section page like this: <a href="javascript:top.window.location.href = '/umbraco/actions/editContent.aspx?id=1077';">Click</a>

If I click the link I get redirected from my custom section page to the content section, but the tree doesn't get expanded and the content page isn't loaded. If I refresh the page without doing anything the tree does get expanded and the content page is loaded. Seems I'm almost there but what should I do in order for this to work without a refresh?

Jeroen 

So far no luck. Tried it for a couple of hours now, but I don't kno w how to solve this. If I go to the address directly (/umbraco/umbraco.aspx?app=content&rightAction=editContent&id=1077) it also doens't work. I still need to refresh (F5) it afterwards. I've studied the javascript in umbraco.aspx and HistoryManager.js, but I don't know why it doesn't work immediately. The following examples (from the page in the custom section) all don't work:

<asp:HyperLink ID="HplMediaFolder" runat="server" Text="Media" NavigateUrl="/umbraco/actions/editContent.aspx?id=1077"></asp:HyperLink>
<a href="#" onclick="javascript:top.window.location.href = '/umbraco/umbraco.aspx?app=content&rightAction=editContent&id=1077';">Click</a>
<a href="javascript:top.window.location.href = '/umbraco/actions/editContent.aspx?id=1077';">Click2</a>
<a href="javascript:top.window.location.reload(true);">Click3</a>
<a href="javascript:window.parent.location.href = '/umbraco/actions/editContent.aspx?id=1077';">Click4</a>
<asp:LinkButton ID="LinkBtnRedirect" runat="server" Text="Test" OnClick="LinkBtnRedirect_Click"></asp:LinkButton>
<a href="javascript:top.UmbClientMgr.appActions().shiftApp('content', top.uiKeys['sections_' + 'content']);top.UmbClientMgr.contentFrame('editContent.aspx?id=1077');">Click5</a>
<a href="javascript:top.UmbClientMgr.appActions().shiftApp('content', top.uiKeys['sections_' + 'content']);top.window.location.href = '/umbraco/actions/editContent.aspx?id=1077';">Click6</a>
<a href="javascript:top.CallTest();">Click7</a>

I hope someone knows how to solve this.

Jeroen

Since nobody knew the answer I asked Per Ploug Hansen while I was at the umbraco level 2 course and he gave me a good tip. Here is what I was doing:

/umbraco/umbraco.aspx?app=content&rightAction=editContent&id=1077

Instead I should have done this:

/umbraco/umbraco.aspx?app=content&rightAction=editContent&id=1077#content.

The #content already needs to be added to the end of the url. After this deeplinking works and the tree expands to the correct node and the node is displayed immediately to edit. 

Now I've got deeplinking working in the content section, but I can't get it to work in the media section. I tried the following:

/umbraco/umbraco.aspx?app=media&rightAction=editMedia&id=1155#media

This opens the media item, but the tree isn't expanded to the correct media item. Some know how to solve this? I know deeplinking also works in the media section because if I revisit the media section the correct media item is opened and the tree also expands to the correct node.

Jeroen

Is there nobody who knows how deeplinking works in the Umbraco media section? Not even the core developers? I need this deeplinking in the backend for a new package I'm working on.

Jeroen

I'm starting to think deeplinking in the media section just doesn't work and it was only designed for the content section. That's why I added a codeplex item (feature request). I hope deeplinking can also work in the media section. Please vote.

http://umbraco.codeplex.com/workitem/28673

Jeroen

Thank you! I would really like to have this feature since I'm currently building a website in which it would be really convenient to deeplink to the media section (from a custom section). This will also be good for a package I'm working on in which I want to use deeplinking.

Jeroen

Hi Shannon,

As you mentioned on you blog you've got deeplinking in the Multi-node tree picker working. I'm trying to create my own custom datatype which can link to other nodes, but I can't get the deeplinking to work (if the user clicks on one of the linked nodes I want to go to that node and sync the tree on the left). Could you explain how you did it? I've been looking at the source code of uComponents, but I think I'm missing something. This is what you're doing in MultiNodePickerScripts.js:

var newLocation = window.location.toString().replace(/(\=)(.*)/, "$1" + data.d.Id);
var h = "<a href='" + newLocation + "'>[edit]</a><h5>ID: " + data.d.Id + "</h5><p><b>Path:</b> " + data.d.Path + "</p><p><i>" + data.d.PathAsNames + "</i></p>";

I tried this in my own datatype like this:

<a href="javascript:window.location.toString().replace(/(\=)(.*)/, '$1' + 1303);">Hardcode test</a>

This is what I get if I click on my link:

Can you explain what I'm doing wrong and how could this work if you're in the content section and want to go to the media section (like in the MNTP).

Thanks.

Jeroen

Ok small update. I got the deeplinking working in the content and media section and it's really easy:

If you have a custom datatype which is being used in the content section the following works:

<a href="/umbraco/editcontent.aspx?id=1303">Hardcode test</a>

If the user clicks this link while he's in the content section he goes to the node and the content tree is also synced.

If you have custom datatype which is being used in the media section the following works:

<a href="/umbraco/editmedia.aspx?id=1102">media</a>

If the user clicks this link while he's in the media section he goes to the node and the media tree is also synced.

The only thing which isn't working is if you click on a link to the media section while you're in the content section and vice versa. You open the media item on the right, but you still have the content tree on the left. How can this be solved? Is this related to this codeplex item?

Jeroen

Sorry for the late reply here!

So, deep linking in the media section does work.. good news, this means i can probably close this feature request :)

To solve your current issue, you can't just link to the editmedia.aspx page as this will only load the editor pane on the right hand side (as you've noticed). You can however, use the API, either on the client side or the server side.... though this has not been tested since this functionality doesn't currently exist in the back office.

The server side would look something like this:

umbraco.BasePages.BasePage.Current.ClientTools
    .ShiftApp("media")
    .ChangeContentFrameUrl("editMedia.aspx?id=123");

The client side would look something like this:

UmbClientMgr.historyManager().addHistory("media");
UmbClientMgr.contentFrame("editMedia.aspx?id=123");

Again, I'm not sure if this will definitely work. The reason is that there is a JavaScript listener on the history manager for when the hash location on the page url changes. When this occurs it tries to sync to the last location that you navigated to in that application. This all depends on when these JavaScript events fire. If you're lucky, the above will work. If not, let me know and I'll figure out a way to get around this behavior.

(if there's a will there's a way... without changing the core)

Cheers,

Shannon

Hi Shannon,

Thanks for explaining this. I'll give it a try. Does this mean deeplinking currently doesn't work for the MNTP when you're in the content section and you display the media tree and click on the edit link in the tooltip? I'll let you know if your example works.

The codeplex issue was that the link (/umbraco/umbraco.aspx?app=media&rightAction=editMedia&id=1155#media) didn't work.

Jeroen

ahh, right so deep linking from outside umbraco into umbraco media still doesn't work. Ok cool, i'll keep that open.

I'll look into MNTP and see what I've done but you may be right, i may not have implemented this.

Hi Shannon,

I tried both of your suggestions, but unfortunately they both don't work.

Javascript:

<script language="javascript" type="text/javascript">

    function callJavascript() {
        alert('hoi');
        UmbClientMgr.historyManager().addHistory("media");
        UmbClientMgr.contentFrame("editMedia.aspx?id=1102");
    }

</script>

<a href="javascript:callJavascript();">Backend test</a>

If I click the link I get the following exception: 

Object expected
this._historyMgr=new Umbraco.Controls.HistoryManager()

Do I need to include something? It's in a custom datatype so I thought it already has all the javascript available.

Server side:

<asp:LinkButton ID="LnkBtnClick" runat="server" OnClick="LnkBtnClick_Click">Backend</asp:LinkButton>

protected void LnkBtnClick_Click(object sender, EventArgs e)
        {
            umbraco.BasePages.BasePage.Current.ClientTools
                .ShiftApp("media")
                .ChangeContentFrameUrl("editMedia.aspx?id=1102");
        }

If I click the link I get the following exception:

Message: Expected ';'
Line: 874
Char: 50
Code: 0
URI: http://localhost:3817/umbraco/editContent.aspx?id=1122

I hope you can get it to work in MNTP with switching between the content and media section.

Jeroen

LOL! ok, i have it working but this is by far one of the dodgiest things ever :) but hey, it works so thats all that matters. The reason that it's not that straight forward is because there currently is no functionality like this in the core. The reason you were getting javascript errors before was becaue the history manager plugin is only loaded in the main window, not in the editor frame since this functionality has never been needed/requested. Even if you add the history manager and bbq jquery plugin into the main content window using ClientDependency, you still won't be able to deep link because it's going to try to load the last loaded tree state for that application. So essentially, we need a way to have the back office navigate to another application. This is very easy and can be done without the history manager plugin just by chaning the hash of the url:

UmbClientMgr.mainWindow().location.hash = "#media";

But as previously mentioned, this will just go to the media app and try to load the previously persisted tree and last viewed content frame. Even if we try to set the content frame before or after this call it will fail... so this still doesn't work:

UmbClientMgr.contentFrame("/umbraco/editMedia.aspx?id=1234");
UmbClientMgr.mainWindow().location.hash = "#media";

or

UmbClientMgr.mainWindow().location.hash = "#media";
UmbClientMgr.contentFrame("/umbraco/editMedia.aspx?id=1234");

So, we need to do some very sneaky (most would say very dodgy) JavaScripting.  So here's how you can do it, you can use this script inside of your content frame:

var js = "function delayedNavigate(url) { setTimeout(function() {UmbClientMgr.contentFrame(url);},1000);}";
var injectScript = UmbClientMgr.mainWindow().jQuery('<script>').attr('type', 'text/javascript').html(js);
UmbClientMgr.mainWindow().jQuery("head").append(injectScript);                            
UmbClientMgr.mainWindow().deepLink("/umbraco/editMedia.aspx?id=1234");
UmbClientMgr.mainWindow().location.hash = "#media";

To explain: we create a fuction called delayedNavigate which sets the content frame's url to be the 'url' parameter that is passed into after a 1 second timeout. Then we create the jQuery script object using the main windows jQuery object, this is VERY important otherwise it won't work. Then we append this script block into the 'head' element of the main window using the main window's jQuery object. Next, we just call the injected method in the main window from the content window and finally change the hash tag of the current location of the main window.

So once the method is called, the main window is going to wait one second before going to our target content frame url, then as soon as we change the hash tag the system automatically will navigate to the media section and shortly after that the main window calls our method and navigates to the target url. The reason this won't work if you use the content frame's jquery object is because jQuery and browsers don't like this behavior as it's a bit of a security hack but since it's on the same domain this is still slightly possible.

Hope this helps! I'll see what i can put into the core for the next release to make this less painful!

Oops, sorry here's the script block again, i forgot to change the method call:

var js = "function delayedNavigate(url) { setTimeout(function() {UmbClientMgr.contentFrame(url);},1000);}";
var injectScript = UmbClientMgr.mainWindow().jQuery('<script>').attr('type', 'text/javascript').html(js);
UmbClientMgr.mainWindow().jQuery("head").append(injectScript);                            
UmbClientMgr.mainWindow().delayedNavigate("/umbraco/editMedia.aspx?id=1234");
UmbClientMgr.mainWindow().location.hash = "#media";

Hi Shannon,

Wow that's a long story! Thanks for explaining that. I copied the code you wrote but if I try to use it I get the following exception:

Error: Unexpected call to method or property access.

This is my code in my custom datatype (used with the umbraco usercontrol wrapper):

<script language="javascript" type="text/javascript">

    function callJavascript() {
        alert('test');
        var js = "function delayedNavigate(url) { setTimeout(function() {UmbClientMgr.contentFrame(url);},1000);}";
        var injectScript = UmbClientMgr.mainWindow().jQuery('<script>').attr('type', 'text/javascript').html(js);
        UmbClientMgr.mainWindow().jQuery("head").append(injectScript);
        UmbClientMgr.mainWindow().delayedNavigate("/umbraco/editMedia.aspx?id=1102");
        UmbClientMgr.mainWindow().location.hash = "#media";
    }

</script>

<a href="javascript:callJavascript();">Backend test</a>

Any idea what I might be doing wrong? Thanks for all the help so far! I couldn't have come this far without you.

Jeroen

Hi Shannon,

I just tried changeset 66181 for uComponents (Comment: deep linking now working between sections with MNTP), but I get the same exception when I'm in the content section and I click on the edit link (Error: Unexpected call to method or property access) to go the media section. Should I report this as a bug on codeplex?

Jeroen

Ok, this works in all browsers (at least IE, Chrome and FF)

put this somewhere in your content frame:

var iframe = UmbClientMgr.mainWindow().jQuery("#deepLinkScriptFrame");
if (iframe.length == 0) {
    var html = "<html><head><script type='text/javascript'>this.window.delayedNavigate = function(url, app) { UmbClientMgr.mainWindow().location.hash = '#' + app   ; setTimeout(function() {UmbClientMgr.contentFrame(url);},1000);};</script></head><body></body></html>";
    iframe = UmbClientMgr.mainWindow().jQuery("<iframe id='deepLinkScriptFrame'>")
                .append(html)
                .hide()
                .css("width", "0px")
                .css("height", "0px");
    UmbClientMgr.mainWindow().jQuery("body").append(iframe);
}

then to do the deeplinking, use this script:

UmbClientMgr.mainWindow().delayedNavigate("/umbraco/editMedia?id=1234", "media");

Explanation:

Well, this is a hugely dodgy way to inject a method into the main window. In FF and Chrome it appears as though you can inject script blocks into the DOM of a different frame. Unfortunately IE and Safari don't really like this so we need to do it slightly differently. All browsers allow you to inject an iframe and since the iframe doesn't exist just yet, we can add whatever content we like to the iframe including script blocks. So we write a script block in an iframe that will attach a method to the main frame's 'window' object and then attach the iframe to the main window. This way the new method is persisted to the main window since the iframe we've attached is never going to be removed (like how the content frame is always reloaded). Now that our method is attached to the main window, we can call it whenever we want.

Enjoy!

Shannon

Ok I think we're almost there :). I've tested your code above and also downloaded the latest MNTP version (66249) and if you're in the content section and you click edit (with media items) you go to the media section, open the item on the right, but the tree on the left isn't updated. That's strange because the following code does work:

<a href="/umbraco/editmedia.aspx?id=1102">Test2</a>

If you know click this link in a custom datatype (which is in the media section) the tree does expand. Perhaps it's got something to do with that you're already in the media section.

So we're almost there. Only need to sync the tree on the left if you go to another section.

Thanks.

Jeroen

Ok, this does work! Yes, it is quite a crazy work around and i'll definitely make this an easier process for the next version of umbraco core. In the meantime, this will work.

Use this script to your data type, or whatever to create a method for deep linking between applications and nodes (currently only tested on content/media trees):

var iframe = UmbClientMgr.mainWindow().jQuery("#deepLinkScriptFrame");
if (iframe.length == 0) {
    var html = "<html><head><script type='text/javascript'>"
                + "this.window.top.delayedNavigate = function(url, app) { "
                + "  if (UmbClientMgr.historyManager().getCurrent() == app) {"
                + "    UmbClientMgr.contentFrame(url);"
                + "  }"
                + "  else {"
                + "    var origContentFrameFunc = UmbClientMgr.contentFrame;"
                + "    var newContentFrameFunc = function (location) {"
                + "       UmbClientMgr.contentFrame = origContentFrameFunc;"
                + "       origContentFrameFunc.call(this, url);"
                + "    };"
                + "    UmbClientMgr.contentFrame = newContentFrameFunc;"
                + "    UmbClientMgr.mainTree()._loadedApps['tree_' + app] = null;"
                + "    UmbClientMgr.mainTree().setActiveTreeType(app);"
                + "    UmbClientMgr.mainWindow().location.hash = '#' + app   ; "
                + "  }"
                + "};"
                + "</script></head><body></body></html>";
    iframe = UmbClientMgr.mainWindow().jQuery("<iframe id='deepLinkScriptFrame'>")
                .append(html)
                .hide()
                .css("width", "0px")
                .css("height", "0px");
    UmbClientMgr.mainWindow().jQuery("body").append(iframe);
}

Now that this code is registered, you can just call the new method to do the deep linking:

UmbClientMgr.mainWindow().delayedNavigate(newLocation, treeType);

This concept is still based on the previous concepts mentioned and injecting scripts between frames, but this one doesn't rely on timing/hacking to ensure that the content frame and tree are synced, this does some sneakier stuff but it's much more robust.

Enjoy!

Shannon

Thank you Shannon! It now works :). Finally 7 weeks after I started this topic you solved it :D. This is a cool feature which I really needed. I've tested uComponents v1.0 and the deeplinking also works perfect in it! Even used the MNTP in a custom section and deeplinking to the media section still works :).

Jeroen

Hi Shannon,

Deeplinking doesn't seem to work anymore in the latest version of uCompontents. See this workitem: http://ucomponents.codeplex.com/workitem/13334.

I think it might be related to the "Keyboard navigation in tree" and "Shortcuts for tray icon/tabs" javascript.

Jeroen

Hi Shannon,

I can confirm that if I disable <add name="uComponentsModule" type="uComponents.Core.Modules.uComponentsModule, uComponents.Core" /> in the web.config it does work.

I hope this can be fixed by changing something in the "Keyboard navigation in tree" and "Shortcuts for tray icon/tabs" javascript because I also use the deeplink code from MNTP in the Digibiz Advanced Media Picker (http://damp.codeplex.com/) and I don't want fix in it in there.

Jeroen

Just found this semi-old post, Shannon, did you ever get around to implement an easier way for linking between content and media? 

is working on a reply...