Dans cet article, nous vous montrons comment développer un widget OWL sur Odoo 16 au niveau du module website ou portal.
Source code : https://github.com/abdounasser202/odoo-apps/tree/16.0
Après avoir montré comment intégrer OWL dans Odoo 15, nous allons maintenant explorer comment faire pour intégrer OWL à Odoo 16 au niveau du site web.
OWL (Odoo Web Library) est le framework JavaScript d'Odoo similaire à React ou Vue.js. En v15, il était couplé au système de widget des versions précédentes utilisant odoo.define({}). En v16, la structure JS a été améliorée avec notamment la prise en compte de l’ES6 et une meilleure organisation du code.
Dans cet article, nous allons nous concentrer sur le module bookstore_portal dont le code a été migré de la v15 à la v16 : vous pouvez dores et déjà y avoir accès sur GitHub et lire la suite de l’article pour comprendre comment il a été implémenté.
Développement OWL dans le module website
Le module bookstore_portal est un module qui affiche les livres qui ont été enregistrés dans la base de données. Il liste tous les modules dans une page dédiée du menu Books et permet de rechercher les livres par leur nom.
Il est composé de 3 composants web :
1. Le composant de recherche (Search component)
Ce composant permet de rechercher des livres enregistrés dans la base de données.
- Il effectue des requêtes pour retrouver des livres via le contrôleur /books/search/
- Il récupère la valeur entrée par l'utilisateur dans searchInput et exécute la fonction doSearch().
- Le hook useRef est utilisé au niveau de l’input pour interagir avec les autres parties du composants.
- Le composant Search affiche aussi les résultats en filtrant de manière dynamique les livres qui ont été récupérés via le contrôleur lorsque l’utilisateur tape sur la touche ENTREE toujours via la fonction doSearch()
- il affiche le résultat ou renvoi un message si aucun résultat n’est trouvé via la fonction displayFiltered()
Dans la fonction doSearch(), nous utilisons async/await parce que nous devons attendre que les données soient récupérées à partir du contrôleur avant de pouvoir les utiliser.
2. Le composant d'affichage de la liste (List component)
Ce composant affiche la liste des livres disponibles.
- Il récupère les livres via /books/list/data
- Il utilise le hook useState pour stocker et gérer les données de manière dynamique
- Il interagit avec le composant Search pour mettre à jour la liste affichée
3. Le composant principal (App component)
Ce composant sert de point d'entrée pour le widget ou l’application OWL.
- Il charge le composant List et gère l'affichage de l'application
- Il assure l'interconnexion entre les différents composants
4. Montage des composants
Sans l'enregistrement et le montage des composants, l'interface ne va rien n'afficher. C'est là que le fichier js/main.js entre en action : il va monter les composants OWL sur l'élément app du DOM une fois que celui-ci est prêt.
Besoin d’aller plus en détail ? Faites un tour au niveau du code ou bien contactez-nous pour réserver une séance de coaching à l’adresse hello@peef.dev
🚀 Si vous souhaitez en savoir plus sur OWL ou migrer vos propres modules Odoo, rejoignez notre marketplace de développeurs spécialisés Odoo et profitez d’un accompagnement personnalisé !
