---
title: "How to add a New View to your Joomla 3 Component"
description: "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..."
url: https://www.inmotionhosting.com/support/edu/joomla/joomla-3/add-new-view/
date: 2014-05-15
modified: 2023-06-07
author: "Brad Markle"
categories: ["Joomla", "Joomla 3"]
tags: ["Joomla v3"]
type: post
lang: en
---

# How to add a New View to your Joomla 3 Component

This tutorial series, [Joomla 3 component development](https://www.inmotionhosting.com/support/edu/joomla/joomla-3/joomla-search-component/), is currently in progress…

In our last tutorial, we showed you [how to create the default view](https://www.inmotionhosting.com/support/edu/joomla/joomla-3/add-new-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/**h**owdy**f**riendsBecause we are referring to this new view as “Howdy Friends”, we will name this view **h**owdy**f**riends.
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](https://www.inmotionhosting.com/support/edu/joomla/joomla-3/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

[![add a New View in Joomla 3](/support/images/stories/edu/joomla-3/create-component/howdyfriends-view.png)](/support/images/stories/edu/joomla-3/create-component/howdyfriends-view.png)

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: