Frontend-Limitierungen in Power Pages
Standard Power Pages liefert funktionale Komponenten, ist jedoch durch ältere Bootstrap-Strukturen und feste Vorlagen gestalterisch eingeschränkt.
Moderne Webanwendung als Ziel
Zeitgemäße Bedienbarkeit mit modernem CSS-Framework umsetzen, ohne die Plattform Power Pages und ihr Sicherheitsmodell zu umgehen.
Technische Machbarkeitsstudie
Nachweis, dass E-Commerce, Payment-Anbindung und Nutzungsanalyse sauber innerhalb von Power Pages realisierbar sind.
Erprobung von Plattform-Grenzen
Gezielte Untersuchung von Web API, Form-Engine, Authentifizierung und Cloud-Anbindung im Enterprise-Kontext.
E-Commerce auf Power Pages.
Technischer Showcase mit Stripe-Payment, Web API Warenkorb und Application Insights.
Eigenständig entwickeltes Referenzprojekt, das moderne Frontend-Architektur, durchgängige E-Commerce-Prozesse und Nutzungsanalyse auf Microsoft Power Pages verbindet.
Auf dieser Seite
Warum dieses Projekt
Nachweis, dass eine Low-Code-Plattform mit der passenden Frontend- und Cloud-Architektur anspruchsvolle Webanwendungen tragen kann.
Workflow in Aktion
Vom anonymen Besucher über Anmeldung, Warenkorb-Validierung und Stripe-Checkout bis zum persönlichen Analytics-Dashboard.
Die User-Journey
Von der Produktsuche bis zur Auswertung in fünf aufeinander abgestimmten Schritten.
Anonymer Zugriff und Produktsuche
Besucher durchstöbern den Produktkatalog ohne Anmeldung und sehen Produktdetails direkt im Portal.
Authentifizierung und Personalisierung
Anmeldung über das Power Pages Identity-System mit anschließender Synchronisation von Warenkorb und Bestellhistorie.
Warenkorb-Management und Validierung
Dynamischer Warenkorb mit Echtzeit-Prüfung über die Power Pages Web API und direkter visueller Rückmeldung.
Stripe-Checkout und Zahlung
Serverseitig erzeugte Stripe-Checkout-Session mit Rückmeldung und automatischer Synchronisation nach Dataverse.
Analytics und Auswertung
Application Insights erfasst Interaktionen nach Einwilligung und speist aggregierte Auswertungen zurück in das Portal.
E-Commerce Plattform
Produktkatalog, Echtzeit-Warenkorb und Bestellhistorie auf Basis von Microsoft Dataverse.
Produktkatalog
Eigene Dataverse-Tabellen für Produkte mit Kategorien, Preisen, Bildern und strukturierten Beschreibungen.
Warenkorb in Echtzeit
Web-API-basierter Warenkorb mit Live-Updates und benutzergebundener Speicherung ohne Caching-Verzug.
Klare Login-Hinweise
Gezielte Benachrichtigung für nicht angemeldete Besucher beim Hinzufügen von Artikeln ohne harte Seitenumleitung.
Direktes Status-Feedback
Sichtbare Bestätigungen für alle Warenkorb-Aktionen über strukturierte Toast-Meldungen.
Stripe Checkout
Serverseitiger Zahlungsfluss über Power Automate zur sicheren Erstellung von Checkout-Sessions.
Bestellhistorie
Gruppierte Bestellübersicht mit Statusverfolgung direkt im persönlichen Portalbereich.
Warenkorb-Validierung
Prüfregeln über die Power Pages Web API mit direkter Rückmeldung im Browser.
Gezielte Validierung ohne unnötige Seitenwechsel
Anmeldeprüfung ohne harte Umleitung
Anonyme Besucher erhalten beim Hinzufügen eines Artikels einen direkten Hinweis zur Anmeldung.
Duplikat-Erkennung
Die Web API prüft vor dem Speichern, ob das Produkt bereits im Warenkorb liegt, und verhindert doppelte Einträge.
Kontextabhängige Rückmeldung
Klare Statusmeldungen informieren unmittelbar über Erfolg, Hinweise oder abgelehnte Aktionen.
Payment-Integration
Serverseitig gesteuerter Bezahlprozess mit Power Automate, Stripe und Dataverse.
Serverseitige Session-Erstellung
Ein Power Automate Flow verarbeitet Warenkorb- und Nutzerdaten, erstellt die Stripe-Session und liefert die Checkout-URL zurück.
Erfolgs- und Abbruchseiten
Eigene Rückkehrseiten im Portal verarbeiten den Zahlungsstatus und aktualisieren die Anzeige für den Nutzer.
Bestellbestätigung in Dataverse
Alle abgeschlossenen Bestelldaten werden strukturiert in Dataverse-Tabellen für Historie und Auswertung gespeichert.
Nachgelagerter Bestell-Workflow
Nach erfolgreichem Kauf folgen Warenkorb-Leerung, E-Mail-Bestätigung mit Produktübersicht und Statusaktualisierung.
Application Insights
Einwilligungsbasierte Telemetrie und automatisierte Datenaggregation über Azure Functions nach Dataverse.
Vollständige Instrumentierung
Seitenaufrufe, Klicks und Checkout-Schritte werden nach Zustimmung erfasst und an Azure Application Insights übertragen.
Tägliche Datenaggregation
Azure Functions und Logic Apps bereiten Telemetriedaten auf und speichern strukturierte Zusammenfassungen in Dataverse.
Einwilligung und Lifecycle
Der Adapter lädt das Application Insights SDK erst nach Einwilligung und beendet die Instanz beim Widerruf.
Application Insights Consent-Lifecycle
Analytics-Dashboard
Interaktive Auswertung der aggregierten Nutzungsdaten direkt innerhalb von Power Pages.
Aktivitätstrend über Zeit
Gesamtanzahl der erfassten Ereignisse pro Tag im Zeitverlauf.
Gesamtaktivität pro Seite
Vergleich der Interaktionen über alle besuchten Portalseiten hinweg.
Klicks und Seitenaufrufe
Gegenüberstellung von Klick-Ereignissen und Seitenaufrufen zur Einordnung der Interaktionstiefe.
Ereignistypen pro Seite
Aufschlüsselung von Klicks und Aufrufen je einzelner Seite im Portal.
Detaillierte Ereignisverteilung
Übersicht der konkreten Nutzeraktionen auf den wichtigsten Seiten des Showcases.
Authentifizierung
Neu gestaltete Anmelde- und Registrierungsseiten bei voller Kompatibilität mit dem Power Pages Identity-System.
Modernisierte Oberflächen
Die Standardseiten für Anmeldung und Registrierung wurden mit TailwindCSS und DaisyUI vollständig neu aufgebaut.
Inline-Validierung
Direkte Formularprüfung mit klaren Rückmeldungen unterstützt Nutzer bereits während der Eingabe.
Volle Plattform-Sicherheit
Captcha, E-Mail-Bestätigung, Passwort-Regeln und Session-Management von Power Pages bleiben vollständig erhalten.
Technische Umsetzung
Anbindung eigener Formularoberflächen an die native Power Pages Authentifizierungs-Engine.
Analyse der Power Pages Form-Engine
Untersuchung der nativen Formular-Logik, um Event-Handler, Validierungsregeln und Server-Kommunikation sauber anzubinden.
Übernahme serverseitiger Sicherheits-Tokens
Extraktion serverseitig erzeugter Anti-Forgery-Tokens, Action-URLs und Validierungsmeldungen in die neue Oberfläche.
Barrierearme Captcha-Einbindung
Neugestaltung der Captcha-Komponente inklusive Audio-Ausgabe, Nachlade-Funktion und ARIA-Attributen.
Session- und Cookie-Kompatibilität
Vollständige Beibehaltung von RequestVerificationToken und Session-Handling innerhalb der Power Pages Architektur.
Frontend-Redesign
Eigenständige Oberflächenschicht mit TailwindCSS v4 und DaisyUI v5 über dem Power Pages Backend.
Ablösung der Standard-Styles
Mitgelieferte Standard-Stylesheets wie Bootstrap und Theme-CSS wurden entfernt, um Styling-Konflikte zu vermeiden.
TailwindCSS v4 und DaisyUI v5
Aufbau einer konsistenten, responsiven Komponentenstruktur unabhängig von den Standard-Vorlagen.
Erhalt der Plattformfunktionen
Authentifizierung, Berechtigungen und Routing von Power Pages arbeiten unverändert unter der neuen Oberfläche.
Header und Navigation
Neuentwicklung der Portalnavigation mit dynamischer Link-Synchronisation und Tastaturbedienbarkeit.
Funktional identisch, visuell erneuert
Anmeldestatus, Benutzermenü und dynamische Seitenlinks wurden ohne Abhängigkeit von Bootstrap-Klassen neu umgesetzt.
Automatische Synchronisation
In Power Pages gepflegte Navigationslinks erscheinen weiterhin automatisch im Header.
Barrierearme mobile Navigation
Übersichtliches mobiles Menü mit klarer Tastaturführung und passenden ARIA-Attributen.
Technologie-Stack
Eingesetzte Frameworks, Cloud-Dienste und Schnittstellen im Showcase-Projekt.
TailwindCSS v4
Utility-First CSS-Framework für schlanke, wartbare Oberflächengestaltung.
DaisyUI v5
Komponenten-Basis für konsistente Formulare, Dialoge und Statusmeldungen.
Chart.js
JavaScript-Bibliothek für interaktive Diagramme auf Canvas-Basis.
Stripe API
Zahlungsdienstleister für sichere Checkout-Sessions.
Power Automate
Workflow-Engine für Zahlungsabwicklung und Bestellprozesse.
Azure Functions
Serverlose Verarbeitung für Datenaggregation und Transformation.
Application Insights
Telemetrie- und Monitoring-Dienst für Nutzungsdaten.
Microsoft Dataverse
Zentrale Datenhaltung für Produkte, Warenkörbe und Berichte.
Power Pages Web API
Schnittstelle für direkte Lese- und Schreiboperationen aus dem Browser.
Consent Management
Einwilligungssteuerung vor dem Laden externer Telemetrie-Dienste.
Azure Logic Apps
Zeitgesteuerte Überführung aggregierter Telemetriedaten nach Dataverse.
Liquid und FetchXML
Serverseitige Datenabfragen innerhalb von Power Pages Templates.
Dataverse-Datenmodell
Normalisiertes Tabellenmodell für Produktkatalog, Warenkorb, Bestellungen und aggregierte Telemetrie.
Eigenständiges Datenmodell auf Power Pages Basis
E-Commerce Entitäten
Tabellen für Produkte, Warenkorb, Warenkorb-Historie und Bestellbestätigungen sind mit klaren Beziehungen modelliert.
Analytics Entitäten
Eigene Tabellen für tägliche Zusammenfassungen, Event-Verteilungen und Seitenaufrufe ermöglichen schnelles Reporting.
Automatisierte Workflows
Power Automate Flows und Azure-Dienste verbinden Warenkorb, Zahlungsstatus und tägliche Datenaggregation.
Erkenntnisse
Architektonische Ergebnisse aus der Umsetzung einer vollständigen E-Commerce- und Analytics-Lösung auf Power Pages.
Moderne UX auf Low-Code-Basis
Mit fundiertem Plattform-Verständnis lassen sich zeitgemäße Webanwendungen auf Power Pages realisieren, ohne die Plattform zu wechseln.
Eigenständige Frontend-Schicht
Power Pages übernimmt Authentifizierung und Datenhaltung, während TailwindCSS v4, DaisyUI v5 und Chart.js die Oberfläche steuern.
Durchgängige Geschäftsprozesse
Warenkorb, Stripe-Zahlung, Application Insights, Azure Functions und Dataverse greifen als durchgängiger Prozess ineinander.
Web API für Echtzeit-Interaktion
Direkte API-Aufrufe ermöglichen unmittelbare Rückmeldungen im Warenkorb ohne vollständiges Neuladen der Seite.
Hybride Cloud-Architektur
Azure Functions und Logic Apps ergänzen Power Pages dort, wo Hintergrundaggregation und externe Dienste benötigt werden.
Kontrolle über Standard-Formulare
Die genaue Kenntnis der nativen Form-Engine erlaubt individuelle Login- und Registrierungsseiten bei voller Plattform-Sicherheit.
Ähnliche Anforderung im Portal?
Beschreiben Sie Ihren Workflow. Wir klären gemeinsam, welcher nächste Schritt sinnvoll ist.
Workflow besprechen