{"id":3243,"date":"2014-05-15T16:50:24","date_gmt":"2014-05-15T16:50:24","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/2014\/05\/15\/add-new-view\/"},"modified":"2023-06-07T14:22:11","modified_gmt":"2023-06-07T18:22:11","slug":"add-new-view","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/","title":{"rendered":"How to add a New View to your Joomla 3 Component"},"content":{"rendered":"<p class=\"alert alert-danger\">This tutorial series, <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/joomla-search-component\/\">Joomla 3 component development<\/a>, is currently in progress\u2026<\/p>\n<p>In our last tutorial, we showed you <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\">how to create the default view<\/a> for the component that we are creating. The component\u2019s name is com_<span style=\"color: red;\">helloworld<\/span>, so the default view is <span style=\"color: red;\">helloworld<\/span> \u2013 this is just how the \u201cdefault view\u201d works.<\/p>\n<p>In this tutorial, we are going to show you how to add a new view. This new view we will call \u201cHowdy Friends\u201d.<\/p>\n<h2>To create a new view:<\/h2>\n<ol class=\"article_list\">\n<li><strong>Create the view\u2019s folder:<\/strong> \/components\/helloworld\/views\/<span style=\"color: red;\"><strong>h<\/strong>owdy<strong>f<\/strong>riends<\/span>Because we are referring to this new view as <span style=\"color: red;\">\u201cHowdy Friends\u201d<\/span>, we will name this view <span style=\"color: red;\"><strong>h<\/strong>owdy<strong>f<\/strong>riends<\/span>.<\/li>\n<li><strong>Create the HTML version of the view:<\/strong> \/components\/helloworld\/views\/howdyfriends\/<span style=\"color: red;\">view.html.php<\/span>\n<pre class=\"code_block\">&lt;?php \/\/ No direct access to this file defined('_JEXEC') or die('Restricted access');   \/\/ import Joomla view library <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/jimport\/\">jimport<\/a>('joomla.application.component.view');   \/**  * HTML View class for the HowdyFriends view  *\/ class <span style=\"color: orange;\">HelloWorld<\/span>View<span style=\"color: red;\">HowdyFriends<\/span> extends JViewLegacy {         \/\/ Overwriting JView display method         function display($tpl = null)         {                 \/\/ Assign data to the view                 $this-&gt;msg = 'Howdy Friends, welcome to component development!';                   \/\/ Display the view                 parent::display($tpl);         } }<\/pre>\n<\/li>\n<li><strong>Create the \u201ctemplates\u201d folder:<\/strong> \/components\/helloworld\/views\/howdyfriends\/<span style=\"color: red;\">tmpl<\/span><\/li>\n<li><strong>Create the default template file:<\/strong> \/components\/helloworld\/views\/howdyfriends\/tmpl\/<span style=\"color: red;\">default.php<\/span>\n<pre class=\"code_block\">&lt;?php \/\/ No direct access to this file defined('_JEXEC') or die('Restricted access'); ?&gt; &lt;h1&gt;&lt;?php echo $this-&gt;msg; ?&gt;&lt;\/h1&gt;<\/pre>\n<\/li>\n<\/ol>\n<h2>How to test your new view<\/h2>\n<p>Now that the hard part is over, let\u2019s test our view! It can be accessed using the following url:<\/p>\n<p class=\"white_box\">https:\/\/example.com\/index.php?option=com_helloworld&amp;view=<span style=\"color: red;\">howdyfriends<\/span><\/p>\n<p><a href=\"\/support\/images\/stories\/edu\/joomla-3\/create-component\/howdyfriends-view.png\" rel=\"lightbox-0\"><img decoding=\"async\" class=\"std_ss\" style=\"float: right; margin: 0px 0px 15px 15px;\" src=\"\/support\/images\/stories\/edu\/joomla-3\/create-component\/howdyfriends-view.png\" alt=\"add a New View in Joomla 3\"><\/a><\/p>\n<div style=\"clear: both;\"><\/div>\n<p>The URL above was created by defining the component we want to run \u2013 <em>com_helloworld<\/em>, and the component\u2019s view we want to run \u2013 <span style=\"color: red;\">howdyfriends<\/span>.<\/p>\n<p>If you\u2019re following along with our tutorial, when testing your new view, it should look similar to the image to the right:<\/p>\n<div style=\"clear: both;\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial series, Joomla 3 component development, is currently in progress\u2026 In our last tutorial, we showed you how to create the default view for the component that we are creating. The component\u2019s name is com_helloworld, so the default view is helloworld \u2013 this is just how the \u201cdefault view\u201d works. In this tutorial, we<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\"> Read More ><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4403,94],"tags":[4404],"class_list":["post-3243","post","type-post","status-publish","format-standard","hentry","category-joomla","category-joomla-3","tag-joomla-v3"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to add a New View to your Joomla 3 Component | InMotion Hosting<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to add a New View to your Joomla 3 Component | InMotion Hosting\" \/>\n<meta property=\"og:description\" content=\"This tutorial series, Joomla 3 component development, is currently in progress\u2026 In our last tutorial, we showed you how to create the default view for the component that we are creating. The component\u2019s name is com_helloworld, so the default view is helloworld \u2013 this is just how the \u201cdefault view\u201d works. In this tutorial, we Read More &gt;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-15T16:50:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-07T18:22:11+00:00\" \/>\n<meta name=\"author\" content=\"Brad Markle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brad Markle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\"},\"author\":{\"name\":\"Brad Markle\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\"},\"headline\":\"How to add a New View to your Joomla 3 Component\",\"datePublished\":\"2014-05-15T16:50:24+00:00\",\"dateModified\":\"2023-06-07T18:22:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\"},\"wordCount\":237,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"keywords\":[\"Joomla v3\"],\"articleSection\":[\"Joomla\",\"Joomla 3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\",\"name\":\"How to add a New View to your Joomla 3 Component | InMotion Hosting\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"datePublished\":\"2014-05-15T16:50:24+00:00\",\"dateModified\":\"2023-06-07T18:22:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a New View to your Joomla 3 Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf\",\"name\":\"Brad Markle\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add a New View to your Joomla 3 Component | InMotion Hosting","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/","og_locale":"en_US","og_type":"article","og_title":"How to add a New View to your Joomla 3 Component | InMotion Hosting","og_description":"This tutorial series, Joomla 3 component development, is currently in progress\u2026 In our last tutorial, we showed you how to create the default view for the component that we are creating. The component\u2019s name is com_helloworld, so the default view is helloworld \u2013 this is just how the \u201cdefault view\u201d works. In this tutorial, we Read More >","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2014-05-15T16:50:24+00:00","article_modified_time":"2023-06-07T18:22:11+00:00","author":"Brad Markle","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Brad Markle","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/"},"author":{"name":"Brad Markle","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf"},"headline":"How to add a New View to your Joomla 3 Component","datePublished":"2014-05-15T16:50:24+00:00","dateModified":"2023-06-07T18:22:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/"},"wordCount":237,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"keywords":["Joomla v3"],"articleSection":["Joomla","Joomla 3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/","name":"How to add a New View to your Joomla 3 Component | InMotion Hosting","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"datePublished":"2014-05-15T16:50:24+00:00","dateModified":"2023-06-07T18:22:11+00:00","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-3\/add-new-view\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to add a New View to your Joomla 3 Component"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/5ae05d1210b0ef63c437ccedce2799bf","name":"Brad Markle","url":"https:\/\/www.inmotionhosting.com\/support\/author\/bradm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":null,"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=3243"}],"version-history":[{"count":5,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3243\/revisions"}],"predecessor-version":[{"id":104829,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/3243\/revisions\/104829"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=3243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=3243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=3243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}