Joomla 4.x Tutorial - Extension Development - Dashboard

Modify this post

Extensive Joomla Core extensions have a dashboard in which related functions are displayed. This is user-friendly because it provides an overview. This way, a user can orientate himself in the extension without many clicks. In this part, we create such a dashboard for our sample component.

For impatient people: View the changed program code in the Diff Viewgithub.com/astridx/boilerplate/compare/t27...t28 and copy these changes into your development version.

Step by step

New files

administrator/components/ com_foos/ presets/foos.xml

In the file administrator/components/com_foos/presets/foos.xml we define what is displayed on the dashboard by default.

administrator/components/com_foos/ presets/foos.xml

<!-- https://raw.githubusercontent.com/astridx/boilerplate/t28/src/administrator/components/com_foos/presets/foos.xml -->

<?xml version="1.0"?>
<menu
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="urn:joomla.org"
	xsi:schemaLocation="urn:joomla.org menu.xsd"
	>
	<menuitem
		title="COM_FOOS"
		type="heading"
		icon="comment"
		class="class:comment"
		>
		<menuitem
			title="COM_FOOS"
			type="component"
			element="com_foos"
			link="index.php?option=com_foos"
			quicktask="index.php?option=com_foos&amp;view=foo&amp;layout=edit"
			quicktask-title="COM_FOOS"
		/>

		<menuitem
			title="JCATEGORY"
			type="component"
			element="com_foos"
			link="index.php?option=com_categories&amp;extension=com_foos"
			quicktask="index.php?option=com_categories&amp;view=category&amp;layout=edit&amp;extension=com_foos"
			quicktask-title="JCATEGORY"
		/>
	</menuitem>
</menu>

Modified files

administrator/components/ com_foos/ foos.xml

We modify the XML manifest so that the sidebar in the Joomla administration template knows how to link to the dashboard.

administrator/components/com_foos/ foos.xml

     </media>
 	<!-- Back-end files -->
 	<administration>
		<!-- Menu entries -->
		<menu view="foos">COM_FOOS</menu>
		<menu img="class:comment">
			COM_FOOS
			<params>
				<dashboard>foos</dashboard>
			</params>
		</menu>
 		<submenu>
			<menu link="option=com_foos">
				COM_FOOS
				<params>
					<menu-quicktask-title>COM_FOOS</menu-quicktask-title>
					<menu-quicktask>index.php?option=com_foos&amp;view=foo&amp;layout=edit</menu-quicktask>
				</params>
			</menu>
 			<menu link="option=com_foos">COM_FOOS</menu>
			<menu link="option=com_categories&amp;extension=com_foos">JCATEGORY</menu>
			<menu link="option=com_categories&amp;extension=com_foos">
				JCATEGORY
				<params>
					<menu-quicktask-title>JCATEGORY</menu-quicktask-title>
					<menu-quicktask>index.php?option=com_categories&amp;view=category&amp;layout=edit&amp;extension=com_foos</menu-quicktask>
				</params>
			</menu>
 			<menu link="option=com_fields&amp;context=com_foos.foo">JGLOBAL_FIELDS</menu>
 			<menu link="option=com_fields&amp;view=groups&amp;context=com_foos.foo">JGLOBAL_FIELD_GROUPS</menu>
 		</submenu>

administrator/components/ com_foos/ script.php

In the installation script we add the call. With this, we call a Joomla-specific function that makes our dashboard known in the CMS.

administrator/components/com_foos/ script.php

 use Joomla\CMS\Language\Text;
 use Joomla\CMS\Log\Log;
 use Joomla\CMS\Table\Table;
use Joomla\CMS\Installer\InstallerScript;

 /**
  * Script file of Foo Component
  *
  * @since  __BUMP_VERSION__
  */
class Com_FoosInstallerScript
class Com_FoosInstallerScript extends InstallerScript
 {
 	/**
 	 * Minimum Joomla version to check
 public function install($parent): bool
 			return false;
 		}

		$this->addDashboardMenu('foos', 'foos');

 		return true;
 	}

 public function update($parent): bool
 	{
 		echo Text::_('COM_FOOS_INSTALLERSCRIPT_UPDATE');

		$this->addDashboardMenu('foo', 'foo');

 		return true;
 	}

Test your Joomla component

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

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

Install your component as described in part one, after copying all files. Joomla will update the namespaces for you during the installation. Since a new file has been added, this is necessary. 2.

  1. use the dashboard in the backend.

The Joomla Dashboard in a separate component

Links

Allow 3rd party components to create the dashboardhttps://github.com/joomla/joomla-cms/pull/28027

Modify this post

Comments