Creating Buttons using Usercontrol in Tridion Ribbon - tridion

Question

I have created a usercontrol for having two buttons one below the other as
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ViewItemsGroup.ascx.cs" Inherits="SDL.Examples.UI.Controls.ViewItemsGroup" %>
<%# Import Namespace="Tridion.Web.UI" %>
<c:RibbonItemsGroup runat="server" ID="RibbonItemsGroup">
<c:RibbonButton runat="server" CommandName="ViewStaging" Title="View in Staging" Label="View In Staging" IsSmallButton="true" ID="ViewStagingBtn" />
<c:RibbonButton runat="server" CommandName="ViewLive" Title="View in Live" Label="View in Live" IsSmallButton="true" ID="ViewLiveBtn" />
</c:RibbonItemsGroup>
In the extension.config i am refering to the usercontrol as shown below.
<ext:extension assignid="ViewItemsGroup" groupid="EditGroup" name="View" pageid="HomePage" insertbefore="PublishGroup">
<ext:group>~/Controls/ViewItemsGroup.ascx</ext:group>
<ext:dependencies>
<cfg:dependency>My.Theme</cfg:dependency>
</ext:dependencies>
<ext:apply>
<ext:view name="DashboardView">
<ext:control id="DashboardToolbar" />
</ext:view>
<ext:view name="PageView">
<ext:control id="ItemToolbar" />
</ext:view>
</ext:apply>
</ext:extension>
Do i need to include my button(s) details (mentioned in the usercontrol like ID) also in extension.config? Is it required to be added in <ext:command> ---- </ext:command> or any other place.
The usercontrol created, I am just placing along with the extension.config, .js and refering to ascx in my extension.config file. Do i need to place my usercontrol in any of the other folders?

Answer 1

In your extension.config, you specify the dependencies for the ItemsGroup under the ext:dependencies node. This should point towards your cfg:group where you reference a commandset which in turn points to your JavaScript files. You need to make these references correctly else the SDL Tridion UI framework won't know where to find your code. The system is just like us unable to perform magic and also does not come with a crystal ball.
Same goes for the user control, if you don't place it alongside your other extension files like the configuration, JavaScript and CSS, how would the UI framework be able to find it. The location of where you placed it, you specify in the ext:group node. For example ~/Controls/MyItemsGroup.ascx then you placed it in a sub directory Controls in the root of your extension.
Your configuration should look something like this then, with the dependencies pointing to the group you have specified above it under the resources node:
<ext:ribbontoolbars>
<ext:add>
<ext:extension assignid="MyGroup" ...>
<ext:group>~/Controls/MyItemsGroup.ascx</ext:group>
<ext:dependencies>
<cfg:dependency>My.Commands</cfg:dependency>
</ext:dependencies>
...
</ext:extension>
</ext:add>
</ext:ribbontoolbars>
Then in your control, you reference the command directly in its attributes, this is the JavaScript command under which the _isAvailable and _isEnabled methods are etc. The control will have something like:
<c:RibbonItemsGroup runat="server" ID="MyItemsGroup">
<c:RibbonButton runat="server"
CommandName="MyBtn"
Title="My Title" Label="My Label"
IsSmallButton="true" ID="MyId" />
...
</c:RibbonItemsGroup>
Lastly the JavaScript which implements your button command will then use the CommandName in its namespace:
Type.registerNamespace("Extensions");
Extensions.MyBtn = function Extensions$MyBtn() {
Type.enableInterface(this, "Extensions.MyBtn");
this.addInterface("Tridion.Cme.Command", ["MyBtn"]);
};
Extensions.MyBtn.prototype._isAvailable = function MyBtn$_isAvailable(selection) {
return true;
};
Extensions.MyBtn.prototype._isEnabled = function MyBtn$_isEnabled(selection) {
return this._isAvailable(selection);
};
Extensions.MyBtn.prototype._execute = function MyBtn$_execute(selection) {
// this is where your code comes
};