Zum Inhalt

Enterprise-Suche in Power Pages.

ECE Fallstudie: React, Power Pages Server Logic und Dataverse Custom API.

Diese Fallstudie zeigt eine implementierte Power Pages Enterprise-Suche für komplexe Standort- und Flächendaten. React steuert Filter, Auto-Suggest und URL-Zustand, während Server Logic Autorisierung und Eingaben prüft.

Ähnliche Suche besprechen Pro-Code Ansatz ansehen
Auf dieser Seite
Erweiterter Suchdialog mit Suchbegriff, Mietflächenbereich, Branchenauswahl und weiteren Filtergruppen

Projekt auf einen Blick

Ein React Suchmodul für Center und Flächen. Der Server trennt Suche, Vorschläge und Detail-Batch.

1
React Suchmodul
2
Objektarten: Center und Flächen
3
POST-Operationen

Anforderungen im Projekt

Welche Anforderungen hatte die Power Pages Enterprise-Suche? Die Suchoberfläche musste mehr leisten als eine Volltextsuche und durfte Sicherheitsentscheidungen nicht in den Browser verlagern.

  • Viele kombinierbare Suchdimensionen

    Suchtext, Flächen, Standorttypen, Ebenen und Kennzahlen mussten gemeinsam verarbeitet werden.

  • Große strukturierte JSON Daten

    Die Dataverse Custom API liefert komplexe Objekt-, Ebenen-, Merkmals- und Flächendaten als gefilterte Antwort.

  • Wiederherstellbarer Suchzustand

    Filter mussten über URL, Browser-Neuladen sowie Vor- und Zurücknavigation konsistent bleiben.

  • Nicht vertrauenswürdige Browser-Eingaben

    Manipulierte URL Parameter oder Request Bodies durften keine ungeprüften Custom API Parameter erzeugen.

  • Mehrere Seitentypen

    Landingpage und Ergebnisseite benötigten dieselbe Anwendung mit unterschiedlichem Navigationsverhalten.

  • Entkoppelte Ergebnisdarstellung

    Weitere Komponenten sollten Suchantworten nutzen können, ohne Teil derselben React Anwendung zu sein.

Mehrwert der Suche

Was die Power Pages Enterprise-Suche für Standorte und Flächen leistet: Die Power Pages Enterprise-Suche verbindet Standort- und Flächenkriterien, teilbare URLs und serverseitig geprüfte Zugriffe.

  • Standorte und Flächen gezielt eingrenzen

    Suchtext, Flächengröße, Standorttypen und unterstützte Kennzahlen lassen sich in einem Suchvorgang kombinieren.

  • Eine Recherche fortsetzen

    Gültige Filter bleiben in der URL erhalten. Beim Neuladen oder über die Browsernavigation wird der Suchzustand wiederhergestellt.

  • Zugriff serverseitig kontrollieren

    React steuert die Bedienung. Power Pages Server Logic prüft Eingaben und Portalnutzer, bevor kontrollierte Parameter Dataverse erreichen.

Suche im Einsatz

Von der Eingabe zum Suchergebnis: Die Aufnahmen zeigen den dokumentierten Entwicklungsstand mit Vorschlägen aus der Dataverse Custom API, Flächen-Schnellfilter, erweitertem Filterdialog und getrennte Ergebnisse für Center und Flächen.

Auto-Suggest aus der Dataverse Custom API

  • Vorschläge nach Typ

    Bei der Eingabe „hamburg“ erscheinen Vorschläge für Stadt, Region und Center.

  • Auswahl ohne sofortige Suche

    Die Auswahl eines Vorschlags übernimmt den Wert, startet aber noch keine Suche.

  • Antworten und Fehlerzustände

    Der Deep Dive erklärt Debounce, veraltete Antworten und technische Fehler.

Auto-Suggest mit React verstehen
Eingabe hamburg mit getrennten Vorschlägen für Stadt, Region und Center
Erweiterter Suchdialog mit Suchbegriff, Mietflächenbereich und weiteren Filtergruppen Schnellfilter für Mietflächenbereiche in der Suchoberfläche

