- 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.
2.3 KiB
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-controlsund 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 |
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