Mehrsprachigkeit in Power Pages und React: Zentrales Content-Management

Inhalt

• Das Chaos verteilter Übersetzungsschlüssel in Web-Portalen
• Die Brücke zwischen Power Pages Content Snippets und React
• Der technische Weg zum zentralen Sprach-Repository
• Volle Flexibilität ohne Code-Änderungen

Das Chaos verteilter Übersetzungsschlüssel in Web-Portalen

Wer ein internationales Web-Portal pflegt, kennt das Problem. Ein Teil der Texte liegt im Portal-System, ein anderer Teil hartcodiert in Frontend-Komponenten und wieder andere Übersetzungen in externen Excel-Vorlagen. Bei sieben Sprachen und über tausend Textbausteinen verlierst du ohne eine saubere Struktur sofort den Überblick.

Ich stand vor genau dieser Situation. Das Portal musste für internationale Einzelhändler in sieben Sprachen bereitgestellt werden. Jeder Button, jede Fehlermeldung und jeder Spaltenkopf in den Excel-Dateien musste exakt übersetzt sein und flexibel angepasst werden können. Wie ich diese Umfassende Internationalisierung im Portal umgesetzt habe, war wegweisend für das Projekt.

Die Brücke zwischen Power Pages Content Snippets und React

Ich habe mich gegen eine getrennte Speicherung entschieden. Stattdessen nutzen wir die eingebauten Content Snippets von Power Pages als die einzige Quelle der Wahrheit. Das Portal-Backend speichert alle Übersetzungen in allen Sprachen zentral an einem Ort.

Die React-Anwendung liest diese Content Snippets beim Laden der Seite ein. Ich übergebe die Texte gesammelt als strukturiertes JSON-Objekt direkt an das Frontend. So stehen die Übersetzungen in React sofort zur Verfügung, ohne dass wir im Nachhinein zusätzliche API-Abfragen senden müssen.

Der technische Weg zum zentralen Sprach-Repository

Die Lösung habe ich über eine einfache, aber hochgradig effektive Schnittstelle realisiert.

Ich erstelle für jeden Textbaustein ein Content Snippet im Portal Management. Diese Snippets enthalten eindeutige Schlüssel und die jeweiligen Texte für alle sieben Sprachen. Das gilt sogar für die mehrsprachigen Excel-Templates, deren Spaltenköpfe und Validierungsmeldungen dynamisch übersetzt werden.

Beim Seitenaufruf liest das Liquid-Template des Portals alle relevanten Snippets der aktuell aktiven Sprache aus. Ich bette diese Daten als globales JSON-Objekt im HTML-Dokument ein.

React übernimmt dieses Objekt beim Start und füllt damit eine eigene i18n-Hilfsklasse. Diese Klasse stellt sicher, dass bei einem fehlenden Textbaustein immer ein definierter Fallback-Text ausgegeben wird, damit das Portal niemals leere UI-Elemente anzeigt.

// Define client-side translation repository
interface LanguagePack {
  [key: string]: string;
}

// Global dictionary with fallback mechanism
export class TranslationService {
  private dictionary: LanguagePack;

  constructor(translations: LanguagePack) {
    this.dictionary = translations;
  }

  // Get translated string with simple key fallback
  public translate(key: string, defaultValue: string): string {
    const text = this.dictionary[key];
    if (text === undefined) {
      return defaultValue;
    }
    return text;
  }
}

Volle Flexibilität ohne Code-Änderungen

Der größte Vorteil dieser Architektur liegt in der einfachen Wartung. Wenn der Fachbereich eine Formulierung anpassen oder eine Übersetzung korrigieren möchte, kann er das direkt über das Portal-Backend tun.

Es ist kein neuer Build-Prozess und kein erneutes Deployment der React-Anwendung notwendig. Die Änderungen sind nach dem Speichern des Content Snippets sofort live im Portal sichtbar. Wenn du wissen willst, wie wir diese mehrsprachigen Texte auch offline nutzen, schau dir meinen Beitrag über die Excel-Integration für Massenbearbeitung an.

Stehst du auch vor der Herausforderung, ein komplexes Portal für internationale Nutzer bereitzustellen? Lass uns darüber sprechen, wie wir deine Lokalisierung zukunftssicher aufstellen.