Suchfilter für Center und Flächen eingrenzen

  • Kriterien im Filterdialog

    Der Dialog zeigt Suchtext, Mietflächenbereich und weitere Filtergruppen.

  • Suchtext und Mietflächen

    Suchbegriff und Mietflächenbereich lassen sich gemeinsam eingrenzen.

  • Filterlogik im Detail

    Der Deep Dive erklärt die Prüfung von Suchfiltern und den Aufbau kontrollierter OData Parameter.

Suchfilter und OData verstehen

Center- und Flächenergebnisse prüfen

Center und Flächen erscheinen getrennt. Google Maps zeigt Standorte nach Einwilligung.

Suchergebnisse mit Center-Karten, Kennzahlen und Kartenbereich mit Einwilligungshinweis

Architekturentscheidung

React übernimmt Interaktion. Server Logic kontrolliert Vertrauen. Die Lösung trennt Bedienung, Suchzustand, Autorisierung und Dataverse Zugriff in klar abgegrenzte Verantwortlichkeiten.

Klare Grenzen statt direkter Dataverse Abfragen

  • Isolierte React Anwendung

    Das Suchmodul wird als eigenständiges Bundle in Power Pages Web Templates eingebunden und über JSON konfiguriert.

  • Typisierte Anwendungsschichten

    Controller, Service, Repository, Transport und Parser trennen UI Verhalten von drei Server Operationen und deren Antwortverträgen.

  • Verbindliche Servergrenze

    Power Pages Server Logic prüft Operation, Payload, Wertebereiche, Katalogwerte und Portalnutzer vor jedem API Aufruf.

  • Geschützter Dataverse Vertrag

    Die Custom API erhält nur serverseitig abgeleitete Autorisierung und kontrollierte Parameter für Suche, Vorschläge und Detailabrufe.

Datenfluss von React über Power Pages Server Logic zur Dataverse Custom API

Steuerung im Browser

Wie steuert React Filter, Auto-Suggest und URL-Zustand in Power Pages? Acht abgestimmte Mechanismen halten Bedienung, Browserhistorie und Ergebnis-Events synchron.

  • Auto-Suggest

    Vorschläge starten bei 3 bis 100 Zeichen nach 300 Millisekunden. Sequenzschutz verwirft veraltete Antworten. Eine Auswahl startet noch keine Suche.

  • Erweiterte Filter

    Flächen, Standorttypen und Kennzahlen lassen sich gemeinsam eingrenzen. Branchen werden über die Portal-Konfiguration verwaltet.

  • URL als Suchzustand

    Gültige Filter bleiben teilbar. Ungültige Teilwerte werden entfernt, fremde Query Parameter bleiben bestehen.

  • Browserhistorie

    Neue Suchen nutzen pushState. Bereinigungen nutzen replaceState. popstate liest Filter neu und startet genau eine Suche.

  • Zwei Laufzeitmodi

    Landingpages navigieren zur Ergebnisseite. Ergebnisseiten aktualisieren URL und Suchergebnis.

  • Browser Events

    portal:search-changed meldet akzeptierten Zustand. portal:search-results folgt erst nach erfolgreichem Transport und Parserprüfung.

  • GUID Detailsuche

    Center und Flächen werden mit GUID, Entitätstyp und Sprache geprüft und als aufgelöstes DTO an Liquid geliefert.

  • Favoriten Batch

    Ein Request verarbeitet 1 bis 50 GUIDs eines Entitätstyps und trennt Ergebnisse, fehlende IDs und ungültige IDs.

Verbindliche Sicherheitsgrenze

