Extend NewContent.aspx window in Experience Manager

Question

I'm trying to provide more functionality to my CME and my XPM Editor, so I have developed an extension which adds more than one Component at the same time on the CME.

When I try to replicate this in SiteEdit I found with the page NewContent.aspx located in the path C:\Program Files (x86)\Tridion\web\WebUI\Editors\SiteEdit\Views\Popups\NewContent.

Is it possible to extend the button "Create Content" remarked in green? Normally we extend commands but in this case I would need to extend/capture this event without modifing the original file NewContent.aspx.js (if it could be possible).

Is it possible to drag a Component in XPM and associate one Component more and insert it into the page? Capturing some event?

My editor config file code is:

<?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="Extensions.ValidateFields.comandos">
        <cfg:fileset>
            <cfg:file type="script">/Client/dependencies/jquery.js</cfg:file>
            <cfg:file type="script">/Client/dependencies/jquery-ui.js</cfg:file>
            <cfg:file type="script">/Client/dependencies/jquery.tmpl.js</cfg:file>
            <cfg:file type="script">/js/Utils.js</cfg:file>
            <cfg:file type="script">/js/Constants.js</cfg:file>             
            <cfg:file type="script">/js/ValidarCampos.js</cfg:file>         
            <cfg:file type="reference">Extensions.ValidateFields.Interfaz</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:dataextenders/>
    <ext:editorextensions>
      <ext:editorextension target="CME">
        <ext:editurls/>
        <ext:listdefinitions/>
        <ext:taskbars/>
        <ext:commands/>
        <ext:commandextensions>
          <ext:commands>
            <ext:command name="SaveNew" extendingcommand="BotonSaveNew" />
            <ext:command name="Save" extendingcommand="BotonSave" />
            <ext:command name="SaveClose" extendingcommand="BotonSaveClose" />
          </ext:commands>
          <ext:dependencies>
            <cfg:dependency>Extensions.ValidateFields.comandos</cfg:dependency>
          </ext:dependencies>
        </ext:commandextensions>
        <ext:contextmenus/>
        <ext:lists/>
        <ext:tabpages/>
        <ext:toolbars/>
        <ext:ribbontoolbars/>
      </ext:editorextension>
      <ext:editorextension target="SiteEdit">
        <ext:editurls/>
        <ext:listdefinitions/>
        <ext:taskbars/>
        <ext:commands/>
        <ext:commandextensions>
          <ext:commands>
            <ext:command name="FinishEditing" extendingcommand="BotonFinishEditing" />
            <ext:command name="CommitChanges" extendingcommand="BotonCommitChanges" />
            <ext:command name="SaveAll" extendingcommand="BotonSaveAll" />
            <ext:command name="CancelEditing" extendingcommand="BotonCancelEditing" />
            <ext:command name="ShowMoveTool" extendingcommand="BotonMove" />
            <ext:command name="MoveContentUp" extendingcommand="BotonMoveUp" />
            <ext:command name="MoveContentDown" extendingcommand="BotonMoveDown" />
            <ext:command name="UpdatePreview" extendingcommand="BotonUpdatePreview" />
            <ext:command name="InsertNewContent" extendingcommand="BotonInsertContentFromLibrary" />
          </ext:commands>
          <ext:dependencies>
            <cfg:dependency>Extensions.ValidateFields.comandos</cfg:dependency>
          </ext:dependencies>
        </ext:commandextensions>
        <ext:contextmenus/>
        <ext:lists/>
        <ext:tabpages/>
        <ext:toolbars/>
        <ext:ribbontoolbars/>
      </ext:editorextension>
    </ext:editorextensions>
  </extensions>
  <commands>
    <cfg:commandset id="Extensions.ValidateFields.Interfaz">
      <cfg:command name="BotonSaveNew" implementation="Extensions.ValidateFields.BotonSaveNew"/>
      <cfg:command name="BotonSave" implementation="Extensions.ValidateFields.BotonSave"/>
      <cfg:command name="BotonSaveClose" implementation="Extensions.ValidateFields.BotonSaveClose"/>
      <cfg:command name="BotonFinishEditing" implementation="Extensions.ValidateFields.BotonFinishEditing"/>
      <cfg:command name="BotonCommitChanges" implementation="Extensions.ValidateFields.BotonCommitChanges"/>
      <cfg:command name="BotonSaveAll" implementation="Extensions.ValidateFields.BotonSaveAll"/>
      <cfg:command name="BotonCancelEditing" implementation="Extensions.ValidateFields.BotonCancelEditing"/>
      <cfg:command name="BotonMove" implementation="Extensions.ValidateFields.BotonMove"/>
      <cfg:command name="BotonMoveUp" implementation="Extensions.ValidateFields.BotonMoveUp"/>
      <cfg:command name="BotonMoveDown" implementation="Extensions.ValidateFields.BotonMoveDown"/>
      <cfg:command name="BotonUpdatePreview" implementation="Extensions.ValidateFields.BotonUpdatePreview"/>
      <cfg:command name="ModifyColumns" implementation="Extensions.ValidateFields.ModifyColumnsButton"/>
      <cfg:command name="CancelModifyColumns" implementation="Extensions.ValidateFields.CancelModifyColumnsButton"/>
      <cfg:command name="InsertContainer" implementation="Extensions.ValidateFields.InsertContainerButton"/>
      <cfg:command name="BotonInsertContentFromLibrary" implementation="Extensions.ValidateFields.BotonInsertContentFromLibrary"/>
    </cfg:commandset>
  </commands>
  <contextmenus />
  <localization />
  <settings>
    <defaultpage/>
    <navigatorurl/>
    <editurls/>
    <listdefinitions />
    <itemicons />
    <theme>
      <path>/Theme/</path>
    </theme>
    <customconfiguration>
    </customconfiguration>  
  </settings>
