Magento admin form fieldset custom type

Sometimes we face with the necessity of custom data output in Magento admin forms. If you require to render entity data in the admin form other way than stored in the database and standard Magento fieldset types do not match your requirements, this article will help you to create your own fieldset type.
First of all, let’s check Magento capability in this case. So, when you add a field to the fieldset, you are calling addField method of Varien_Data_Form_Abstract :

    
/**
 * File path:
 * magento_root/lib/Varien/Data/Form/Abstract.php
 */
public function addField($elementId, $type, $config, $after=false)
    {
        if (isset($this->_types[$type])) {
            $className = $this->_types[$type];
        }
        else {
            $className = 'Varien_Data_Form_Element_'.ucfirst(strtolower($type));
        }
        $element = new $className($config);
        $element->setId($elementId);
        $this->addElement($element, $after);
        return $element;
    }

As you can see, this method is calling a specified form element class. You can find all those class files in magento_root/lib/Varien/Data/Form/Element/ and this list is really impressive:

  • Button.php
  • Checkbox.php
  • Checkboxes.php
  • Collection.php
  • Column.php
  • Date.php
  • Editor.php
  • Fieldset.php
  • File.php
  • Gallery.php
  • Hidden.php
  • Image.php
  • Imagefile.php
  • Label.php
  • Link.php
  • Multiline.php
  • Multiselect.php
  • Note.php
  • Obscure.php
  • Password.php
  • Radio.php
  • Radios.php
  • Reset.php
  • Select.php
  • Submit.php
  • Text.php
  • Textarea.php
  • Time.php

Of course, if you did not find anything useful in that variety of files and want to have something custom, then you may base on one of those types in your custom fieldset. Generally, it will be Varien_Data_Form_Element_Abstract.

Let’s also assume that you already have everything you need for edit page of the custom entity that you want to manipulate from the backend. So, your file structure should look like this:

    magento_root
    .........................................................
        |-app
            |-code
                |-community
                |-core
                |-local
                    |-Yournamespace
                        |-Yourextensionname
                            |-Block
                                |-Adminhtml
                                    |-Entityname
                                        |-Edit
                                            |-Tab
                                                Firsttab.php
                                                Secondtab.php
                                                ..............
                                            Form.php
                                            Tabs.php
                                        Edit.php
                                        Grid.php
                                    Entityname.php
                                ..............................
                            ..................................
                ..............................................
            |-design
            |-etc
            |-locale
            .htaccess
            Mage.php    
    ..........................................................

Now, we need to create our renderer. This code is pretty simple:

<?php
/**
 * File path:
 * magento_root/app/code/local/Youramespace/Yourextensionname/Block/Adminhtml/Entityname/Edit/Form/Renderer/Fieldset/Customtype.php
 */
class Youramespace_Yourextensionname_Block_Adminhtml_Entityname_Edit_Form_Renderer_Fieldset_Customtype 
      extends Varien_Data_Form_Element_Abstract
{
 protected $_element;

 public function getElementHtml()
 {
 /**
  * You can do all necessary customisations here
  *
  * You can use parent::getElementHtml() to get original markup
  * if you are basing on some other type and if it is required
  *
  * Use $this->getData('desired_data_key') to extract the desired data
  * E.g. $this->getValue() or $this->getData('value') will return form elements value
  * /
 
 return 'return the result after all manipulations';
 }

}

Let’s add our new field type to the Firsttab.php. Locate the _prepareForm method and add new type to fieldset after adding fieldset to the form. After that, just add fields with the new type to the form to see the result (note that there is no other fields in this example). Your code should be like the following example:

<?php

class Youramespace_Yourextensionname_Block_Adminhtml_Entityname_Edit_Tab_Firsttab 
      extends Mage_Adminhtml_Block_Widget_Form 
{
 protected function _prepareForm()
 {
 $form = new Varien_Data_Form();
 $helper = Mage::helper('core');
 $this->setForm($form);

 $fieldset = $form->addFieldset('your_form_identifier', array('legend' => $helper->__('Your legend')));

 $fieldset->addType('customtype', 'Youramespace_Yourextensionname_Block_Adminhtml_Entityname_Edit_Form_Renderer_Fieldset_Customtype');

 $fieldset->addField('field_id', 'customtype', array(
 'label' => $helper->__('Field label'),
 'name' => 'field_name'
 ));

 $fieldset->addField('other_field_id', 'customtype', array(
 'label' => $helper->__('Other field label'),
 'name' => 'other_field_name'
 ));

/**
 * It is your decision how to get form values,
 * we'll just leave empty array here
 */
 $values = array()
 $form->setValues($values);

 return parent::_prepareForm();
 }

That’s all. We hope this information was useful. If you have any questions please feel free to leave them in the comments, and thank you for reading our article.

You may also want to read:

Clients

Smart Brands Choose Us.

From startups backed by Mark Cuban and Sir Richard Branson, to some of the biggest eCommerce operations in the world, Atwix helps our clients deliver unparalleled eСommerce experiences. We’re proud to work with the following companies: