Skip to main content
Version: 5.1

Example Form Component

This is an example component which you can download from com_exampleform.

Once you have downloaded the source, zip up the com_exampleform directory and install the component.

Then go to <your domain>/index.php/component/exampleform to run it on your Joomla instance.

It is an MVC component which demonstrates the following:

You can easily adapt it to experiment with other standard fields, simply by including the standard field in the form XML file.

There are comments throughout the code to help you understand it, and brief summaries of the main source files are provided below.

admin/services/provider.php​

This is boilerplate code for a basic MVC component. For components this file is placed under /administrator in the Joomla filesystem. If you want to understand it fully then read the Dependency Injection section.

From this file Joomla instantiates default Extension and Dispatcher classes, and an MVC Factory class which creates Model, View and Controller classes for our component.

Display Controller (site/src/Controller/DisplayController.php)​

This is what is run when you go to your site page which displays the form (ie navigate to the URL .../index.php/component/exampleform).

It gets the associated Model and View classes, and calls display() on the View instance.

Exampleform View (site/src/View/Exampleform/HtmlView.php)​

This calls the model to set up the form, then calls display() to run the tmpl file.

Exampleform Model (site/src/Model/ExampleformModel.php)​

This sets up the form as described in Forms.

Exampleform tmpl file (site/tmpl/exampleform/default.php)​

This uses the Web Asset Manager to set up the scripts for client-side validation.

Then it outputs the <form> html, and outputs the fields using renderFieldset.

The Submit button has an onclick listener which calls Joomla.submitbutton('exampleform.submit'). This function will initiate an HTTP POST to the server, with the field values as POST parameters, including the task parameter set to 'exampleform.submit'.

When the HTTP request reaches the server Joomla will examine the task parameter, and as a result will call the ExampleformController::submit() method, as described in Joomla MVC.

Example XML Form (site/forms/example_form.xml)​

Most of this involves simply using the Joomla Standard Form Fields.

You can easily add in other standard form fields to experiment with them.

In addition, the file includes:

Definition of a custom field:

addfieldprefix="My\Component\Exampleform\Site\Field"
name="time" 
type="mytime"

Definition of a custom filter:

addfilterprefix="My\Component\Exampleform\Site\Filter"
filter="lettersonly"

Definition of a custom client-side validation rule:

class="inputbox validate-noUppercase"
data-validation-text="Error: No uppercase letters are allowed"

Definition of a custom server-side validation rule:

addruleprefix="My\Component\Exampleform\Site\Rule"
validate="noasterisk"

Use of the showon attribute.

Exampleform Controller (site/src/Controller/ExampleformController.php)​

When the form data is sent to the server in an HTTP POST request, Joomla examines the task parameter, and as this will be set to 'exampleform.submit' Joomla will call the submit function of the ExampleformController class instance.

This function obtains the array of POST parameters and gets the model to set up the form again from the definition in example_form.xml.

It then initiates applying the filtering and validation rules of the fields.

If the data fails validation then the data entries are stored in the session, and a redirect back to the form is issued. When the HTTP GET request to redisplay the form is received then the loadFormData function in the ExampleformModel will retrieve the session data and prefill the fields with the previous entries.

If the data passes validation then the ExampleformReturn view is instantiated, and the raw data and filtered data passed to it.

ExampleformReturn View (site/src/View/ExampleformReturn/HtmlView.php)​

This simply has a function to accept the data from the Controller, which it stores locally.

ExampleformReturn tmpl file (site/tmpl/exampleformReturn/default.php)​

This simply outputs the raw and filtered data which was passed to the view.

Remember that the view and the tmpl file share the same function context, so variables set up in the view are accessible in the tmpl file.

site/src/Field/MytimeField.php​

This is the source code for the mytime custom field.

site/src/Filter/LettersonlyFilter.php​

This is the source code for the lettersonly custom filter.

site/src/Rule/Noasterisk.php​

This is the source code for the noasterisk custom server-side validation rule.

media/joomla.asset.json​

This defines the component's javascript (and CSS) assets, together with their dependancies, as required by the Web Asset Manager.

For components this file is always automatically processed by Joomla.

media/js/no-uppercase.js​

This is javascript code for the custom client-side validation rule.