Il n'est pas nécessaire de créer un éditeur de propriétés Umbraco personnalisé.

TL:DR: https://github.com/filipbech/dayofweek

J'adore le nouveau backoffice, et en tant que développeur frontend par cœur, je suis très fan des outils de build, TypeScript. Tous les éléments qui rendent votre projet plus évolutif et plus amusant à travailler. MAIS, parfois (souvent), vous n’avez pas besoin de tout. Voici donc un exemple de conversion d'un éditeur de propriétés angulaireJS. Pas de NPM, pas de Vite, pas de TypeScript, pas de pipeline de build ! Pour voir ce que j'ai converti, voici la version <=13 : https://github.com/Frost117/UmbracoDayOfWeek/tree/v13.0.3

JavaScript s'est beaucoup amélioré depuis l'époque angulaireJS d'Umbraco. Dans cet exemple, j'utilise les exportations, les importations (avec des cartes d'importation), les classes (avec des champs privés), la récupération des appels HTTP, les modèles littéraux et le chaînage facultatif - tout ce dont nous ne pouvions que rêver à l'époque…

Un éditeur de propriétés simple

Un éditeur de propriétés à la base est constitué de deux fichiers. Un fichier umbraco-package.json qu'Umbraco lit pour savoir quoi faire sur le serveur et quel fichier JavaScript charger dans le client. Et puis ce fichier JavaScript (appelé dans cet exemple day-of-week.js).

Vous pouvez lire la documentation de umbraco-package.json pour connaître toutes les options, mais quelques commentaires sur celle-ci.

Ligne 23 : Elle utilise les paramètres. Semblable aux anciennes prévaleurs, puis s'utilisant comme éditeur de propriétés pour définir les valeurs par défaut (ligne 29).
Ligne 16 : Il stocke les données sous forme de chaîne (Umbraco.Plain.String) - Aurait pu stocker la valeur sous forme de nombre - cela aurait pu être plus correct :-D
Ligne 35 : elle utilise la localisation en ligne. Vous pouvez toujours choisir de pointer vers un fichier comme avant (c'est du javascript au lieu de XML cependant), mais si vous n'avez que quelques étiquettes, j'aime simplement les y mettre directement

Et puis le fichier javascript avec quelques commentaires

Ligne 5 : c'est une seule classe que nous exportons et donnons un nom d'élément personnalisé (Ligne 48)
Ligne 5 : la classe s'étend de UmbLitElement que nous avons importé ci-dessus. Nous faisons cela pour obtenir des méthodes pratiques d'Umbraco (la partie localisation dans cet exemple) et de Lit (le modèle, etc.).
Ligne 6 : définir les propriétés dans un champ statique, c'est ainsi que nous indiquons à Lit quelles propriétés doivent être réactives.
Ligne 26 : this.localize.term() est disponible grâce à UmbLitElement et prend la clé de traduction comme argument de chaîne.
Ligne 32 : appeler this.requestUpdate() est la façon dont nous disons à Lit de restituer la vue après l'avoir modifiée (un peu comme lorsque vous appeliez $scope.$apply() à l'époque d'AngularJS).
Ligne 37 : envoi de UmbPropertyValueChangeEvent, c'est ainsi que nous informons Umbraco qu'il y a une nouvelle valeur à stocker.
Ligne 41 : la méthode de rendu est la façon dont nous disons à Lit quoi afficher. Dans cet exemple, nous analysons uniquement la displayList en un composant de la bibliothèque d'interface utilisateur d'Umbraco et écoutons l'événement de changement, qui met à jour la valeur locale et informe Umbraco.

C'est ça ! Voir ce code simplifié ici : https://github.com/filipbech/dayofweek. Eric, Tony et l'équipe derrière le vrai package sont allés plus loin et ont ajouté une authentification, etc., alors suivez le dépôt original pour le voir dans la vraie vie.

Le début de quelque chose de beau

La beauté de cette approche est la simplicité. En tirant parti des fonctionnalités JavaScript modernes et de la nouvelle implémentation du backoffice, nous pouvons créer des éditeurs de propriétés puissants et réutilisables sans avoir besoin d'outils ou de frameworks de construction complexes.

J'espère que cela vous incitera à aller jouer avec le backoffice d'Umbraco. Il y a une nouvelle syntaxe à apprendre, mais à part cela, je dirais qu’il est tout aussi facile de mettre en place une preuve de concept qu’elle l’était « au bon vieux temps ».

Si vous avez des idées à partager, j’aimerais avoir de vos nouvelles. Continuons à créer des choses étonnantes qui étendent les capacités du CMS ?

Je suis sur BlueSky (et la plupart des autres réseaux sociaux) en tant que Filipbech - veuillez me contacter en public afin que tout le monde puisse apprendre des discussions !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!