Odoo Website Customization: Menus, Routes & Pages

Welcome to this comprehensive tutorial on Odoo website customization! In this guide, we immediately dive into how to build and customize Odoo menus, manage Odoo routes, and create dynamic pages using XML code. We use practical examples, real code, and detailed explanations. You will learn to add menu items, submenus, and website pages while mastering URLs and routes in Odoo 16. This tutorial explains every step in an active and engaging tone, using transitional phrases to help you follow along.

Table of Contents

Introduction to Odoo Website Customization

Odoo is a powerful business management tool that can also serve as a robust platform for website development. In this tutorial, we focus on Odoo menus, Odoo routes, and Odoo website pages, which are critical components of a customized website. You will put your skills into practice by learning how to add new menu items like “About Us” and create submenus under the main navigation. Moreover, we explain how to master URLs and routes in Odoo 16, ensuring that every change you implement is instantly effective on your live site. By the end of this guide, you will confidently customize your Odoo website without leaving any step behind.

In the sections that follow, we walk you through each process step by step. We explain every code snippet and command in an active, clear language with plenty of transitional words to guide you through the customization journey.

Understanding Odoo Website Menus and Routes

When you customize an Odoo website, you need to know how the menus and routes work. Odoo uses XML files to define website menus, pages, URLs, and how these elements interact with the backend data models. Let’s break down the process.

The Role of XML Files in Menu Customization

Odoo organizes website navigation by storing menu records—and their attributes—in XML files. For example, you can add a menu item by creating a record in the website.menu model. The record specifies attributes like the menu’s name, URL, page reference, parent menu, and sequence order.

Consider this code snippet for adding an About Us menu item:

<odoo>
    <data>
        <record id="menu_aboutus" model="website.menu">
            <field name="name">About us</field>
            <field name="url">/aboutus</field>
            <field name="page_id" ref="od_openacademy_website.aboutus_page"/>
            <field name="parent_id" ref="website.main_menu"/>
            <field name="sequence" type="int">50</field>
        </record>
    </data>
</odoo>

Explanation

The <record> element creates a menu item with an ID of menu_aboutus in the website.menu model.
The <field name="name"> tag sets the visible text as About us.
The <field name="url"> tag defines the route /aboutus; every time a user clicks on this menu item, they are redirected to that URL.
The <field name="page_id" ref="od_openacademy_website.aboutus_page"/> line links the menu to the pre-defined About Us page template.
The <field name="parent_id" ref="website.main_menu"/> tag ensures that the menu appears under the main website navigation.
Lastly, the <field name="sequence" type="int">50</field> sets the order of the menu item relative to others.

This XML code runs in the Odoo backend so that when you update your website, the new menu items appear immediately.

How URLs and Routes Work in Odoo

Odoo uses routes to map URLs entered by users to specific controller actions and page views. When you define a URL like /aboutus, Odoo checks your XML definitions and then renders the associated page. Mastering URLs and routes is vital because it ensures that your menu selections connect seamlessly with the right screens and data.

You must include the URL information both in your menu and page files. The URL routing mechanism makes sure that your website displays the correct content when a user clicks on a menu item. Transitioning smoothly from menu to page, Odoo’s architecture uses record linkage that ties front-end navigation with backend models.

Building Your First Odoo Menu and Page

Now that you understand how menus and routes work, let’s build a simple yet complete website page with a related menu. We will create two essential XML files: one for the About Us menu and one for the About Us page.

Creating the “About Us” Menu

Begin by creating an XML file named menu.xml inside your module’s views/ folder. Use the code below to add the About Us menu:

<odoo>
    <data>
        <record id="menu_aboutus" model="website.menu">
            <field name="name">About us</field>
            <field name="url">/aboutus</field>
            <field name="page_id" ref="od_openacademy_website.aboutus_page"/>
            <field name="parent_id" ref="website.main_menu"/>
            <field name="sequence" type="int">50</field>
        </record>
    </data>
</odoo>

Each tag in the code actively assigns property values that determine the menu’s behavior and appearance. Notice how it directs users to /aboutus when clicked, which is linked to the About Us page.

Creating the “About Us” Page

Next, create the file aboutus_page.xml under the same views/ folder to define your page content:

