Creating building blocks in Odoo

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:
New building block result

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:

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:
snippets.xml structure
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:

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:

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:

When you now install the module you will see your new building block is available for use from the editor:
Building block editor example
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!
Tutorial sponsored by Oocademy


PayPal

Leave a Reply