Magento Developper’s Guide (Lesson 7) – The magento admin grid

This tutorial is the 7th of many , if it’s not already done, i suggest you read to the tutorials starting with the summary of this series.

Remember, in the previous tutorial we had created a part in the administration of magento to manage our contact list directly from the magento backend. In the Magento administration, when you want to list your products, you see a GridView (a kind of table with which can be sorted, edit an article, delete etc …) and you’ll say that it could be nice to use the same in our module. In this tutorial we’ll see how to insert a GridView in the administration part of our Magento plugin.

A Magento Grid is constructed from a set of files that you will find in the file Block/Adminhtml from your module.

1 – The Grid Container

Create a folder: \app\code\local\Easylife\Test\Block\Adminhtml\ and put in a file Grid.php. This is the file which (as its name suggests) will contain your Grid. It contains:

Easylife_Test_Block_Adminhtml_Grid extends Mage_Adminhtml_Block_Widget_Grid_Container

{

    public function __construct()

    {

     //where is the controller

     $this->_controller = 'adminhtml_test';

     $this->_blockGroup = 'test';

     //text in the admin header

     $this->_headerText = 'Adressbook management';

     //value of the add button

     $this->_addButtonLabel = 'Add a contact';

     parent::__construct();

     }

}

2 – The Grid

You indicate that the controller’s grid will be in the test folder, create the folder then create a folder:\app\code\local\Easylife\Test\Block\Adminhtml\Test\ and create a file Grid.php in it containing :

<?php

class Easylife_Test_Block_Adminhtml_Test_Grid extends Mage_Adminhtml_Block_Widget_Grid

{

   public function __construct()

   {

       parent::__construct();

       $this->setId('contactGrid');

       $this->setDefaultSort('id_easylife_test');

       $this->setDefaultDir('DESC');

       $this->setSaveParametersInSession(true);

   }

   protected function _prepareCollection()

   {

      $collection = Mage::getModel('test/test')->getCollection();

      $this->setCollection($collection);

      return parent::_prepareCollection();

    }

   protected function _prepareColumns()

   {

       $this->addColumn('id_easylife_test',

             array(

                    'header' => 'ID',

                    'align' =>'right',

                    'width' => '50px',

                    'index' => 'id_easylife_test',

               ));

       $this->addColumn('nom',

               array(

                    'header' => 'nom',

                    'align' =>'left',

                    'index' => 'nom',

              ));

       $this->addColumn('prenom', array(

                    'header' => 'prenom',

                    'align' =>'left',

                    'index' => 'prenom',

             ));

        $this->addColumn('telephone', array(

                     'header' => 'telephone',

                     'align' =>'left',

                     'index' => 'telephone',

          ));

         return parent::_prepareColumns();

    }

    public function getRowUrl($row)

    {

         return $this->getUrl('*/*/edit', array('id' => $row->getId()));

    }

}

We configure our magento Grid , stating the collection use to interact with the database in prepareCollection() (here we will use the collection of model ‘test/test’ created in the previous tutorials). Then with prepareColumns() he says which columns of our table with a display method addColumn(). I don’t explain the code more than that, it seems to me pretty obvious that if you want to add a column, just add an entry like this:




$this->addColumn('telephone',

 array(

     'header' => 'telephone',

     'align' =>'left',

     'index' => 'telephone',

 ));

Here, our Grid is now configured. Now, when we will click on one of the columns, we have to arrive on a form to edit our contact.


3 – The Form Container

So create a file edit.php in the same directory:\app\code\local\Easylife\Test\Block\Adminhtml\Test\
This file edit.php will contain the following code:



<?php

