Magento: Extension for creating chooser button in admin form

Tweet about this on TwitterShare on LinkedInShare on Google+Share on FacebookEmail this to someone

Today I will introduce Magento extension that allows developers to create different choosers in Magento admin forms.

List of available choosers:

  • Image Chooser
  • Product Chooser
  • Category Chooser
  • CMS Page Chooser
  • Static Block Chooser

You can clone or download the extension from here: https://github.com/extendix/Extendix_AdminFormChooserButton

For this extension I used a code base of Magento extension that I created while I was working for Session Digital GmbH. I decided to take control and continue maintenance of the extension from my account and my namespace.

The good news is that in this version of the extension I introduced new feature for Image Chooser in Magento admin form.

Short explanation how Image Chooser works from Administrator point of view:

When you click the image chooser button a dialog window will appear. From this dialog window you can upload, delete and choose / insert images.

It’s important to note that all images uploaded with “Image Chooser” will be stored in “media/wysiwyg” folder of Magento root folder.

Image chooser user interface (pay attention to Main Image field)

  1. Click on “Select Main Image…” button:
    Chooser button in admin form
  2. Upload / Insert image from dialog window:
    Image chooser dialog window
  3. Value of text field “Main Image” changes to path of uploaded image:
    Image chosen

What is needed a developer to do in order to create choosers in admin forms?

After you install Extendix_AdminFormChooserButton you have to follow 3 important steps to make any of the choosers the chooser work.

  1. Add layout update handle “editor”. This handle includes the JS logic that is needed to render the chooser popups.
    
    
    
        
            
                
            
            
        
    
    
    
  2. In _prepareForm() method of your admin form, create an instance of helper ‘extendix_admin_form_chooser_button/chooser’ and pass some parameters to the function creating the chooser.

    Use any of the chooser create functions of Extendix_AdminFormChooserButton_Helper_Chooser:

    • createImageChooser
    • createProductChooser
    • createCategoryChooser
    • createCmsPageChooser
    • createStaticBlockChooser
    • createChooser
  3. There is a required config value called “input_name” and must be passed to the chooser through a configuration array.

The function creating the chooser accepts the following parameters:

  • $model – instance of Mage_Core_Model_Abstract – the current entity
  • $fieldset – instance of Varien_Data_Form_Element_Fieldset – It’s required, because we create the chooser in this fieldset
  • $config – array of the widget configuration, the element “input_name” is required, because this is the name of the field name, that we save after form submit.
  • $blockAlias – this parameter is used only when we call Extendix_AdminFormChooserButton_Helper_Chooser::createChooser(), it’s useful for creating our own custom
  • chooser

The array $config also can contain more elements, but they are not mandatory:

  • ‘input_label’ – The text of the input label
  • ‘button_text’ – The text of the chooser button
  • ‘required’ – If it’s true, then we will have frontend validation and to pass it we need to choose something from the chooser
  • ‘input_id’ – If you don’t specify this parameter the input id will be same as the input name. Thanks to @bmcg for his pull request. He found, that useful when he want’s to have input name, that contains square brackets.

Example of config array:

$productConfig = array(
    'input_name'  => 'entity_id',
    'input_label' => $this->__('Product'),
    'button_text' => $this->__('Select...'),
    'required'    => true,
    'input_id'    => 'my_custom_id'
);

Code Examples

Image Chooser:

/** @var Extendix_AdminFormChooserButton_Helper_Chooser $chooserButtonHelper */
$chooserButtonHelper = Mage::helper('extendix_admin_form_chooser_button/chooser');

$imageConfig = array(
    'input_name'  => 'main_image',
    'input_label' => $this->__('Image'),
    'button_text' => $this->__('Select Image...'),
    'required'    => true
);

$chooserButtonHelper->createImageChooser($model, $fieldset, $productConfig);

Product Chooser:

