Magento: Add fields to the Admin Backend

Written by Kevin Gimbel on , 🍿 5 min. read

Today I had a task at work that first sounded rather easy: Add a field to the Admin backend, namely System->Config->Catalog where the user could later insert some SKUs to control which products are shown on the home page. The first resources I found on how to edit the Backend where all suggesting to create a Module and then create a settings page. Not only was this rather complex it was also way too "over engineered" for a simple thing like a text field. So I continued searching and found this post about creating fields in the backend only with XML.

That was easy and fair enough I thought and so I gave it a try. First however I created a Module in app/code/community/Synoa (community because this can be reused and is not directly project specific). My folder structure is really simple since I don't need much:

-app/code/community
-Synoa
-FeaturedProducts
-etc
-config.xml
-system.xml

In config.xml is the default Module configuration. In my case the following XML.

<?xml version="1.0" encoding="UTF-8"?>
<config>
<modules>
<Synoa_FeaturedProducts>
<version>0.0.1</version>
</Synoa_FeaturedProducts>
</modules>
</config>

The really important and amazing part happens in system.xml. The way of adding fields as shown below shows how amazingly flexible Magento can be. When I tried it out and found that it worked right away I was really impressed. Magento's Module System, where the Module Name is equal to the folder it is in, e.g. Mage_Core_Block_Html_Link is in Mage/Core/Block/Html/Link.php, also applies to this XML configuration.

<config>
<sections>
<catalog>
<groups>
<featured_products translate="label">
<label>Featured Products</label>
<frontend_type>text</frontend_type>
<sort_order>50</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<fields>
<product_skus translate="label">
<label>Insert product skus here</label>
<frontend_type>text</frontend_type>
<sort_order>50</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
</product_skus>
</fields>
</featured_products>
</groups>
</catalog>
</sections>
</config>

Well quite a lot of stuff happens here, let's break that down.

Sections

 <sections>
<catalog>
</catalog>
</sections>

This part defines in what menu (in the backend on the left) the new fields will be inserted. In this case it's the Catalog Menu and there the first Sub-Menu point (which is also named Catalog).

Groups

<groups>
<group_name>
</group_name>
</groups>

Groups define the "containers" for settings. These are the boxes on the right part of the screen. Because describing it is rather stupid, here's a picture of the new admin menu and it's container (the group). !["Custom field in the backend."](https://i.kevingimbel.me/sc/Screenshot at 13-52-42.png)

Lastly inside the group the content is defined. The wrapping tag can have any valid XML name you want, in my case it is <featured_products> the translate="label" attribute tells Magento to translate the label if there is a translation available, either in translate.csv or myCompany_MyModule.csv - that's up to you.

Inside the container is more stuff that could need some explanation.

<my_namespace>
<label>Featured Products</label>
<frontend_type>text</frontend_type>
<sort_order>50</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<my_namespace/>
  • label - The label to show at the top (headline)
  • frontend_type- type of the field in the frontend
  • sort_order - position in the list
  • show_in_default - available in default view
  • show_in_website - available in website view
  • show_in_store - available in default store view The show tags determine in what store config "scope" (after setting it in the top right) the option is available.
<fields>
<product_skus translate="label">
<label>Insert product skus here (csv, e.g 123, 144, 255)</label>
<frontend_type>text</frontend_type>
<sort_order>50</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
</product_skus>
</fields>
  • label - Label on the left (field description)
  • sort_order- position inside the list

I'm not entirely sure what the store variables do here, but I guess they configure if and where the field can be echoed in the frontend.

And that's it. Without a single line of PHP fields can be added to the backend in Magento. Retrieving the values of those fields is also easy, as the following example shows.

<?php echo Mage::getStoreConfig('catalog/featured_products/product_skus'); ?>

The logic here is simply section/groupname/fieldname. This fits pretty good with the previously mentioned folder structure of Magento.

Hi, I'm Kevin!

I'm a DevOps Engineer with a passion for on automation and monitoring. Before shifting into DevOps and cloud computing I worked as Front-End Developer, which is still a hobby and field of interest for me.

Picture of Kevin Gimbel, in a tiny mirror

I'm very passionated about a variety of games - digital, boardgames, and pen & paper; and also interested in Sci-Fi, Cyberpunk, and dystopian books. You can find out more on the about page.