class Easylife_Test_Block_Adminhtml_Test_Edit extends

                    Mage_Adminhtml_Block_Widget_Form_Container{

   public function __construct()

   {

        parent::__construct();

        $this->_objectId = 'id';

        //vwe assign the same blockGroup as the Grid Container

        $this->_blockGroup = 'test';

        //and the same controller

        $this->_controller = 'adminhtml_test';

        //define the label for the save and delete button

        $this->_updateButton('save', 'label','save reference');

        $this->_updateButton('delete', 'label', 'delete reference');

    }

       /* Here, we're looking if we have transmitted a form object,

          to update the good text in the header of the page (edit or add) */

    public function getHeaderText()

    {

        if( Mage::registry('test_data')&&Mage::registry('test_data')->getId())

         {

              return 'Editer la reference '.$this->htmlEscape(

              Mage::registry('test_data')->getTitle()).'<br />';

         }

         else

         {

             return 'Add a contact';

         }

    }

}

I’ve commented the code, this file is a Form Container (see extends) That’s a structure that will allow you to receive application forms. Now we have to do the form itself.


4 – Create Form

Now create the folder:\app\code\local\Easylife\Test\Block\Adminhtml\Test\Edit\in the file and form.php. This file will contain the following code:



class Easylife_Test_Block_Adminhtml_Test_Edit_Form extends

                          Mage_Adminhtml_Block_Widget_Form

{

    protected function _prepareForm()

    {

         $form = new Varien_Data_Form(

                array(

                  'id' => 'edit_form',

                  'action' => $this->getUrl('*/*/save', array('id' => $this->getRequest()->getParam('id'))

                     ),

                 'method' => 'post',

                 )

              );

      $form->setUseContainer(true);

      $this->setForm($form);

      return parent::_prepareForm();

   }

}

Here we create an object of type Varien_Data_Form that’s the « standard » magento form, we set the action attribute of the form with the function getUrl() and we defines the method of sending information (by post).  And that’s all, we have defined our information form. Now we will create the lines of our form. In our 

directory\app\code\local\Easylife\Test\Block\Adminhtml\Test\Edit\, create a file Tabs.php which is actually a kind of « tabs container ») This file will contain the following code:


<?php


  class Easylife_Test_Block_Adminhtml_Test_Edit_Tabs extends Mage_Adminhtml_Block_Widget_Tabs

  {

     public function __construct()

     {

          parent::__construct();

          $this->setId('test_tabs');

          $this->setDestElementId('edit_form');

          $this->setTitle('Information sur le contact');

      }

      protected function _beforeToHtml()

      {

          $this->addTab('form_section', array(

                   'label' => 'Contact Information',

                   'title' => 'Contact Information',

                   'content' => $this->getLayout()

     ->createBlock('test/adminhtml_test_edit_tab_form')

     ->toHtml()

         ));

         return parent::_beforeToHtml();

    }

}

That entries will be created through block in the plugin Test, which will adminhtml_test_edit_tab_form, then create the folder:\app\code\local\Easylife\Test\Block\Adminhtml\Test\Edit\Tab and create the file in form.php .

<?php

class Easylife_Test_Block_Adminhtml_Test_Edit_Tab_Form extends Mage_Adminhtml_Block_Widget_Form

{

   protected function _prepareForm()

   {

       $form = new Varien_Data_Form();

       $this->setForm($form);

       $fieldset = $form->addFieldset('test_form',

                                       array('legend'=>'ref information'));

        $fieldset->addField('nom', 'text',

                       array(

                          'label' => 'Nom',

                          'class' => 'required-entry',

                          'required' => true,

                           'name' => 'nom',

                    ));

        $fieldset->addField('prenom', 'text',

                         array(

                          'label' => 'Prenom',

                          'class' => 'required-entry',

                          'required' => true,

                          'name' => 'prenom',

                      ));

          $fieldset->addField('telephone', 'text',

                    array(

                        'label' => 'telephone',

                        'class' => 'required-entry',

                        'required' => true,

                        'name' => 'telephone',

                 ));

 if ( Mage::registry('test_data') )

 {

    $form->setValues(Mage::registry('test_data')->getData());

  }

  return parent::_prepareForm();

 }

}

 – Insert our block in LayoutThen in the layout.xml your theme of directors, change your block by:



<block type="test/adminhtml_grid" name="test" />

