I am trying to create a simple dashboard using QWEB. So far, I have been able to create a simple example that works and launches as a standalone page with some ORM interaction. Here's a truncated version of my script that works:
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<template id="my_dashboard_meta" inherit_id="web.layout">
<xpath expr="//head" position="inside">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</xpath>
</template>
<template id="kanban_dashboard" name="My Dashboard">
<t t-call="web.layout">
<style>
@font-face {
font-family: LCD;
src: url("/my_dashboard/static/src/fonts/lcd-regular-webfont.ttf");
}
html {
font-family: LCD, Times, serif;
overflow: hidden;
margin: 0;
padding: 0;
min-height: 100vh;
width: 100%;
background-image: url("/my_dashboard/static/src/images/bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.kanban-4 {
width: 25%;
align-items: center;
text-align: center;
}
.kanban-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 30px;
}
@media (max-width: 1200px) {
html {
overflow-y: scroll;
}
.kanban-4 {
width: 30%;
}
}
@media (max-width: 600px) {
.kanban-4 {
width: 90%;
}
}
</style>
<p>Example Entry</p>
<div>
<t t-set="action_quotations" t-value="request.env.ref('sale.action_quotations', False)" />
<t t-if="action_quotations">
<div class="kanban-card">
<a t-att-href="'/web#action=%s' % action_quotations.id">
<img src="/my_dashboard/static/src/images/rfq_icon.png"
alt="Pending Orders" />
<div class="content">
<p>Pending Orders</p>
</div>
</a>
</div>
</t>
</div>
</t>
</template>
</odoo>
However, while trying to refine the template by moving the CSS out into a separate file, it does not seem to work. It is clearly listed in the manifest like so:
{
'name': 'My Dashboard',
'version': '1.0',
'category': 'Tools',
'summary': 'Custom Dashboard',
'author': 'Sofia',
'depends': ['base', 'web', 'sale', 'crm', 'stock', 'purchase'],
'data': [
'security/ir.model.access.csv',
'views/templates.xml',
'views/menus.xml',
'views/actions.xml',
],
'assets': {
'web.assets_backend': [
'my_dashboard/static/src/css/dashboard.css',
],
},
'installable': True,
'application': True,
}
Am I missing some step to get the CSS recognized?
You're using <t t-call="web.layout"> which is a frontend/website template, but your CSS is in web.assets_backend (backend bundle). This is the mismatch!
'assets': {
'web.assets_frontend': [ # Changed from backend to frontend!
'my_dashboard/static/src/scss/dashboard.scss', # Also use SCSS
],
},
You were using web.layout (frontend) but loading CSS in web.assets_backend (backend) → CSS never loaded!
Hello again, Kunjan. I was so hopeful when I read your comment this time. It sounded so promising. But alas, it still doesn't work. For good measure, I had uninstalled the module, cleared the browser cache, restarted Odoo, updated apps, then re-installed it and regenerated assets as well. Still, nada.
Instead of web.layout, should I try some other model, perhaps?
I do appreciate your tireless help, but this seems a real conundrum.
Quick Debug Steps Most likely issue: You're missing a controller - the template won't render without one.
Create controllers/main.py:
from odoo import http
class MyDashboard(http.Controller):
@http.route('/my_dashboard', type='http', auth='user', website=True)
def index(self, **kw):
return http.request.render('my_dashboard.kanban_dashboard')
Update __manifest__.py: Add 'website' to depends, and add '__init__.py' root file with from . import controllers.
Test: Add <div style="background:red;padding:50px">TEST</div> at top of template. If you DON'T see a red box, the template isn't rendering at all (controller issue). If you DO see red
box but no CSS, then it's the asset bundle. Access via: http://your-odoo/my_dashboard
Hi Kunjan. It does have a controller and the page does load and render perfectly - but only when the CSS block is inside the template within style tags - like I had mentioned in my OP. If the CSS is removed to an external file, the page still renders, but without the proper styling.
Nevertheless, since it already had a header template for the meta tag (please see the OP) I tried inserting the style link to the CSS there and it worked.
<template id="my_dashboard_meta" inherit_id="web.layout">
<xpath expr="//head" position="inside">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="my_dashboard/static/src/css/dashboard.css"></link>
</xpath>
</template>
Is this a legal insertion in Odoo, would you know?
Hi Kunjan, and thank you for your prompt reply. It is truly appreciated.
I had performed all the steps that you had recommended (except refactoring the css specificity) as follows:
Step 1: Ensure Correct File Structure (changed CSS to SCSS, file and folder name)
Step 2: Correct Manifest Configuration
Step 4: Critical - Reload Assets
# 1. Restart Odoo server
# 2. Upgrade module (MOST IMPORTANT!)
# 3. Clear browser cache: Ctrl+Shift+R
# 4. Regenerate assets bundles
But sadly, it still did not load (confirmed with dev tools on the browser). Could the issue possibly be with the template? Perhaps it is not inheriting the correct model, or there is some incompatibility with the structure, causing it not to warrant a CSS to be loaded? There is another header template at the top for including meta tags. Could that be an issue?
Yes, this is completely legal and standard in Odoo 19.
Inheriting web.layout to add SCSS links in the <head> is the correct approach for controller-based pages. Your implementation is proper and will work perfectly in Odoo 19.
However, Odoo 19's recommended best practice is using asset bundles in __manifest__.py:
'assets': {
'web.assets_frontend': [
'my_dashboard/static/src/scss/dashboard.scss',
],
}
Both methods are valid in Odoo 19. Your web.layout inheritance works fine, but asset bundles provide better performance.
I've been reading up a little more on the eccentricities of Odoo models, and I think I understand now (maybe). CSS in the web assets (front or back end) only applies to client models. Since mine is a web model, it won't. So, we'd have to inline styles, insert a style block, or include a CSS link directly into the template.
Nevertheless, thank you most kindly, Kunjan, for taking the time to help me. And thanks to user @Odoonex as well; I saw a reply from you but it was removed for some reason.
Hey Sofia,
No, you're mixing concepts. CSS from web.assets_backend or web.assets_frontend applies to all templates in that context, regardless of model type.
Solution: Just add your CSS to the correct asset bundle in __manifest__.py:
'assets': {
'web.assets_backend': ['your_module/static/src/scss/style.scss'],
}
No inline styles needed. Asset bundles work for custom models/controllers automatically.
Hey Sofia, You're very welcome!
it was truly my pleasure to help. If you ever need anything else, don’t hesitate to reach out!