Browser-Eingaben werden nicht als Autorität behandelt. Power Pages Server Logic wiederholt die Validierung unabhängig vom Frontend und kontrolliert jeden Aufruf der Custom API.

  • Serverseitige Autorisierung

    Server Logic leitet die Autorisierung aus Server.User ab. Ein Browserwert kann diese Entscheidung nicht überschreiben.

  • Begrenzter Request Body

    JSON Requests über 8.192 UTF-8 Bytes werden vor einem API Aufruf abgelehnt.

  • Allowlisting und Wertebereiche

    Nur search, suggest und getPortalCatalogDetails sind erlaubt. Filterwerte werden gegen bekannte Bereiche und Kataloge geprüft.

  • OData Escaping

    Zeichenketten werden vor dem Aufbau der serverseitigen Filter korrekt behandelt.

  • CSRF Schutz

    Die React Anwendung nutzt webapi.safeAjax und den Power Pages Anti-Forgery Mechanismus.

  • Fehler bleiben Fehler

    Backend-, Transport- und Parserfehler werden nicht als erfolgreiche leere Ergebnisliste ausgegeben.

Power Pages Server Logic prüft Anfragen aus React und Liquid vor dem Zugriff auf Custom API und Dataverse

Sicherer Datenfluss

Wie gelangen Suchfilter sicher von React nach Dataverse? Fünf kontrollierte Schritte vom Browser-Request bis zur aufgelösten Antwort.

  1. Vertrag erzeugen

    React oder Liquid erzeugt einen Request für Suche, Vorschläge, ein Detail oder einen Favoriten Batch.

  2. Sicher senden

    webapi.safeAjax überträgt den Request an Power Pages Server Logic.

  3. Serverseitig prüfen

    Server Logic prüft Operation, 8.192 UTF-8-Bytes, Wertebereiche, Katalogwerte, GUIDs und Portalnutzer.

  4. Custom API aufrufen

    Nur geprüfte Suchfilter oder normalisierte Detail- und Favoriten-IDs erreichen Dataverse.

  5. Antwort auflösen

    Parser und DTO-Auflösung liefern Suchergebnisse, Details oder geordnete Batch-Ergebnisse mit sichtbaren Teilfehlern.

Sicherer Datenfluss von React und Liquid über Power Pages Server Logic zur Dataverse Custom API und als geprüfte Antwort zurück

Technische Deep Dives

Elf Beiträge dokumentieren Architektur, Verträge, Sicherheitsgrenzen, Suchzustand, Konfiguration sowie Detail- und Favoritenabrufe.

  • Gesamtarchitektur und Datenfluss

    Der Hub verfolgt einen Suchvorgang vom Power Pages Web Template über React und Server Logic bis zur geprüften Dataverse Antwort.

    Architekturserie öffnen

  • Modularer React Host

    Der erste Deep Dive zeigt, wie ein zentraler Host und eine JSON-Konfiguration dasselbe React Bundle auf mehreren Power Pages Seiten steuern.

    Host Vertrag ansehen

  • Server Logic als Sicherheitsgrenze

    Der Sicherheitsbeitrag zeigt, wie Request-Größe, Operations Allowlist, serverseitige Autorisierung und OData Aufbau vor der Dataverse API kontrolliert werden.

    Sicherheitsgrenze ansehen

  • Typisierte End-to-End Verträge

    Der Schnittstellenbeitrag verfolgt Requests und Antworten durch Controller, Service, Repository, Power Pages Transport und Laufzeitparser.

    Schnittstellen ansehen

  • URL Zustand und Browserhistorie

    Der URL Beitrag zeigt, wie Landing Navigation, Query Serialisierung, pushState, replaceState und popstate einen teilbaren Suchzustand bilden.

    URL Lifecycle ansehen

  • Entkoppelte Ergebnis Consumer

    Der Event Beitrag zeigt, wie Zustandsänderungen und geprüfte Antworten über getrennte CustomEvents an JavaScript, jQuery und React verteilt werden.

    Event Verträge ansehen

  • Robustes Auto-Suggest

    Der Auto-Suggest Beitrag zeigt Debounce, Request-Sequenzen, getrennte Server-Operationen, gruppierte Vorschläge und klare Zustände für leere Ergebnisse und technische Fehler.

    Auto-Suggest ansehen

  • Filter Sanitization und OData

    Der Deep Dive erklärt die Prüfung von Suchfiltern. Server Logic erzeugt daraus kontrollierte objectfilter, areafilter und levelfilter Parameter.

    Filtervertrag ansehen

  • Editierbare Branchenkonfiguration

    Der Konfigurationsbeitrag zeigt, wie ein gemeinsames Web Template stabile Branchen-IDs an JavaScript und React liefert, während jede Laufzeit und Server Logic unabhängig prüft.

    Konfigurationsvertrag ansehen

  • GUID Detailsuche mit Liquid

    Der Detailbeitrag zeigt, wie GUID, Entitätstyp und Sprache geprüft, Dataverse Antworten aufgelöst und drei Liquid Ergebniszustände gerendert werden.

    Detailsuche ansehen

  • Favoriten als GUID Batch

    Der Favoritenbeitrag dokumentiert 1 bis 50 IDs, Normalisierung, Deduplizierung, stabile Reihenfolge und getrennte Listen für fehlende und ungültige IDs.

    Favoriten Batch ansehen