That’s all, your grid works very well ! (no ? huhu…try again ??). Congratulations !!…Oh it not working :’(….it does not change? this is normal, you must implement the save method in your magento controller !


6 – Implement the functions in the controller

So go in your \app\code\local\Easylife\Test\controllers\Adminhtml\IndexController.php and edit it like this:



<?php

class Easylife_Test_Adminhtml_IndexController extends Mage_Adminhtml_Controller_Action

{

    protected function _initAction()

    {

        $this->loadLayout()->_setActiveMenu('test/set_time')

                ->_addBreadcrumb('test Manager','test Manager');

       return $this;

     }

      public function indexAction()

      {

         $this->_initAction();

         $this->renderLayout();

      }

      public function editAction()

      {

           $testId = $this->getRequest()->getParam('id');

           $testModel = Mage::getModel('test/test')->load($testId);

           if ($testModel->getId() || $testId == 0)

           {

             Mage::register('test_data', $testModel);

             $this->loadLayout();

             $this->_setActiveMenu('test/set_time');

             $this->_addBreadcrumb('test Manager', 'test Manager');

             $this->_addBreadcrumb('Test Description', 'Test Description');

             $this->getLayout()->getBlock('head')

                  ->setCanLoadExtJs(true);

             $this->_addContent($this->getLayout()

                  ->createBlock('test/adminhtml_test_edit'))

                  ->_addLeft($this->getLayout()

                  ->createBlock('test/adminhtml_test_edit_tabs')

              );

             $this->renderLayout();

           }

           else

           {

                 Mage::getSingleton('adminhtml/session')

                       ->addError('Test does not exist');

                 $this->_redirect('*/*/');

            }

       }

       public function newAction()

       {

          $this->_forward('edit');

       }

       public function saveAction()

       {

         if ($this->getRequest()->getPost())

         {

           try {

                 $postData = $this->getRequest()->getPost();

                 $testModel = Mage::getModel('test/test');

               if( $this->getRequest()->getParam('id') <= 0 )

                  $testModel->setCreatedTime(

                     Mage::getSingleton('core/date')

                            ->gmtDate()

                    );

                  $testModel

                    ->addData($postData)

                    ->setUpdateTime(

                             Mage::getSingleton('core/date')

                             ->gmtDate())

                    ->setId($this->getRequest()->getParam('id'))

                    ->save();

                 Mage::getSingleton('adminhtml/session')

                               ->addSuccess('successfully saved');

                 Mage::getSingleton('adminhtml/session')

                                ->settestData(false);

                 $this->_redirect('*/*/');

                return;

          } catch (Exception $e){

                Mage::getSingleton('adminhtml/session')

                                  ->addError($e->getMessage());

                Mage::getSingleton('adminhtml/session')

                 ->settestData($this->getRequest()

                                    ->getPost()

                );

                $this->_redirect('*/*/edit',

                            array('id' => $this->getRequest()

                                                ->getParam('id')));

                return;

                }

              }

              $this->_redirect('*/*/');

            }

          public function deleteAction()

          {

              if($this->getRequest()->getParam('id') > 0)

              {

                try

                {

                    $testModel = Mage::getModel('test/test');

                    $testModel->setId($this->getRequest()

                                        ->getParam('id'))

                              ->delete();

                    Mage::getSingleton('adminhtml/session')

                               ->addSuccess('successfully deleted');

                    $this->_redirect('*/*/');

                 }

                 catch (Exception $e)

                  {

                           Mage::getSingleton('adminhtml/session')

                                ->addError($e->getMessage());

                           $this->_redirect('*/*/edit', array('id' => $this->getRequest()->getParam('id')));

                  }

             }

            $this->_redirect('*/*/');

       }

}

?>


Now it really works!



This is the end of this tutorial That’s it for today;) It can seem abstract, but force yourself doing it again and again and do not worry at one time it will be easy for you.

 Feel free to leave your messages in comments, It’s always nice and if you have any questions I will answer you. 
 

Find the summery of this tutorial