Joomla 4.x Tutorial - Extension Development - Integrate Custom Fields in Frontend

Modify this post

Very few use custom fields in the administration area alone. As a rule, output is required in the frontend. We will address this question in the current part of the article series. How and where are user-defined fields in Joomla output in the frontend?

Joomla Custom Fields in eine eigene Komponente integrieren

For impatient people

View the changed program code in the Diff Viewgithub.com/astridx/boilerplate/compare/t14a...t14b and incorporate these changes into your development version.

Step by step

In the following overview, the newly added files are marked with a background and the changed ones are outlined.

Overview of the files edited in this chapter

New files

No new files are added in this chapter.

Modified files

components/com_foos/ src/View/Foo/HtmlView.php

Custom Fields display data in the frontend using events. The custom fields are displayed in three different places on the website. By default, the data is displayed before the content. This setting can be changed. Therefore we save the results of onContentAfterTitle, onContentBeforeDisplay and onContentAfterDisplay. We do this in the View.

Specifically, we make sure that the events

components/com_foos/ src/View/Foo/HtmlView.php

 \defined('_JEXEC') or die;

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

 /**
  * HTML Foos View class for the Foo component

 	 */
 	public function display($tpl = null)
 	{
		$this->item = $this->get('Item');
		$item = $this->item = $this->get('Item');

		Factory::getApplication()->triggerEvent('onContentPrepare', array ('com_foos.foo', &$item));

		// Store the events for later
		$item->event = new \stdClass;
		$results = Factory::getApplication()->triggerEvent('onContentAfterTitle', array('com_foos.foo', &$item, &$item->params));
		$item->event->afterDisplayTitle = trim(implode("\n", $results));

		$results = Factory::getApplication()->triggerEvent('onContentBeforeDisplay', array('com_foos.foo', &$item, &$item->params));
		$item->event->beforeDisplayContent = trim(implode("\n", $results));

		$results = Factory::getApplication()->triggerEvent('onContentAfterDisplay', array('com_foos.foo', &$item, &$item->params));
		$item->event->afterDisplayContent = trim(implode("\n", $results));

 		return parent::display($tpl);
 	}

Via onContentAfterTitle, onContentBeforeDisplay, onContentAfterDisplay in addition to the user-defined fields, other elements are output that are assigned to the respective event.

components/com_foos/ tmpl/foo/default.php

In the template we output the user-defined fields. In our case, this is not extensive, so we write all the stored texts one after the other. In a more complex file we insert the statement in the appropriate place.

components/com_foos/ tmpl/foo/default.php

 }

 echo $this->item->name;

echo $this->item->event->afterDisplayTitle;
echo $this->item->event->beforeDisplayContent;
echo $this->item->event->afterDisplayContent;

Teste deine Joomla-Komponente

  1. install your component in Joomla version 4 to test it:

Copy the files in the components folder into the components folder of your Joomla 4 installation.

A new installation is not necessary. Continue using the files from the previous part.

  1. open the view of your component in the administration area. Click on the menu item 'Fields' in this new menu.

Integrate Joomla Custom Fields into a custom component

  1. after that create a custom field of type 'text', if you didn't do it in the previous chapter.
  2. edit a published foo item. Make sure you add a value to the custom field.

Integrate Joomla Custom Fields into a custom component

  1. at the end open the detail view of the just edited Foo item. You will see next to the previously existing values now additionally the text you entered in the custom field.

Integrate Joomla Custom Fields into a custom component

Modify this post

Comments