Batch-Editing in Power Pages: Performante Datenvalidierung im Browser

Inhalt

• Die Trägheit von Standard-Webformularen bei Massendaten
• Clientseitige Intelligenz statt ständiger Server-Rundläufe
• Die Umsetzung mit schnellen Lookups und Tab-Navigation
• Eine Benutzeroberfläche die sich anpasst

Die Trägheit von Standard-Webformularen bei Massendaten

Wer jemals versucht hat, eine lange Liste von Einträgen in einem Standard-Portal einzeln zu bearbeiten, kennt den Frust. Jede Änderung erfordert das Laden einer neuen Seite oder zumindest einen trägen Server-Rundlauf. Bei hunderten Datensätzen ist das schlicht unbenutzbar.

Ich stand vor genau diesem Problem. Die Benutzer mussten eine Vielzahl von Zählerständen anpassen und freigeben. Wie ich dieses Datenmanagement mit Batch-Funktionen aufgebaut habe, war entscheidend für die Akzeptanz. Ohne eine performante Lösung zur Massenbearbeitung wäre das Portal am Ende nicht akzeptiert worden.

Clientseitige Intelligenz statt ständiger Server-Rundläufe

Ich habe mich für eine Architektur entschieden, die die gesamte Validierungslogik in das Frontend verlagert. Die React-Anwendung übernimmt die komplette Steuerung der Benutzeroberfläche und validiert die Eingaben in Echtzeit im Browser des Nutzers.

Anstatt für jeden Zählerstand mühsam das Vorjahr vom Server abzufragen, laden wir diese Werte gebündelt beim Start der Anwendung. Die Daten werden in einer hochoptimierten Struktur im Browser bereitgestellt, so dass die Validierung ohne jegliche spürbare Verzögerung stattfindet.

Die Umsetzung mit schnellen Lookups und Tab-Navigation

Für eine performante Umsetzung habe ich eine optimierte Datenstruktur im Frontend aufgebaut.

Ich nutze eine verschachtelte Map-Struktur für die historischen Vergleichswerte. Die Suche nach einem Vorjahreswert erfolgt dadurch in konstanter Zeit ohne aufwendige Schleifen über große Arrays.

Sobald der Nutzer einen Wert eintippt, vergleicht das Skript die Eingabe mit dem Vorjahreswert. Liegt die Abweichung außerhalb eines definierten Toleranzbereichs, wird sofort eine optische Warnung angezeigt, ohne jedoch die Eingabe komplett zu blockieren.

Fehlerhafte Zeilen werden farblich markiert. Zusätzlich zeigt ein Warn-Badge am Tab-Kopf direkt an, in welchen Kategorien noch unplausible Werte vorliegen. Die Tab-Navigation steuert den Nutzer intelligent durch die fehlerhaften Kategorien, bis alle Daten plausibel sind. Diese intelligente Datenvalidierung mit Priorisierung sorgt dafür, dass Eingabefehler sofort korrigiert werden können.

// Nested map structure for O(1) complexity lookup
type MeterLookup = Map<string, Map<string, number>>;

// Verify if current reading is within tolerance limits
export function validateReading(
  meterId: string,
  period: string,
  value: number,
  history: MeterLookup,
  tolerance: number
): boolean {
  const years = history.get(meterId);
  if (!years) return true; // No history, fallback to valid

  const previousValue = years.get(period);
  if (previousValue === undefined) return true;

  const minLimit = previousValue * (1 - tolerance);
  const maxLimit = previousValue * (1 + tolerance);

  return value >= minLimit && value <= maxLimit;
}

Eine Benutzeroberfläche die sich anpasst

Durch diese clientseitige Validierung fühlt sich das Portal so flüssig an wie eine lokale Desktop-Anwendung. Der Nutzer erhält sofort Rückmeldung über Tippfehler und kann diese korrigieren, bevor die Daten überhaupt an das Backend gesendet werden.

Das reduziert nicht nur die Serverlast, sondern erhöht auch die Datenqualität im System erheblich. Wenn deine Benutzer lieber komplett offline in Tabellen arbeiten möchten, kannst du ergänzend eine nahtlose Excel-Integration für Massenbearbeitung anbieten.

Stehst du vor einer ähnlichen Herausforderung bei der Verarbeitung großer Datenmengen? Lass uns gemeinsam klären, wie du deine Benutzeroberfläche fit für Enterprise-Anforderungen machst.