# SharePoint MegaMenu Barrierearme, dreistufige Portalnavigation auf Basis von SharePoint Managed Metadata für SharePoint Server Subscription Edition und SharePoint Server 2019. | Eigenschaft | Wert | |---|---| | Version | 2.0.1 | | SharePoint Framework | SPFx 1.4.1 | | Node.js | 8.17.0 | | Zieloberfläche | Moderne SharePoint-Seiten | | Paket | `sharepoint/solution/mega-menu.sppkg` | ## Funktionen - Dreistufige Navigation aus einem Managed-Metadata-Termset - Auswahl des Termsets per GUID oder, abwärtskompatibel, per Name - Benutzerdefinierte Sortierung aus dem Term Store - Unterstützung der Navigations-Eigenschaften `_Sys_Nav_SimpleLinkUrl`, `_Sys_Nav_TargetUrl` und `_Sys_Nav_HoverText` - Auflösung von `~sitecollection` in Navigations-URLs - Markierung des aktuellen Menüpunktes und seiner übergeordneten Einträge - Bedienung mit Maus, Tastatur und Touch - Responsive Darstellung - Optionales zusätzliches Stylesheet - Taxonomy-Cache mit konfigurierbarer Ablaufzeit - Bereinigter SPFx-Lifecycle ohne verbleibende globale Event Listener - Deutsche und englische Statusmeldungen ## Architektur ```text UserCustomAction.ClientSideComponentProperties │ ▼ MegaMenuApplicationCustomizer │ ├── TaxonomyNavigationService │ └── SPTermStorePickerService │ └── Default Site Collection Term Store │ └── MegaMenuRenderer ├── semantische Navigation ├── Fokus- und Tastatursteuerung └── responsive Darstellung ``` Das MegaMenu wird einmal pro Site Collection konfiguriert. Das Paket wird mit `skipFeatureDeployment: true` zentral über den App Catalog bereitgestellt, damit das SPFx-Bundle ohne eine App-Installation in jedem einzelnen Web verfügbar ist. PortalSettings speichert die zentrale Konfiguration im Property Bag des Root Webs. Eine Site-Collection-Action aktiviert das MegaMenu auf dem Root Web sowie auf vorhandenen und zukünftigen Unterwebs. Das MegaMenu selbst enthält keine eigene Administrationsoberfläche. ## Voraussetzungen - SharePoint Server Subscription Edition oder SharePoint Server 2019 - konfigurierter App Catalog - konfigurierter App Management Service - ein Termset im Standard-Term-Store der Site Collection - Leseberechtigung der Benutzer auf den Managed-Metadata-Service - für Entwicklung und Build: Node.js 8.17.0 und eine zu SPFx 1.4.1 passende npm-Version ## Konfiguration Die UserCustomAction unterstützt folgende `ClientSideComponentProperties`: ```json { "termSetId": "6f36a1a8-7bd8-4ed0-a22f-e219f4d2eacc", "termSetName": "Global Navigation", "cacheMinutes": 15, "debug": false } ``` | Eigenschaft | Typ | Standard | Beschreibung | |---|---:|---:|---| | `termSetId` | GUID | leer | Bevorzugte, eindeutige Identifikation des Termsets | | `termSetName` | String | leer | Rückwärtskompatibler Fallback, wenn keine gültige `termSetId` vorhanden ist | | `cacheMinutes` | Zahl | `15` | Gültigkeit des Session-Caches, zulässig sind 1 bis 1440 Minuten | | `debug` | Boolean | `false` | Aktiviert zusätzliche Konsolenausgaben | `termSetId` hat Vorrang vor `termSetName`. Für neue Installationen wird die GUID empfohlen, weil Termset-Namen nicht zwingend eindeutig sind. ### Kompatibilität mit PortalSettings PortalSettings verwaltet `termSetId`, `termSetName`, `cacheMinutes` und `debug`. Individuelle Gestaltung wird nicht vom MegaMenu selbst geladen, sondern zentral über die Solution Custom Branding bereitgestellt. ## Termset-Aufbau Die Darstellung unterstützt drei Ebenen: ```text Ebene 1: Hauptnavigation ├── Ebene 2: Kategorie │ ├── Ebene 3: Link │ └── Ebene 3: Link └── Ebene 2: Kategorie ``` Für Zieladressen werden die lokalen benutzerdefinierten Eigenschaften des Terms ausgewertet: 1. `_Sys_Nav_SimpleLinkUrl` 2. `_Sys_Nav_TargetUrl` Optional kann `_Sys_Nav_HoverText` als ergänzender Hilfetext verwendet werden. Veraltete Terms werden nicht angezeigt. Terms, die nicht für Tagging verfügbar sind, bleiben für Navigationsszenarien sichtbar. ## Build SPFx 1.4.1 verwendet die Legacy-Gulp-Toolchain. Neuere Node-Versionen sind nicht kompatibel. ```powershell npm install npm run package ``` Alternativ einzeln: ```powershell gulp clean gulp bundle --ship gulp package-solution --ship ``` Das fertige Paket befindet sich anschließend unter: ```text sharepoint/solution/mega-menu.sppkg ``` ## Deployment 1. `mega-menu.sppkg` in den App Catalog laden. 2. Die Solution freigeben. 3. Die App im Root Web der gewünschten Site Collection installieren. Der MegaMenu Application Customizer wird dort zunächst web-scoped registriert und von PortalSettings erkannt. 4. Das Termset in PortalSettings konfigurieren. Das folgende Skript ist nur erforderlich, wenn PortalSettings nicht verwendet wird oder eine vollständig skriptbasierte Vorkonfiguration gewünscht ist. Empfohlen mit Termset-GUID: ```powershell .\deployment\add-megamenu.ps1 ` -SiteUrl 'https://sharepoint/sites/portal' ` -TermSetId '6f36a1a8-7bd8-4ed0-a22f-e219f4d2eacc' ` -TermSetName 'Global Navigation' ` -CacheMinutes 15 ``` Abwärtskompatibel nur mit Namen: ```powershell .\deployment\add-megamenu.ps1 ` -SiteUrl 'https://sharepoint/sites/portal' ` -TermSetName 'Global Navigation' ``` Das Skript speichert die Konfiguration zentral unter `PortalSettings.MegaMenu.Configuration`, entfernt alte beziehungsweise doppelte Component IDs und synchronisiert die neue web-scoped Runtime-Bindung idempotent auf alle vorhandenen Webs. Fuer spaeter angelegte Unterwebs kann es ohne Nebenwirkungen erneut ausgefuehrt werden. ## Individuelles Branding Zusätzliche Stylesheets werden zentral über die Solution Custom Branding eingebunden. Das MegaMenu besitzt bewusst keine eigene `cssUrl`-Property. Die wichtigsten CSS-Klassen sind: ```css #CustomNavigation { } #Mega-Menu { } .mega-menu-top-level { } .mega-menu-top-item { } .mega-menu { } .mega-menu-grid { } .mega-menu-category { } .mega-menu-links { } ``` Viele Farben und Abstände können über CSS Custom Properties überschrieben werden, beispielsweise: ```css :root { --megaMenuNavBackground: #5f6f74; --megaMenuNavTextColor: #ffffff; --megaMenuPanelWidth: 1280px; --megaMenuZIndex: 6000; } ``` ## Cache Das geladene Termset wird im `sessionStorage` des Browsers gespeichert. Der Schlüssel ist mit `MegaMenu:TermSet:` namensräumlich getrennt. Nach Ablauf von `cacheMinutes` wird das Termset automatisch neu geladen. Für einen sofortigen administrativen Test kann der Session-Cache in den Browser-Entwicklertools gelöscht oder ein neues privates Browserfenster verwendet werden. ## Barrierefreiheit - semantisches `