<odoo>
    <data>
        <template id="about_us_page" name="About Us Page">
            <t t-call="website.layout">
                <div class="container mt-5">
                    <div class="text-center">
                        <h1>About Us</h1>
                        <p>Welcome to <strong>Odoo Discussions</strong>, your go-to channel for learning Odoo!</p>
                    </div>
                    <div class="mt-4">
                        <h2>What We Offer</h2>
                        <ul>
                            <li>Step-by-step guides on Odoo installation and development</li>
                            <li>Comprehensive courses on Odoo customization</li>
                            <li>Expert tips and tricks for developers</li>
                        </ul>
                    </div>
                    <div class="mt-4">
                        <h2>Subscribe to Our YouTube Channel</h2>
                        <p>Visit our YouTube channel: 
                            <a href="https://www.youtube.com/@odoodiscussions" target="_blank">
                                Odoo Discussions
                            </a>
                        </p>
                    </div>
                </div>
            </t>
        </template>

        <record id="aboutus_page" model="website.page">
            <field name="url">/aboutus</field>
            <field name="is_published">True</field>
            <field name="view_id" ref="about_us_page"/>
        </record>
    </data>
</odoo>

Explanation of the “About Us” Page Code

The <template> tag with the ID about_us_page defines the website page layout using Odoo’s default structure via t-call="website.layout".
The container holds content such as a title, a welcome note, and an explanation of what the website offers.
The <record> tag creates a website page linked to the template, making sure its URL is /aboutus and that it is published.

By separating the menu and page definitions, you maintain clean code and a clear structure that is easy to update over time.

Creating Submenus in Odoo Website

In addition to top-level menus, building submenus organizes your website more effectively. For instance, you may want to group related pages under a main category. Consider the following XML code that creates a parent menu “OpenAcademy” with a child menu “Classes”.

XML Code for Parent and Child Menus

<odoo>
    <data>
        <record id="menu_openacademy" model="website.menu">
            <field name="name">OpenAcademy</field>
            <field name="website_id" ref="website.default_website"/>
            <field name="parent_id" search="[('parent_id', '=', False), ('website_id', '=', 1)]"/>
            <field name="sequence" type="int">40</field>
        </record>

        <record id="menu_classes" model="website.menu">
            <field name="name">Classes</field>
            <field name="url">/odoodiscussions/classes</field>
            <field name="parent_id" ref="od_openacademy_website.menu_openacademy"/>
            <field name="website_id" ref="website.default_website"/>
            <field name="sequence" type="int">10</field>
        </record>
    </data>
</odoo>

Key Points in This XML

The OpenAcademy menu acts as the parent by having no parent menu itself and is positioned at the top level.
The Classes menu uses the <field name="parent_id" ref="od_openacademy_website.menu_openacademy"/> tag to specify that it is a child of OpenAcademy.
The sequence settings ensure proper ordering so that OpenAcademy precedes Classes.

Using submenus in this way improves the overall user experience by making navigation intuitive and organized.

Mastering URLs and Routes in Odoo 16

Understanding URLs and routes is essential for effective website customization. Odoo uses URLs to move users between pages, and you control this process by defining routes in your XML configurations.

How Routes Are Defined

When you set the <field name="url">/aboutus</field> in your XML, you instruct Odoo to display the About Us page when this URL is requested. Similarly, for submenus, adding the URL as /odoodiscussions/classes ensures that your custom page shows when a user clicks on Classes.

Dynamic and Static Data

You often need to serve static content as well as dynamic content derived from the backend model. With Odoo, you can integrate both seamlessly. For instance, static content in the About Us page is defined in pure HTML inside the <template> tag. Meanwhile, dynamic data can be passed from backend controllers into your templates.

Furthermore, you can master routes by creating custom controllers in Python and linking them to XML views. This synchronization between XML and Python gives you complete control over your website’s behavior. For more detailed documentation on this subject, please visit the official Odoo Developer Documentation.

Implementation: Step-by-Step Tutorial

This section guides you through the full implementation process for your Odoo website customization. Follow these steps carefully and use the provided code blocks.

Step 1. Prepare Your Module

Create a new directory for your module (if you haven’t already) and set up the basic structure. Your folder might look like this:

odoo-addons/
└── od_openacademy_website/
    ├── __init__.py
    ├── __manifest__.py
    └── views/
         ├── menu.xml
         └── aboutus_page.xml

Step 2. Update the Manifest File

Open your __manifest__.py file and add the following content:

{
    'name': 'OpenAcademy Website',
    'version': '1.0',
    'category': 'Website',
    'summary': 'Odoo Discussions Website Pages and Customization',
    'depends': ['website'],
    'data': [
        'views/menu.xml',
        'views/aboutus_page.xml',
    ],
    'installable': True,
    'application': True,
}

This manifest file tells Odoo about your module dependencies and which XML files to load when your module is installed.

Step 3. Add the XML Files

