How to get Joomla Article Modal form field in Custom Component

If you are building a custom Joomla Component and need to add an option to select an article, it is quite simple. You can use the Modal Article Pop-up like in the Joomla Menu Selection. Here’s how to do it in Joomla 2.5

If you care to start from scratch, you can go to the file administrator/components/models/fields/modal/article.php   and copy the content of that file which will be the following.

The code should look like the following

 * @copyright	Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt

defined('JPATH_BASE') or die;

 * Supports a modal article picker.
 * @package		Joomla.Administrator
 * @subpackage	com_content
 * @since		1.6
class JFormFieldModal_Article extends JFormField
	 * The form field type.
	 * @var		string
	 * @since	1.6
	protected $type = 'Modal_Article';

	 * Method to get the field input markup.
	 * @return	string	The field input markup.
	 * @since	1.6
	protected function getInput()
		// Load the modal behavior script.
		JHtml::_('behavior.modal', 'a.modal');

		// Build the script.
		$script = array();
		$script[] = '	function jSelectArticle_'.$this->id.'(id, title, catid, object) {';
		$script[] = '"'.$this->id.'_id").value = id;';
		$script[] = '"'.$this->id.'_name").value = title;';
		$script[] = '		SqueezeBox.close();';
		$script[] = '	}';

		// Add the script to the document head.
		JFactory::getDocument()->addScriptDeclaration(implode("\n", $script));

		// Setup variables for display.
		$html	= array();
		$link	= 'index.php?option=com_content&view=articles&layout=modal&tmpl=component&function=jSelectArticle_'.$this->id;

		$db	= JFactory::getDBO();
			'SELECT title' .
			' FROM #__content' .
			' WHERE id = '.(int) $this->value
		$title = $db->loadResult();

		if ($error = $db->getErrorMsg()) {
			JError::raiseWarning(500, $error);

		if (empty($title)) {
			$title = JText::_('COM_CONTENT_SELECT_AN_ARTICLE');
		$title = htmlspecialchars($title, ENT_QUOTES, 'UTF-8');

		// The current user display field.
		$html[] = '<div class="fltlft">';
		$html[] = '  <input type="text" id="'.$this->id.'_name" value="'.$title.'" disabled="disabled" size="35" />';
		$html[] = '</div>';

		// The user select button.
		$html[] = '<div class="button2-left">';
		$html[] = '  <div class="blank">';
		$html[] = '	<a class="modal" title="'.JText::_('COM_CONTENT_CHANGE_ARTICLE').'"  href="'.$link.'&'.JSession::getFormToken().'=1" rel="{handler: \'iframe\', size: {x: 800, y: 450}}">'.JText::_('COM_CONTENT_CHANGE_ARTICLE_BUTTON').'</a>';
		$html[] = '  </div>';
		$html[] = '</div>';

		// The active article id field.
		if (0 == (int)$this->value) {
			$value = '';
		} else {
			$value = (int)$this->value;

		// class='required' for client side validation
		$class = '';
		if ($this->required) {
			$class = ' class="required modal-value"';

		$html[] = '<input type="hidden" id="'.$this->id.'_id"'.$class.' name="'.$this->name.'" value="'.$value.'" />';

		return implode("\n", $html);

This is the core script which allows persons to open up the Joomla Modal Selectbox to choose and filter through articles and save it to a form field, usually in Single Article Menu selection.

The next step is to paste that code in a file called article.php in your components custom fields folder, if it’s in the administrator then the directory may be administrator/components/COMPONENT_NAME/models/fields .

Now, add the following form field to your form XML file. Let’s say your XML was called slide.xml

<field name="article_id" type="modal_article"

This will reference the new form field type. Don’t forget to change the field Label and Description to match your needs.

Lastly, add the following to your form view to display.

<li><?php echo $this->form->getLabel('article_id'); ?>
			<?php echo $this->form->getInput('article_id'); ?></li>

That should now render your custom article select field.


I am a passionate PHP user with a love for Open Source systems. With a few years of programming these technologies, I am fortunate to be able to share my thoughts. Joomla and WordPress are my favorite systems to develop. That's enough for now.

You may also like...

8 Responses

  1. Mat Kay says:

    That was great – thank you

  2. Mat Kay says:

    That was a huge help.
    Also don’t forget to load the language file when you do this
    $this->loadLanguage($extension= ‘COM_CONTENT’, $basePath=JPATH_BASE);

  3. aldo says:

    Thanks for this great tutorial. btw how to do this from module manager? is there any way to create custom field on module?

  4. Justhelping says:

    Coorect path to modal file:
    Is missing com_content in path

  5. Lobster says:

    Just one question, can this also be done in the template xml file? All works except the actual form for selection.
    All I get is a normal text field where I can give the url in myself. No pop-up or select button. Can’t find anything on the web so far with a solution.

  6. Toms says:

    Works for Joomla 3.x too. Thanks.

  7. Engy says:

    can we make the select articles list to be viewed from a certain category only?

Leave a Reply

Your email address will not be published.