2

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.

5

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.

  • Thank you for your answer Sabarish, but I have a doubt, in which context should I execute this code? I mean, I have configured an extension in XPM which execute some code in the "EditorView" page, but I don't know how to add this code you have written in my own extension or if I should extend in some way the NewContent.aspx page... – Sergio Alonso Aug 4 '17 at 7:34
  • No worries @SergioAlonso. You need to add this in your GUI extension and if you have configured the extension correctly this should be picked up. Also, in your JS constructor, add $evt.addEventHandler($display, "start", this.getDelegate(this.onDisplay)); so this onDisplay function gets invoked. This code will place a button next to the "Create Content" button on the NewContent.aspx page and in your JS you can register the custom event to this button. You do not have to touch NewContent.aspx. Hope this answers this question. – Sabarish Senthilnathan Aug 4 '17 at 14:47
  • Thank you so much Sabarish. I will try this code in my GUI extension constructor. I hope I can make it works. – Sergio Alonso Aug 5 '17 at 11:00
  • I try the code and it doesn't works for me, probably because I don't well configured the extension. My namespace its "Extensions.ValidateFields" and I try to create the constructor like that "Extensions.ValidateFields = function ValidateFields(){}". Is it well? Because the code inside this doesn't execute it. – Sergio Alonso Aug 16 '17 at 8:58
  • Can you post your GUI editor config and your JS may be as a question? Because if you aren't able to hit the constructor then your config XML must not be configured right. – Sabarish Senthilnathan Aug 16 '17 at 11:38

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.