In your views/ directory, create the files menu.xml and aboutus_page.xml with the content shown above. Make sure to save changes and verify that the file structure is correct.

Step 4. Restart and Update Your Odoo Instance

To see your changes, restart your Odoo service and update the module. Run the following in your terminal:

./odoo-bin -c odoo.conf -u od_openacademy_website

This command reloads your module, and Odoo will automatically parse the XML files. You should now see the new menus on your website once you refresh the page.

Step 5. Verify on the Frontend

After updating your module, access your website and verify that:

The About us menu appears in the main navigation.
Clicking About us takes you to the About Us Page with your content.
The OpenAcademy parent menu and Classes submenu appear and link to the proper URLs.

Every step is active and clear, ensuring that you can troubleshoot any issues quickly. Transitioning between steps is smooth and methodical.

Testing and Verifying Your Customization

It is crucial to test your implementation actively to ensure every element works as intended. Follow these guidelines and use transitional troubleshooting steps:

Step-by-Step Testing

Reload the Website: Always refresh your website page to see the latest updates to the menu and pages.
Inspect the HTML: Use your browser’s inspect tool to verify that the XML elements are being rendered properly.
Check URLs: Click on each menu item and confirm that the URL in your browser’s address bar matches the one you defined.
Review Server Logs: Monitor server logs after restarting Odoo to catch any XML parsing errors or module dependency issues.

If any issues arise, double-check the sequence numbers, parent references, and URL format in your XML code.

Common Pitfalls

Mismatched Record References: Ensure that the referenced IDs in the <field> tags match exactly with those defined elsewhere.
Incorrect Sequence Values: Carefully set the <field name="sequence"> values to maintain proper menu ordering.
XML Syntax Errors: Always validate your XML syntax. A misplaced tag or missing character can cause the module to fail.

By following these tips, you actively prevent common errors and maintain a consistent website customization flow.

Advanced Customization: Mastering URLs and Dynamic Routes

Once you are comfortable with static pages and menus, you can extend your customization to include dynamic content. In this section, we explore how to manage advanced URLs and create custom routes that interact with the backend.

Creating Custom Controllers in Odoo

Custom controllers in Odoo allow you to serve dynamic content. For example, you can create a Python file in your module to manage routes and processes for dynamic pages. Consider the following example:

from odoo import http
from odoo.http import request

class MyCustomController(http.Controller):
    @http.route('/dynamic_page', type='http', auth="public", website=True)
    def dynamic_page(self, **kw):
        # Actively process data from the backend model
        record_data = request.env['some.model'].sudo().search([], limit=10)
        return request.render('od_openacademy_website.dynamic_template', {
            'records': record_data
        })

Explanation

The @http.route('/dynamic_page', ...) decorator creates an active URL endpoint.
The controller fetches records from a backend model (for example, some.model).
The request.render method actively renders a view template with the fetched data.
This setup enables dynamic pages. You actively mix static content with dynamic data.

Creating a Dynamic View Template

Now, create an XML template to render the dynamic page. Save the following code as dynamic_template.xml inside the views/ folder:

<odoo>
    <data>
        <template id="dynamic_template" name="Dynamic Page Template">
            <t t-call="website.layout">
                <div class="container mt-5">
                    <h1>Dynamic Content</h1>
                    <p>Here are the latest records:</p>
                    <ul>
                        <t t-foreach="records" t-as="record">
                            <li t-esc="record.name"/>
                        </t>
                    </ul>
                </div>
            </t>
        </template>
    </data>
</odoo>

In this template, you actively loop through each record from the backend and display its name. This structure shows how URLs and routes in Odoo can work dynamically.

Integrating Dynamic Routes into Your Module

To integrate the dynamic route, update your __manifest__.py to include the dynamic template:

{
    'name': 'OpenAcademy Website',
    'version': '1.0',
    'category': 'Website',
    'summary': 'Odoo Discussions Website Pages and Customization',
    'depends': ['website'],
    'data': [
        'views/menu.xml',
        'views/aboutus_page.xml',
        'views/dynamic_template.xml',
    ],
    'installable': True,
    'application': True,
}

After updating, restart your Odoo service and test the new dynamic page by navigating to /dynamic_page.

Best Practices for Odoo Website Customization

As you work through the customization process, here are some best practices to keep your work efficient and maintainable:

Code Modularity and Readability

Keep XML Files Neat: Separate your menus, pages, and templates into different XML files. This modular approach allows you to locate and modify codes easily.
Use Consistent Naming Conventions: Use meaningful IDs in your XML records (for example, menu_aboutus, about_us_page) to actively distinguish components.
Validate XML Syntax: Use XML validators to quickly catch syntax errors, which saves you troubleshooting time.

