Magento module development, building interface with config file and reusing config values

Huh, this is a long title. To bad I could not fit extra more into it :). Extending admin interface in Magento can be a tedious task. Unlike WordPress where you have a thing or two to setup then the rest of it comes to good old HTML forms and stuff, Magento requires completely different approach. Magento uses xml configuration files to build parts of admin interface needed for your custom module.

In this article I will show you how to “understand and read” existing config.xml files in order to build interface and at the end, how to read the values stored in admin backend. After all, that’s the point of admin interface, you setup some stuff, write some values, then you use those values across your site where certain functionality is needed.

Creating a bare bone module is easy. Basically you need few directories as placeholders for merely two config files. My example will be using module which I named Extras and placed under the “namespace” or “package”, whatever you call it, named ActiveCodeline (go figure :)). As I said, bare module needs merely 2 xml files to “work”. Here is the structure of bare Extras module:

/app/code/local/ActiveCodeline/
/Extras
/etc/
/config.xml
/app/etc/
/modules/
/ActiveCodeline_Extras.xml

Goal of this article is to show you how to create module that will be shown in the left sidebar under the System > Configuration area.

Initial content of our config.xml file is:

<?xml version="1.0"?>
 
<config>
<modules>
<ActiveCodeline_Extras>
<version>1.0.0</version>
</ActiveCodeline_Extras>
</modules>
</config>

In order to have our module appear under the sidebar, we need to add another configuration file to our module. This additional file is known as system.xml. Here is the final working version of my system.xml file

<?xml version="1.0"?>
 
<config>
<tabs>
<extras translate="label" module="extras">
<label>Extras</label>
<sort_order>301</sort_order>
</extras>
</tabs>
<sections>
<extras translate="label" module="extras">
<label>Extras Configuration Area</label>
<tab>extras</tab>
<sort_order>130</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<groups>
<coolstuff translate="label">
<label>How cool are you?</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<coolnesslevel translate="label">
<label>From 1-10, rate your coolness</label>
<frontend_type>text</frontend_type>
<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>
<comment>Provide a single number like: 8 or any other that matches your coolness :)</comment>
</coolnesslevel>
</fields>
</coolstuff>
<ihatetwitterstuff translate="label">
<label>Twitter</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<twittername translate="label comment">
<label>Twitter user name or email address</label>
<frontend_type>text</frontend_type>
<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>
<comment>Gimme your user name for Twitter account.</comment>
</twittername>
</fields>
<fields>
<twitterpassword translate="label comment">
<label>Twitter Password</label>
<frontend_type>password</frontend_type>
<sort_order>2</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<comment>Password for you tweets.</comment>
</twitterpassword>
</fields>
</ihatetwitterstuff>
</groups>
</extras>
</sections>
</config>

If, at this point, we were to refresh the page at System > Configuration, we would get “Class_Mage_Extra_Helper_Data not found…” as shown in photo below.

To resolve this error we need to add a little something extra into our config.xml file. We need to add “helpers”. Here is example of xml code that would go into the config.xml file:

<global>
<helpers>
<extras>
<class>ActiveCodeline_Extras_Helper</class>
</extras>
</helpers>
</global>

With addition to the xml code above, we need to add app/code/local/ActiveCodeline/Extras/Helper/Data.php file. This file is merely an instance of core Magento helper file so at this point, his code might look like

<?php
 
class ActiveCodeline_Extras_Helper_Data extends Mage_Core_Helper_Abstract
{
 
}

Now if we refresh the System > Configuration page, our sidebar “tab” menu item should be visible, like on screenshot below.

.

However, at this point, another very frustrating issue appears. If we were to click on the newly created menu item, we would most likely get “Access denied error”.

To resolve that, we add another chunk of xml code into the config.xml file:

<adminhtml>
<acl>
<resources>
<admin>
<children>
<system>
<children>
<config>
<children>
<extras translate="title" module="customer">
<title>Extras Section by Branko</title>
<sort_order>50</sort_order>
</extras>
</children>
</config>
</children>
</system>
</children>
</admin>
</resources>
</acl>
</adminhtml>

After adding this we need to logout, and login back to Magento to avoid getting the “Access denied error”. If even after the logout you keep getting the same error, try going to System > Permissions > Roles, select a role to edit its rsources, choose custom, select all resources then save.

At this point we should be in clear of errors so, moving on. Now we need to add some “groups” and input fields that we will use to store variables in. Here is the final look of config.xml file:

<?xml version="1.0"?>
 
<config>
<modules>
<ActiveCodeline_Extras>
<version>1.0.0</version>
</ActiveCodeline_Extras>
</modules>
 
<global>
<models>
<extras>
<class>ActiveCodeline_Extras_Model</class>
</extras>
</models>
<helpers>
<extras>
<class>ActiveCodeline_Extras_Helper</class>
</extras>
</helpers>
</global>
 
<adminhtml>
<acl>
<resources>
<admin>
<children>
<system>
<children>
<config>
<children>
<extras translate="title" module="customer">
<title>Extras Section by Branko</title>
<sort_order>50</sort_order>
</extras>
</children>
</config>
</children>
</system>
</children>
</admin>
</resources>
</acl>
</adminhtml>
</config>
 
And the final look of system.xml file:
 
[code lang="xml"]
<?xml version="1.0"?>
 
<config>
<tabs>
<extras translate="label" module="extras">
<label>Extras</label>
<sort_order>301</sort_order>
</extras>
</tabs>
<sections>
<extras translate="label" module="extras">
<label>Extras Configuration Area</label>
<tab>extras</tab>
<sort_order>130</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
 
<groups>
<coolstuff translate="label">
<label>How cool are you?</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<coolnesslevel translate="label">
<label>From 1-10, rate your coolness</label>
<frontend_type>text</frontend_type>
<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>
<comment>Provide a single number like: 8 or any other that matches your coolness :)</comment>
</coolnesslevel>
</fields>
</coolstuff>
<ihatetwitterstuff translate="label">
<label>Twitter</label>
<frontend_type>text</frontend_type>
<sort_order>10</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<twittername translate="label comment">
<label>Twitter user name or email address</label>
<frontend_type>text</frontend_type>
<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>
<comment>Gimme your user name for Twitter account.</comment>
</twittername>
</fields>
<fields>
<twitterpassword translate="label comment">
<label>Twitter Password</label>
<frontend_type>password</frontend_type>
<sort_order>2</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<comment>Password for you tweets.</comment>
</twitterpassword>
</fields>
</ihatetwitterstuff>
</groups>
</extras>
</sections>
</config>
</pre

With those two config files and data helper we have fully working module ready to accept user input on website and store level.

So, the question is, how do we retrieve values stored in these input fields? Easy 🙂 Here is some debugging code you can test in any view file:

<?php
 
$config = Mage::getConfig();
 
//echo get_class($config);
/** @var $config Mage_Core_Model_Config  */
 
/** public function getModuleDir($type, $moduleName) */
echo '<p><b>echo $config->getModuleDir("local", "ActiveCodeline_Extras"): </b>'.$config->getModuleDir("local", "ActiveCodeline_Extras").'</p>';
 
/** public function getFieldset($name, $root = 'global') */
echo '<p><b>var_dump($config->getModuleConfig("ActiveCodeline_Extras")) :</b>'; var_dump($config->getModuleConfig("ActiveCodeline_Extras")); echo '</p>';
 
print_r(Mage::getStoreConfig('extras'));
 
?>

Result of the above code is visible in the screenshot below.

Hope this help clear out some things. This stuff, config and layout files, is really huge topic. It would take me a book to cover ti. Hope these small pieces will help you or anyone stuck in this to see it a bit clearly.

Cheers.