Personnaliser ou créer des raccourcis claviers sur Odoo et partout ailleurs

Dans cet article, je vais vous montrer comment personnaliser ou créer des raccourcis claviers pour votre application web en prenant un exemple sur Odoo.

La semaine dernière, je travaillais sur un ticket qui consistait à rajouter un raccourci clavier à la fonctionnalité que j’implémentais. La première idée qui m’est venue en tête était d’aller sur MDN Web Docs et voir comment je pouvais le faire en pur Javascript (c’est-à-dire en VanillaJS).

Tout à coup, une autre idée m’est venue en tête, celle de faire une recherche sur Google. Je me suis dit qu’il existe certainement une librairie open source qui va m’aider à très vite réaliser ce besoin. C’est alors qu’après avoir fait mes recherches, je suis tombé sur la librairie hotkeys. En lisant le README, je me suis rendu compte que hotkeys est très facile à implémenter et qu’elle est beaucoup appréciée, puisqu’elle totalise plus de 5200 stars sur Github.

Ensuite, il ne faillait que l’ajouter à Odoo en suivant cette procédure.

Dans la suite, je vais d’abord créer un module que j’appelle shortcut.

1- J’ai téléchargé le fichier hotkeys.min.js dans le dossier static de mon module. Puis, j’ai créé le fichier logic.js dans lequel je vais implémenter ma logique et enfin, j’ai ajouté le tout dans le fichier __manifest__.py afin qu’Odoo puisse les charger.

Étant donné que je travaille sur Odoo v15, ces fichiers statiques ont été chargés dans l’objet assets du manifeste. Il s’agit de l’une des nouveautés d’Odoo v15, permettant non plus de charger les fichiers statiques dans le XML mais plutôt dans le manifeste. Ci-dessous mon manifeste:

{
    "name": "Shortcut",
    "version": "15.0.0.0.1",
    "summary": "Add custom keyboard schortcut",
    "category": "Productivity",
    "license": "AGPL-3",
    "depends": ["base", "web"],
    "assets": {
        "web.assets_backend": [
            "shortcut/static/lib/hotkeys.min.js",
            "shortcut/static/src/js/logic.js",
        ]
    },
    "data": [
        # Data files
        # Views files
    ],
    "installable": True,
    "auto_install": False,
}

2- Dans la logique d’utilisation du raccourci, je vais tout juste ajouter l’ouverture du formulaire d’un partenaire lambda (par son ID) lorsqu’on appuie sur la touche entrée

// odoo.define permet d'initialiser notre JS par odoo
odoo.define("shortcut.logic", function (require) {
    "use strict";
		
	// cette fonction ouvre l'URL correspondant au formulaire qu'on veut afficher
    function open_url(url) {
        const win = window.open(url, "_self");
        win.focus();
    }
		
	// nous retournons l'URL du formulaire d'un partenaire (modèle res.partner)
	// qui a l'ID id 
    function getUrlById(id) {
        const url =
            "/web#id=" +
            id +
            "&cids=1&menu_id=105&action=135&model=res.partner&view_type=form";
        return url;
    }
		
	// nous demandons à hotkeys d'afficher le formulaire du partenaire 
	// qui a l'ID 14 lorsqu'on appuie sur la touche Entree du clavier
    hotkeys("enter", function (event, handler) {
        event.preventDefault();
        const url = getUrlById(14);
        open_url(url);
    });
});

Vous voyez ? En juste quelques lignes, on a pu implémenter un raccourci clavier en utilisant la librairie Javascript hostkeys.