How to enable the buttons created through usercontrol in tridion - 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.

Answer 1

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);
}

Answer 2

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.