Javascript on ribbon group

Question

I managed to get a new ribbon group by following the article mentioned in How to create the custom buttons horizontally one below the other in ribbon of Tridion

I'm now trying to get a Javascript running whenever something changes in the Gui (hiding/showing buttons).

I have this in the configuration:

<!-- In the cfg:groups part -->
<cfg:group name="ClientGuiMods.ContentGroup" description="">
    <cfg:fileset>
        <cfg:file type="script">/Scripts/CreateRibbonGroup.js</cfg:file>
    </cfg:fileset>
    <cfg:dependencies>
        <cfg:dependency>Tridion.Web.UI.Editors.CME</cfg:dependency>
    </cfg:dependencies>
</cfg:group>

<!-- In the ribbontoolbars add part -->
<ext:extension pageid="HomePage" name="Content" assignid="ContentGroupId">
    <ext:group>~/Scripts/ContentGroup.ascx</ext:group>
    <ext:dependencies>
        <cfg:dependency>ClientGuiMods.ContentGroup</cfg:dependency>
    </ext:dependencies>
    <ext:apply>
        <ext:view name="DashboardView">
            <ext:control id="DashboardToolbar" />
        </ext:view>
    </ext:apply>
</ext:extension>

And this in the Javascript:

Type.registerNamespace("ClientGuiMods");

ClientGuiMods.ContentGroup = function ContentGroup(element)
{
    console.log('RibbonGroupCreated');
    Tridion.OO.enableInterface(this, "ClientGuiMods.ContentGroup");
    this.addInterface("Tridion.Controls.RibbonItemsGroup", [element]);
};

I've tried different arguments for this.addInterface(), but it never gets called. Is this the correct way? Or is there maybe another way to get a script called on the Home ribbon toolbar?

Answer 1

I never really looked at the group as anything other than a container for commands (read buttons). So the only interface I used is Tridion.Cme.Command on the button JavaScript.

But I think what you are looking for is the ControlResource which you can specify in your ContentGroup.ascx.cs

using Tridion.Web.UI.Core;
using Tridion.Web.UI.Controls;
using Tridion.Web.UI.Core.Controls;

namespace ClientGuiMods
{
    [ControlResources("ClientGuiMods.ContentGroup")]
    public class ContentGroup : TridionUserControl
    {
    }
}

Now, you can use the Tridion.ControlBase interface in your JavaScript.

Type.registerNamespace("ClientGuiMods");

ClientGuiMods.ContentGroup = function ContentGroup(element) {
    console.log('RibbonGroupCreated');
    Tridion.OO.enableInterface(this, "ClientGuiMods.ContentGroup");
    this.addInterface("Tridion.ControlBase", [element]);
};

ClientGuiMods.ContentGroup.prototype.initialize = function ContentGroup$initialize() {
    // the control is initialized here, we can use the following properties now
    var props = this.properties;
    var controls = props.controls;
    var container = this.getElement();
};

Answer 2

@Bart, I tried the solution, but couln't get that to work.

Digging a bit further in the Javascripts in chrome I found there is no hook to fire any extra Javascript as a RibbonGroup (correct me if I'm wrong).

I did however find a way to get to the 'HomePage' RibbonPage and get it to fire events from there.

The extra thing I need is a "c:pagetype='Homepage'" on the RibbonPage named HomePage in the DOM, which isn't there by default. This can be set by including a load event script at the end. So now my script looks like this.

Type.registerNamespace("ClientGuiMods");

ClientGuiMods.CreateRibbonPage = function CreateRibbonPage(element)
{
    Tridion.OO.enableInterface(this, "ClientGuiMods.CreateRibbonPage");
    this.addInterface("Tridion.Controls.RibbonPage", [element]);
};
ClientGuiMods.CreateRibbonPage.prototype.updateState = function CreateRibbonPage$updateState(stateObject)
{
    //...
    //Ribbonpage logic to update the state of your buttons and groups
};

console.log('Homepage: ' + document.getElementById('HomePage')); //.setAttribute('c:pagetype', 'HomePage');

var ClientScripts = {
    registerHomepage: function() {
        console.log('adding c:pagetype att');

        var homepage = document.getElementById('HomePage');

        if (homepage) {

            homepage.setAttribute('c:pagetype', 'HomePage');


        }
    }
}
if (document.addEventListener && !Tridion.Utils.Dom.isIE)
    $evt.addEventHandler(window, "DOMContentLoaded", ClientScripts.registerHomepage);
else
    $evt.addEventHandler(window, "readystatechange", ClientScripts.registerHomepage);

Tridion.Controls.Deck.registerPageType(ClientGuiMods.CreateRibbonPage, "HomePage");