Adding layout to Magento 2 Module


Magento2 page layout is based on container. Every container is can have multiple blocks inside it.Each block is connected with their block object (ViewModel Object) that behaves like source for block phtml file.
How does Magento page layout arranged in Magento 2:


Next segment of our blog is “How to add new block under any container”. This goal will be achieved by change in 4 parts.
Part 1: Modify controller and inject pageObject into it.
Part 2: Create frontend layout
Part 3: Create Block file as data provider
Part 4: Create Block template file for block UI

Now we will see the detail of each part.
Part 1: Modify controller and inject pageObject into it:-

Now the code of controller like as below:

namespace Cutehits\First\Controller\Index;

use Magento\Framework\App\Action\Context;

class Index extends \Magento\Framework\App\Action\Action
    protected $_resultPageFactory;

    public function __construct(Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory)
        $this->_resultPageFactory = $resultPageFactory;

    public function execute()
        $resultPage = $this->_resultPageFactory->create();
       return $resultPage;

Code Analysis part1
The first two changes to the controller file are
use Magento\Framework\View\Result\PageFactory;
use Magento\Framework\App\Action\Context;
These lines aren’t strictly needed, but they will allow us to use the short class name PageFactory and Context for these two classes below.

use Magento\Framework\App\Action\Context; :- consuming the namespace, If you’re not familiar with PHP namespace, our short primer is a great place to start.

Now created a class named Index and created a protected variable $_resultPageFactory so that we can consume it in any child class.

now constructor comes with 2 arguments (see automatic constructor dependency injection in action dependency injection). we create our PageFactory object, and assign it to our new pageFactory property. Here we use the PageFactory object to create a page object, and then return that page

Part 2: Create frontend layout

Code to create frontend layout

<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd" layout="1column">
        <referenceContainer name="content">
            <block class="Cutehits\First\Block\First" name="helloworld" template="helloworld.phtml" />

Code Analysis part2

Only the important part is

<referenceContainer name="content">
	<block class="Cutehits\First\Block\First" name="helloworld" template="helloworld.phtml" />

Rest is boilerplate code.

These layout file is required to create Page Layout System. There are certain handles that gets called at the time of loading the page which further tells that
which all layout templates to be added to the page.

It contain 3 important parts
*. class – it contain class namespace
*. name – that is used to called the block
*.template – phtml file path (A block’s file path, like all PHP classes in Magento, is determined by the rules of the PSR-0 autoloader.)

Part 3: Create Block file as data provider
Magento 2 page layout is a collection of nested containers and blocks. For each block we need to create a PHP class that will contain the function which provide data to phtml file.
#File: Cutehits\First\Block\First.php

namespace Cutehits\First\Block;

class First extends \Magento\Framework\View\Element\Template
    public function getHelloWorldTxt()
        return 'Hello world!';

Code Analysis part 3:
Basically Magento block class is only responsible for rendering an HTML string that’s a portion of the entire HTML page. The base block class Cutehits\First\Block\First extends Magento\Framework\View\Element\Template, which is Magento’s base template class. When a block extends from this class, it will render the HTML contents in its template property. We set this template property (helloworld.phtml) in the full action name layout handle XML file.
Part 4: Create Block template file for block UI
Template file actually contain the UI code . see the content of helloworld.phtml

<h1><?php echo $this->getHelloWorldTxt(); ?></h1>

You are done now just open the url, You will see a message “Hello World” there under h1 tag.

Related posts:

The following two tabs change content below.

Chandra Shekhar

Consultant at Infogain
Chandra Shekhar is a LAMP Developer,Thinker,Blogger and currently working as Magento(Ecommerce) specialist.. I am always open to learn new things in LAMP as well as other newer technology. In the journey of my last 9 years of web and product development, I have decided to share my knowledge and experience to Open Source Community in 2011. In this regard I have started Since then I am actively sharing my knowledge on various LAMP technology through’s technical ... Read More about Chandra Shekhar