How to add a New View to your Joomla 3 Component

This tutorial series, Joomla 3 component development, is currently in progress…

In our last tutorial, we showed you how to create the default view for the component that we are creating. The component’s name is com_helloworld, so the default view is helloworld – this is just how the “default view” works.

In this tutorial, we are going to show you how to add a new view. This new view we will call “Howdy Friends”.

To create a new view:

1. Create the view’s folder: /components/helloworld/views/howdyfriendsBecause we are referring to this new view as “Howdy Friends”, we will name this view howdyfriends.
2. Create the HTML version of the view: /components/helloworld/views/howdyfriends/view.html.php

   <?php // No direct access to this file defined('_JEXEC') or die('Restricted access');   // import Joomla view library jimport('joomla.application.component.view');   /**  * HTML View class for the HowdyFriends view  */ class HelloWorldViewHowdyFriends extends JViewLegacy {         // Overwriting JView display method         function display($tpl = null)         {                 // Assign data to the view                 $this->msg = 'Howdy Friends, welcome to component development!';                   // Display the view                 parent::display($tpl);         } }

3. Create the “templates” folder: /components/helloworld/views/howdyfriends/tmpl
4. Create the default template file: /components/helloworld/views/howdyfriends/tmpl/default.php

   <?php // No direct access to this file defined('_JEXEC') or die('Restricted access'); ?> <h1><?php echo $this->msg; ?></h1>

How to test your new view

Now that the hard part is over, let’s test our view! It can be accessed using the following url:

https://example.com/index.php?option=com_helloworld&view=howdyfriends

The URL above was created by defining the component we want to run – com_helloworld, and the component’s view we want to run – howdyfriends.

If you’re following along with our tutorial, when testing your new view, it should look similar to the image to the right: