Module Development Series – Magento Admin Module – Part5

In this tutorial, we are going to see some advanced operations related to magento admin forms.

In the previous tutorial we only saw basic admin form, in this tutorial we will see more functions that we can use in these forms.

Adding Buttons to the Form Container

In the form container we can as many button as required, attached is screenshot where you can see i have added 4 extra buttons.

Admin Form Multiple Buttons

Admin Form Multiple Buttons

Here is the code to do it

<?php
class Excellence_Form_Block_Adminhtml_Form_Edit extends Mage_Adminhtml_Block_Widget_Form_Container
{
    public function __construct()
    {
        parent::__construct();
                 
        $this->_objectId = 'id';
        $this->_blockGroup = 'form';
        $this->_controller = 'adminhtml_form';
        
        $this->_updateButton('save', 'label', Mage::helper('form')->__('Save'));
        $this->_updateButton('delete', 'label', Mage::helper('form')->__('Delete'));
		
        $this->_addButton('saveandcontinue', array(
            'label'     => Mage::helper('adminhtml')->__('Save And Continue Edit'),
            'onclick'   => 'saveAndContinueEdit()',
            'class'     => 'save',
        ), -100);
        
        
        $this->_addButton('button1', array(
            'label'     => Mage::helper('adminhtml')->__('Button1'),
            'onclick'   => 'setLocation(\'' . $this->getUrl('*/*/button1Click') . '\')',
            'class'     => 'back',
        ),-1,5);
        
        $this->_addButton('button2', array(
            'label'     => Mage::helper('adminhtml')->__('Button2'),
            'onclick'   => 'setLocation(\'' . $this->getUrl('*/*/button2Click') . '\')',
            'class'     => 'save',
        ),-1,3);
        
        $this->_addButton('button3', array(
            'label'     => Mage::helper('adminhtml')->__('Button3'),
            'onclick'   => 'setLocation(\'' . $this->getUrl('*/*/button3Click') . '\')',
            'class'     => 'delete',
        ),-1,1);
        
        $this->_addButton('button4', array(
            'label'     => Mage::helper('adminhtml')->__('Button4'),
            'onclick'   => 'setLocation(\'' . $this->getUrl('*/*/button4Click') . '\')',
            'class'     => 'delete',
        ),-1,4,'footer');
        
    }

    public function getHeaderText()
    {
        return Mage::helper('form')->__('My Form Container');
    }
}

The main function used here is the $this->addButton function, let see in details all the parameters

  • Parameter1: button id, this is a unique id for each button.
  • Parameter2: button parameter array, you can specify label, onclick and class for a button. class has 3 different values: delete,save,back. depending on the class you have different displays for the button. You can also put empty string in class to display standard button.
  • Parameter3: level, this is basically used to group a buttons together. This is related to the next parameter sort_order
  • Parameter4: sort_order, this is basically used to sort buttons inside a group or level. ie. which buttons shows first.
  • Parameter5: area, this has two values header and footer. Default value for this is header, but if you want to show a button at the bottom you need to pass the value ‘footer’ in this parameter.
Adding Multiple Tabs and Ajax Based Tabs

To add multiple tabs we need to make changes to the Tabs.php class.

<?php

class Excellence_Form_Block_Adminhtml_Form_Edit_Tabs extends Mage_Adminhtml_Block_Widget_Tabs
{

	public function __construct()
	{
		parent::__construct();
		$this->setId('form_tabs');
		$this->setDestElementId('edit_form');
		$this->setTitle(Mage::helper('form')->__('Product Information'));
	}

	protected function _beforeToHtml()
	{
		$this->addTab('form_section', array(
          'label'     => Mage::helper('form')->__('Item Information'),
          'title'     => Mage::helper('form')->__('Item Information'),
          'content'   => $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form')->toHtml(),
		));

		$this->addTab('form_section2', array(
          'label'     => Mage::helper('form')->__('Item Information2'),
          'title'     => Mage::helper('form')->__('Item Information2'),
          'content'   => $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form2')->toHtml(),
		));

		$this->addTab('form_section3', array(
                'label'     => Mage::helper('form')->__('Item Information3'),
                'url'       => $this->getUrl('*/*/form', array('_current' => true)),
                'class'     => 'ajax',
		));
		 
		return parent::_beforeToHtml();
	}
}

As you can see in the above code, to add a normal html tab this is what you need to do

$this->addTab('form_section2', array(
          'label'     => Mage::helper('form')->__('Item Information2'),
          'title'     => Mage::helper('form')->__('Item Information2'),
          'content'   => $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form2')->toHtml(),
		));

The code is quite simple, we give the label, title and content of the new tab to add.
For an ajax based tab, the code is a little complex.

$this->addTab('form_section3', array(
                'label'     => Mage::helper('form')->__('Item Information3'),
                'url'       => $this->getUrl('*/*/form', array('_current' => true)),
                'class'     => 'ajax',
		));

Here we have mentioned the class as ajax and put in the ajax url to load. This URL will class the ajaxAction in our admin controller. The code to put in the action would be

public function formAction(){
		$this->loadLayout();
        $this->getResponse()->setBody(
            $this->getLayout()->createBlock('form/adminhtml_form_edit_tab_form3')
                ->toHtml()
        );
	}

Usually, ajax based tabs are used to load grid inside a tab. To see how to load grid inside a tab, refer to this tutorial.

Creating a New Form Fields

In previous tutorial, we have seen all the different type of form fields in magneto. Let us see how to add a new type of Form Field. In the Form.php file inside the _prepareForm() function, we to add this code

$fieldset->addType('custom_field', 'Excellence_Form_Block_Adminhtml_Form_Edit_Tab_Field_Custom');

Here we are calling the addType() function, and passing a field unique id and field class. Next we will add this new field.

$fieldset->addField('custom_field', 'custom_field', array(
          'label'     => Mage::helper('form')->__('Checkboxs'),
          'name'      => 'Checkbox',
          'custom1'  => 'Custom1 Value',
	  'custom2'  => 'Custom2 Value',
	  'value' => 'value1'
));

Here in the addField() function we have used the custom_field, as field type. As we have two extra variables custom1 and custom2. This is have done just to show you how you can pass variables to the custom field class. Here is the implementation of our custom field class

<?php
class Excellence_Form_Block_Adminhtml_Form_Edit_Tab_Field_Custom extends Varien_Data_Form_Element_Abstract{
	public function __construct($attributes=array())
	{
		parent::__construct($attributes);
	}
	public function getElementHtml()
	{
		$value = $this->getValue();
		$custom1 = $this->getCustom1();
		$custom2 = $this->getCustom1();
		$html = '<p id="' . $this->getHtmlId() . '"'. $this->serialize($this->getHtmlAttributes()) .'>I can put any custom html/javascript here.</p>';
		$html .= "<p>Here i can access custom fields passed </p>";
		$html .= "<b>Custom1:</b> $custom1 <br/>";
		$html .= "<b>Custom2:</b> $custom2<br/>";
		$html .= $this->getAfterElementHtml();
		return $html;
	}
}

The important things to notice here are
1. You class should always extend Varien_Data_Form_Element_Abstract
2. You need to override the getElementHtml() function and you can put your custom html there.

  • Hey Manish, thanks for this tutorials, I am a beginner developer in Magento and this blog helped me so much in many times.

    Gerardo

    • Manish Prakash

      Thanks

  • add your custom javascript

  • raybiztech

    Hi, Thank you for the tutorial I learned something useful. Vist our website Ray Business Technologies we provide Magento Ecommerce IT services.

  • SAMEER

    hi Manish we have change in magento core file and if we upgrade my magento that my change have gone.