In this tutorial I will learn you how to create new building blocks and how to add the blocks to the menu so that you can quickly drag and drop the blocks in the webpage.
In this tutorial I will create a new building block named “References with title” which will show four icons and a title above it:
1. Adding the dependency
Before you can start creating a new building block you will need to create a new module and configure the manifest.py correctly. Open up your manifest.py and add the website as a dependency:
|
1 2 |
# The website module has to be installed and is needed to add a building block depends': ['website'], |
Without this dependency you cannot create and add new building blocks to the Odoo website.
2. Creating a new XML file
Now create a new XML file named “snippets.xml” under the “views” folder:
In this file we will add all the code to create the building block (snippet) and to make it visible in the editor.
2.1 Creating the building blocks
First we will need to create the building block itself. Let us create a building block that has a title (h3) saying “Our references” with four logo’s under the title. Have a look at this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!-- This record will create the building block and its layout --> <template id="s_title_references" name="References with title"> <section class="s_references bg-gray-lighter"> <div class="container"> <div class="row"> <h3> <center>Our references</center> </h3> </div> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_1" class="img img-responsive " alt="Demo Logo 1"/> </div> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_2" class="img img-responsive " alt="Demo Logo 2"/> </div> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_3" class="img img-responsive " alt="Demo Logo 3"/> </div> <div class="col-md-3 col-sm-3 col-xs-6 mt16 mb16"> <img src="/web/image/website.s_reference_demo_image_4" class="img img-responsive " alt="Demo Logo 4"/> </div> <!-- You can use your own image by calling your own module and then the path to the image <div class="col-md-2 col-sm-3 col-xs-6 mt16 mb16"> <img src="/website_snippet_demo/static/src/image/website.s_reference_demo_image_6" class="img img-responsive " alt="Demo Logo 6"/> </div> --> </div> </div> </section> </template> |
So, what does this tell us? We first create a new XML record. After doing this we add all our code within a section block and inside this we create a container div. Within this section and container you can basically code anything you like, this is the framework for any building block. Generally when you create a building block you try to use as much bootstrap classes as possible. In the above example I simply made two rows. One row for the title and one row for the images. Those images are all the same width thanks to the default bootstrap classes col-md, col-sm and col-xs-6.
You’re already well over halfway to your own building block! If you would install this module right now all the code would be there that is needed for a building block, but we still have to show it in the editor so that we can use it.
2.2 Adding the building block to the editor
Let us continue and add a building block preview to the editor so you can quickly find it from the editor.
You can do this by inheriting the default “website.snippets” record and doing an xpath in the “snippet_structure” id, which holds the main structure of the editor. Have a look at this code:
|
1 2 3 4 5 6 7 8 9 |
<!-- This record will create a preview of the building block in the left menu from where you choose the blocks --> <template id="add_title_references_to_bar" inherit_id="website.snippets" name="Place into building blocks bar"> <xpath expr="//div[@id='snippet_structure']" position="inside"> <div class="o_panel_body"> <t t-snippet="website_snippet_demo.s_title_references" t-thumbnail="/website/static/src/img/blocks/block_references.png"/> </div> </xpath> </template> |
Let me explain the code a bit further. We first inherit the default ‘website.snippets’ record, which holds the link to all available snippets. By doing an xpath on ‘snippet_structure’ we’re telling Odoo to add our building block preview within the editor. In this xpath element we add a div and we use the t-snippet element made by Odoo. By doing so Odoo knows we want to add a snippet preview to the editor.
Finally save this file and add it in the manifest.py file so that it is loaded:
|
1 2 3 4 5 |
# always loaded 'data': [ # Load the snippets (building block code) when installing 'views/snippets.xml', ] |
When you now install the module you will see your new building block is available for use from the editor:
That is all. You’ve just made your own building block, congratulations!
3. Conclusion
Thanks to the Odoo framework it is very easy to create and use new building blocks. The functionality is so flexible and easy to use that you can create a building block for about anything. Creating and reusing building blocks in Odoo is one of the biggest strengths of the Odoo website editor.
Do you want to try the demo code and see the source code of this tutorial? You can view it on my Github account.
Has this tutorial helped you, do you have any feedback or questions? Post away!
