I am adding a new Tab to the Component Edit screen. My tab is showing fine but the JavaScript is not loading. I would like to write out the URI of the current Component in the tab. I have a feeling the naming of my JavaScript methods is not correct or matching with the config, but really don’t know how to say ‘hello’ from the JavaScript side.
I used the InfoTab View from the Tridion CME (code sample below) and also the PowerTools ItemXml for inspiration – but no luck.
What is the minimum set of methods in the JS to get hello world working?
Solution
Added the dependencies node from Rob’s suggestion. The log then showed the js file as loading.
HelloTab.js
Type.registerNamespace("RC");
RC.HelloTab = function RC$HelloTab$HelloTab(element) {
console.log('Constructor');
Tridion.OO.enableInterface(this, "RC.HelloTab");
this.addInterface("Tridion.Controls.DeckPage", [element]); //My extension is like this
};
RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
console.log('init');
$log.debug('init');
this.callBase("Tridion.Controls.DeckPage", "initialize");
$evt.addEventHandler($display.getItem(), "load", this.getDelegate(this.updateView));
};
RC.HelloTab.prototype.select = function HelloTab$select()
{
console.log('select');
this.callBase("Tridion.Controls.DeckPage", "select");
this.updateView();
};
RC.HelloTab.prototype.updateView = function HelloTab$updateView()
{
console.log('update');
if (this.isSelected())
{
console.log('selected')
}
};
Tridion.Controls.Deck.registerPageType(RC.HelloTab, "RC.HelloTab");
HelloTab.config
<?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="RC.HelloTab" merge="always">
<cfg:fileset>
<cfg:file type="script">/HelloTab.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: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 assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>RC.HelloTab</ext:pagetype>
<ext:dependencies>
<cfg:dependency>RC.HelloTab</cfg:dependency>
</ext:dependencies>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
</ext:add>
</ext:tabpages>
<ext:toolbars/>
<ext:ribbontoolbars/>
</ext:editorextension>
</ext:editorextensions>
</extensions>
<commands/>
<contextmenus />
<localization />
<settings>
<defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
<navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
<editurls/>
<listdefinitions />
<itemicons/>
<theme>
<path>theme/</path>
</theme>
<customconfiguration />
</settings>
</Configuration>
Original:
HelloTab.config
<resources cache="true">
<cfg:filters />
<cfg:groups>
<cfg:group name="RC.HelloTab" merge="always">
<cfg:fileset>
<cfg:file type="style">{ThemePath}/HelloTab.css</cfg:file>
<cfg:file type="script">/HelloTab/HelloTab.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: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 assignid="HelloTab" name="Hi There!" insertbefore="InfoTab">
<ext:control>~/HelloTab.ascx</ext:control>
<ext:pagetype>HelloTab</ext:pagetype>
<ext:apply>
<ext:view name="ComponentView">
<ext:control id="MasterTabControl"/>
</ext:view>
</ext:apply>
</ext:extension>
</ext:add>
</ext:tabpages>
<ext:toolbars/>
<ext:ribbontoolbars/>
</ext:editorextension>
</ext:editorextensions>
</extensions>
<commands/>
<contextmenus />
<localization />
<settings>
<defaultpage/><!-- /Views/Default.aspx</defaultpage> -->
<navigatorurl/><!-- /Views/Default.aspx</navigatorurl> -->
<editurls/>
<listdefinitions />
<itemicons/>
<theme>
<path>theme/</path>
</theme>
<customconfiguration />
</settings>
JavaScript:
Type.registerNamespace("RC.HelloTab");
RC.HelloTab = function HelloTab(element)
{
Tridion.OO.enableInterface(this, "RC.HelloTab");
this.addInterface("Tridion.Controls.DeckPage", [element]);
};
RC.HelloTab.prototype.initialize = function HelloTab$initialize()
{
$log.event("RC.HelloTab", "RC.HelloTab init");
this.callBase("Tridion.Controls.DeckPage", "initialize");
document.write("something else");
var item = $display.getItem();
if (item)
{
if (item.isLoaded())
{
this._showInfo();
}
else
{
item.load();
}
}
};
RC.HelloTab.prototype.select = function HelloTab$select()
{
this.callBase("Tridion.Controls.DeckPage", "select");
if (this.properties.itemChanged)
{
this._showInfo();
this.properties.itemChanged = false;
}
};
RC.HelloTab.prototype._showInfo = function HelloTab$_showInfo()
{
var item = $display.getItem();
var html = "<h1>title</h1>";
$dom.setOuterHTML($("#title"), html);
document.write('another uri=' + item.ID);
};
RC.HelloTab.prototype._onItemChanged = function HelloTab$_onItemChanged()
{
if (this.isSelected())
{
this._showInfo();
}
};
Tridion.Controls.Deck.registerPageType(RC.HelloTab, "HelloTab");
Tridion.Web.Trace:
w3wp.exe Information: 0 : (634734775171817068) CachedJssControlResources: LastModifiedTime for type HelloTab is 5/24/2012 5:22:26 PM
w3wp.exe Information: 0 : (634734770029374585) CachedJssControlResources: LastModifiedTime for type editors_hellotab_hellotab_ascx is 5/24/2012 5:22:26 PM
I think your problem is you’re missing the dependency elements in the ext:extension element.
Add like so:
If you’re using Chrome you could put in some console.log statements (alerts if IE) into each of the methods you have implemented from the interface as a test and at the top of the file. E.g.:
One difference between your code and a GUI extension I’ve written recently is your constructor function name does not include the namespace.
I would expect it to be called:
Another way to check is to use Chrome developer tools on the page you expect your Javascript to appear, go to the scripts tab and use the search box within the developer tools to search for your namespace.
Hope this helps.