/** @var Extendix_AdminFormChooserButton_Helper_Chooser $chooserButtonHelper */
$chooserButtonHelper = Mage::helper('extendix_admin_form_chooser_button/chooser');
 
$productConfig = array(
    'input_name'  => 'entity_link',
    'input_label' => $this->__('Product'),
    'button_text' => $this->__('Select Product...'),
    'required'    => true
);
 
$chooserButtonHelper->createProductChooser($model, $fieldset, $productConfig);

Category Chooser:

/** @var Extendix_AdminFormChooserButton_Helper_Chooser $chooserButtonHelper */
$chooserButtonHelper = Mage::helper('extendix_admin_form_chooser_button/chooser');

$categoryConfig = array(
    'input_name'  => 'entity_link',
    'input_label' => $this->__('Category'),
    'button_text' => $this->__('Select Category...'),
    'required'    => true
);

$chooserButtonHelper->createCategoryChooser($model, $fieldset, $categoryConfig);

Static Block Chooser:

/** @var Extendix_AdminFormChooserButton_Helper_Chooser $chooserButtonHelper */
$chooserButtonHelper = Mage::helper('extendix_admin_form_chooser_button/chooser');

$blockConfig = array(
    'input_name'  => 'entity_link',
    'input_label' => $this->__('Block'),
    'button_text' => $this->__('Select Block...'),
    'required'    => true
);

$chooserButtonHelper->createStaticBlockChooser($model, $fieldset, $blockConfig);

CMS Page Chooser:

/** @var Extendix_AdminFormChooserButton_Helper_Chooser $chooserButtonHelper */
$chooserButtonHelper = Mage::helper('extendix_admin_form_chooser_button/chooser');

$cmsPageConfig = array(
    'input_name'  => 'entity_link',
    'input_label' => $this->__('CMS Page'),
    'button_text' => $this->__('Select CMS Page…'),
    'required'    => true
);

$chooserButtonHelper->createCmsPageChooser($model, $fieldset, $cmsPageConfig);

Custom Chooser:

/** @var Extendix_AdminFormChooserButton_Helper_Chooser $chooserButtonHelper */
$chooserButtonHelper = Mage::helper('extendix_admin_form_chooser_button/chooser');

$customChooserConfig = array(
    'input_name'  => 'entity_link',
    'input_label' => $this->__('Custom entity'),
    'button_text' => $this->__('Select entity…'),
    'required'    => true
);

$chooserBlock = 'custom_module/chooser';

$chooserButtonHelper->createChooser($model, $fieldset, $customChooserConfig, $chooserBlock);

Default config values
In case you don’t have “input_label” and “button_text” in config array default values will be used:

  • createImageChooser()
    • input_label – Image
    • button_text – Select Image…
  • createProductChooser()
    • input_label – Product
    • button_text – Select Product…
  • createCategoryChooser()
    • input_label – Category
    • button_text – Select Category…
  • createStaticBlockChooser()
    • input_label – Block
    • button_text – Select Block…
  • createCmsPageChooser()
    • input_label – CMS Page
    • button_text – Select CMS Page…
  • createChooser()
    • input_label – Element
    • button_text – Select…

Your thoughts?

Tweet about this on TwitterShare on LinkedInShare on Google+Share on FacebookEmail this to someone

Tsvetan Stoychev

Tsvetan aka. Cecko is the founder of Cecko's Lab. He is Magento addicted since Magento CE 1.2.1.2 and has worked on over 30 Magento projects. At the moment he is in charge to take care about the money flow of the company, to keep constant communication with the clients and to keep the people in the office busy.

More Posts

Follow Me:
TwitterLinkedIn

  • labidi

    Hi thanks for sharing , is there way we can have a multiple products chooser

  • Do you mean that from one chooser popup you would have multiple product choices? Such a feature is not supported yet but it could be added in next weeks.

  • labidi

    yes that’s exactly what i mean, ok, i will try to figure it out by myself, thanks anyway :) .