4

I noticed some behaviour with XPM that is a bit weird. Here is an example where using an onclick-event for printing a page.

<button onclick="window.print();" @Html.DxaPropertyMarkup(() => Model.PrintButtonLabel)>
    @Model.PrintButtonLabel
</button>

When clicking on the link, or pressing space the onclick-event is triggered. If I am rendering links inside a DxaPropertyMarkup box, it will navigate to that link if I happen to click on the area containing the link. An editor probably don't want to actually execute the actions, they wanna edit the content.

I've been trying to figure out a couple of solutions for this:

  1. Detecting wheter or not we are in XPM-edit mode and not rendering the onclick-event. I have been unable to find any code example that is related to this.

  2. Blocking all href+onclick inside a DxaPropertyMarkup. I don't want an editor to navigate through the site or calling on events when they are editing a page.

Is there a way to do any of the above solutions or do you have something better in mind?

Thanks!

2

I don't think there is a server-side method that allows you to check if you are in XPM mode or not. However, you can do this client-side, using some handly jquery function. You can find this function here : http://www.tridiondeveloper.com/even-more-fun-with-experience-manager

/**
* XPM specific functions
*/
(function($) {
    // initialize global variable
    SDL_ENV.isInXpm = false;

    // check and set global variable
    $.fn.checkIfInXpm = function() {    
        // check via availability of Tridion objects
        if (typeof Tridion != "undefined" && typeof Tridion.Web.UI.SiteEdit != "undefined") {
            console.log("in XPM");
            SDL_ENV.isInXpm = true;

            // display elements specifically for experience manager
            $(".xpm-only").show();
        } else {
            console.log("not in XPM");
            SDL_ENV.isInXpm = false;

            // hide elements specifically for experience manager
            $(".xpm-only").hide();
        }
    }; 
}(jQuery));

$(document).ready(function() {
    // wait 5 seconds after document ready (to complete XPM load) and check if we are in XPM (setting global variable)
    setTimeout(function() {
        $().checkIfInXpm();
    }, 5000);
});

You could use this to remove any onclick (or other attribute) to an element. To do so, replace the $(".xpm-only").show(); or $(".xpm-only").hide(); with whatever you wish to do. For example, this piece of code removes the onclick event of a certain element : $element.prop("onclick", null);

  • your javscript code looks a nice solution! – Rajesh Sep 14 '17 at 12:24
  • It's not really my code, it's Bart Koopman who wrote this script. But it's a nice solution indeed – Harald Hoffelinck Sep 14 '17 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.