Technische Verantwortung

Verantwortung für Power Pages, React und Dataverse von der Fachlogik über die Sicherheitsgrenze bis zur Dokumentation.

  • Such- und Filterkonzept

    Überführung fachlicher Suchdimensionen in ein nutzbares Filtermodell und nachvollziehbare URL Parameter.

  • Frontend-Architektur

    React Komponenten, State Management, Controller, Services, Transport und typisierte Ergebnisverträge.

  • Power Pages Integration

    Web Templates, Runtime-Konfiguration, webapi.safeAjax, Server Logic, Liquid Detailaufrufe und Browser Events.

  • Sicherheits- und API Design

    Payload-Grenzen, Operations Allowlist, Autorisierung, OData Filter, GUID-Verträge und Dataverse Custom API.

  • Dokumentation

    Architektur, Konfiguration, Ereignisverträge, Sanitization Matrix und Änderungsverfahren.

  • Wartbare Erweiterung

    Klare Katalogverantwortung und definierte Schritte für neue Filter, Branchen und Ergebnisverbraucher.

Häufige Fragen

Kompakte Antworten zu Architektur, Sicherheit und den implementierten Abrufen.

Wie ist die Power Pages Enterprise-Suche aufgebaut?

Ein Power Pages Web Template startet das React Widget. React verwaltet Bedienung, Filter und URL-Zustand. Server Logic validiert Requests und Autorisierung. Die Dataverse Custom API verarbeitet nur kontrollierte Such-, Vorschlags- und Detailparameter.

Warum übernimmt React nicht die Autorisierung?

React läuft im Browser und kann verändert oder umgangen werden. Server Logic leitet die Autorisierung deshalb aus dem aktuellen Portalnutzer ab. Werte aus URL, Formular oder Request Body gelten nie als verbindliche Sicherheitsentscheidung.

Wie schützt Server Logic den Dataverse-Zugriff?

Server Logic erlaubt nur drei bekannte Operationen, begrenzt JSON Requests auf 8.192 UTF-8-Bytes, prüft Wertebereiche und Katalogwerte und erzeugt kontrollierte OData Parameter. Fehler bleiben sichtbar und werden nicht als leere Erfolgsliste ausgegeben.

Wie funktionieren Detailsuche und Favoriten?

Die Detailsuche prüft GUID, Entitätstyp und Sprache und liefert ein aufgelöstes DTO an Liquid. Der Favoriten Batch verarbeitet 1 bis 50 GUIDs eines Entitätstyps und trennt Ergebnisse, nicht gefundene IDs und ungültige IDs.

Benötigt Ihr Portal eine Suche?

Beschreiben Sie Ihren Workflow. Wir klären gemeinsam, welcher nächste Schritt sinnvoll ist.

Workflow besprechen