Leveraging Version Control

Integrate Git: Actively use version control systems like Git to track changes in your module. For instance, check out the source code on GitHub
here.
Commit Frequently: Break down your customizations into small, active commits. This habit eases the review process and rollback if necessary.

Testing and Continuous Integration

Test in a Sandbox Environment: Always use a test database before deploying changes to production.
Monitor Server Logs: Actively monitor logs to catch and resolve errors early.
Refresh Menus Regularly: Sometimes, changes in the website menu require a manual refresh from the front end. Always verify by clicking through the menu items.

Keeping Up with Odoo Updates

Stay Updated: Odoo evolves, and you should actively check for updates that might affect your customizations.
Engage with the Community: Participate in Odoo forums and discussion channels (such as Odoo Discussions on YouTube) to learn best practices and troubleshooting tips.

By following these best practices, you ensure your website customization remains robust, maintainable, and efficient.

Troubleshooting Common Issues

Sometimes errors occur during customization. Here are some common issues and active solutions:

XML Parsing Errors

Symptom: The module fails to load or update.
Solution: Validate your XML code with an online XML validator. Check for missing tags or misplaced characters. Use clear, active comments in your code to track changes.

Incorrect Menu Ordering

Symptom: Menus appear in the wrong order.
Solution: Verify the <field name="sequence"> values. Adjust the numbers to reflect the desired order, and update your module accordingly.

Misaligned URL References

Symptom: Clicking a menu item does not lead to the expected page.
Solution: Ensure the URL defined in your menu record matches the URL in your page record. Check for typos and confirm that the record IDs reference each other correctly.

Backend Data Not Displaying

Symptom: Dynamic pages show no data.
Solution: Verify that your custom controller fetches the correct model data. Check that your template loops through the data accurately using t-foreach. Also, inspect your model permissions.

By actively following these troubleshooting steps, you resolve issues faster and maintain a smooth customization experience.

Conclusion and Final Thoughts

This tutorial has actively guided you through the complete process of Odoo website customization. You learned how to add custom Odoo menus and submenus, define new Odoo pages, and master URLs and routes in Odoo 16. From setting up your XML files to linking dynamic data via custom controllers, you now possess the skills to build a robust, customized website on Odoo.

To summarize, we covered:

How XML files define menus and pages.
The significance of routes and URLs in providing smooth navigation.
Step-by-step instructions to implement these changes.
Best practices to ensure your customizations are efficient and maintainable.
Troubleshooting tips for common pitfalls.

You are now equipped to experiment further with your own module or expand the functionality by integrating dynamic data and custom controllers. Always remember to test your changes in a sandbox environment and update your code based on community best practices.

For additional insights into Odoo website customization, please visit the official Odoo Documentation and the GitHub repository for our sample project here.

I encourage you to share your experiences and improvements with the community—engage in discussions on YouTube channels like Odoo Discussions and join Odoo forums. By actively learning and collaborating, you ensure that your skills in Odoo website customization and mastering URLs only continue to improve.

Thank you for following this tutorial. Now, go ahead and customize your Odoo website with confidence!

Appendix: Full Code Listing

Below is the complete code used throughout the tutorial.

Menu XML (`menu.xml`)

<odoo>
    <data>
        <record id="menu_aboutus" model="website.menu">
            <field name="name">About us</field>
            <field name="url">/aboutus</field>
            <field name="page_id" ref="od_openacademy_website.aboutus_page"/>
            <field name="parent_id" ref="website.main_menu"/>
            <field name="sequence" type="int">50</field>
        </record>

        <record id="menu_openacademy" model="website.menu">
            <field name="name">OpenAcademy</field>
            <field name="website_id" ref="website.default_website"/>
            <field name="parent_id" search="[('parent_id', '=', False), ('website_id', '=', 1)]"/>
            <field name="sequence" type="int">40</field>
        </record>

        <record id="menu_classes" model="website.menu">
            <field name="name">Classes</field>
            <field name="url">/odoodiscussions/classes</field>
            <field name="parent_id" ref="od_openacademy_website.menu_openacademy"/>
            <field name="website_id" ref="website.default_website"/>
            <field name="sequence" type="int">10</field>
        </record>
    </data>
</odoo>

About Us Page XML (`aboutus_page.xml`)

