Joomla article modal with clear button

Applies to Joomla 1.6+

What?
This is an article to describe how to add an article modal button in the Joomla Admin Panel (at time of print version 2.5.6) of your component including the all important clear button. What I found was that no one posted this solution which I found is compatible with almost any site and with all my components without having to modify the below script.

Why?
The article modal is a much easier way for the end-users to select a Joomla! article in the component parameters/options. The "clear" button is essential as some article_modal fields may not be required and are difficult to clear once set.

How?
Well don't quote me on this but I haven't needed to modify this script for any different component. Simply include this file in the fields folder/directory of your component (/my_component/administrator/models/fields/article.php). It's based on two Joomla core ones, namely administrator\components\models\fields\modal\article.php and \libraries\joomla\form\fields\media.php. You then refer to it in your XML file where instead of type="sql" use type="modal_article". A usage example is:
copyraw
<field 
	name="license" 
	type="modal_article" 
	default="" 
	class="inputbox" 
	label="COM_MYCOMPONENT_FIELD_LICENSE_LABEL" 
	description="COM_MYCOMPONENT_FIELD_LICENSE_DESC"
/>

<!-- I don't know if it has any other parameters nor do I use them, but the standard ones apply
-- eg. required="true" //-->

<!-- Also the type doesn't seem to be case-sensitive but just in case it's Modal_Article //-->
  1.  <field 
  2.      name="license" 
  3.      type="modal_article" 
  4.      default="" 
  5.      class="inputbox" 
  6.      label="COM_MYCOMPONENT_FIELD_LICENSE_LABEL" 
  7.      description="COM_MYCOMPONENT_FIELD_LICENSE_DESC" 
  8.  /> 
  9.   
  10.  <!-- I don't know if it has any other parameters nor do I use them, but the standard ones apply 
  11.  -- eg. required="true" //--> 
  12.   
  13.  <!-- Also the type doesn't seem to be case-sensitive but just in case it's Modal_Article //--> 
Just copy & paste the below into a PHP file and include it in your component, the solution is really that straightforward. Feel free to check for any dodgy code but I've simply added the clear button to the existing article modal file (Joomla 1.6.x to 2.5.x). Don't overwrite any existing core files with this one, it's completely unnecessary as this is a 3.24Kb file.

