Torsten Brendgen
bf9781d043
- Created Accordion web part with SPFx 1.4.1 framework. - Implemented dynamic loading of SharePoint lists and fields. - Added configuration options for title, content, and category fields. - Included support for multiple open sections and initial state settings. - Developed HTML sanitizer for rich text content. - Implemented accessible accordion UI with category grouping. - Added localization support for English and German languages. - Created necessary configuration files for deployment and asset management. - Added validation script to ensure project compliance with standards.
63 lines
2.3 KiB
Markdown
63 lines
2.3 KiB
Markdown
# Accordion
|
|
|
|
Accordion 1.0.0 ist ein listenbasiertes SPFx-WebPart für SharePoint Server Subscription Edition. Es orientiert
|
|
sich funktional am PnP-Beispiel `react-accordion-dynamic-section`, verwendet aber die mit SharePoint SE
|
|
kompatible SPFx-1.4.1-/React-15-Toolchain.
|
|
|
|
## Funktionen
|
|
|
|
- Auswahl einer nicht ausgeblendeten Liste aus dem aktuellen Web
|
|
- dynamische Auswahl von Überschrift-, Inhalt-, Kategorie- und Sortierspalte
|
|
- optionales Gruppieren nach Kategorien
|
|
- auf- oder absteigende Sortierung
|
|
- initial vollständig geschlossen, erster Eintrag geöffnet oder alle Einträge geöffnet
|
|
- wahlweise genau ein oder mehrere gleichzeitig geöffnete Bereiche
|
|
- semantische Buttons mit `aria-expanded`, `aria-controls` und zugeordneten Inhaltsregionen
|
|
- SharePoint-Themefarben und Standardtypografie
|
|
- bereinigte Rich-Text-Ausgabe ohne Skripte, Eventhandler, Bilder oder unsichere Links
|
|
- zentrale Bereitstellung über den App Catalog
|
|
|
|
## Erwartete Liste
|
|
|
|
Es wird keine fachliche Liste provisioniert. Eine einfache FAQ-Liste kann beispielsweise folgende Spalten besitzen:
|
|
|
|
| Spalte | Typ | Verwendung |
|
|
|---|---|---|
|
|
| `Title` | Eine Textzeile | Überschrift |
|
|
| `Content` | Mehrere Textzeilen mit Rich Text | Inhalt |
|
|
| `Category` | Auswahl oder Text | optionale Gruppierung |
|
|
| `SortOrder` | Zahl | optionale Sortierung |
|
|
|
|
Nach dem Hinzufügen des WebParts werden Liste und Spalten im Property Pane ausgewählt. Änderungen an den
|
|
Listeneinträgen erscheinen beim nächsten Laden beziehungsweise Rendern der Seite automatisch.
|
|
|
|
## Version und Build
|
|
|
|
| Eigenschaft | Wert |
|
|
|---|---|
|
|
| Version | 1.0.0 |
|
|
| SharePoint Framework | 1.4.1 |
|
|
| React | 15.6.2 |
|
|
| Node.js | 8.17.0 |
|
|
| npm | 6.13.4 |
|
|
|
|
```powershell
|
|
npm install
|
|
npm run package
|
|
```
|
|
|
|
Das Paket wird unter `sharepoint/solution/accordion.sppkg` erzeugt. Es kann im App Catalog zentral bereitgestellt
|
|
werden. Danach steht das WebPart unter dem Namen **Accordion** beziehungsweise **Akkordeon** im WebPart-Picker zur Verfügung.
|
|
|
|
## Sicherheit
|
|
|
|
Der Inhalt einer Rich-Text-Spalte wird nicht ungeprüft ausgegeben. Erlaubt sind grundlegende Text-, Listen-,
|
|
Tabellen- und Linkelemente. Skripte, eingebettete Inhalte, Eventhandler, Inline-Styles und unsichere URL-Schemata
|
|
werden entfernt.
|
|
|
|
## Referenz
|
|
|
|
Die fachliche Vorlage ist das PnP Community Sample:
|
|
https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-accordion-dynamic-section
|
|
|