Magento provides an interesting functionality which can be used to provide flexible tables (grids) in the system configuration. By default, it is used in the “Design” tab for exceptions regarding template settings:

Screen Shot 03-17-15 at 11.10 AM

Create the configuration field

Without much effort, you can create your own fields. All you need is:

  • your own module
  • a system.xml file inside this module

I assume that you are familiar with creating your own module and new (text) fields in the system.xml.

It will look like this when it’s finished:

Screen Shot 03-17-15 at 11.07 AM

The system.xml part relevant for this field looks like this:

As you can see, the code only adds a frontend model and a backend model to the usual definition of new fields.

  • The backend model is used to modify saving the field value to and loading from the database. Always use adminhtml/system_config_backend_serialized_array here.
  • The frontend model is in fact a block, despite its name. It is used to render the table with the defined columns. The frontend models always inherits from the class Mage_Adminhtml_Block_System_Config_Form_Field_Array_Abstract.

In my example the frontend model class looks like this:

Nothing more is needed to display a table with two columns of 100px each.

Use the configuration value

If you want to use the values from the configuration somewhere, you just have to unserialize the field data:

The check in line 2 is needed for the case that noone filled and saved the table in the configuration yet.

Setting a default value

As for every other configuration field, you can set a default value in your config.xml file. You have to enter a serialized array there. In my experience, the best way to generate that serialized array is to fill in the default data in the backend, save it and then copy the value from the database to the config.xml. In my example it looks like this:

Advanced: use dropdown fields

You may not only add text fields, but dropdown fields as well. You have to extend the frontend model from above for that:

You can define the available options in the newly created block which we call in line 30 above:

Of course you can also use your own source models instead of adminhtml/system_config_source_country.

The result will look like this:

Screen Shot 03-17-15 at 12.00 PM

A bug and a workaround

It sometimes happens that you experience strange display errors when having more than one table on a page, like this:

Screen Shot 03-17-15 at 12.23 PM

It’s a Magento bug. It happens with tables without dropdown fields only, so a simple workaround is to add an invisible dummy dropdown field. In the select class (Namespace_Module_Block_Config_Adminhtml_Form_Field_Country in my example) you can set the dropdown invisible by adding the following line after line 10:



Andreas von Studnitz

Author: Andreas von Studnitz

Andreas von Studnitz is a Magento developer and one of the Managing Directors at integer_net. His main areas of interest are backend development, Magento consulting and giving developer trainings. He is a Magento Certified Developer since 2011 (and 2018 for Magento 2) and a Magento Certified Solution Specialist since 2014 (Magento 1) respective 2017 (Magento 2). He was appointed a Magento Master in 2019.

More Information · Twitter · GitHub · LinkedIn