Module Development Series – Magento Admin Module – Part4

4
In this tutorial, we are going to see all the different form fields we can use in admin forms.

Magento has many different type of field available by default, so lets see the syntax of using each of these fields. This tutorial is in continuation of the previous tutorial so the same classes will be used as in the previous post.
All the code’s written below are written in the class Excellence_Form_Block_Adminhtml_Form_Edit_Tab_Form inside the _prepareForm() function as shown in previous tutorial. All the different type of form fields available in magento are located in folder lib\Varien\Data\Form\Element

Text Field

Here is how to add a text field to an admin form, with a list of all the options

$fieldset->addField('title', 'text', array(
          'label'     => Mage::helper('form')->__('Title3'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "alert('on click');",
		  'onchange' => "alert('on change');",
		  'style'   => "border:10px",
		  'value'  => 'hello !!',
		  'disabled' => false,
		  'readonly' => true,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
Time
$fieldset->addField('time', 'time', array(
          'label'     => Mage::helper('form')->__('Time'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '12,04,15',
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
TextArea
$fieldset->addField('textarea', 'textarea', array(
          'label'     => Mage::helper('form')->__('TextArea'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '<b><b/>',
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
Submit Button
$fieldset->addField('submit', 'submit', array(
          'label'     => Mage::helper('form')->__('Submit'),
          'required'  => true,
		  'value'  => 'Submit',
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
DropDown
$fieldset->addField('select', 'select', array(
          'label'     => Mage::helper('form')->__('Select'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '1',
		  'values' => array('-1'=>'Please Select..','1' => 'Option1','2' => 'Option2', '3' => 'Option3'),
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));

Here is another version of the drop down

$fieldset->addField('select2', 'select', array(
          'label'     => Mage::helper('form')->__('Select Type2'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '4',
		  'values' => array(
		  						'-1'=>'Please Select..',
		  						'1' => array( 
												'value'=> array(array('value'=>'2' , 'label' => 'Option2') , array('value'=>'3' , 'label' =>'Option3') ),
												'label' => 'Size'	 
										   ),
								'2' => array( 
												'value'=> array(array('value'=>'4' , 'label' => 'Option4') , array('value'=>'5' , 'label' =>'Option5') ),
												'label' => 'Color'	 
										   ),										   
							     
						   ),
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
Radio Button
$fieldset->addField('radio', 'radio', array(
          'label'     => Mage::helper('form')->__('Radio'),
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '1',
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
$fieldset->addField('radio2', 'radios', array(
          'label'     => Mage::helper('form')->__('Radios'),
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '2',
		  'values' => array(
		  					array('value'=>'1','label'=>'Radio1'),
		  					array('value'=>'2','label'=>'Radio2'),
		  					array('value'=>'3','label'=>'Radio3'),
		  			   ),
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
Password Field
$fieldset->addField('password', 'password', array(
          'label'     => Mage::helper('form')->__('Password'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'style'   => "",
		  'value'  => 'hello !!',
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
$fieldset->addField('obscure', 'obscure', array(
          'label'     => Mage::helper('form')->__('Obscure'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'obscure',
		  'onclick' => "",
		  'onchange' => "",
		  'style'   => "",
		  'value'  => '123456789',
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
Note
$fieldset->addField('note', 'note', array(
          'text'     => Mage::helper('form')->__('Text Text'),
		));
Multiselect
$fieldset->addField('multiselect2', 'multiselect', array(
          'label'     => Mage::helper('form')->__('Select Type2'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "return false;",
		  'onchange' => "return false;",
		  'value'  => '4',
		  'values' => array(
		  						'-1'=> array( 'label' => 'Please Select..', 'value' => '-1'),
		  						'1' => array( 
												'value'=> array(array('value'=>'2' , 'label' => 'Option2') , array('value'=>'3' , 'label' =>'Option3') ),
												'label' => 'Size'	 
										   ),
								'2' => array( 
												'value'=> array(array('value'=>'4' , 'label' => 'Option4') , array('value'=>'5' , 'label' =>'Option5') ),
												'label' => 'Color'	 
										   ),										   
							     
						   ),
		  'disabled' => false,
		  'readonly' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
		
Multiline
$fieldset->addField('multiline', 'multiline', array(
          'label'     => Mage::helper('form')->__('Multi Line'),
          'class'     => 'required-entry',
          'required'  => true,
          'name'      => 'title',
		  'onclick' => "",
		  'onchange' => "",
		  'style'   => "border:10px",
		  'value'  => 'hello !!',
		  'disabled' => false,
		  'readonly' => true,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
Link
$fieldset->addField('link', 'link', array(
          'label'     => Mage::helper('form')->__('Link'),
		  'style'   => "",
		  'href' => 'www.excellencemagentoblog.com',
		  'value'  => 'Magento Blog',
		  'after_element_html' => ''
		));
Label
$fieldset->addField('label', 'label', array(
          'value'     => Mage::helper('form')->__('Label Text'),
		));
Image Upload
$fieldset->addField('image', 'image', array(
          'value'     => 'http://www.excellencemagentoblog.com/wp-content/themes/excelltheme/images/logo.png',
		));
File Upload
$fieldset->addField('file', 'file', array(
          'label'     => Mage::helper('form')->__('Upload'),
		  'value'  => 'Uplaod',
		  'disabled' => false,
		  'readonly' => true,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
Date
$fieldset->addField('date', 'date', array(
          'label'     => Mage::helper('form')->__('Date'),
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1,
		  'image' => $this->getSkinUrl('images/grid-cal.gif'),
	      'format' => Mage::app()->getLocale()->getDateFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT) 
		));
Checkbox
$fieldset->addField('checkbox', 'checkbox', array(
          'label'     => Mage::helper('form')->__('Checkbox'),
          'name'      => 'Checkbox',
		  'checked' => false,
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '1',
		  'disabled' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
$fieldset->addField('checkboxes', 'checkboxes', array(
          'label'     => Mage::helper('form')->__('Checkboxs'),
          'name'      => 'Checkbox',
		  'values' => array(
		  					array('value'=>'1','label'=>'Checkbox1'),
		  					array('value'=>'2','label'=>'Checkbox2'),
		  					array('value'=>'3','label'=>'Checkbox3'),
		  			   ),
		  'onclick' => "",
		  'onchange' => "",
		  'value'  => '1',
		  'disabled' => false,
		  'after_element_html' => '<small>Comments</small>',
		  'tabindex' => 1
		));
  • Adam Malkin

    This is ace, it really helped with my admin forms, Thanks

    • Manish Prakash

      Thanks J

      • Adam Malkin

        I thought this might be a good addition:

        HTML editor
        $fieldset->addField(‘html’, ‘editor’, array(
                            ‘name’      => ‘html’,
                            ‘label’     => Mage::helper(‘form’)->__(‘HTML’),
                            ‘title’     => Mage::helper(‘form’)->__(‘HTML’),
                            ‘style’     => ‘height:300px;’,
                            ‘required’  => true,
                            ‘config’    => Mage::getSingleton(‘cms/wysiwyg_config’)->getConfig(),
                            ‘order’        => ’3′,
                        ));

        You also need to add this function:

        protected function _prepareLayout()
            {
                parent::_prepareLayout();
                if (Mage::getSingleton(‘cms/wysiwyg_config’)->isEnabled()) {
                    $this->getLayout()->getBlock(‘head’)->setCanLoadTinyMce(true);
                }
            }

        • Manish Prakash

          Ok, I will add this. thanks

  • Jaya Bharathi

    is there a way to specify minimum number of charachters to be entered in a text field

    • Manish Prakash

      You can use maxlength property

      • Jaya Bharathi

        Thanks for ur reply..
        but maxlength doesnt work for textarea.. how to specify the max charachters for text area? This is the code i used.
        $fieldset->addField(‘content’, ‘textarea’, array(
            ‘name’ => ‘content’,
            ‘label’ => Mage::helper(‘news’)->__(‘Content’),
            ‘title’ => Mage::helper(‘news’)->__(‘Content’),
            ‘maxlength’ => 5,
            ‘style’ => ‘width:400px; height:300px;’,
            ‘required’ => true,
           ));

        Thanks in advance

        • Manish Prakash

          For that you would have to use javascript , because max length is not a an html property for textarea.

          • Jaya Bharathi

            Thanks :)

  • Luke

    When I am trying to do this, The value will never be rendered into my form field. Trying to use just a normal text field, except the value is always blank…. Any idea?

    • Manish Prakash

      How are you setting value into the form field

  • Suriya

    Hi … i want to have import action for my custom module grid.. how can i do that? can u help me?

    • Manish Prakash

      Please search magento import/export profiles in magneto. I have not written a blog on this yet but you can find stuff on the net.

  • Anonymous

    Excellent post! Really helped me out!

    Quick question: Is there any way I can remove the seconds dropdown from a “time” field?

    • Anonymous

       Is there not a way to do it??

  • sonali123

    can you please guide me  how to add color palette in fieldset, so that we can add color

  • rakesh patel

    Hi when i try 

    “$fieldset->addField(‘filename’, ‘image’, array(
     ‘label’     => Mage::helper(‘slider’)->__(‘ ‘),
     ‘value’     => ‘http://www.excellencemagentoblog.com/wp-content/themes/excelltheme/images/logo.png’,
     ‘name’      => ‘filename’,
     
    ));” code image name is insert in database but file is not upload and i fond we require to set the enctype=”multipart/form-data” so i do this but after done the enctype=”multipart/form-data” file is uploded in media folder but name of file is not insert in table.

    Please help me i am new in module development for magento.

    Thanks

  • Chirag123

    Multiselect in some problem , when i’m implement this coding   in magento 1.6.0.0
    in give below coding when i’m save data in form than database have not insert of selecterd data there insert word like “Array”
    —————————————-
    —————————————-
    $fieldset->addField(‘multiselect2′, ‘multiselect’, array(          ‘label’     => Mage::helper(‘form’)->__(‘Select Type2′),          ‘class’     => ‘required-entry’,          ‘required’  => true,          ‘name’      => ‘title’,          ‘onclick’ => “return false;”,          ‘onchange’ => “return false;”,          ‘value’  => ’4′,          ‘values’ => array(                                ‘-1′=> array( ‘label’ => ‘Please Select..’, ‘value’ => ‘-1′),                                ’1′ => array(                                                ‘value’=> array(array(‘value’=>’2′ , ‘label’ => ‘Option2′) , array(‘value’=>’3′ , ‘label’ =>’Option3′) ),                                                ‘label’ => ‘Size’                                           ),                                ’2′ => array(                                                ‘value’=> array(array(‘value’=>’4′ , ‘label’ => ‘Option4′) , array(‘value’=>’5′ , ‘label’ =>’Option5′) ),                                                ‘label’ => ‘Color’                                           ),                                                                      ),          ‘disabled’ => false,          ‘readonly’ => false,          ‘after_element_html’ => ‘Comments’,          ‘tabindex’ => 1        ));

    • http://www.facebook.com/fadz1y Fadzly Othman

      Hi Chirag123,

      This is what I did for my form.

      $fieldset->addField(‘working_days’, ‘multiselect’, array( ‘label’ => Mage::helper(‘
      mymodule’)->__(‘Working Days’), ‘class’ => ‘required-entry’, ‘required’ => true, ‘name’ => ‘working_days’, ‘onclick’ => “return false;”, ‘onchange’ => “return false;”, ‘values’ => array( ’1′=> array( ‘label’ => ‘Monday’, ‘value’ => ’1′), ’2′=> array( ‘label’ => ‘Tuesday’, ‘value’ => ’2′), ’3′=> array( ‘label’ => ‘Wednesday’, ‘value’ => ’3′), ’4′=> array( ‘label’ => ‘Thursday’, ‘value’ => ’4′), ’5′=> array( ‘label’ => ‘Friday’, ‘value’ => ’5′), ’6′=> array( ‘label’ => ‘Saturday’, ‘value’ => ’6′), ’0′=> array( ‘label’ => ‘Sunday’, ‘value’ => ’0′), ), ‘note’ => Mage::helper(‘mymodule’)->__(“Working days per week this plan is applicable to. To select multiple days, Press and Hold ‘Ctrl’ button on your keyboard.”), ));

      in your controller->saveAction, add the following:

      $workingday_str = ”; foreach($_POST['working_days'] as $workday) { $workingday_str .= $workday.’,’; } /*End of processing the working day*/ $model = Mage::getModel(‘mymodule/mymodel’) ->setData($data) ->setWorkingDays($workingday_str) ->setId($mymodelid) ->save();

      It will save your posted data as a string

  • http://twitter.com/kazama Greg Demetrick

    This is definately my go-to article for configuring forms. However I think it is missing one thing. On any element you can also define a ‘note’ paramater. This will show up as a small type note below the input field with an arrow pointing up next to it. An example is:

    $fieldset->addField(‘warehouses’, ‘text’, array(
                ‘label’     => Mage::helper(‘shippingseasons’)->__(‘Warehouses’),
                ‘class’     => ‘required-entry’,
                ‘required’  => true,
                ‘name’      => ‘warehouses’,
        ‘note’ => ” . Mage::helper(‘catalog’)->__(‘(Use the warehouse numbers here. Commas are used to separate multiple warehouse locations)’) . ”,

            ));

  • Magento Modules

    Excellent! could you also put some snaps that will be more helping

  • http://www.facebook.com/fadz1y Fadzly Othman

    Hi uma,
    This is what I did for my form.
    $fieldset->addField(‘working_days’, ‘multiselect’, array( ‘label’ => Mage::helper(‘
    mymodule’)->__(‘Working Days’), ‘class’ => ‘required-entry’, ‘required’ => true, ‘name’ => ‘working_days’, ‘onclick’ => “return false;”, ‘onchange’ => “return false;”, ‘values’ => array( ’1′=> array( ‘label’ => ‘Monday’, ‘value’ => ’1′), ’2′=> array( ‘label’ => ‘Tuesday’, ‘value’ => ’2′), ’3′=> array( ‘label’ => ‘Wednesday’, ‘value’ => ’3′), ’4′=> array( ‘label’ => ‘Thursday’, ‘value’ => ’4′), ’5′=> array( ‘label’ => ‘Friday’, ‘value’ => ’5′), ’6′=> array( ‘label’ => ‘Saturday’, ‘value’ => ’6′), ’0′=> array( ‘label’ => ‘Sunday’, ‘value’ => ’0′), ), ‘note’ => Mage::helper(‘mymodule’)->__(“Working days per week this plan is applicable to. To select multiple days, Press and Hold ‘Ctrl’ button on your keyboard.”), ));
    in your controller->saveAction, add the following:
    $workingday_str = ”; foreach($_POST['working_days'] as $workday) { $workingday_str .= $workday.’,’; } /*End of processing the working day*/ $model = Mage::getModel(‘mymodule/mymodel’) ->setData($data) ->setWorkingDays($workingday_str) ->setId($mymodelid) ->save();
    It will save your posted data as a string

    • http://www.glensoutdoors.com Rob David

      You should never access the $_POST array like this. Magento gives you tools for this that is much safer.
      For $_POST use this: $this->getRequest()->getPost() and for $_GET use this: $this->getRequest()->getParam()

  • oranje49

    Is there a complete reference for all the options for the field?

  • http://www.facebook.com/alankar.singh1985 Alankar Singh

    Hello Manish

    Can you tell me how i will manage 2-3 forms from one module ?

    Thanks

  • http://www.facebook.com/gagan.sharma6167 Gagan Sharma

    In multiselect, it’s rendering everything nicely but not selecting the already given value or I can say not using selected=”selected”. As in your above example you are using value=’4′. But it’s not selecting 4 option automatically. Could you please tell me why is this happening? I am not saving values in database at the moment. just hardcoding it in code. Thanks I have learnt a lot from your blog.

  • Magento Developer

    HI
    i want to add country & region fields in magento admin form
    Can you help me for it

  • vishal

    found useful — thanks a lot

  • Pragati Joshi

    I am trying checkboxes but i am getting error – Fatal error: Class ‘Mage_Form_Helper_Data’ not found in /opt/lampp/htdocs/pragati-core-theme/magento/app/Mage.php on line 546. I am stuck Please Help…Same error I am getting for date.

    • Guest

      Namespace_Modulename_Helper

      whenever you want to use helper you have to give use ‘helpername’ tag above class tag like this
      $this->_whatever(Mage::helper(‘helpername’)->__(‘Form’);
      hope this helps :)

  • Rahil

    Your every post is awesome and interesting

  • oranje49

    Is it possible to create a field that only displaying the ‘month’ part of a date field?

  • Azar4uall

    How to create tables inside magento admin modules…!!!

  • Manoj Kumar

    i want to create one new dropdown menu(orderposting) inside sales module… i already added orderposting module inside sales module but im unable to create table inside orderposting module……

  • http://twitter.com/gondo gondo

    hi

    there is additional option on “date” field: “time” => true what change date to datetime picker.
    example here: http://www.axertion.com/tutorials/2012/04/how-to-add-a-datetime-input-field-to-your-magento-extension/

    .gondo

  • shiv

    Hi, A very nice post from your side for magento. I am a software developer with total 3.3 year of experience and 1.2 year of experience in magento. I have a query in magento i hope you will resolve it. I want a multi select option in admin area of product management section when admin user select multiple values from multiselect option, the selected value should come on another right side box, as admin user can know that he is selecting this this values. …….. if possible please reply me on mca.shivmaurya@gmail.com

  • mahefuj

    Hi Manish, Thanks for this wonderful stuff. I need to show two fields on single row. How that can be done?

  • mahefuj

    Hi Manjsh, Thanks for this wonderful stuff. I need to show multiple fields on same row (less than tr greater than). How to implement that ? please guide me on that as I am new to magento

  • Arnaud de Vslt

    Hey,
    Do you know it’s possible to add an attribute which ever exist in Mange Attribute (the attribute is a choice list)?
    Thanks for all !

  • Arnaud de Vslt

    How to do for an integer or a float?
    Thanks in advance

  • Gayatri Patel

    Hi Manish,

    I am Facing problem to add button in form. can you help me please?

    $fieldset->addField(‘submit’, ‘button’, array(
    ‘label’ => Mage::helper(‘form’)->__(‘Select Product’),
    ‘name’ => ‘gridname’,
    ‘value’ =>”Submit”,
    ‘required’ => true,
    ‘onclick’=>’javascript:openMyPopup()’,

    ));

  • rajat

    how to add maxlength in textarea in form fields