In this tutorial I will teach you how to create new webpages and controllers through code in Odoo 10. You will learn how to create new webpages (in XML), how to create controllers and how to use controllers to open specific webpages. After following this tutorial you will be able to create your own webpages and controllers in Odoo.
In this example I will create a webpage with a button. The button click will call a controller function and this controller will redirect you to another webpage. On this page we will show the details of all the companies in your Odoo:

1. Creating the controller structure

Before you can create (and call) a webpage you need to make a controller. This controller will tell Odoo which URL links to which webpage. Open up your module and create a folder ‘controllers’ if you don’t have one yet. After creating this folder make an __init__ file and add the followig line of code in it:

Now that you have an import that is directly loaded by Odoo (thanks to the __init.py__) you should create a new Python file. Name this new file ‘example.py’, which will be the controller. As a result your folder structure should be looking like this:

1.1 Creating the controller

Let us create our first controller now! Just have a look at this code:

So, what does this tell you? In order to let an user navigate to a specific page you will need an @http.route. This @http.route will tell Odoo that we want to link the url ‘/example’ to a specific webpage. Inside the @http.route you will see four variables. Let me explain them one by one:

• ‘/example’: Because Odoo needs to know which URL links to what (XML) template you’ll need to provide the URL first. In this example it means that http://localhost/example would call this @http.route
• type=’http’: This will let Odoo know that your page is running in HTTP.
• auth=’public’: Tells Odoo who can view the page.
  You can choose between ‘public’, ‘user’ and ‘none’. If you choose ‘public’ anybody can view the page. When you choose ‘user’ only logged in people can view this page and if  you choose ‘none’ there will be no facilities to access the database or any configuration. For more information see the official documentation
• website=True: Tells Odoo that is has to link to a webpage and that it is not just a Python function.

After calling @http.route you will need to give the Python function a name, in this example render_example_page(self). Notice that self is also passed along in functions in the front-end of Odoo, just like in the backend.

1.2 Returning the controller function

Finally, you need to return the function. Because the function needs to know which XML record needs to be called we pass it along like this:

http.request.render will call the view renderer from the Odoo framework. within the brackets “()” you have to specify the module_name.page_name. In this case my module is named ‘create_webpage_demo’ and I will create a webpage with the technical name ‘page_name’. In this http.request.render you’ll also see {}. Why is this there? You can pass variables and data along in this dictionary to the website. Further in this tutorial I will show an example about how to do this, so don’t worry about it yet.

2. Creating the webpage

Close the Python file, go into the ‘views’ folder and create a new XML file named ‘example_webpage.xml’. Add this XML file in your manifest.py first:

Now go back to your example_webpage.xml file and create a new XML record. You’ll notice that creating a new webpage is just as easy as creating an Odoo view. Have a look at this code first and then add it in your module:

Does this make sense to you? Let me explain it step by step. The record starts with a template id, which is identical to creating views in Odoo. Why did I name this example_page though? Because in the controller we did this: return http.request.render(‘create_webpage_demo.example_page‘, {}). As a result Odoo will now know that the controller needs to render the XML view that we’re now coding. Did you notice the page=”True” key too? Since Odoo needs to know if it is a webpage or not there is a key ‘page’ added in Odoo. By settings this key to true Odoo knows it’ll become a webpage. Next, we have the following line:

Because of this Odoo knows that it has to take the default webpage lay-out and needs to apply it to this XML record. The next line has some noteworthy features. The div class oe_structure will add the feature to use building blocks within Odoo, which is otherwise not possible. As a result other people, that use your Odoo that do not have technical knowledge, will be able to use building blocks to style the webpages. As for the rest of the code? You could basically add what you want here. Because Odoo implements bootstrap, less and font awesome you can use a lot of features out of the box!

2.1 Saving and showing the webpage

Finally, save this page, update your module and open your Odoo. In the website go to /example and you’ll see the following result:

Do you see that button? In the XML record that we just created I added the following line of code:

I’ve added a t-attf-href in this line with a reason, but why? Because the Odoo framework will be triggered the moment that you click on this button. Odoo can interpret this code and knows that you want to open the page /example/detail.
So, let us continue and let us create another function in the controller to handle this.

2.2 Second function in controller

Open up the Python file ‘example.py’ again and let us create a second function, just like we did with the first. There will be just one addition to the code, we’ll also pass data to the next webpage! Go ahead and create a second function that links to /example/result. Your code should look like this:

This code will work fine and you’ll be able to open the page /example/detail (if you’d have an XML record by now too), but, we still need to pass data along.

2.3 Passing data to the webpage

Since there is no code to pass data along yet we should add it. You can call data from the database in controllers too, it just works slightly different. Usually in Odoo you would do this:

It’s not possible to do it like this in the controller though. In the controller we will need to use ‘http.request.env’ to fetch data from a model. As a result your code will look like this:

I’ve also added the function “.sudo()” on this search. Why? Since the website looks at user rights and access rights too you’d need to make sure the users have enough rights. As this is not in the scope of this tutorial I simply add “.sudo()” so that the database query is executed as if it was done by the super administrator user without any security problems.
The final thing to do is to pass this data, that is in the variable companies, to the webpage. How do you do that? Like this:

Now you’re all set on the controller side to open up the page /example/detail and to pass all data to the webpage. The final code of your function will look like this:

Because of doing {‘companies’: companies} in the dictionary all data from all companies will be passed along to the webpage.
Save this code and let us create the second XML record for the webpage in ‘example_webpage.xml’.

2.5 Creating the detail view

Finally, let us create the second webpage and then we’re all done! Open up the ‘example_webpage.xml’ file and create a second XML record, where you also set the page=”True” key on. On this page we will show all company details in a table, which is passed along in the variable “companies”. Have a look at this code and then add it in your XML file:

The controller will know that it has to call this record thanks to the name “detail_page” so when you would save this and update your module everything will work. Since we’ve passed along the dictionary companies we can access all company data. To print all records (in multi company you can have multiple companies) we loop over the records thanks to the t t-foreach code:

Because you’re doing a foreach you can access every company it’s data with the variable “company” later on. As a result we can access any data from the company with “company.field_name”. You can show the data in the webpage with span t-esc=”company.field_name” to print it out:

Finally, save this file, update your module and go to /example/detail. You will now see the following result:

3. Conclusion

Creating webpages and using controllers in Odoo is quite easy. As the Odoo framework has a lot of built in libraries (such as requests, less, bootstrap, font awesome, …) it has never been as easy to create webpages as in Odoo 10. As a result you can create beautiful webpages with any data you want in record times.
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!