How to enable the buttons created through usercontrol in tridion

Question

I have created the usercontrol with two ribbonitems but they were appearing in the disabled mode.

I tried to check by placing alert in my js file for isAvailable and isEnabled functions.

Extensions.DynamicControls.prototype.isAvailable = 
            function DynamicControls$isAvailable(selection) 
{
  alert('Inside DynamicControls isAvailable');
  return true;
}

In this case i am not getting any alert in isAvailable function.

Extensions.DynamicControls.prototype.isEnabled = 
            function DynamicControls$isEnabled(selection) 
{
  alert('Inside DynamicControls isEnabled');
  return true;
}

I am able to get the alert in isEnabled function.

Please let me know what i need to make them enabled.

Apart from this, i have seen page source using firebug- On selection of these two created buttons usercontrol buttons, i found why is that class by default applied? If i try by removing it, the buttons are enabled.

As of now these are just visible as labels in the ribbon. Is any css also required to make these look like any other buttons? Please suggest.

I really don't understand what you're saying about Firebug. Simply inspect an existing button that looks similar to what you want (in your browsers HTML inspector tool) and check what styles that button has applied. You can then even do a search for those classes in the CSS files and figure out how they are applied and what else exists in the same context. — Frank van Puffelen, Aug 11 '12 at 11:52
I don't think there is a JavaScript isEnabled call for toolbar buttons, as (unlike menu items) you hardly see toolbar buttons appearing/disappearing based on context. — Frank van Puffelen, Aug 11 '12 at 11:53
possible duplicate of [How to enable the button which is created using custom control](http://stackoverflow.com/questions/11897324/how-to-enable-the-button-which-is-created-using-custom-control) — Frank van Puffelen, Aug 12 '12 at 14:01
Two ribbon buttons requires _two_ sets of functions. Bart suggests looking at existing code in his [Ribbon Item Group TridionDeveloper article](http://www.tridiondeveloper.com/ribbon-item-group). Specifically look at the clipboard setup in `%TRIDION_HOME%\web\WebUI\Editors\CME\Controls\DashboardToolbar.ascx`,`%TRIDION_HOME%\web\WebUI\Editors\CME\Scripts\Cme\Commands\Clipboard.js`, and `%TRIDION_HOME%\web\WebUI\Editors\CME\Configuration`. — Alvin Reyes, Aug 13 '12 at 01:13
Also +1 to Frank's point on `isEnabled`. The clipboard-related commands implement `_isAvailable` in the dashboard, but not `_isEnabled`. When in doubt follow the Content Manager Explorer's approach. Some _creative laziness_ will pay off with a UI that matches (or at least doesn't break) user expectations. — Alvin Reyes, Aug 13 '12 at 01:18
One more, specifically with more `c:RibbonButton` examples: \web\WebUI\Editors\CME\Controls\Toolbars\DashboardToolbar.ascx. — Alvin Reyes, Aug 13 '12 at 08:12
@pavan looking at the amount of questions you have asked on the exact same topic, the best advice I can give you now is that you will definitely benefit from hiring a SDL Tridion professional to walk you through all this. We can answer your questions here, but its not suitable for giving you a training on how it all works I'm afraid. — Bart Koopman, Aug 13 '12 at 08:29
Its ok Bart!! Thanks a lot for the support you have provided at my question. — pavan, Aug 13 '12 at 08:49

score 8 · Answer 1 · edited May 23 '17 at 12:12

As indicated in my answer to your previous question, the methods are supposed to be called _isAvailableand _isEnabled with an underscore in front of them, that would be my guess as to why yours are not being fired.

So try to use the following code in your JavaScript:

Extensions.DynamicControls.prototype._isAvailable = 
                      function DynamicControls$_isAvailable(selection, pipeline) 
{
    alert('Inside DynamicControls isAvailable');
    if (pipeline) {
        pipeline.stop = false;
    }
    return true;
}   
Extensions.DynamicControls.prototype._isEnabled = 
                      function DynamicControls$_isEnabled(selection, pipeline) 
{
    alert('Inside DynamicControls isEnabled');
    if (pipeline) {
        pipeline.stop = false;
    }
    return true;
}

By the way, looking at your namespace Extensions.DynamicControls I wonder if you are making the correct references, the Javascript is not for your ItemsGroup, it is supposed to be for the specific buttons, each command (or button if you will) will have its own bit of JavaScript which enables it and has an _execute method. See my answer to your other question for more details on that.

The CSS is just for the layout of the buttons, this will not actually enable or disable them. Although if you assign a disabled image to the enabled state, then looks might be deceiving.

The CSS for the buttons would look something like:

/* large ribbon button image */
.tridion .ribbontoolbar .button.MyBtn .image, 
.tridion .ribbontoolbar .button.MyBtn.ribbonitem .image
{
    background-image: url({ThemePath}Images/my-btn-img.32x32.png);
}
.tridion .ribbontoolbar .button.MyBtn.ribbonitem.disabled .image
{
    background-image: url({ThemePath}Images/my-btn-img.32x32.gray.png);
}
/* small ribbon button image */
.tridion .contextmenu .item.MyBtn .image, 
.tridion .ribbontoolbar.minimized .button.MyBtn .image, 
.tridion .ribbontoolbar.minimized .button.MyBtn.ribbonitem .image
{
    background-image: url({ThemePath}Images/my-btn-img.16x16.png);
}
.tridion .ribbontoolbar.minimized .button.MyBtn.ribbonitem.disabled .image
{
    background-image: url({ThemePath}Images/my-btn-img.16x16.gray.png);
}

It's not exactly true that they have to start with an underscore. See my answer here: http://stackoverflow.com/questions/11936363/whats-the-difference-between-isenabled-and-isenabled-in-anguilla#11938414 — Peter Kjaer, Aug 17 '12 at 11:25

score 0 · Accepted Answer · answered Aug 17 '12 at 11:28

You just need to return true, which you are already doing. And of course your commands need to be associated with the button through the configuration.

The isAvailable function is only called for toolbar buttons on certain tabs such as Create. Most of them assumes that your buttons should always be available, but could be disabled (so they only call isEnabled).

For context menu options, though, isAvailable will be called every time you right-click. Ideally you would use the same command for the context menu option as the toolbar.

How to enable the buttons created through usercontrol in tridion

2 Answers2