odoo/tutorials#1309
Created by Manal El Kaïdi (maelk)
Closed
- label
- odoo-dev:19.0-web-framework-tuto-maelk
- head
- defba2363109adde9314ceb39c3832f252bb0c84
| odoo/tutorials | |
|---|---|
| 19.0 | #1309 |
[IMP] awesome_owl: web framework 101
PROBLEM
The playground interface was becoming cluttered and the counter logic wasn't reusable. Additionally, the framework escaped raw HTML by default, preventing rich text rendering in cards.
GOAL
Extract the UI into reusable components (Counter and Card) and allow secure HTML rendering using OWL's markup function.
SOLUTION
- Extracted counter logic from Playground into a dedicated Counter component.
- Created a reusable Card component accepting 'title' and 'content' props.
- Updated Card template to use 't-out' instead of 't-esc' for the content.
- Imported and applied the 'markup' function in Playground to safely pass HTML to the Card.