Joomla 5 Component Development Notes

Joomla 6 Developer Documentation

Joomla Developers Manual: http://pr-240.manual.joomlacode.org/docs/

Classes: https://api.joomla.org/cms-5/classes

Quick notes for Joomla 6 Component Developers

(Joomla Modules have a simpler structure and is not covered here).

Model: Place for Functions and Database Calls. populateState, getItem, getTable,

View: builds the display. Calls a function database to populate the data. Sets the page name, metadata, breadcrumbs, all the other standard bits.

Controller: Where the edit, remove, checkin, publish functions live. Like a toolbar.

Helper: Component specific functions Service: Where the Router.php file lives. The Router builds the component URL.

Calling a component page:

index.php?option=com_organic_shop&view=buyproduct&id='.(int) $item->id . '&catid=' . (int) $item->product_category_id);?>" 

Joomla Form calling to self...

<form action="<?php echo htmlspecialchars(Uri::getInstance()->toString()); ?>" method="post" name="adminForm" id="adminForm">

 This line (in above) means to get the current URL complete with filename of the current script...

Uri::getInstance()->toString());

To call a component page and execute a task (a function stored in the controller file)... in this case run the paypalReturn function. Note the "view.task". 

index.php?option=com_organic_shop&view=checkout$task=checkout.paypalReturn

Getting a Component Config Parameter

Parameters are defined in administrator/components/my_com/config.xml

Getting from within the component

$app = Factory::getApplication();
$params = $app->getParams();
$param = $params->get('paypal_api');

From within another component:

$content_params = ComponentHelper::getParams( 'com_content' );
$show_date = $content_params->get( 'paypal_api' ); 

Getting Page Inputs

Basic page input from GET or POST

use Joomla\CMS\Factory;
$input = Factory::getApplication()->getInput();
$name = $input->getInput('name',"Joe","STRING")

 Filter types:

• INT
• UNIT
• FLOAT
• BOOL
• WORD
• ALNUM
• CMD
• BASE64
• STRING
• HTML
• ARRAY
• RAW
• USERNAME

Example... getting all page inputs, without knowing their names... and processing them...

use Joomla\CMS\Factory;
$input = Factory::getApplication()->getInput();
$post = $input->post->getArray();
//echo "<pre>Input:".print_r($post,1)."</pre>";   // DEBUG	

foreach ($post as $key=>$value){								
	if (str_contains($key, "needle_")) {  // Looks for something in the input
                // Do Something here

		}
	}
}

More info on getting other inputs...

http://pr-240.manual.joomlacode.org/docs/general-concepts/input 

Changing the Joomla 6 Component List View Order

 To change the list order, the best place is to change the ListModel for that view.

administrator/components/com_yourcomponent/src/Model/YourItemsModel.php

Change the function populateState.

Replace the Model with the following... (Content Creator creates excess rubbish code that conflicts).

 protected function populateState($ordering = 'a.id', $direction = 'DESC')
 {
    parent::populateState($ordering, $direction);
    $app = Factory::getApplication();
    $this->setState(
          'filter.search',
          $this->getUserStateFromRequest($this->context . '.filter.search', 'filter_search')
    );
 }

Note: /forms/filter_view.xml will only change what is available in the Filter drop down.  It will not set the default view list order.

Joomla J6 Constants

Visit https://docs.joomla.org/Constants

These return paths (some of these will be depreciated in Joomla 6...)

These return URLS...

use \Joomla\CMS\Uri\Uri;
echo  Uri::getInstance()->toString();  //returns https://organicdemo.com.au/index.php?option=com_organic_shop&view=checkout
echo  Uri::base();                     //returns https://organicdemo.com.au/
echo  Uri::root();                     //returns https://organicdemo.com.au/
echo  Uri::current();                  //returns https://organicdemo.com.au/index.php

 More info on using URLs in Joomla here: https://docs.joomla.org/URLs_in_Joomla

 More info on Uri class... https://api.joomla.org/cms-5/classes/Joomla-CMS-Uri-Uri.html

Getting Site Name (or other site config settings)

use Joomla\CMS\Factory;
$app = Factory::getApplication();
$sitename = $app->get('sitename');

Calling Component Style Sheets

We do this now through WebAssetManager. In the component tmpl page... add this

// Import CSS
$wa = $this->document->getWebAssetManager();
$wa->useStyle('com_organic_shop.style');

