# 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
- Filter auf eine konkrete, aktuell in der Liste verwendete Kategorie
- 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. Sobald eine
Kategorie-Spalte festgelegt ist, kann unter **Angezeigte Kategorie** entweder eine der aktuell verwendeten
Kategorien oder **Alle Kategorien** ausgewählt werden. Ä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-web-part.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