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
Sie haben bereits ein Portal, ein Intranet oder eine Fachanwendung. Was fehlt, ist eine gute Suche darin — und zwar so, dass niemand merkt, dass sie von außen kommt.
Genau dafür liefert der iFinder 6 seine gesamte Oberfläche als Katalog einzeln verwendbarer Web Components aus. Sie binden eine JavaScript-Bibliothek ein, setzen HTML-Tags an die Stellen, an denen Suchleiste, Filter oder Trefferliste erscheinen sollen, und passen das Aussehen über CSS an Ihr Corporate Design an.
Dieselben Komponenten bilden auch die mitgelieferte Referenzoberfläche des iFinder. Sie arbeiten also nicht mit einer abgespeckten Integrationsvariante, sondern mit genau den Bausteinen, die wir selbst verwenden.
Beispiel KI-generierte Illustration
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.
Zwei Wege in Ihre Anwendung: 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 ist die vollständige Struktur: App Bar, Navigation, Suchbereich, Trefferliste, Filter. Ein Tag im HTML, und Sie haben eine funktionierende Suchanwendung. Das ist der schnellste Weg, wenn die Suche ein eigener Bereich in Ihrem Portal sein soll.
- Einzelkomponenten sind der Weg für alle, die bereits ein Layout haben, in das sich nichts hineindrängen darf. Sie setzen die Searchbar in Ihren bestehenden Header, die ResultList in Ihre Content-Spalte, die Filterbar in Ihre Sidebar. Die Komponenten kommunizieren untereinander, ohne dass Sie den Zustand selbst verwalten müssen.
- In der Praxis mischen die meisten Projekte beides: eine dedizierte Suchseite mit App Main, dazu eine Searchbar auf jeder anderen Seite.
Die wichtigsten Bausteine
Der vollständige Katalog umfasst über 100 Komponenten
Suche und Trefferliste
ResultList — Trefferliste mit vollständig anpassbarem Result-Card-Template
Filterbar — Facetten und Filter
Filter Chips — aktive Filter als entfernbare Chips
AppBar — Kopfleiste mit Navigation, Benutzermenü und Sprachwahl
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
Die iFinder-Komponenten verzichten bewusst auf Shadow DOM. Was in vielen Web-Component-Bibliotheken als Vorteil gilt, wird bei der Integration in ein fremdes Corporate Design zum Hindernis: Sie kommen an die Styles nicht heran. Bei uns kommen Sie heran. Farben, Schriften und Abstände laufen über CSS Custom Properties, für alles Weitere greifen Sie die internen Selektoren direkt an.
Die internen Selektoren sind stabil benannt, damit Ihre Overrides ein Update überstehen. In der Auslieferung ist dieser Mechanismus bereits im Einsatz: `config.json` lädt `plugins.css` und `plugins.js`, und die mitgelieferte Referenzoberfläche nutzt darüber unter anderem `plugins/ihub.css` und `plugins/layout-overrides.css`. Sie arbeiten also mit demselben Verfahren wie wir.
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.
Ja. Über den Testzugang steht eine laufende Instanz bereit, gegen die Sie die Komponenten in Ihrer eigenen Anwendung einbinden können.
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.
