How to override XPM Cancel Button?

Question

I would like to do something when the user clicks "Cancel Editing" button in Tridion 2013 XPM. Below is my configuratin file and JS file. My Extension's Java Script file has been loaded in the page. But when i click the "Cancel" button looks like JS is not fired. I am having alert in all the sections (isavailable, isenabled and execute). Can anyone please point me out what i am doing wrong?

Is there any specific section in "system.config" file to add the SiteEdit related extension details? (VDIR and Extension location)

Congiguration File

   <?xml version="1.0"?>
  <Configuration xmlns="http://www.sdltridion.com/2009/GUI/Configuration/Merge"  xmlns:cfg="http://www.sdltridion.com/2009/GUI/Configuration" xmlns:ext="http://www.sdltridion.com/2009/GUI/extensions" xmlns:cmenu="http://www.sdltridion.com/2009/GUI/extensions/ContextMenu">
    <resources cache="true">
      <cfg:filters/>
      <cfg:groups>
        <cfg:group name="xpmextension.CommandSet">
          <cfg:fileset>
            <cfg:file type="script">/js/xpmextension.js</cfg:file>
            <cfg:file type="reference">xpmextension.Interface</cfg:file>
          </cfg:fileset>
          <cfg:dependencies>
            <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
            <cfg:dependency>Tridion.Web.UI.Editors.CME.commands</cfg:dependency>
          </cfg:dependencies>
        </cfg:group>
      </cfg:groups>
    </resources>
    <definitionfiles/>
    <extensions>
      <ext:editorextensions>
        <ext:editorextension target="SiteEdit">
          <ext:editurls />
          <ext:listdefinitions/>
          <ext:taskbars/>
          <ext:commands/>
          <ext:commandextensions>
            <ext:commands>
              <ext:command name="CancelEditing" extendingcommand="xpmextension"/>
            </ext:commands>
            <ext:dependencies>
              <cfg:dependency>xpmextension.CommandSet</cfg:dependency>
            </ext:dependencies>
          </ext:commandextensions>
          <ext:contextmenus/>
          <ext:lists/>
          <ext:tabpages/>
          <ext:toolbars/>
          <ext:ribbontoolbars/>
        </ext:editorextension>
      </ext:editorextensions>
      <ext:dataextenders/>
    </extensions>
    <commands>
      <cfg:commandset id="xpmextension.intereface">
        <cfg:command name="xpmextension" implementation="Extensions.xpmextension"/>
        <cfg:dependencies>
          <cfg:dependency>xpmextension</cfg:dependency>
        </cfg:dependencies>
      </cfg:commandset>
    </commands>
    <contextmenus/>
    <localization/>
    <settings>
      <defaultpage>/Views/Default.aspx</defaultpage>
      <navigatorurl>/Views/Default.aspx</navigatorurl>
      <editurls/>
      <listdefinitions/>
      <itemicons/>
      <theme>
        <path>css</path>
      </theme>
      <customconfiguration/>
    </settings>
  </Configuration>

Below is my JS file

            Type.registerNamespace("Extensions");

          Extensions.xpmextension = function Extensions$xpmextension()
          {
           Type.enableInterface(this, "Extensions.xpmextension");
           this.addInterface("Tridion.Cme.Command", ["xpmextension"]);
          };

          Extensions.xpmextension.prototype.isAvailable = function xpmextension$isAvailable(selection) {
          return true;
          }

          Extensions.xpmextension.prototype.isEnabled = function xpmextension$isEnabled(selection) {
          return true;
          }

              Extensions.xpmextension.prototype._execute = function xpmextension$_execute(selection) 
              {      
              alert("You have clicked the button");
              alert(window.location.href);

              }

Answer 1

You have at least one typo in your configuration file that I could spot so quickly, xpmextension.intereface vs xpmextension.Interface.

Not sure if that is the only thing, I usually don't try to look too much at the config because it is confusing me a lot, so what I tend to do is take a working config and start from there.

What I've done to test your scenario is took a basic setup of a UI Extension Editor, and wired it up like you tried to the CancelEditing command.

It is deployed as a regular web application under ..\Tridion\web\WebUI\Editors\Example\, then added as a virtual directory in the SDL Tridion website, and in the System.config I've inserted the following inside the /configuration/editors element:

<editor name="Example">
  <installpath>D:\Tridion\web\WebUI\Editors\Example\</installpath>
  <configuration>Configuration\ExampleEditor.config</configuration>
  <vdir>Example</vdir>
</editor>

When using my sample code, I get the alert fired when I press the Cancel Editing button, thats roughly what I did to test ;o).

You can download the source of the extension here: https://drive.google.com/file/d/0B3HC5g1nQ87sWUdfcmZRWGdUQzQ/view, hope it helps you getting along.

Just check the references and paths, build it and publish it (note there is a post build which copies the DLL to the Tridion WebUI location, so be sure to change its path accordingly or comment the post build command out completely).