200 lines
4.9 KiB
Markdown
200 lines
4.9 KiB
Markdown
# SharePoint MegaMenu Extension
|
|
|
|
**Version:** 1.0.2
|
|
**Framework:** SharePoint Framework (SPFx) 1.4.1
|
|
**Node.js:** v8.17.0
|
|
|
|
Eine moderne, barrierefreie Mega-Menü-Lösung für SharePoint 2019 oder SharePoint SE als ApplicationCustomizer Extension.
|
|
|
|
## 🌟 Features
|
|
|
|
- **3-stufige Navigationshierarchie** basierend auf SharePoint Managed Metadata (Taxonomy)
|
|
- **Responsive Design** mit automatischer Anpassung an verschiedene Bildschirmgrößen
|
|
- **Barrierefreiheit** mit vollständiger Tastaturnavigation und Screenreader-Unterstützung
|
|
- **Einstellungs-Panel** für Administratoren zur Konfiguration
|
|
- **Externe CSS-Unterstützung** für individuelle Anpassungen
|
|
- **Office UI Fabric Integration** für konsistente SharePoint-Optik
|
|
|
|
## 📋 Voraussetzungen
|
|
|
|
- SharePoint 2019 oder SharePoint SE (Subscription Edition)
|
|
- Node.js v8.17.0 (empfohlen)
|
|
- SharePoint Framework Development Tools (SPFx 1.4.1)
|
|
|
|
## 🚀 Installation & Entwicklung
|
|
|
|
### 1. Repository klonen und Abhängigkeiten installieren
|
|
|
|
```bash
|
|
git clone <repository-url>
|
|
cd MegaMenu
|
|
npm install
|
|
```
|
|
|
|
### 2. Entwicklungsserver starten
|
|
|
|
```bash
|
|
gulp serve
|
|
```
|
|
|
|
### 3. Produktionspaket erstellen
|
|
|
|
```bash
|
|
gulp clean
|
|
gulp bundle --ship
|
|
gulp package-solution --ship
|
|
```
|
|
|
|
## 📁 Projektstruktur
|
|
|
|
```
|
|
src/
|
|
├── extensions/
|
|
│ └── megaMenu/
|
|
│ ├── MegaMenuApplicationCustomizer.ts # Haupteinstiegspunkt
|
|
│ ├── MegaMenuRenderer.ts # Menü-Rendering-Logik
|
|
│ ├── MegaMenuSettings.ts # Einstellungs-Panel
|
|
│ └── MegaMenu.css # Styling
|
|
├── services/
|
|
│ ├── TaxonomyNavigationService.ts # Taxonomy-Datenabfrage
|
|
│ ├── UserCustomActionService/ # UserCustomAction-Verwaltung
|
|
│ └── ...
|
|
└── deployment/
|
|
├── add-megamenu.ps1 # Installations-Script
|
|
└── remove-megamenu.ps1 # Deinstallations-Script
|
|
```
|
|
|
|
## ⚙️ Konfiguration
|
|
|
|
### Einstellungs-Panel (Admin-Bereich)
|
|
|
|
Das MegaMenu verfügt über ein Einstellungs-Panel, das über das Zahnrad-Icon (⚙️) im Menü zugänglich ist:
|
|
|
|
1. **Name des Navigations-Termsets**: Der Name des Managed Metadata Termsets, das als Datenquelle dient
|
|
2. **Pfad zu zusätzlicher CSS-Datei**: Optional - URL zu einer benutzerdefinierten CSS-Datei
|
|
|
|
### PowerShell-Deployment
|
|
|
|
```powershell
|
|
# Installation
|
|
.\src\deployment\add-megamenu.ps1
|
|
|
|
# Deinstallation
|
|
.\src\deployment\remove-megamenu.ps1
|
|
```
|
|
|
|
## 🎨 Anpassungen
|
|
|
|
### CSS-Customization
|
|
|
|
Das MegaMenu kann über externe CSS-Dateien angepasst werden. Wichtige CSS-Klassen:
|
|
|
|
```css
|
|
/* Haupt-Container */
|
|
#Mega-Menu { }
|
|
|
|
/* Top-Level Menüpunkte */
|
|
#Mega-Menu > ul > li > a { }
|
|
|
|
/* Mega-Menü Dropdown */
|
|
.mega-menu { }
|
|
|
|
/* Kategorien im Dropdown */
|
|
.mega-menu-category { }
|
|
|
|
/* Links in Kategorien */
|
|
.mega-menu-category ul li a { }
|
|
|
|
/* Einstellungs-Panel */
|
|
.mm-settings-panel { }
|
|
```
|
|
|
|
### Accessibility Features
|
|
|
|
- **Skip-Links** für Screenreader
|
|
- **ARIA-Rollen** und Labels
|
|
- **Fokus-Management** mit sichtbaren Fokus-Indikatoren
|
|
- **Tastaturnavigation** mit Tab/Shift+Tab/Escape
|
|
- **High Contrast Modus** Unterstützung
|
|
|
|
## 🔧 Build-Befehle
|
|
|
|
| Befehl | Beschreibung |
|
|
|--------|-------------|
|
|
| `gulp serve` | Entwicklungsserver mit Live-Reload |
|
|
| `gulp build` | Entwicklungs-Build (Debug-Modus) |
|
|
| `gulp bundle --ship` | Produktions-Build (Optimiert) |
|
|
| `gulp package-solution --ship` | SharePoint Package (.sppkg) erstellen |
|
|
| `gulp clean` | Build-Artifacts löschen |
|
|
| `gulp test` | Unit-Tests ausführen |
|
|
|
|
## 📦 Deployment
|
|
|
|
1. **Paket erstellen:**
|
|
```bash
|
|
gulp clean && gulp bundle --ship && gulp package-solution --ship
|
|
```
|
|
|
|
2. **SharePoint App Catalog:**
|
|
- `.sppkg` Datei aus `sharepoint/solution/` hochladen
|
|
- App genehmigen und für alle Sites verfügbar machen
|
|
|
|
3. **Site-spezifische Aktivierung:**
|
|
- PowerShell-Scripts verwenden
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Häufige Probleme
|
|
|
|
**Problem:** Menü wird nicht angezeigt
|
|
**Lösung:** Termset-Name in den Einstellungen prüfen
|
|
|
|
**Problem:** CSS-Styling funktioniert nicht
|
|
**Lösung:** Externe CSS-URL und CORS-Einstellungen überprüfen
|
|
|
|
**Problem:** Build-Fehler
|
|
**Lösung:** Node.js Version prüfen (v8.17.0 empfohlen)
|
|
|
|
### Debug-Modus
|
|
|
|
```bash
|
|
# Detaillierte Build-Ausgabe
|
|
gulp bundle --verbose
|
|
|
|
# TypeScript-Fehler anzeigen
|
|
gulp build
|
|
```
|
|
|
|
## 🔄 Versionshistorie
|
|
|
|
### v1.0.2 (Aktuell)
|
|
- Einstellungs-Panel implementiert
|
|
- Fokus-Management verbessert
|
|
- CSS-Optimierungen für SharePoint-Konsistenz
|
|
- Barrierefreiheit-Verbesserungen
|
|
|
|
### v1.0.1
|
|
- Responsive Design hinzugefügt
|
|
- Performance-Optimierungen
|
|
|
|
### v1.0.0
|
|
- Initiale Release
|
|
- 3-stufige Navigation
|
|
- Grundlegende Accessibility
|
|
|
|
## 👥 Mitwirkende
|
|
|
|
- Entwicklung: Matthias Glubrecht
|
|
- Framework: SharePoint Framework (Microsoft)
|
|
- UI: Office UI Fabric (Microsoft)
|
|
|
|
## 📄 Lizenz
|
|
|
|
tbd
|
|
|
|
## 🆘 Support
|
|
|
|
Bei Fragen oder Problemen:
|
|
1. Issues im Repository erstellen
|
|
2. Dokumentation und Troubleshooting-Bereich prüfen
|