How to Get Form in Joomla Component

The Form class of Joomla is used to create complex forms with flexible layouts and dynamic properties. First, the form fields are defined in the XML file. Then, the view file gets the form from the model and layout file displays the form.

Step 1: XML Form File

admin/forms/planet.xml

At present, we are adding only title field.

<?xml version="1.0" encoding="UTF-8"?>
<form>
    <field 
        name="title" 
        type="text" 
        label="JGLOBAL_TITLE" 
        required="true" />
</form>

Similarly, you can other fields to the XML file.

Read More about XML Forms

Step 2: View File

src/View/Planet/HtmlView.php

This file is similar to the view file added earlier for the "Planets" view. The view file gets the form from the model in the display() method.

namespace TechFry\Component\Stars\Administrator\View\Planet;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

class HtmlView extends BaseHtmlView
{
    protected $form;
    protected $item;
    
    public function display($tpl = null) 
    {
        $this->form = $this->get('Form');
        $this->item  = $this->get('Item');
        
        parent::display($tpl);
    }
}

The code will look for the method getForm() and getItem() in the model file. We need to get the item to get the ID of record in case of editing the existing record.

Step 3: Model File

admin/src/Model/PlanetModel.php

You need to extend the model class with the AdminModel. The AdminModel class extends FormModel class. The getForm() method gets the Form object for the edit form.

namespace TechFry\Component\Stars\Administrator\Model;

defined('_JEXEC') or die;

use Joomla\CMS\MVC\Model\AdminModel;

class PlanetModel extends AdminModel
{
    public function getForm($data = array(), $loadData = true)
    {
        $form = $this->loadForm('com_stars.planet', 'planet', array('control' => 'jform', 'load_data' => $loadData));

        if (empty($form))
        {
            return false;
        }
        
        return $form;
    }
}

The loadForm() and preprocessForm() methods are defined in the FormModel class and the bind() method is defined in the Form class. The first argument (name) of loadForm() is set to "com_stars.planet". The second argument (form xml source), is "planet", and the third argument is the associative array for options.

The form is defined in the source file: forms/planet.xml

After you have set the $form variable with the Form object, you check to see if you are loading data to the form. If you want to pre-load data for the form, you include an element called "load_data" that is set to a boolean true. Then, the method calls the loadFormData() method to get the data for the form. This method gets any previously loaded data from the session or database.

Modifying Form Dynamically

Inside the getForm() method, before returning the $form, you can modify the form with many methods of the Form class. You can easily fine-tune your forms dynamically before they are rendered.

Step 4: Layout File - Rendering Form

tmpl/planet/edit.php

After you get the form in the view file ($this->form), the form is rendered in the layout file (edit.php).

use Joomla\CMS\HTML\HTMLHelper;

$wa = $this->document->getWebAssetManager();

$wa->useScript('keepalive');
$wa->useScript('form.validate');
?>
<form action="<?php echo JRoute::_('index.php?option=com_planets&layout=edit&id=' . (int) $this->item->id); ?>" 
  method="post" name="adminForm" id="item-form" class="form-validate">

    <?php echo $this->form->renderField('title'); ?>
    
    <input type="hidden" name="task" value="planet.edit" />
    <?php echo HTMLHelper::_('form.token'); ?>
</form>

The form validate script is required to submit the form. The renderField() method of the Form class displays the field - both label and input.

You can access the from using following Url:

administrator/index.php?option=com_stars&view=planet&layout=edit

It displays edit.php layout file of the Planet View. When the form is submitted, the data is sent to the controller depending upon the action buttons in the toolbar.