Power Pages Design-System: Warum CSS löschen gefährlich ist

Im ersten Teil haben wir gesehen, dass Power Pages im Hintergrund automatisch Systemdateien lädt. Viele Entwickler kommen daher auf die Idee: Wenn ich das CSS nicht konfigurieren kann, lösche ich die Referenzen einfach per JavaScript aus dem DOM.

Grundsätzlich ist das technisch möglich. Wenn du diesen Code in dein Web-Template im „Header“ einfügst, werden die Referenzen nach dem Laden der Seite entfernt:

<script>
  // Entfernt unerwünschte Bootstrap-Dateien und Styles document.querySelectorAll( 'link[href*="bootstrap"], ' +
  'script[src*="bootstrap"], ' + 'link[href*="account"], ' + 'link[href*="preform"], ' +
  'link[href*="portalbasictheme"], ' + 'link[href*="theme"], ' + 'link[href*="glyphicons"], ' +
  'link[href*="font-awesome"]' ).forEach(el => el.remove());
</script>

Erklärung der selektierten Dateien

Die harte Realität: Das Portal bricht zusammen

Sobald dieser Code ausgeführt wird, verschwinden die Standard-Styles. Das Resultat ist ein komplett ungestaltetes, kaputtes HTML-Gerüst. Doch es wird noch schlimmer: Da du auch das JavaScript von Bootstrap entfernst, verlieren interaktive Power Pages Komponenten ihre Funktionalität.

Es kommt zu schwer nachvollziehbaren Fehlern, wie im Bild unten zu sehen ist. Die Analyse und Korrektur solcher Fehler ist extrem zeitaufwendig.

<platzhalter: Screenshot der Browser-Konsole mit dem Fehler “Error: color is invalid in setSlot()“>

Das Timing-Problem lösen

Wrapped man den Code in ein window.onload-Event löst man das Problem mit dem TypeError, da der Code erst ausgeführt wird, wenn das DOM vollständig geladen ist. Das Event window.onload garantiert, dass alle Ressourcen (Bilder, Skripte, Styles) vollständig geladen sind, bevor der Code ausgeführt wird. Dadurch wird die Fehlermeldung vermieden, da die Elemente, auf die zugegriffen wird, bereits im DOM vorhanden sind.

// This script removes all references to the old Bootstrap and related styles/scripts from the DOM after the page has loaded
window.addEventListener('load', () => {
  document
    .querySelectorAll(
      'link[href*="bootstrap"], ' +
        'script[src*="bootstrap"], ' +
        'link[href*="account"], ' +
        'link[href*="preform"], ' +
        'link[href*="portalbasictheme"], ' +
        'link[href*="glyphicons"], ' +
        'link[href*="font-awesome"]'
    )
    .forEach((el) => el.remove());
});

Dieser Ansatz ist die einzige Möglichkeit, die Standard-Styles und -Skripte von Power Pages zu entfernen, ohne dass ein Fehler im Browser auftritt

3 Konsequenzen beim Entfernen von Power Pages CSS

Bevor du versuchst, das Portal von den Microsoft Standarddateien zu befreien, musst du drei wichtige Konsequenzen beachten:

• Funktionsverlust der Komponenten: Formulare, Datagrid-Listen und Navigationselemente von Power Pages verlieren ihr Layout. Sie bauen direkt auf den gelöschten Bootstrap-Klassen auf.
• Defekte Anmeldeseiten: Der Login- und Profil-Bereich wird in Power Pages unbrauchbar. Diese tief integrierten Microsoft-Seiten nutzen die System-Styles intensiv.
• Hoher Wartungsaufwand bei Updates: Bei jedem Power Pages Update können sich Pfade ändern. Ein manueller Skript-Ansatz produziert so schnell unvorhersehbare Layout-Fehler.

Power Pages Design-System: Überschreiben statt Löschen

Anstatt die Systemdateien von Power Pages mit JavaScript aus dem DOM zu zwingen, ist ein professionelles CSS-Management die bessere Wahl. Nutze ein eigenes Design-System und überschreibe das Standard-CSS gezielt.

Um dein eigenes Layout in Power Pages stabil einzubinden, erstellst du eine Custom CSS-Datei und lädst diese nach den Microsoft-Standarddateien. Mit spezifischen CSS-Selektoren oder einem eigenen Klassen-Präfix erhalten deine Styles automatisch Priorität. Definierst du eigene Klassen (wie .my-portal-button) oder nutzt die Container-ID zur CSS-Gewichtung, zwingst du den Browser, dein Design-System zu verwenden. Gleichzeitig bleibt die Grundfunktionalität aller Power Pages Komponenten erhalten.

Auf diese sichere Weise bleibt dein Microsoft Power Pages Portal stabil, überlebt alle zukünftigen System-Updates und entspricht dennoch hundertprozentig deinen individuellen Design-Anforderungen.