Wir haben für einen unserer Kunden eine Applikation für eine SharePoint Dokumentenverwaltung entwickelt. Dabei können die Benutzer Dokumente aus unterschiedlichen SharePoint Bibliotheken verwalten. Um die Anwendung der Applikation zu vereinfachen, haben wir eine neue Suchfunktionalität umgesetzt. Ein Benutzer kann dadurch nach Metadaten des Dokuments, wie zum Beispiel dem Dokumententitel, filtern. Weiters haben wir auch eine Dokumenteninhaltssuche eingebaut, welche den gesamten Inhalt des Dokuments nach dem eingebenen Text durchsucht.

Erstellung einer ComboBox Komponente

Die grafische Oberfläche haben wir in der Applikation mittels einer SPFx Anwendung umgesetzt. Für die Suchfunktionalität haben wir eine eigene ComboBox Komponente erstellt, um dem Benutzer Suchvorschläge anbieten zu können. Diese erleichterten die Anwendung der neuen Suchfunktionalität, da wir die möglichen Filterwerte bereits bei der Eingabe des Suchbegriffs auf die möglichen Werte einschränken. Der User hat die Möglichkeit einen Suchvorschlag auszuwählen, indem er entweder den Suchvorschlag direkt anklickt oder mit den Pfeiltasten zu dem gewünschten Vorschlag navigiert und diesen mit Enter bestätigt. Der Filter wird nun angewandt und wir stellen nur mehr Dokumente in der Liste dar, die dem gewählten Filter ensprechen. Angewandte Filter werden durch eine Umrahmung hervorgehoben, um sofort zu erkennen, welche Filter bereits gesetzt wurden.

 

ComboBox für Suchvorschläge
ComboBox für Suchvorschläge

Asynchrones Laden der Suchvorschläge

Wir wenden alle gewählten Filter immer in Kombination auf die Dokumente an. Daher laden wir die Suchvorschläge bei jedem Klick in das Filterfeld erneut und asynchron vom SharePoint, um wirklich nur die möglichen Filterwerte vorzuschlagen. Für das Laden der möglichen Filterwerte holen wir uns zuerst alle Felder der SharePoint-Liste. Anschließend iterieren wir über die Elemente der SharePoint-Liste, welche den bereits gewählten Filtern entsprechen. Dabei speichern wir alle möglichen Filterwerte in ein Array, welches schlussendlich der ComboBox zugewiesen wird. Die ComboBox rendert diese Filterwerte dann als Suchvorschläge in einem Dropdown, welche ausgewählt werden können.

Habt ihr noch weitere Fragen zu unserer Suchfunktionalität, schreibt uns einfach einen Kommentar oder nehmt mit uns Kontakt auf.