Issue loading JS in extension XPM

Question

I have an issue trying to load a JS file to my XPM extension. I'm developing an extension follow the SDL guide (http://docs.sdl.com/LiveContent/content/en-US/SDL%20Web-v1/GUID-DAA5ED29-8192-4F9C-9D58-557506CEA97D) which add a new tab in the Ribbon Toolbar. For this purpose, I've created an ascx file which contains a select (made with the "ribbondropdown" element). It is my config file code:

<?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="GE.AddComponentToBundle" merge="always">
        <cfg:fileset>
          <cfg:file type="script">/AddComponentToBundle.js</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:group name="GUIPageViewExtension.AddComponentToBundleXPM" merge="always">
        <cfg:fileset>
          <cfg:file type="script">/AddComponentToBundleXPM.js</cfg:file>
        </cfg:fileset>
        <cfg:dependencies>
          <cfg:dependency>Tridion.Controls.RibbonPage</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:contextmenus/>
        <ext:lists />  
        <ext:tabpages>
          <ext:add>
           <ext:extension insertbefore="targetGroups" assignid="AddComponentToBundle" name="Apariencia">
              <ext:control>~/AddComponentToBundle.ascx</ext:control>
              <ext:pagetype>GE.AddComponentToBundle</ext:pagetype>
              <ext:dependencies>
                <cfg:dependency>GE.AddComponentToBundle</cfg:dependency>
              </ext:dependencies>
            <ext:apply>
                <ext:view name="PageView">
                    <ext:control id="ComponentPresentationPropertiesTabControl" />
                </ext:view>
            </ext:apply>
          </ext:extension>
          </ext:add>
        </ext:tabpages>
        <ext:toolbars/>
        <ext:ribbontoolbars/>
      </ext:editorextension>
      <ext:editorextension target="SiteEdit">
        <ext:editurls/>
        <ext:listdefinitions/>
        <ext:taskbars/>
        <ext:commands/>
        <ext:commandextensions/>        
        <ext:contextmenus/>
        <ext:lists /> 
        <ext:tabpages/>
        <ext:toolbars/>
        <ext:ribbontoolbars>
            <ext:add>
                <ext:extension pageid="AddComponentToBundleXPM" name="AddComponentToBundleXPM" assignid="AddComponentToBundleXPM">
                    <ext:group>~/AddComponentToBundleXPM.ascx</ext:group>
                    <ext:dependencies>
                        <cfg:dependency>GUIPageViewExtension.AddComponentToBundleXPM</cfg:dependency>
                    </ext:dependencies>
                    <ext:apply>
                        <ext:view name="EditorView">
                            <ext:control id="MainToolbar" />                            
                       </ext:view>
                    </ext:apply>
                </ext:extension>
            </ext:add>
        </ext:ribbontoolbars>
      </ext:editorextension>
    </ext:editorextensions>
  </extensions>
  <commands>
  </commands>
  <contextmenus />
  <localization />
  <settings>
    <defaultpage/>
    <navigatorurl/>
    <editurls/>
    <listdefinitions />
    <itemicons/>
    <theme>
      <path>theme/</path>
    </theme>
    <customconfiguration />
  </settings>
</Configuration>

With this, the new element "AddComponentToBundleXPM" appears in the Ribbon Toolbar of my XPM installation, but it doesn´t load the JS file I'm trying to associate with it (AddComponentToBundleXPM.js).

On the other hand, the JS code is:

//Type.registerNamespace("GUIPageViewExtension");
Type.registerNamespace("Tridion.Web.UI.Editors.SiteEdit.Controls");

Tridion.Web.UI.Editors.SiteEdit.Controls.AddComponentToBundleXPM = function AddComponentToBundleXPM(element) 
{
    console.log('RIBBON CREATED');
    Tridion.OO.enableInterface(this, "Tridion.Web.UI.Editors.SiteEdit.Controls.AddComponentToBundleXPM");
    this.addInterface("Tridion.Controls.RibbonPage", [element]);
    var p = this.properties;
};

Tridion.Web.UI.Editors.SiteEdit.Controls.AddComponentToBundleXPM.prototype._initialize = function AddComponentToBundleXPM$_initialize() 
{

    console.log("RIBBON INITIALIZATED");
    this.callBase("Tridion.Controls.RibbonPage", "_initialize");
};

Tridion.Web.UI.Editors.SiteEdit.Controls.AddComponentToBundleXPM.prototype._isAvailable = function AddComponentToBundleXPM$_isAvailable(selection) 
{
    console.log('GUIPageViewExtension.AddComponentToBundleXPM --> _isAvailable');
    return true;
};

Tridion.Web.UI.Editors.SiteEdit.Controls.AddComponentToBundleXPM.prototype._isEnabled = function AddComponentToBundleXPM$_isEnabled(selection) 
{
    console.log('GUIPageViewExtension.AddComponentToBundleXPM --> _isEnabled');
    return true;
}

Tridion.Controls.Deck.registerPageType(Tridion.Web.UI.Editors.SiteEdit.Controls.AddComponentToBundleXPM, "AddComponentToBundleXPM");

What could be the problem? Do I need any extra configuration? Is any code wrong?

Thanks in advance!

Answer 1

I found the solution. In my config file I had included the next lines incorrectly:

<ext:group>~/AddComponentToBundleXPM.ascx</ext:group>

The correct configuration is to include it as control file and add a key in the page type which is the name that we have registered in the JS file:

<ext:control>~/AddComponentToBundleXPM.ascx</ext:control>
    <ext:pagetype>SEAddComponentToBundleXPMPage</ext:pagetype>

(JS file):

Tridion.Controls.Deck.registerPageType(Tridion.Web.UI.Editors.SiteEdit.Controls.AddComponentToBundleXPM, "SEAddComponentToBundleXPMPage");

With this lines, the methods in JS will be executed without problem.

Hope it helps.