Blog

The official ScorgIT Weblog

Custom options in a Magento back-end dropdown menu

Right. Custom options in the back-end of your custom made Magento Extension. That’s what this is all about.

Recently, I wrote about showing and hiding form fields in the back-end, which is very well possible, out of the box, by means of a drop down menu with, for example, Yes / No options. While this Yes / No is fairly easy to incorporate, you also can make your own drop down menus, with your very own options to select from.

Let’s dive into the details by looking at a system.xml of a Magento module (which can be found in app/local/yourCompanyName/yourModuleName/etc). Normally, the first field you see is the Enabled field:

<fields>
 <active translate="label">
 <label>Enabled</label>
 <frontend_type>select</frontend_type>
 <source_model>adminhtml/system_config_source_yesno</source_model>
 <sort_order>1</sort_order>
 <show_in_default>1</show_in_default>
 <show_in_website>1</show_in_website>
 <show_in_store>1</show_in_store>
 </active>
 <omitted some other fields...>
</fields>

Now look at the frontend-type tag, which shows us that is of type select. As stated in my earlier post, this will be rendered as a drop down menu, in this case with two options: Yes and No.

But where does Magento get its options from? Well, at the very end of the source_model tag, you see yesno. That’s our first clue. The rest of the tag, is in fact a path to the file Yesno.php. Every underscore is translated into a subdirectory starting with a capital. The forward slash is translated into the Model directory. In other words, you know exactly where to look and which of the more than 12k Magento files to search for: Adminhtml/Model/System/Config/Source/Yesno.php (mind the capitals by the way!!).

Since the Yes / No – options is default Magento stuff, it is put into the app/code/core/Mage directory. Now just go a little deeper, go to the path Adminhtml/Model/System/Config/Source/ and voilà, there is our Yesno.php file!

/**
 * Used in creating options for Yes|No config value selection
 *
 */
class Mage_Adminhtml_Model_System_Config_Source_Yesno
{

    /**
     * Options getter
     *
     * @return array
     */
    public function toOptionArray()
    {
        return array(
            array('value' => 1, 'label'=>Mage::helper('adminhtml')->__('Yes')),
            array('value' => 0, 'label'=>Mage::helper('adminhtml')->__('No')),
        );
    }

}

Now that ís interesting, because apparently, the options are put into an array, which is returned and rendered as the options in our drop down menu. So, it should be easy to build our own drop down menu, with our own options!  So let’s do that.

Suppose in our custom module, we have three options. Based on those options, we have some logic and perform some calculations or whatever, but that’s beyond the scope of this article. We create our php file which will be returning our options array by simply copying the Yesno.php, and alter it to suit our needs.

Step 1, some assumptions:

  1. we put our code into app/code/local/MyCompanyName/MyModuleName/
  2. we create an Adminhtml directory inside the MyModuleName directory
  3. we create our options array php file inside the Adminhtml directory, while keeping the Magento file structure consistent
  4. we name our options array php file: Mycustomoptions.php

All those assumptions leave us with a file: app/code/local/MyCompanyName/MyModuleName/Adminhtml/Model/System/Config/Source/Mycustomoptions.php

Step 2, we edit the class name. As always in Magento, the class name reflects the location on file. So that’s easy, our class name will be:

MyCompanyName_MyModuleName_Adminhtml_Model_System_Config_Source_Mycustomoptions

Step 3, we define our options, let’s simply say option one, option two, option three:

  array('value' => 1, 'label'=>Mage::helper('adminhtml')->__('Option one')),
  array('value' => 0, 'label'=>Mage::helper('adminhtml')->__('Option two')),
  array('value' => 0, 'label'=>Mage::helper('adminhtml')->__('Option three')),

Our completed file will look like:

/**
 * My own options
 *
 */
class MyCompanyName_MyModuleName_Adminhtml_Model_System_Config_Source_Mycustomoptions
{

    /**
     * Options getter
     *
     * @return array
     */
    public function toOptionArray()
    {
        return array(
            array('value' => 1, 'label'=>Mage::helper('adminhtml')->__('Option one')),
            array('value' => 0, 'label'=>Mage::helper('adminhtml')->__('Option two')),
            array('value' => 0, 'label'=>Mage::helper('adminhtml')->__('Option three')),
        );
    }

}

Once you saved your file however and go to the back-end of your module to check if it is all ok, you will notice that it does not work. Relax, we’ll fix that by letting Magento know the existance of our class, inside our module’s config.xml.
You can do this by adding a models-tag inside the config.xml, like so:

<config>
  <global>
    <models>
      <mymodulename_adminhtml>
        <class>MyCompanyName_MyModuleName_Adminhtml_Model</class>
      </mymodulename_adminhtml>
    </models>
  </global>
</config>

Now Magento knows that your class exists and where to find it.

The last step is to incorporate your field into your module’s system.xml, where all of your back end fields reside:

<my_field_with_options translate="label">
 <label>Please select your option</label>
 <frontend_type>select</frontend_type>
 <source_model>mymodulename_adminhtml/system_config_source_mycustomoptions</source_model>
 <sort_order>15</sort_order>
 <show_in_default>1</show_in_default>
 <show_in_website>1</show_in_website>
 <show_in_store>1</show_in_store>
</my_field_with_options>

And that’s that! We have our own drop down menu, with our own options!

Questions? Feel free to ask!

(PS: I know I do not use all the right Magento linguistics from time to time, so if you want to correct me, feel free to say so too :-) Nevertheless, the described method is, as far as I know, the way to go to build your own options.)

Liked this post? Share it!

8 Comments to Custom options in a Magento back-end dropdown menu

  1. 16-06-2011 at 08:11

    Thanks buddy :) you rocks and gave me some more ideas to dive in magento ….
    thumbs up

  2. Jay's Gravatar Jay
    25-12-2011 at 21:04

    Excellent article! works out of the box on 1.6.1.0

  3. swamy's Gravatar swamy
    27-08-2012 at 15:32

    it was throws an error
    Fatal error: Call to a member function toOptionArray() on a non-object in D:\xampp\htdocs\storelocator\app\code\core\Mage\Adminhtml\Block\System\Config\Form.php on line 463

  4. Prashant's Gravatar Prashant
    13-05-2013 at 13:52

    Excellent post. Very very helpful and well explained. Saved me lots of time!
    Thanks a ton!

  5. Victor's Gravatar Victor
    26-07-2013 at 10:29

    Hello, i have a curiosity: how do you set the default value?? if you can (the value that will be set to when you access the page)

Tweets by ScorgIT

scorgit