</Configuration>

My js file code is:

Type.registerNamespace("Extensions.ValidateFields");

Extensions.ValidateFields = function ValidateFields()
{
    console.log("some text");
}

In this file I have a function "window.onload" but when I put the code you mentioned into this function, it only runs once (the first page load).

And my System.config is configured like that:

<editor name="TridionValidates">
      <installpath>C:\Program Files (x86)\Tridion\Extensions\TridionValidates\Editor</installpath>
      <configuration>config\TridionValidates.config</configuration>
      <vdir>TridionValidates</vdir>
    </editor>

Thanks in advance.

Answer 1

You can extend pretty much anything using the GUI extension. For the scenario you described above, in your GUI extension, instead of extending commands through the config file, you can capture/extend the "Create Content" button in your event handler.

To extend the "Create Content" button in your GUI extension, you'll do something like this in your event handler:

      function onDisplay()
      {
            var view = $display.getView().getId();

            if (view == "NewContentView")
            {
                $display.resize();

                // Get the controls of the "Create Content" button. The id is specified in NewContent.aspx
                var BtnCreateContent = $controls.getControl($("#BtnCreateContent"), "Tridion.Controls.Button");

                // Create a new button control that'll  extend the "Create Button"
                var BtnNew = $controls.createControl("Tridion.Controls.Button", { text: "New Button", id: "BtnNew" });

                // Append to the "Create Button" element the "New Button"
                BtnCreateContent.getElement().parentNode.appendChild(BtnNew.getElement());

                // Register an onclick event on the "New Button"
                $evt.addEventHandler(BtnNew, "click", this.getDelegate(this.onBtnNewClick_));
           }
     }

If you want to add your event handler for the "Create Content" button, you can remove the default event handler and register your custom event handler.

$evt.removeEventHandler(BtnCreateContent, "click", this.getDelegate(this._onCreateBtnClick));
$evt.addEventHandler(BtnCreateContent, "click", this.getDelegate(this._onClick));

Hope this helps.