You will also need to add your stylesheet asset in the json file of your component. (Not the template json). When a component is installed, it is located in the media folder... media/com_mycomponent/joomla.asset.json

 {
 "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
 "name": "com_organic_shop",
 "version": "CVS: 5.0.1",
 "license": "GNU General Public License version 2 or later; see LICENSE.txt",
 "assets": [
     {
      "name": "com_organic_shop.style",
      "type": "style",
      "uri": "com_organic_shop/organicshop.css"
     }
]
}

Using Bootstrap in Joomla Components

See https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4

Your Joomla template may not load up all the Bootstrap JS and CSS. This is to save bandwidth and speed up pages.

The Bootstrap bundled with Joomla 6 can be found here... media/vendor/bootstrap

You call in modular parts of Bootstrap JS that you need. In components/com_mycomponent/tmpl/mypage/default.php file, use one of these...

HTMLHelper::_('bootstrap.alert');
HTMLHelper::_('bootstrap.button');
HTMLHelper::_('bootstrap.carousel');
HTMLHelper::_('bootstrap.collapse');
HTMLHelper::_('bootstrap.dom');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.modal');
HTMLHelper::_('bootstrap.dropdown');
HTMLHelper::_('bootstrap.offcanvas');
HTMLHelper::_('bootstrap.popover');
HTMLHelper::_('bootstrap.popper');
HTMLHelper::_('bootstrap.scrollspy');
HTMLHelper::_('bootstrap.tab');
HTMLHelper::_('bootstrap.toast'); 

 You will have needed to call the bootstrap.css - normally done in your template. But if not, you may need to include this...

$wa  = $this->getWebAssetManager();		
$wa->useAsset('style', 'bootstrap.css');

Sessions

Currently (July 2024) the Joomla Devloper Docs does not adequalty cover sessions cookie use. This is how we use them for Joomla 5...

$session = Factory::getSession();
$cart = $session->get('cart');
if (is_null($cart)) {
 // No cart yet - so make a new Cart
 $cart = array($product_id=>$buy_qty);
}
else {
 // There is a Cart in session - so add items
 $cart[$product_id] = $buy_qty; 
}

//echo "<pre>".print_r($cart,1)."</pre>"; //DEBUG

// Store cart in session
$session->set('cart',$cart);

Making a system message

In the controller file.... 

$this->setMessage("We have a problem", 'warning');
$this->setMessage("Saved OK");

 In the model file...

Factory::getApplication()->enqueueMessage('Sorry - We have a big problem.', 'error');

Modal Confirm then Action

Placed in a tmpl file (and example delete button):

<?php echo HTMLHelper::_(
    'bootstrap.renderModal',
    'deleteModal',
    array(
       'title' => 'Delete item',
       'height' => '50%',
       'width' => '20%',
       'modalWidth' => '50',
       'bodyHeight' => '100',
       'footer' => '<button class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
            <a href="' . Route::_('index.php?option=com_mycomponent&task=myviewform.remove&id=' . $this->item->id, false, 2) .'" class="btn btn-danger">Delete</a>'
    ),
    "Delete item $this->item->id ?"
  ); 
?>

Sample Tasks

Task Function are found in the Controller folder, with a filename like MyviewController.php

Code to call a task in the tmpl file...

Cancel button:

<a class="btn btn-danger"
    href="/<?php echo Route::_('index.php?option=com_mycomponent&task=myviewform.cancel'); ?>"
    title="<?php echo "Cancel";?>">
    <span class="fas fa-times" aria-hidden="true"></span><?php echo "Cancel"; ?>
 </a>

Save:

Route::_('index.php?option=com_mycomponent&task=myviewform.save')

 Delete:

Route::_('index.php?option=com_mycomponent&task=myviewform.remove&id=' . $this->item->id, false, 2) 

Cancel:

Route::_('index.php?option=com_mycomponent&task=myviewform.cancel')

Redirecting to pages

To redirect to an edit page...

// Redirect to the edit screen.
 $this->setRedirect(Route::_('index.php?option=com_mycomponent&view=myviewform&layout=edit', false));

Icons

Font awesome icons... (https://fontawesome.com/icons)

 <span class="fas fa-circle-check" aria-hidden="true"></span>

Bootstrap 5 Icons: (https://icons.getbootstrap.com/)

<i class="bi bi-check-circle"></i>