Step #1 of 1:
Create and include the following PHP file, I've named this file "article.php" (thanks to my amazing imagination). The contents of which are as follows:
copyraw
<?php
/**
 * @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[] = '           document.id("'.$this->id.'_id").value = id;';
                $script[] = '           document.id("'.$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();
                $db->setQuery(
                        '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 user clear button -- hooray for Joe
                $html[] = '<div class="button2-left">';
                $html[] = '  <div class="blank">';
                $html[] = '             <a title="' . JText::_('JLIB_FORM_BUTTON_CLEAR') . '"' . ' href="#" onclick="';
                $html[] = 'jSelectArticle_' . $this->id . '(\'' . $this->id . '\', \'\', \'\', \'\' );';
                $html[] = 'return false;';
                $html[] = '">';
                $html[] = JText::_('JLIB_FORM_BUTTON_CLEAR') . '</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);
        }
}
  1.  <?php 
  2.  /** 
  3.   * @copyright   Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved. 
  4.   * @license             GNU General Public License version 2 or later; see LICENSE.txt 
  5.   */ 
  6.   
  7.  defined('JPATH_BASE') or die; 
  8.   
  9.  /** 
  10.   * Supports a modal article picker. 
  11.   * 
  12.   * @package             Joomla.Administrator 
  13.   * @subpackage          com_content 
  14.   * @since               1.6 
  15.   */ 
  16.  class JFormFieldModal_Article extends JFormField 
  17.  { 
  18.          /** 
  19.           * The form field type. 
  20.           * 
  21.           * @var         string 
  22.           * @since       1.6 
  23.           */ 
  24.          protected $type = 'Modal_Article'
  25.   
  26.          /** 
  27.           * Method to get the field input markup. 
  28.           * 
  29.           * @return      string  The field input markup. 
  30.           * @since       1.6 
  31.           */ 
  32.          protected function getInput() 
  33.          { 
  34.                  // Load the modal behavior script. 
  35.                  JHtml::_('behavior.modal', 'a.modal')
  36.   
  37.                  // Build the script. 
  38.                  $script = array()
  39.                  $script[] = '   function jSelectArticle_'.$this->id.'(id, title, catid, object) {'
  40.                  $script[] = '           document.id("'.$this->id.'_id").value = id;'
  41.                  $script[] = '           document.id("'.$this->id.'_name").value = title;'
  42.                  $script[] = '           SqueezeBox.close();'
  43.                  $script[] = '   }'
  44.   
  45.                  // Add the script to the document head. 
  46.                  JFactory::getDocument()->addScriptDeclaration(implode("\n", $script))
  47.   
  48.   
  49.                  // Setup variables for display. 
  50.                  $html   = array()
  51.                  $link   = 'index.php?option=com_content&view=articles&layout=modal&tmpl=component&function=jSelectArticle_'.$this->id; 
  52.   
  53.                  $db     = JFactory::getDBO()
  54.                  $db->setQuery( 
  55.                          'SELECT title' . 
  56.                          ' FROM #__content' . 
  57.                          ' WHERE id = '.(int) $this->value 
  58.                  )
  59.                  $title = $db->loadResult()
  60.   
  61.                  if ($error = $db->getErrorMsg()) { 
  62.                          JError::raiseWarning(500, $error)
  63.                  } 
  64.   
  65.                  if (empty($title)) { 
  66.                          $title = JText::_('COM_CONTENT_SELECT_AN_ARTICLE')
  67.                  } 
  68.                  $title = htmlspecialchars($title, ENT_QUOTES, 'UTF-8')
  69.   
  70.                  // The current user display field. 
  71.                  $html[] = '<div class="fltlft">'
  72.                  $html[] = '  <input type="text" id="'.$this->id.'_name" value="'.$title.'" disabled="disabled" size="35" />'
  73.                  $html[] = '</div>'
  74.   
  75.                  // The user select button. 
  76.                  $html[] = '<div class="button2-left">'
  77.                  $html[] = '  <div class="blank">'
  78.                  $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>'
  79.                  $html[] = '  </div>'
  80.                  $html[] = '</div>'
  81.   
  82.                  // The user clear button -- hooray for Joe 
  83.                  $html[] = '<div class="button2-left">'
  84.                  $html[] = '  <div class="blank">'
  85.                  $html[] = '             <a title="' . JText::_('JLIB_FORM_BUTTON_CLEAR') . '"' . ' href="#" onclick="'; 
  86.                  $html[] = 'jSelectArticle_' . $this->id . '(\'' . $this->id . '\', \'\', \'\', \'\' );'
  87.                  $html[] = 'return false;'
  88.                  $html[] = '">'
  89.                  $html[] = JText::_('JLIB_FORM_BUTTON_CLEAR') . '</a>'
  90.                  $html[] = '  </div>'
  91.                  $html[] = '</div>'
  92.   
  93.                  // The active article id field. 
  94.                  if (0 == (int)$this->value) { 
  95.                          $value = ''
  96.                  } else { 
  97.                          $value = (int)$this->value; 
  98.                  } 
  99.   
  100.                  // class='required' for client side validation 
  101.                  $class = ''
  102.                  if ($this->required) { 
  103.                          $class = ' class="required modal-value"'
  104.                  } 
  105.   
  106.                  $html[] = '<input type="hidden" id="'.$this->id.'_id"'.$class.' name="'.$this->name.'" value="'.$value.'" />'
  107.   
  108.                  return implode("\n", $html)
  109.          } 
  110.  } 

Other Searches
  • How to use type="modal_article"
  • Clearing Article Picker in Joomla Admin Panel
  • Add a reset button to article modal parameter
Category: Joomla :: Article: 433

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: The information on this website is provided without warranty and any content is merely the opinion of the author. Please try to test in development environments prior to adapting them to your production environments. The articles are written in good faith and, at the time of print, are working examples used in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin - Valid till 8 May 2022 3QnhmaBX7LQSRsC9hh6Je9rGQKEGNQNfPb
© 2021 Joel Lipman .com. All Rights Reserved.