Es muss nicht kompliziert sein, einen benutzerdefinierten Umbraco-Eigenschaftseditor zu erstellen

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

Ich liebe das neue Backoffice und als Frontend-Entwickler im Herzen bin ich ein großer Fan von Build-Tools und TypeScript. All die Dinge, die Ihr Projekt skalierbarer und unterhaltsamer machen. ABER manchmal (oft) braucht man nicht alles. Hier ist ein Beispiel für die Konvertierung eines AngularJS-Eigenschaftseditors. Kein NPM, kein Vite, kein TypeScript, keine Build-Pipeline! Um zu sehen, was ich konvertiert habe, ist hier die <=13-Version: https://github.com/Frost117/UmbracoDayOfWeek/tree/v13.0.3

JavaScript hat sich seit den AngularJS-Tagen von Umbraco stark verbessert. In diesem Beispiel verwende ich Exporte, Importe (mit Importzuordnungen), Klassen (mit privaten Feldern), Fetch für HTTP-Aufrufe, Template-Literale und optionale Verkettung – alles Dinge, von denen wir damals nur träumen konnten …

Ein einfacher Eigenschafteneditor

Ein Eigenschafteneditor besteht im Kern aus zwei Dateien. Eine umbraco-package.json-Datei, die Umbraco liest, um zu erfahren, was auf dem Server zu tun ist und welche JavaScript-Datei in den Client geladen werden soll. Und dann genau diese JavaScript-Datei (in diesem Beispiel day-of-week.js genannt).

Sie können die Dokumentation für umbraco-package.json lesen, um alle Optionen herauszufinden, aber ein paar Kommentare zu dieser.

Zeile 23: Es werden Einstellungen verwendet. Ähnlich den Vorwerten von alt und verwendet sich dann selbst als Eigenschaftseditor, um die Standardwerte festzulegen (Zeile 29).
Zeile 16: Es speichert die Daten als String (Umbraco.Plain.String) – Hätte den Wert als Zahl speichern können – das wäre vielleicht korrekter gewesen :-D
Zeile 35: Es verwendet Inline-Lokalisierung. Sie können immer noch wie zuvor auf eine Datei verweisen (es ist allerdings Javascript statt XML), aber wenn Sie nur ein paar Labels haben, platziere ich sie lieber direkt dort

Und dann die Javascript-Datei mit einigen Kommentaren

Zeile 5: Es ist alles eine einzelne Klasse, die wir exportieren und einem benutzerdefinierten Elementnamen geben (Zeile 48)
Zeile 5: Die Klasse erstreckt sich von UmbLitElement, das wir oben importiert haben. Wir tun dies, um einige praktische Methoden sowohl von Umbraco (der Lokalisierungsteil in diesem Beispiel) als auch von Lit (das Templating usw.) zu erhalten.
Zeile 6: Durch die Definition der Eigenschaften in einem statischen Feld teilen wir Lit mit, welche Eigenschaften reaktiv sein sollen.
Zeile 26: this.localize.term() ist aufgrund des UmbLitElement verfügbar und verwendet den Übersetzungsschlüssel als String-Argument.
Zeile 32: Mit dem Aufruf von this.requestUpdate() weisen wir Lit an, die Ansicht erneut zu rendern, nachdem wir sie geändert haben (ein bisschen so, als würden Sie in AngularJS-Tagen $scope.$apply() aufrufen).
Zeile 37: Durch das Auslösen des UmbPropertyValueChangeEvents informieren wir Umbraco darüber, dass ein neuer Wert gespeichert werden muss.
Zeile 41: Mit der Render-Methode teilen wir Lit mit, was angezeigt werden soll. In diesem Beispiel analysieren wir eigentlich nur die displayList für eine Komponente aus der Umbraco UI Library und warten auf das Änderungsereignis, das den lokalen Wert aktualisiert und Umbraco informiert.

Das ist es! Sehen Sie sich diesen vereinfachten Code hier an: https://github.com/filipbech/dayofweek. Eric, Tony und das Team hinter dem echten Paket sind darüber hinausgegangen und haben einige Authentifizierungen usw. hinzugefügt. Folgen Sie also dem Original-Repo, um es im wirklichen Leben zu sehen.

Der Anfang von etwas Schönem

Das Schöne an diesem Ansatz ist die Einfachheit. Durch die Nutzung moderner JavaScript-Funktionen und der neuen Backoffice-Implementierung können wir leistungsstarke und wiederverwendbare Eigenschaftseditoren erstellen, ohne dass komplexe Build-Tools oder Frameworks erforderlich sind.

Ich hoffe, das inspiriert Sie dazu, mit dem Umbraco-Backoffice zu experimentieren. Es gibt einige neue Syntaxen zu erlernen, aber ansonsten ist es meiner Meinung nach genauso einfach, einen Proof of Concept zum Laufen zu bringen wie in „früher“.

Wenn Sie Gedanken zum Teilen haben, würde ich mich freuen, von Ihnen zu hören. Lassen Sie uns weiterhin erstaunliche Dinge entwickeln, die die Möglichkeiten des CMS erweitern?

Ich bin auf BlueSky (und den meisten anderen sozialen Netzwerken) als Filipbech – bitte melden Sie sich öffentlich, damit jeder aus den Diskussionen lernen kann!

Das obige ist der detaillierte Inhalt vonEs muss nicht kompliziert sein, einen benutzerdefinierten Umbraco-Eigenschaftseditor zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!