<odoo>
    <data>
        <template id="about_us_page" name="About Us Page">
            <t t-call="website.layout">
                <div class="container mt-5">
                    <div class="text-center">
                        <h1>About Us</h1>
                        <p>Welcome to <strong>Odoo Discussions</strong>, your go-to channel for learning Odoo!</p>
                    </div>
                    <div class="mt-4">
                        <h2>What We Offer</h2>
                        <ul>
                            <li>Step-by-step guides on Odoo installation and development</li>
                            <li>Comprehensive courses on Odoo customization</li>
                            <li>Expert tips and tricks for developers</li>
                        </ul>
                    </div>
                    <div class="mt-4">
                        <h2>Subscribe to Our YouTube Channel</h2>
                        <p>Visit our YouTube channel: 
                            <a href="https://www.youtube.com/@odoodiscussions" target="_blank">
                                Odoo Discussions
                            </a>
                        </p>
                    </div>
                </div>
            </t>
        </template>

        <record id="aboutus_page" model="website.page">
            <field name="url">/aboutus</field>
            <field name="is_published">True</field>
            <field name="view_id" ref="about_us_page"/>
        </record>
    </data>
</odoo>

Dynamic Controller (Python)

from odoo import http
from odoo.http import request

class MyCustomController(http.Controller):
    @http.route('/dynamic_page', type='http', auth="public", website=True)
    def dynamic_page(self, **kw):
        record_data = request.env['some.model'].sudo().search([], limit=10)
        return request.render('od_openacademy_website.dynamic_template', {
            'records': record_data
        })

Dynamic Template XML (`dynamic_template.xml`)

<odoo>
    <data>
        <template id="dynamic_template" name="Dynamic Page Template">
            <t t-call="website.layout">
                <div class="container mt-5">
                    <h1>Dynamic Content</h1>
                    <p>Here are the latest records:</p>
                    <ul>
                        <t t-foreach="records" t-as="record">
                            <li t-esc="record.name"/>
                        </t>
                    </ul>
                </div>
            </t>
        </template>
    </data>
</odoo>

Manifest File (`manifest.py`)

{
    'name': 'OpenAcademy Website',
    'version': '1.0',
    'category': 'Website',
    'summary': 'Odoo Discussions Website Pages and Customization',
    'depends': ['website'],
    'data': [
        'views/menu.xml',
        'views/aboutus_page.xml',
        'views/dynamic_template.xml',
    ],
    'installable': True,
    'application': True,
}

This complete tutorial actively explains every step of Odoo website customization, ensuring you can create and deploy custom menus, routes, and dynamic pages with ease. Enjoy customizing your Odoo website and happy coding!

Discover more from teguhteja.id

Subscribe to get the latest posts sent to your email.

Odoo Website Customization: Menus, Routes & Pages

Introduction to Odoo Website Customization

Understanding Odoo Website Menus and Routes

The Role of XML Files in Menu Customization

Explanation

How URLs and Routes Work in Odoo

Building Your First Odoo Menu and Page

Creating the “About Us” Menu

Creating the “About Us” Page

Explanation of the “About Us” Page Code

Creating Submenus in Odoo Website

XML Code for Parent and Child Menus

Key Points in This XML

Mastering URLs and Routes in Odoo 16

How Routes Are Defined

Dynamic and Static Data

Implementation: Step-by-Step Tutorial

Step 1. Prepare Your Module

Step 2. Update the Manifest File

Step 3. Add the XML Files

Step 4. Restart and Update Your Odoo Instance

Step 5. Verify on the Frontend

Testing and Verifying Your Customization

Step-by-Step Testing

Common Pitfalls

Advanced Customization: Mastering URLs and Dynamic Routes

Creating Custom Controllers in Odoo

Explanation

Creating a Dynamic View Template

Integrating Dynamic Routes into Your Module

Best Practices for Odoo Website Customization

Code Modularity and Readability

Leveraging Version Control

Testing and Continuous Integration

Keeping Up with Odoo Updates

Troubleshooting Common Issues

XML Parsing Errors

Incorrect Menu Ordering

Misaligned URL References

Backend Data Not Displaying

Conclusion and Final Thoughts

Appendix: Full Code Listing

Menu XML (menu.xml)

About Us Page XML (aboutus_page.xml)

Dynamic Controller (Python)

Dynamic Template XML (dynamic_template.xml)

Manifest File (__manifest__.py)

Share this:

Like this:

Related

Discover more from teguhteja.id

Leave a ReplyCancel reply

Menu XML (`menu.xml`)

About Us Page XML (`aboutus_page.xml`)

Dynamic Template XML (`dynamic_template.xml`)

Manifest File (`manifest.py`)