2011 GUI Extensions and SiteEdit 2009 SP3

I’ve recently been working on a GUI extension for 2011. Following the great work being done in the Power Tools project I refactored my server-side functionality in to a Model. This brings my extension in line with the approach used by our R&D guys when they create extensions. It also, apparently, broke SiteEdit in my environment

Investigation

It didn’t take much figuring out the cause of my problem – the only change to my environment between SiteEdit working and the problem appearing was the refactoring of my extension. A quick tweak of the configuration to disable it had SiteEdit working again. I launched Firebug to see if It would highlight anything untoward, and it was clear to see that SiteEdit was trying load my Model!

I thought this was strange, but a quick email to R&D confirmed that this was the expected behaviour. Apparently SiteEdit loads the CME in the background when it starts.

Solution

The solution was a a simple one in the end – when you configure your Model’s virtual directory in CME website in IIS, you need to make sure you also do it in the SiteEdit website. It wasn’t clear to me whether it’s good practice to do the same for your Editors, but I didn’t and it wasn’t an issue for me.

Advertisements

SiteEdit 2009 & JavaScript trickery

Problem

Recently I was preparing a demo for a prospect. Part of what I was doing involved making one of their product pages siteeditable. The page in question contained a lot of content, but the presentation was simplified through the use of tabs. The client had used prototype to achieve this, although I don’t believe this had any specific impact on the problem this caused. I wanted to be able to edit all of the content from all of the tabs, however this was proving somewhat difficult – only the first visible tab was outlined correctly, and when other tabs were selected the original outlining remained. I needed to find a way to make all of the content visible.

Analysis

Reading the description of the problem no doubt there are those of you who are saying “easy, just change the design to show all the tabbed content all of the time” and , of course, this is one solution that would work. However, I wanted to maintain the integrity of the design, so I needed a solution that would only make the tabbed content temporarily available.

The direction I needed to go in was obvious – with JavaScript being used to hide the content in the tabs, and with SiteEdit being largely JavaScript-based, my solution was to be a JavaScript solution. So far so good, but how was I going to get my JavaScript to run only when I wanted it to? With maintaining the design integrity still clear in my mind I decided I needed a solution that would only trigger when SiteEdit was active, so I  needed a way to identify when this was true.

Fortunately working for SDL means that I have access to resources in R&D that are not only in a position to offer advice, but are also happy to do so. After a flurry of emails, and a couple of false starts (apparently it’s really easy to determine if you’re viewing the staging site through the SE proxy or not), the pieces of the puzzle began to fall in to place.

Solution

My solution used SiteEdit events to capture when the Component Presentation was selected (clicked) – literally the “componentPresentationClicked” event:

function pageInit() {
    // Special functionality when CP selected
    var onComponentPresentationClicked = function() {
        // Code goes here
    }

    // if SiteEdit is active (Page is viewed through proxy) attach special functionality
    if (typeof(top.$SeEventManager) != "undefined") {
        var m = top.$SeEventManager.getInstance();
        m.Subscribe("componentPresentationClicked", onComponentPresentationClicked);

        try {
            Event.observe(window, 'unload', function() {
                m.Unsubscribe("componentPresentationClicked", onComponentPresentationClicked);
            });
        } catch (err) {
            // probably should do something here...
        }
    }
}

document.observe("dom:loaded",function() { pageInit(); });

In the end it was straight-forward to achieve, although I’ve since learned that there might be a more appropriate event to hook in to, but hopefully this will be useful information. And don’t forget, if you’re trying anything like this then Firebug is your friend 😉