How to change attributes of a magento admin form field label

Question

I want to change the css class of a admin field's label. As I have found out there is not setter method such as setLabelHtml, I am not able to change the class. At last I override the Varien_Data_Form_Element_Abstract class as suggested by 'AlanStorm' in this post. I changed the 'getLabelHtml' and place the class attribute there and it worked. Is there any other better way to do it ?

Answer 1

At last I have found two answers for my question. I wanted to change css class of elements inside the fieldset of the form.

1. First solution

All of the fieldset created inside a form object is using a renderer of Varien_Data_Form_Element_Renderer_Interface for rendering the html as a last step (if one is present).

The default renderer for a fieldset inside a form is Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element which is extending Mage_Adminhtml_Block_Template. Hence it has a template object attached to it. The template for our renderer is widget/form/renderer/fieldset/element.phtml.

The steps to change the default behaviour is as follows:

First of all created a renderer class.

class Kaushikamdotcom_Moduler_Block_Adminhtml_Module_Renderer extends Mage_Adminhtml_Block_Widget_Form_Renderer_Fieldset_Element {        
    public function __construct() {
               // Setting template for the element
       $this->setTemplate('widget/form/fieldset/renderer/element.phtml');
    }

    public function render(Varien_Data_Form_Element_Abstract $element)
    {
               // Just returning the html rendered by parent
       return parent::render($element);
        }

    protected function _toHtml() {
               // Specifying location of template file for the renderer
       $template = $this->getTemplate();
       include(dirname(__FILE__) . '/../../../templates/' . $template);
    }   
}

Then I created a template by copying the element.phtml from app/design/adminhtml/default/default/template/widget/form/element/renderer/fieldset to templates/widget/form/fieldset/renderer/ inside my module folder. The content of that file is:

<?php
$_element = $this->getElement();
$_note    = $_element->getNote();
$_trId    = $_element->getHtmlContainerId();
$_class   = $_element->getFieldsetHtmlClass();
?>
<?php if (!$_element->getNoDisplay()): ?>
<tr<?php if($_trId): ?> id="<?php echo $_trId ?>"<?php endif; ?>>
    <?php if ($_element->getType()=='hidden'): ?>
    <td colspan="2" class="hidden"><?php echo trim($_element->getElementHtml()) ?></td>
    <?php else: ?>
    <td class="label<?php echo $_class ? " {$_class}-label" : ''?>">
    <?php 
         $label = '<label for="'.$_element->getHtmlId().'" class="'.$this->getLabelClass().'" >' . $this->escapeHtml($_element->getLabel())
                  . ( $_element->getRequired() ? ' <span class="required">*</span>' : '' ) . '</label>' . "\n";
        echo trim($label);
     ?>
    </td>
    <td class="<?php echo $_element->hasValueClass() ? $_element->getValueClass() : 'value' ?><?php echo $_class ? " {$_class}-value" : ''?>">
        <?php echo trim($_element->getElementHtml()) ?>
        <?php if ($_note): ?>
            <p class="note<?php echo $_class ? " {$_class}-note" : ''?>" id="note_<?php echo $_element->getId()?>"><span><?php echo $_note ?></span></p>
        <?php endif ?>
    </td>
    <?php endif; ?>
</tr>
<?php endif; ?>

As you can see I have used a getLabelClass() function which I have set on the renderer object in the _prepareForm() function in the widget form class.

The widget form class I have used is:

class Kaushikamdotcom_Moduler_Block_Adminhtml_Module_Edit_Form extends Mage_Adminhtml_Block_Widget_Form {

protected function _prepareForm() {
    $form = new Varien_Data_Form(
        array(
            'id' => 'view_form',
            'action' => '',
            'method' => 'post'              
        )
    );


    $fieldset = $form->addFieldset('module_fieldset', array(
            'legend' => $this->__('Module Information'),
            'class' => 'fieldset-wide'
    ));

    $fieldset->addField('name', 'text', array(
            'label' => $this->__('Module Name'),
            'name' => 'name'
    ));

            .....etc
       }    

   public function _beforeToHtml() {
            // Instantiating renderer
        $renderer = Mage::getBlockSingleton('moduler/adminhtml_module_renderer','renderer');

                // Setting label class
        $renderer->setLabelClass('testClass');

                // Setting the renderer on the fieldset
        Varien_Data_Form::setFieldsetElementRenderer($renderer);

        parent::_beforeToHtml();
   }    
}

Now I have my custom label for admin fields. I hope it will help you and also invite more better answers on this question (Hence not closing it).

2. Second solution

Create a directory etc inside app/code/local. Then inside app/code/local/etc create the whole directory structure needed for Varien_Data_Form_Element_Abstract class which is the parent class for all form elements. So there directory structure you need to create inside app/code/local/etc/ is Varien/Data/Form/Element and then copy Abstract.php from lib/Varien/Data/Form/Element/ to the directory you created. After that change the getLabelHtml() method as follows:

public function getLabelHtml() {
   if (!is_null($this->getLabel())) {
            $html = '<label for="'.$this->getHtmlId() . $idSuffix . '" class="$this->getLabelClass()">' . $this->_escape($this->getLabel())
                  . ( $this->getRequired() ? ' <span class="required">*</span>' : '' ) . '</label>' . "\n";
        } else {
            $html = '';
        }
        return $html;
}

As you can see we have placed a getLabelClass() on the current object. So you have to use setLabelClass($labelClass) by iterating through Varien_Form object or the fieldset object inside you have put the field.

Answer 2

While it doesn't change the class, you can manipulate a label based on the 'for' attribute of the label. Ex:

<style type="text/css">
    label[for=price]
    {
        color: green;
    }
</style>