109 Komponenten im Katalog
Von der einzelnen Suchleiste bis zur kompletten Anwendungsstruktur inklusive App Bar und Navigation. Sie nehmen, was Sie brauchen.
Bild
Web Components: iFinder-Suche in Ihrer eigenen Oberfläche
Mit den iFinder Web Components integrieren Sie Enterprise Search direkt in Portale, Intranets und Fachanwendungen. Die nativen JavaScript Custom Elements stellen Suchleiste, Filter, Trefferlisten und KI-Assistenz als einzeln nutzbare Komponenten bereit und lassen sich an das eigene Corporate Design anpassen.
Enterprise Search mit iFinder Web Components flexibel integrieren
Suchoberflächen modular in bestehende Anwendungen einbetten
Mit iFinder Web Components lässt sich die Suchoberfläche flexibel in bestehende Anwendungen integrieren. iFinder 6 stellt dafür Suchleiste, Filter, Trefferlisten und weitere Funktionen als einzeln nutzbare Web Components bereit. Die gewünschten Bausteine werden per JavaScript und HTML eingebunden und können über CSS an das Corporate Design angepasst werden.
Die gleichen Komponenten bilden auch die mitgelieferte Referenzoberfläche des iFinder. Sie arbeiten damit nicht mit einer separaten Integrationslösung, sondern mit denselben Bausteinen, auf denen auch die iFinder-Oberfläche selbst basiert.
Modulare Web Components für flexible Enterprise-Search-Integration
Kein Framework-Zwang
Die Komponenten sind native JavaScript Custom Elements. Sie laufen in React, Angular, Vue, Next.js oder in einer Seite ohne jedes Framework.
Styling ohne Umwege
Kein Shadow DOM, keine harte Kapselung. Rund 130 CSS Custom Properties und ein dokumentierter Plugin-Mechanismus reichen für die Anpassung an Ihr Design.
Barrierefrei und responsiv
Die Komponenten erben das responsive Verhalten Ihrer Anwendung. Media Queries müssen Sie bei uns nicht pflegen.
Komplette App oder einzelne Bausteine
Es gibt zwei Integrationswege. Welcher besser passt, hängt vor allem davon ab, wie viel eigene Oberfläche bereits vorhanden ist.
- App Main stellt die vollständige Suchoberfläche bereit – mit App Bar, Navigation, Suchbereich, Trefferliste und Filtern. Mit einer zentralen Komponente lässt sich so eine vollständige Suchanwendung einbinden. Das eignet sich besonders, wenn die Suche als eigener Bereich in einem Portal oder Intranet vorgesehen ist.
- Einzelkomponenten sind für Anwendungen gedacht, deren bestehendes Layout erhalten bleiben soll. So lässt sich beispielsweise die Searchbar in den Header, die ResultList in den Inhaltsbereich und die Filterbar in eine Sidebar integrieren. Die Komponenten arbeiten dabei miteinander, ohne dass Sie den gemeinsamen Zustand selbst verwalten müssen.
Die wichtigsten Bausteine
Suche und Ergebnisse
Searchbar — Eingabefeld mit Autovervollständigung und Spracheingabe
ResultList — Trefferliste mit vollständig überschreibbarem Result-Card-Template
Filterbar — Facetten und Filter
Filter chips — aktive Filter als entfernbare Chips
AppBar — Kopfleiste mit Navigation, Benutzermenü und Sprachwahl
ResultList — Trefferliste mit vollständig überschreibbarem Result-Card-Template
Filterbar — Facetten und Filter
Filter chips — aktive Filter als entfernbare Chips
AppBar — Kopfleiste mit Navigation, Benutzermenü und Sprachwahl
KI-Assistenz
iAssistant Basic — Chat-Antworten direkt im Suchkontext
iAssistant Workspace — der vollständige Arbeitsbereich für längere Dialoge
WorkspaceChatView — die reine Chat-Ansicht zur Einbettung an beliebiger Stelle
WorkspaceHomeView — Einstiegsansicht des Workspace
iAssistant Workspace — der vollständige Arbeitsbereich für längere Dialoge
WorkspaceChatView — die reine Chat-Ansicht zur Einbettung an beliebiger Stelle
WorkspaceHomeView — Einstiegsansicht des Workspace
Knowledge Spaces
Knowledge Space — Zugriff auf kuratierte Wissensräume
Knowledge Space List — Übersicht der verfügbaren Räume
Knowledge Space Collection — Sammlungen innerhalb eines Raums
Knowledge Space Modal — Auswahl im Overlay, für schmale Layouts
Knowledge Space List — Übersicht der verfügbaren Räume
Knowledge Space Collection — Sammlungen innerhalb eines Raums
Knowledge Space Modal — Auswahl im Overlay, für schmale Layouts
Anpassung an Ihr Corporate Design
Web Components an Corporate Design und Anwendungslogik anpassen
- CSS und Theming
Farben, Schriften und Abstände lassen sich über CSS Custom Properties an Ihr Corporate Design anpassen. Da die Web Components auf Shadow DOM verzichten, können bestehende Styles gezielt erweitert und überschrieben werden. - Eigene Templates
Für weitergehende Anpassungen können Sie beispielsweise das Template der Trefferkarten austauschen und Struktur, Metadaten, Vorschaubilder und Textausschnitte individuell gestalten. - Konfiguration über Properties
Komponenten lassen sich über Properties an unterschiedliche Einsatzszenarien anpassen – etwa an Suchprofile, Benutzerrollen oder Anwendungskontexte. - Callbacks und Plugins
Über Callbacks und JavaScript-Erweiterungen können Sie eigenes Verhalten und Geschäftslogik integrieren, ohne den iFinder-Code selbst verändern zu müssen.
Für moderne Webanwendungen gemacht
Integration mit React, Angular, Vue und anderen Frameworks
Die iFinder Web Components basieren auf nativen Custom Elements und lassen sich in moderne Frontend-Frameworks wie React, Angular, Vue, Next.js oder Svelte integrieren.
Für React und Angular stehen Beispielprojekte zur Verfügung. In anderen Frameworks erfolgt die Einbindung über die standardmäßige Unterstützung von Custom Elements.
Responsiv und für barrierefreie Anwendungen ausgelegt
Die iFinder Web Components lassen sich in responsive Oberflächen integrieren und passen sich an unterschiedliche Bildschirmgrößen und bestehende Layouts an.
Sie sind für den Einsatz in barrierefreien Anwendungen ausgelegt. Der konkrete Konformitätsstand, etwa nach BITV 2.0 oder EN 301 549, sollte auf der Seite nur genannt werden, wenn er durch einen aktuellen Prüfstand oder Nachweis belegt ist.
⭐ FAQ - iFinder Web Components
Nein. Es sind native JavaScript Custom Elements. Sie funktionieren in jedem modernen Framework und ebenso in einer HTML-Seite ohne Framework. Für React und Angular gibt es fertige Beispielprojekte auf GitHub.
Ja, und zwar auf vier Ebenen: CSS Custom Properties für Farben und Schriften, direktes Überschreiben der internen Selektoren, vollständiger Austausch des Result-Card-Templates und Properties, die zur Laufzeit gesetzt werden. Die Komponenten nutzen kein Shadow DOM, Ihre Styles greifen also ohne Umwege.
Nein. Sie können einzelne Komponenten einsetzen — nur die Searchbar in Ihrem Header, nur die Trefferliste auf einer Ergebnisseite. Alternativ übernehmen Sie mit `App Main` die vollständige Struktur inklusive Navigation.
Ja. Chat-Ansicht und Workspace sind eigene Komponenten. Sie können die KI-Assistenz in eine bestehende Anwendung integrieren, ohne die Suchoberfläche zu übernehmen.
Ja. Jede Komponente stellt Callbacks bereit, mit denen sich Standardverhalten überschreiben lässt, etwa beim Absenden einer Suchanfrage. Zusätzlich lassen sich externe JavaScript-Plugins laden, über die Sie eigene Geschäftslogik einbringen — zum Beispiel, um das Suchprofil abhängig von Rolle oder Standort umzuschalten.
Für eine einfache Sucheinbindung reichen das Einbinden der Bibliothek und wenige HTML-Tags. Der Aufwand verschiebt sich damit von der Suchinfrastruktur auf Ihre fachliche Logik. Für größere Vorhaben begleiten unsere Professional Services die Integration.
Ja. Die Komponenten übernehmen das responsive Verhalten der umgebenden Anwendung.
Sie planen eine Integration und sind unsicher, welcher Weg passt?
Ob App Main, Einzelkomponenten oder individuelles Template: Unsere Lösungsarchitekten zeigen Ihnen, welcher Integrationsweg zu Ihrer bestehenden Oberfläche passt.
