ModuLabry Logo

Umbraco-Suite by ModuLabry

NuGet

ML JSON TextArea

Die ML JSON TextArea ist ein intelligenter, entwicklerfreundlicher Property-Editor, der speziell für die Verwaltung von JSON-Daten im Umbraco-Backoffice entwickelt wurde. Er bietet Live-Validierung, Formatierungswerkzeuge und eine flexible Benutzeroberfläche.

⚙️ Konfiguration

Konfigurieren Sie den Editor in den Umbraco Datentyp-Einstellungen:

  • Show Prettify Button: Aktiviert eine Schaltfläche in der Toolbar, um das JSON mit korrekter Einrückung zu formatieren.
  • Show Minify Button: Aktiviert eine Schaltfläche in der Toolbar, um das JSON in eine einzelne Zeile zu komprimieren.
  • Show Validation Button: Aktiviert einen manuellen Trigger für die JSON-Formatvalidierung.
  • Validate on Input: Wenn aktiviert, wird das JSON automatisch während der Eingabe validiert.
  • Number of Rows: Definiert die Anfangshöhe der Textarea.
  • Auto Grow: Wenn aktiviert, passt sich die Höhe der Textarea automatisch an den Inhalt an, wodurch interne Scrollbalken überflüssig werden.

💻 C# Datenabruf (Value Converter)

Die JSON-Daten werden als Standard-String gespeichert. Sie können diese abrufen und direkt in Ihre stark typisierten C#-Modelle deserialisieren, indem Sie System.Text.Json oder Newtonsoft.Json verwenden.

var content = Umbraco.Content("your-node-guid");
string jsonString = content?.Value<string>("myJsonData");

if (!string.IsNullOrEmpty(jsonString)) 
{
    // Beispiel: In ein benutzerdefiniertes Modell deserialisieren
    var myObject = System.Text.Json.JsonSerializer.Deserialize<MyCustomModel>(jsonString);
}

✅ Validierung

Die ML JSON TextArea stellt die Datenintegrität vor dem Speichern sicher:

  • Format-Validierung: Verhindert das Speichern, wenn der eingegebene Text kein gültiges JSON ist. Eine klare Fehlermeldung unter dem Feld zeigt das genaue Parsing-Problem an.
  • Pflichtfeld-Toggle: Unterstützt die native Umbraco-Pflichtfeldprüfung. Falls erforderlich, wird bei einem leeren Feld Ihre benutzerdefinierte Fehlermeldung ausgegeben.

✨ Features

  • Intelligente Toolbar: Schnelle Aktionen zum Formatieren und Minimieren von Daten, um das Backoffice sauber zu halten.
  • Live-Feedback: Ungültiges JSON wird sofort durch einen roten Rand und ein Warnsymbol hervorgehoben, um zu verhindern, dass Tippfehler Frontend-Implementierungen beeinträchtigen.
  • Adaptive Größe: Dank der Auto Grow-Funktion erhalten Redakteure ein nahtloses Bearbeitungserlebnis, unabhängig von der Größe der Datenmenge.