Chapter 13: Creating Web and Portal Frontend Features

Odoo is a business application framework, providing all the tools necessary to quickly build apps. A uniform web client provides the business user interface. But organizations are not isolated from the world. Being able to also interact with external users is needed to support efficient processes. For this, Odoo supports a web interface.

The internal user web client is sometimes referred to as the backend, and the external user interface as the frontend. The frontend provides portal features, accessible to portal user logins. It also provides public features, accessible without the need for a login, referred as website features.

The portal complements backend apps, providing self-service features to external users, such as viewing and paying for their orders, or submitting a support ticket.

The website features are built on top of the Odoo Content Management System (CMS), which allows you to build web pages, including easy...

Technical requirements

The work in this chapter requires the library_checkout add-on module, last edited in Chapter 11, Kanban Views and Client-Side QWeb. The add-on module and its dependencies code can be found in the Git repository at https://github.com/PacktPublishing/Odoo-15-Development-Essentials. The code in this chapter can be found in the same repository.

Introducing the library portal learning project

To learn about Odoo web page development, a new project will be used. The library app can use self-service features for library members. Members can be assigned a user login to have access to their book checkout requests.

The library_portal add-on module will be created for these portal self-service features.

The first file to add is the manifest, library_portal/__manifest__.py, which you can create with the following code:

{
  "name": "Library Portal",
  "description": "Portal for library members",
  "author": "Daniel Reis",
  "license": "AGPL-3",
  "depends": [
      "library_checkout", "portal"
  ],
  "data": [
    "security/library_security.xml",
    "...

Creating a frontend web page

To get started with the basics of Odoo web development, a simple web page will be created. To do this, two components are needed: a web controller, triggered when a particular URL is accessed, and a QWeb template, to generate the HTML to be presented by that URL.

The web page used to showcase this is a book catalog, a simple list of the books in the library. The book catalog page will be accessible at http://localhost:8069/library/catalog.

The following screenshot provides an example of what should be seen:

Figure 13.1 – Book catalog frontend web page

The first step is to add the web controller, which we will do in the next section.

Adding a web controller

Web controllers are Python objects, used to implement web features. They can link URL paths to an object method, so that when that URL is accessed, the method is executed.

For example, for the http://localhost:8069/library/catalog URL, the accessed path is...

Understanding web controllers

Web controllers are the server-side components responsible for responding when an Odoo web path is accessed, usually triggering the rendering of a web page.

A web path, such as /library/catalog, is assigned to a route, triggering a controller method. The method code can access details of the web request through the request object, and the result is a response object, with the details to return to the client.

Declaring routes

The http.route decorator is used to assign a method to a web path. These are the arguments available:

• route, usually provided as a positional argument, is a string, or a list of strings, with the paths to map. Method arguments can be extracted from the path. The syntax to express these arguments is detailed in the next section.
• type, to specify the type of request. By default, this is http, and can also be set to json.
• auth is the authentication type required. It can be one of user, public, or none. The user...

Adding portal features

The Odoo portal feature make information available to interact with external users. Different apps can add features to the portal. For example, the Sales app adds the ability for customers to check their orders, and even pay for them.

Portal users need to be created, providing access to the portal. This is done on the corresponding contact record in the Action context menu, with the Grant portal access option, as shown in Figure 13.2:

Figure 13.2 – The Grant portal access option on a contact record

Once the user goes through the sign-up process, they can log in to Odoo and see a My Account option when clicking on the username in the top right corner. This option opens the portal home page, presenting a summary of all the documents available to the user.

The documents available depend on the apps installed. Figure 13.3 shows an example of what the portal home page looks like:

Figure 13.3 – Portal...

Summary

Frontend web pages allow Odoo to also provide features to external users. This can be used to display generic information to the public, or give personalized information to portal users. The frontend web features are the foundation of the Odoo CMS, provided by the Website app, and for frontend features such as e-commerce.

In this chapter, you understood the technical components that are at the core of frontend web features, web controllers, and QWeb templates. Web controllers implement routes, triggered when accessing certain URL paths called routes, and running any specific business logic needed. QWeb templates receive data prepared by the web controller and render HTML output with the help of the QWeb templating engine.

You now know how to use these components to implement a public web page integrated with the Odoo frontend, including the usage of your own web assets. You also know how to leverage the essentials of the Odoo portal to provide self-service features to...

Further reading

These are additional reference materials that complement the topics discussed in this chapter, found in the official Odoo documentation:

• Web controllers: https://www.odoo.com/documentation/15.0/developer/reference/backend/http.html
• QWeb language: https://www.odoo.com/documentation/15.0/developer/reference/frontend/qweb.html
• JavaScript API reference: https://www.odoo.com/documentation/15.0/developer/reference/frontend/javascript_reference.html
• Bootstrap documentation: https://getbootstrap.com/docs/4.1/getting-started/introduction

Additional Bootstrap learning resources can be found on the Packt Publishing technical page: https://www.packtpub.com/tech/Bootstrap.