Entwicklung von Insight Apps

Einführung

Mindbreeze Suchanwendungen gestalten den Zugriff auf die Informationen Ihres Unternehmens und passen ihn maßgeschneidert auf Ihre Bedürfnisse an. Sie können Suchanwendungen verwenden, um wichtige Informationen anzuzeigen, ohne dass der Benutzer suchen muss, eine spezielle Suchmaske erstellen, die für eine Anwendung ideal ist oder einfach eine Suchabfrage nach Personen tätigen. Die Möglichkeiten sind beinahe grenzenlos. Der Mindbreeze Client selbst ist eine solche Suchanwendung.

Beispiele: Personensuche, Ticketsuche, Anzeige der zuletzt geänderten Dokumente, alle Informationen zu einer Person, alle Informationen zu einem Thema, Einbettung in Microsoft SharePoint, Einbettung ins Intranet, Einbettung eine Webseite, usw.

Aus technischer Sicht sind Suchanwendungen HTML-Abschnitte, die auf jeder Webseite verwendet werden können. Wichtig ist, dass die Webseite von einem Webserver geladen werden muss, HTML-Dokumente können nicht einfach mit Doppelklick geöffnet werden. Stellen Sie sicher, dass die Adresse im Browser mit http oder https beginnt.

Tutorial Video „Creating an Insight App“

Dieses Video zeigt Ihnen, wie Sie Ihre eigene Mindbreeze InSpire Insight App mit dem integrierten Insight App-Designer erstellen können. Alle Funktionen des Standard-Clients werden ausführlich erläutert, wie z.B. die Verbesserung der Ergebnisliste durch Filter und die Mindbreeze InSpire Query Language.

Link zum Video: https://www.youtube.com/watch?v=2X0Ot3oXZwQ

Benötigte Ressourcen

Head

Meta-Tags

Es wird empfohlen, folgende Meta-Tags im <head> Bereich der Suchanwendung anzugeben und zu verwenden:

Meta-Tag	Beschreibung
mes:user	Username des aktuell eingeloggten Users.
<meta name="mes:user" content="$$USERNAME$$">

Meta-Tag	Beschreibung
display:mes:user	Gibt an, ob der Username am Client angezeigt werden soll.
<meta name="display:mes:user" content="$$IS_USERNAME_DISPLAYED$$">

Meta-Tag	Beschreibung
mes:emailaddress	Emailadresse des aktuell eingeloggten Users.
<meta name="mes:emailaddress" content="$$EMAILADDRESS$$">

Meta-Tag	Beschreibung
mes:loginstatus	Gibt an, welche Aktion für den User aktuell verfügbar ist (login oder logout).
<meta name="mes:loginstatus" content="$$LOGIN_ACTION$$">

Meta-Tag	Beschreibung
mes:logoutdisabled	Gibt an, ob sicher der User abmelden kann.
<meta name="mes:logoutdisabled" content="$$LOGOUTDISABLED$$">

Meta-Tag	Beschreibung
mes:decrypted:user	Entschlüsselte Username des aktuell eingeloggten Users.
<meta name="mes:decrypted:user" content="$$DECRYPTEDUSERNAME$$">

Meta-Tag	Beschreibung
app:telemetry:enabled	Gibt an, ob App.Telemetry aktiviert sein soll.
<meta name="app:telemetry:enabled" content="$$APP_TELEMETRY_ENABLED$$">

Meta-Tag	Beschreibung
app:telemetry:application:id	Gibt die App.Telemetry-Application-ID an.
<meta name="app:telemetry:application:id" content="$$APP_TELEMETRY_APPLICATION_ID$$">

Meta-Tag	Beschreibung
app:telemetry:application:tier:id	Gibt die App.Telemetry-Application-Tier-ID an.
<meta name="app:telemetry:application:tier:id" content="$$APP_TELEMETRY_APPLICATION_TIER_ID$$">

Meta-Tag	Beschreibung
enablePersonalization	Gibt an, ob Personalization aktiv ist.
<meta name="enablePersonalization" content="$$ENABLE_PERSONALIZATION$$">

Styles

Die Styles werden über die Datei adapted.css geliefert, die sich unter apps/css/ befindet.

Zusätzlich wird ein minimales Stylesheet (minimal-adapted) angeboten. Diese Datei befindet sich ebenfalls unter apps/css/.

Es wird empfohlen diese Styles innerhalb des <head> - Bereich im HTML zu laden.

Scripts

Das benötigte JavaScript wird vom client.js geliefert. Es befindet sich unter apps/scripts/.

Attribut

Beschreibung

data-mindbreeze-lib

Ist dieses Attribut gesetzt, bedeutet es, dass der Pfad dieser Ressource für die restlichen zu ladenden Files/Ressourcen verwendet wird.

data-global-export

Gibt an, ob Ressourcen global verwendet werden können oder nicht.

Standardeinstellung: false

Standardbibliotheken

Das client.js wird mit folgenden Bibliotheken ausgeliefert:

Bibliothek	Key	Version	Webseite	Patches
jQuery	jquery	3.7.1	http://jquery.com/
Underscorejs	underscore	1.4.3	https://underscorejs.org/	CVE-2021-23358
Backbone	backbone	0.9.9	https://backbonejs.org/
Highcharts	highcharts	12.0.2	https://www.highcharts.com/
MomentJS	moment	2.29.4		CVE-2016-4055 CVE-2023-22467
DayJS	dayjs	1.11.10	https://day.js.org
RequireJS	require	2.1.8	https://requirejs.org/
Bootstrap	bootstrap	2.2.2	https://getbootstrap.com/	CVE-2016-10735 CVE-2018-20676 CVE-2018-20677
PDF.js	pdfjs	2.0.943	https://mozilla.github.io/pdf.js	CVE-2024-4367 CVE-2018-5158

Die Bibliotheken können nun mit Hilfe von require() verwendet werden siehe Beispiel:

Mindbreeze.require(["jquery","moment"], function($,moment) {

var body = $("body");

var now = moment().toDate();

});

Minimale client.js Version

Eine minimale client.js Version mit Basiskomponenten und Funktionalitäten ist als client-base.js vorhanden. Die Größe dieses Files ist um mehr als 50% reduziert, entfernt wurden jedoch folgende Komponenten:

highcharts
jsoneditor
charts
map
table
timeline
queryinfo
breadcrumb
savedsearches
alertedsearches
suggestlist
voting
annotationPopup
summarize
emailalert
emailalert_preset
alertcenter
feedback

Insight App Designer

Die einfachste Art, eine Insight App zu erstellen, ist der Insight App Designer. Hier fügen Sie Bausteine per Drag & Drop zu einer Suchanwendung zusammen. Als Bausteine stehen Layouts, Suchfelder, Ergebnisse, Navigationselemente und Filter zur Verfügung.

Durch die einfache Bedienbarkeit ist der Designer speziell für Fachbereichsmitarbeiter geeignet, damit die Personen, die die Informationen benötigen, das Maximum aus den Daten herausholen können.

Allgemein

Öffnen Sie den Designer: Der Designer ist unter der gleichen Adresse wie der Client, unter dem Pfad apps/designer verfügbar (z.B. https://example.com/apps/designer/).

Klicken Sie die "Widget hinzufügen"-Schaltfläche: Die Schaltfläche steht an allen Stellen zur Verfügung, wo Sie Widgets einfügen können (mehr dazu bei Layouts).

Wählen Sie ein Widget aus: Am rechten Fensterrand erscheint die Widgetauswahl. Die einzelnen Widgets sind in thematische Gruppen gegliedert. Hinzufügen können Sie das Widget mit einem einfachen Klick oder per Drag & Drop.

Passen Sie die Einstellungen an: Nach dem Hinzufügen eines Widgets können Sie dessen Einstellungen am linken Fensterrand anpassen. Hier stehen unter anderem Suchbegriff, Ergebnisanzahl und Darstellungsvorlage zur Auswahl.

Um die Einstellungen später erneut zu bearbeiten, klicken Sie auf die Bearbeiten-Schaltfläche

Verwenden der Insight Application: Klicken Sie auf den "HTML Code Generieren"-Button.

Kopieren Sie das erzeugte Snippet in eine beliebige Webseite.

Fertig! Zeigen Sie die neue Insight Application Ihren Kolleginnen und Kollegen.

Änderungen und Anpassungen im generierten HTML

Loader

Mit dem Mindbreeze-Loader kann das erstellte Snippet geladen und in das HTML eingefügt werden.

Loader.loadAppFromResource(options, additionalOptions);

Application Einstellungen:

Einstellung

Beschreibung

appid

Die App ID kann aus dem Menüpunkt „Insight Apps“ im Management Center kopiert werden (siehe Screenshot).

useMessageFrameForNonBuiltinSources

Eine zusätzliche Einstellung. Wenn „true“, verwendet die Anwendung den MessageFrame-Channel für die Sources.

Mögliche Werte:

true
false

Standardeinstellung: true

Bausteine

Layout

Verwenden Sie Layout-Bausteine, um die weiteren Abschnitte zu gliedern. So können Sie Spalten in unterschiedlichen Aufteilungen oder einen Kopfbereich hinzufügen. Sämtliche Layouts werden mittels „Responsive Webdesign“ sowohl auf Arbeitsplatzrechnern als auch auf Mobilgeräten optimal dargestellt.

Suchfeld

In das Suchfeld kann der Benutzer eigene Suchbegriffe eingeben.

Ergebnisse

Für die Darstellung von Ergebnissen stehen folgende Ansichten zur Auswahl:

Liste:

Bildergalerie:

Tabelle:

Karte:

Zeitleiste:

Allgemeine Einstellungen

Einstellung

HTML-Attribut

Beschreibung

Sucheinschränkung

data-constraint

Es werden nur die Ergebnisse angezeigt, die einer vorgegebenen Einschränkung entsprechen.

Hier wird zwischen zwei Abfragearten unterschieden:

Abfrageart

Beschreibung

Textabfrage

Wird verwendet, wenn die Eingabe ein ungeparster Wert ist z.B. "Mindbreeze InSpire".

Typ: String

Strukturelle Abfrage

Wird verwendet, wenn die Eingabe ein geparster Wert ist, so dass wir komplexe Einschränkungen umsetzen können z.B.
{
"id": "additional_constraint",
"quoted_term": "Mindbreeze InSpire"
}
um nur Dokumente anzuzeigen, die all den Einschränkungen innerhalb der Phrase entsprechen.

Typ: JSON

Hinweis: Ob es sich nun um eine Textabfrage oder um eine Strukturelle Abfrage handelt, wird automatisch erkannt.

Ergebnisse

data-count

Die Anzahl der angezeigten Ergebnisse.

Antworten Ergebnisse

data-answers-count

Um die Anzahl der angezeigten Antworten zu bestimmen, kann dieses Attribut in die View (data-template="view") eingefügt werden.

Beachten Sie, dass die Anzahl der Antworten durch die erweiterte Einstellung „Maximum Request Answers Count“ unter dem Tab „Client Service“ im Menü „Configuration“ begrenzt wird. Das bedeutet, dass diese Einstellung den Maximalwert der Einstellung „Maximum Request Answers Count“ nicht überschreiten kann.

Standardwert beträgt 5.

Minimale Ähnlichkeit der Antworten

data-min-similarity-score

Bestimmt den minimalen Ähnlichkeitsfaktor, den eine Antwort haben muss, damit diese in der Suche angezeigt wird.

Der Standardwert beträgt 50% („0.5“).

Typ: String.

Titel

data-name

Der Name der Suche (in der API-Anfrage zu sehen).

Länge des Vorschautextes

data-content_sample_length

Anzahl an Zeichen die der Vorschautext eines Suchtreffers umfasst.

Sortieren nach

data-orderby

Ergebnisse können nach den für die Ergebnisse zur Verfügung stehenden Kriterien sortiert werden.

Sortierreihenfolge

data-order-direction

Die Ergebnisse werden aufsteigend oder absteigend sortiert.

Anzahl bei nicht ausgewählten Filterwerten anzeigen

Data-count_filtered_facet_values

Ist diese Einstellung aktiviert, wird die Anzahl der Ergebnisse auch bei den Filteroptionen angezeigt, die nicht ausgewählt sind.

Standardeinstellung: Deaktiviert

Generierte Eigenschaften

data-computed_properties

Ermöglicht das generieren von Eigenschaften.

Optionen für die Application Extension (JSON)

data-application_extension_options_json

Ermöglicht die Erweiterung der Applikation durch ein JSON.

Antworten anzeigen

data-enable-answers

Wird verwendet, um Antworten, welche über den Resultaten angezeigt werden, aus-/einblenden zu können. Das kann hilfreich sein, wenn man die ‚Answer‘ Komponente an einer anderen Stelle verwenden möchte.

Mögliche Werte:

true
false

Standardeinstellung: true

Nicht übereinstimmende Begriffe anzeigen

data-enable-optional-terms

Es wird automatisch ein Element an die Resultate hinzugefügt, mit dem man die Suche expliziter einschränken kann „Enthält nicht: {Term}“ und „Enthält: {Term}“.

Mögliche Werte:

true
false

Standardeinstellung: true

Verhältnis der optionalen Begriffe

data-optional-terms-ratio

Ist dieses Feature aktiviert, kann zusätzlich das Verhältnis der Terms angegeben werden.

Typ: Float

Mögliche Werte: 0 – 1

Standardeinstellung: 0.33

Symbolischen Pfad erlauben

data-allowSymbolicPath

Erlaubt die Verwendung eines symbolischen Pfades.

Liste-Einstellungen

Einstellung

HTML-Attribut

Beschreibung

Ergebnisse beim Scrollen anzeigen

data-appendonscroll

Es werden automatisch zusätzliche Ergebnisse geladen, wenn der Benutzer nach unten scrollt.

Wichtig: Aktivieren Sie diese Einstellung nur, wenn die Ergebnisanzeige das letzte Element auf der Seite ist, andernfalls können die Benutzer die Elemente unter den Ergebnissen nicht erreichen.

Vorlage

Sie können die Darstellung der Ergebnisse mittels Mustache-Templates anpassen. Somit können Sie z.B.:

Metadaten ein- und ausblenden,
die Darstellung von z.B. Personen anpassen,
die HTML-Struktur der Zielseite verwenden.

Bildergalarie-Einstellungen

Einstellung

HTML-Attribut

Beschreibung

Ergebnisse beim Scrollen anzeigen

data-appendonscroll

Es werden automatisch zusätzliche Ergebnisse geladen, wenn der Benutzer nach unten scrollt.

Wichtig: Aktivieren Sie diese Einstellung nur, wenn die Ergebnisanzeige das letzte Element auf der Seite ist, andernfalls können die Benutzer die Elemente unter den Ergebnissen nicht erreichen.

Vorlage

Sie können die Darstellung der Ergebnisse mittels Mustache-Templates anpassen. Somit können Sie z.B.:

Metadaten ein- und ausblenden,
die Darstellung von z.B. Personen anpassen,
die HTML-Struktur der Zielseite verwenden.

Tabelle-Einstellungen

Einstellung	HTML-Attribut	Beschreibung
Eigenschaften	data-properties	Liste, welche Eigenschaften im Export angezeigt werden sollen. Standard: Titel, Datum, Actions
Eigenschaften von Übersetzung ausnehmen	data-exclude-from-translation	Legt fest, welche Eigenschaften beim Export der Tabelle nicht übersetzt werden sollen.
Tabelle bearbeitbar	data-edittable	Legt fest, ob man die Tabelle bearbeiten kann. Als Bearbeitung ist zum Beispiel das Löschen, Ändern und Hinzufügen von Eigenschaften gemeint. Diese Einstellung überschreibt die Einstellung im Client Service.
Export zulassen	data-allowexport	Ist diese Einstellung aktiviert, ist ein „Download“ Knopf für den Export verfügbar.
Exportformat CSV	data-exportformat	Legt das Format fest in dem die Tabelle exportiert wird. Diese Einstellung überschreibt die Einstellung im Client Service.
Dumping aktivieren	data-enabledumping	Aktiviert das Dumping der Tabelle.

Zeitleiste-Einstellungen

Einstellung	HTML-Attribut	Beschreibung
Eigenschaft (zb. mes:date)	data-date=“mes:date“	Definiert welche Eigenschaft von einem Dokument für die Zeitleiste verwendet werden soll. Standardeinstellung: mes:date
Höhe (auto oder z.B. 200px)	data-height	Definiert die Höhe der Zeitleiste. Mit „auto“ passt sich die Höhe automatisch an die angezeigten Treffer oder die Höhenangabe laut CSS an, z.B. 200px. Standardeinstellung: auto
Startdatum	data-range-start	Definiert die Startzeit der Zeitleiste. Die Angaben werden mit new Date(<Attributwert>) in ein Datum umgewandelt.
Enddatum	data-range-end	Definiert die Endzeit der Zeitleiste. Die Angaben werden mit new Date(<Attributwert>) in ein Datum umgewandelt.
Datumsbereich links (in Monaten)	data-padding-left="10"	Definiert den linken Abstand vom Rand der Zeitleiste zum ersten dargestellten Datum.
Datumsbereich rechts (in Monaten)	data-padding-right="10"	Definiert den rechten Abstand vom Rand der Zeitleiste zum letzten dargestellten Datum.
Vorlage	-	Sie können die Darstellung der Ergebnisse mittels Mustache-Templates anpassen. Somit können Sie z.B.: Metadaten ein- und ausblenden, die Darstellung von z.B. Personen anpassen, die HTML-Struktur der Zielseite verwenden.

Mustache-Templates

In der Vorlage stehen alle Metadaten, das Vorschaubild und alle Aktionen der Dokumente zur Verfügung. Die folgende Vorlage zeigt das Vorschaubild und den Titel als Überschrift und darunter den Inhalt des Dokuments an:

<h3>{{{icon}}} {{{title}}}</h3>
<p>
{{{content}}}
</p>

Schreiben sie den Namen eines Metadatums in {{{ }}}, um das Metadatum anzuzeigen, z.B.:

{{{Author}}}

oder

Autor: {{{Author}}}

Wenn das Metadatum nicht vorhanden ist, soll auch "Autor:" nicht angezeigt werden? Mit einer Bedingung machen Sie die Ausgabe optional:

{{#Author?}}Autor: {{{Author}}}{{/Author?}}

Die komplette Vorlage:

<h3>{{{icon}}} {{{title}}}</h3>

{{#Author?}}Autor: {{{Author}}}{{/Author?}}

<p>

{{{content}}}

</p>

Die Ausgabe könnte dann wie folgt aussehen:

<div>

<h3><img src="..."> Dokument</h3>

Autor: Max Mustermann

<p>

Lorem impsum ...

</p>

</div>

<div>

<h3><img src="..."> Max Mustermann</h3>

</div>

Mit {{#actions.data}}{{{html}}}{{/actions.data}} geben Sie alle Aktionen aus. Um nur auf die erste Aktion zuzugreifen, können Sie {{actions.data[0].value.href}} verwenden.

Die komplette Vorlage mit der ersten Aktion als Link:

<h3>

{{{icon}}} {{{title}}}

</a>

</h3>

{{#Author?}}Autor: {{{Author}}}{{/Author?}}

<p>

{{{content}}}

</p>

Die Ausgabe könnte dann wie folgt aussehen:

<div>

<h3><a href="http://..."><img src="..."> Dokument</a></h3>

Author: John Doe

<p>

Lorem impsum ...

</p>

</div>

<div>

</div>

Link

Mit einem Link kann die Suche in einer externen Suchmaschine fortgesetzt werden.

Einstellung

Beschreibung

Adresse

Die Adresse der externen Suche mit Platzhaltern, z.B. https://duckduckgo.com/?q={searchTerms}.

{searchTerms} wird mit dem Suchbegriff ersetzt.

{language} wird mit der Sprache der Suchanwendung ersetzt.

Text

Der Text des Links.

Blättern

Mit dem Blättern-Widget können die Benutzer weitere Suchergebnisse anzeigen. Verwenden Sie dieses Widget, falls Sie bei den Ergebnissen die Einstellung „Ergebnisse beim Scrollen anzeigen“ nicht aktiviert haben.

Mehr Informationen für weitere Anpassungen finden Sie im Kapitel pagination.

Seiten

Mit dem Seiten-Widget kann seitenweisen in den Suchresultaten navigiert werden. Bei den Ergebnissen sollte die Einstellung „Ergebnisse beim Scrollen anzeigen“ deaktiviert sein, damit nur eine Variante zum Blättern zur Verfügung steht.

Mehr Informationen für weitere Anpassungen finden Sie im Kapitel pages-Widget.

Filter

Filter dienen zum Einschränken der Suchergebnisse. Beim Hinzufügen des Widgets stehen alle Filter zur Auswahl, die für die aktuelle Suche möglich sind.

Einstellung	Beschreibung
Filter	Das Metadatum, das für den Filter verwendet wird.
Titel	Falls Sie nicht die Standardübersetzung des Metadatennamens anzeigen möchten, geben Sie hier den gewünschten Titel an (Vorsicht wenn der Suchclient in unterschiedlichen Sprachen verwendet wird).
Benutzereingaben zulassen	Mit „Widget automatisch auswählen“ wird die Benutzereingabe unter dem Filter an dessen Typ angepasst, z.B. Datumseingabe für Datumswerte, Autovervollständigung für Textwerte. „Deaktiviert“ blendet die Benutzereingabe aus. Mit „Widget verwenden“ wird die Option „Widget für Benutzereingaben“ angezeigt.
Anzahl der angezeigten Filterwerte	Die angegebene Anzahl wird standardmäßig angezeigt, weitere Werte können mit "Mehr anzeigen“ und „Weniger anzeigen“ ein- oder ausgeblendet werden.
Vorschläge Term Eigenschaften Alias	Definiert die Term Eigenschaften Alias, die vorgeschlagen werden sollen.
Platzhalter Datumsbereicheingabe	Definiert welcher Text in der Datumsbereicheingabe als Standard steht.
Icon für Datumsbereicheingabe	Definiert den Pfad zum Icon, dass bei der Datumsbereicheingabe verwendet werden soll.
Komplette Hierarchie ohne Einschränkung zurückzuliefern (Ineffizient)	Wenn aktiviert, wird die vollständige Hierarchie ohne Einschränkungen zurückgeliefert.
Aufklappbar	Der Benutzer kann den Filter zuklappen, somit wird nur noch die Titelzeile angezeigt.
Filterwerte ausblenden	Blendet die verfügbaren Filter aus und zeigt nur den Filtertitel und das Eingabefeld an.
CSS Klasse für unvollständige Filterergebnisse	Definiert die CSS-Klasse, die für unvollständige Filterergebnisse angewendet wird.
Verknüpfung von ausgewählten Filterwerten	Muss ein Treffer alle ausgewählten Werte besitzen (AND) oder genügt einer (OR). Standardeinstellung: OR
Kombinationen von Filterwerten erlauben	Aktiviert eine Schaltfläche „+“ neben einem Filterwert, mit dem eine Und-Verknüpfung gemacht werden kann.
Sortieren nach	„Anzahl Filterwerte“ sortiert nach Häufigkeit des Auftretens, „Titel“ nach dem Filterwert, „Angepasst“ sortiert nach Titel in aufsteigender Reihenfolge und es können die ersten Werte angegeben werden.
Sortierreihenfolge	„Aufsteigend“ und „Absteigend“ legen die Richtung direkt fest. Standardeinstellung: Aufsteigend
Anzahl bei nicht ausgewählten Filterwerten anzeigen	Zeigt die Anzahl der Ergebnisse bei den Filterwerten an, die nicht ausgewählt wurden. Ist diese Einstellung deaktiviert, wird die Anzahl der Ergebnisse nur bei den ausgewählten Filterwerten angezeigt.
Vorlage	Sie können die Darstellung der Filter mittels Mustache-Templates anpassen.

Mustache-Templates

Die Vorlage enthält den Wert des Filtereintrags, die Anzahl der Dokumente und ob der eingegebene Eintrag bei der aktuellen Suche berücksichtigt wird oder nicht.

Standardvorlage:

{{{html}}}

<span class="pull-right">{{^count?}}-{{/count?}}{{count}}</span>

<span class="pull-right">{{count}}</span>

Werte:

Wert	Beschreibung
html	Der formatierte Wert des Filtereintrags.
value	Der Wert des Filtereintrags (z. B. Kalenderdatum und Uhrzeitwerte).
count	Die Anzahl der für diesen Eintrag gefundenen Dokumente.
excluded	Der Eintrag ist nicht ausgewählt, obwohl andere ausgewählt sind.

Ausführliche Informationen zur Anpassung finden Sie im Kapitel filteredfacet.

Designer einbetten

Es ist möglich, den Mindbreeze Insight App Designer als eigenständige, eingebettete Anwendung zu verwenden. Wie bei der Insight App selbst funktioniert dies in wenigen Schritten.

Erforderliche Ressourcen

Styles

Das allgemeine Designer-Styling wird über das File designer.css bereitgestellt. Das File kann unter der Client-Service-Adresse im Ordner apps/css/v2/ abgerufen werden.

Mindbreeze liefert zusätzlich für eingebettete Designer auch das File designer-prefixed.css aus, in welchem die CSS Klassen einen Präfix erhalten und nur die notwendigsten Regeln enthält.

Scripts

Das benötigte JavaScript wird von editor.js bereitgestellt. Es kann unter der Client-Service-Adresse unter apps/scripts/ aufgerufen werden.

HTML

Der nächste Schritt besteht darin, das notwendige HTML in einem Container-Element (Root-Element) im HTML zu platzieren. Hierfür eignet sich ein entsprechendes Element mit der ID "designer-container".

Dieser Container ist notwendig, damit sich der Designer nur in diesem Element ausbreiten kann und hat den folgenden Inhalt (kann kopiert und eingefügt werden):

</div>

</div>

</div>

JavaScript

Der Application-Konstruktor erstellt eine Suchanwendung und ermöglicht die Bearbeitung mit dem Mindbreeze Insight App Designer.

Das notwendige JavaScript-Snippet befindet sich unter den HTML-Elementen. Hier wird eine neue Anwendung erstellt und im Callback wird der Bearbeitungsmodus der Anwendung aufgerufen.

Mindbreeze.require([

"client/application",

"utils/browser"

], function(

Application,

browser

) {

var options = {

startSearch: false,

rootEl: document.getElementById("insight-app-container"),

containerEl: document.getElementById("designer-container"),

callback: function (application) {

application.edit()

}

};

var sources = browser.getURLParameter("sources");

if (sources) options.sources = [ sources + "../../api/v2/" ];

new Application(options);

});

Verfügbare Widgets

Der folgende Teil enthält die Beschreibung aller zur Verfügung stehenden Widgets. Widgets sind HTML-Tags, die in beliebige HTML-Dateien eingefügt werden. HTML-Tags mit dem Attribut data-template="<Widget-ID>" werden zu Widgets. Einstellungen und Vorlagen können entweder als weitere Attribute oder als Inhalt des Tags definiert werden.

Beispiele:

<h3>{{{icon}}} {{{title}}}</h3>

<p>

{{{content}}}

</p>

</script>

</div>

accordion (Aufklappbare Filter)

Das Accordion-Widget ist ein Element zur Einfassung von auf- und zuklappbaren Bereichen.

Enthaltene Elemente mit role=tab werden als auf- und zuklappbar dargestellt und können mit der Tastatur bedient werden. Das Widget verwendet die ARIA-role tablist (http://www.w3.org/TR/wai-aria/roles#tablist), die Unterelemente müssen der definierten Struktur entsprechen.

Beispiele:

</div>

Einstellungen:

Einstellung

Beschreibung

data-enabled

Bei true können die Bereiche geöffnet und geschlossen werden.

Standardeinstellung: false

data-default-open

Gibt an, ob die enthaltenen Bereiche standardmäßig geöffnet oder geschlossen sind.

Standardeinstellung: false

alert (Fehler- und Warnmeldung)

Ein „alert“ zeigt Fehler an, die bei der Suche aufgetreten sind.

Modell: application.models.channels.alerts

Beispiele:

{{{message}}}

{{{error}}}

{{{warning}}}

{{{info}}}

({{{service_ids}}})

</div>

</script>

</div>

Mustache-Templates

Werte:

Wert	Beschreibung
level	info, warning, error
message	Fehlermeldung
error	Fehlermeldung
warning	Warnmeldung
info	Informationsmeldung
service_ids	Services, die die Meldung verursacht haben.

alertcenter (Benachrichtigungen)

Das Alertcenter-Widget ist ein Element zum Anzeigen von beliebigen Alerts. Diese Alerts können entweder vom User angelegt oder auch als Template von Administratoren hinterlegt worden sein. Dazu wird pro User eine E-Mail-Adresse hinterlegt, an welche diese Alerts (bei Änderungen von Treffern) im gewünschten Abstand versendet werden. Somit ist diese Komponente eine Erweiterung der „alertedsearches“ Komponente, welche damit abgelöst wird.

Beispiel:
<div data-template="alertedsearches"></div>

Konfiguration
Um dieses Widget verwenden zu können, sind im Konfigurator Einstellungen nötig.

annotationPopup (Interactive Exploded View)

Das annotationPopup-Widget ist ein Element zum Anzeigen von Eigenschaften in der Preview-Komponente via mousehover über einer Annotation. Dabei werden sämtliche Eigenschaften aus der URL verwendet, welche als URL-Parameter angegeben werden. Werden nicht alle Eigenschaften gewünscht, können die gewünschten Eigenschaften im Mustache-Template explizit angegeben werden.

Achtung: Diese müssen als URL-Parameter verfügbar sein.

Beispiel:
https://entity.your orgaization.com/?type=Search&code=J01FA09&term=Mindbreeze%20InSpire

Zusätzlich kann zu jeder Annotation ein Feedback abgegeben werden, welches in App.Telemetry ersichtlich ist:

Final eingebettet sieht es in der PDF-Vorschau wie folgt aus:

Beispiel:

Um dieses Feature verwenden zu können, muss im Client folgender Container hinzugefügt werden:

</div>

Weiteres Beispiel:

{{#term?}} <div><b>{{term}}</b></div> {{/term?}}

{{#code?}} <div>Code: {{code}}</div> {{/code?}}

{{#type?}} <div>Type: {{type}}</div> {{/type?}}

</script>

</div>

Einstellungen:

Einstellung

Beschreibung

data-enable-feedback

Aktiviert die Feedbackfunktionalität am Client.

Standardeinstellung: false

answers (Anzeige von Antworten)

Das Widget “answers” erzeugt Volltext-Antworten aus den gefundenen Suchergebnissen. Diese Antworten können auf zwei Arten in einer Insight App angezeigt werden:

Antworten (Liste von Antworten)
AI Antworten (Text der Antwort wird mit GenAI erzeugt)

Antworten

Mit diesem Feature werden Antworten zu gestellten Fragen in einer kompakten Übersicht angezeigt. Solche Antworten werden automatisch direkt über den Standardresultaten (data-template="results") angezeigt, sobald Antworten verfügbar sind.

Voraussetzung:

Damit Antworten angezeigt werden können, muss NLQA konfiguriert werden. Für mehr Informationen, siehe Handbuch – Natural Language Question Answering (NLQA).

Wenn Antworten zu einer bestimmten Suche nicht angezeigt werden sollen, kann diese Komponente im Resultats-Template deaktiviert werden.

Beispiel:

Einstellungen:

Einstellung	Beschreibung
data-answers-count	Um die Anzahl der angezeigten Antworten zu bestimmen, kann dieses Attribut in die View (data-template="view") eingefügt werden. Beachten Sie, dass die Anzahl der Antworten durch die erweiterte Einstellung „Maximum Request Answers Count“ unter dem Tab „Client Service“ im Menü „Configuration“ begrenzt wird. Das bedeutet, dass die Einstellung data-answers-count den Maximalwert, der in der Einstellung „Maximum Request Answers Count“ konfiguriert ist, nicht überschreiten kann. Standardwert beträgt 5.
data-request-properties	Ist diese Einstellung aktiv werden alle Eigenschaften dieser Komponente in der Suchanfrage angefordert. Standardeinstellung: true Typ: Boolean
data-min-similarity-score	Bestimmt den minimalen Ähnlichkeitsfaktor, den eine Antwort haben muss, damit diese in der Suche angezeigt wird. Der Standardwert beträgt 50% („0.5“). Typ: String.

Beispiel:

AI Antworten

Mit AI Antworten werden Antworten zu gestellten Fragen in einer kompakten Übersicht angezeigt, wobei der Antworttext mit GenAI erzeugt wird. Dadurch ist es zum Beispiel möglich den Inhalt von mehreren Dokumenten in einer Antwort zusammenzufassen Das Large Language Model, das bei der Generierung der Antwort verwendet wird, kann vom Admin festgelegt werden.

Das Feature “AI Antworten” ist auf zwei Arten verfügbar:

Als Komponente im Baustein “GenAI”
Als aktivier- und deaktivierbare Einstellung “Text aus gefundenen Antworten mittels GenAI erzeugen” in der Komponente “Liste”

In beiden Fällen wird mittels GenAI eine Antwort erzeugt. Nutzer:innen können dabei die Generierung stoppen und auch neu starten. Zusätzlich kann die generierte Antwort mit einem Klick kopiert werden. Das “Information” Symbol gibt an, dass die Antwort mit Mindbreeze AI generiert wurde. Unter der AI Antwort kann eine Übersicht der verwendeten Quellen aufgeklappt werden.

Beispiel:

Voraussetzungen

Ein konfigurierter Index
- Die Einstellung „Enable Language Detection“ ist aktiviert
- Die Einstellung „Enable Sentence Transformation“ ist aktiviert
Zugriff auf Insight Services für RAG im Management Center
- Ein konfiguriertes Large Language Model (LLM)
- Eine konfigurierte und veröffentlichte RAG-Pipeline

Hinweis: Für den Standard-Client verwendet die AI-Antwort die erste veröffentlichte RAG-Pipeline. Stellen Sie sicher, dass keine anderen RAG-Pipelines veröffentlicht werden, damit die AI-Antwort die gewünschte RAG-Pipeline verwendet.

Für Insight Apps oder für den Fall, dass mehrere RAG-Pipelines gleichzeitig veröffentlicht werden müssen, kann die AI-Antwort mit der Basis-Einstellung „Pipeline Auswahl“ eine RAG-Pipeline zugewiesen werden.

Basis-Einstellungen

Einstellung	HTML	Beschreibung
Generiere Text von erhaltenen Antworten mittels GenAI	data-ai-generate-text	Erstellen Sie mithilfe von GenAI Text aus den abgerufenen Antworten. Standardwert: true.
Abgerufene Kontextquelle	data-add-answers-from-results	Definiert die Strategie zur Spezifizierung der übermittelten Antworten an GenAI. Mögliche Werte: false - verwendet nur die Antworten. Ist der Standardwert. true - Führt die Antworten und Ergebnisse zusammen. noanswers - Verwendet Ergebnisse, wenn keine Antwort verfügbar ist. replaceanswers - Verwendet nur Ergebnisse.
Abgerufener Kontext Begrenzung	data-retrieved-context-limit	Beschränkt die zu verwendenden Antworten in der Einstellung „Retrieved Context Source“.
Antwort-Vorlage-Referenz	data-result-answer-template-refid	Verweis auf die Antwortvorlage, die von der Einstellung „Retrieved Context Source“ verwendet werden soll, wenn Ergebnisse als Antworten verwendet werden.
LLM Prompt Anweisung	data-llm-prompt-instruction-text	Definiert die LLM-Prompt-Anweisung.
Andere Anweisung, wenn keine Antworten gefunden wurden	data-prompt-conditional-instruction-text	Wenn diese Einstellung aktiviert ist, wird der Wert von data-llm-prompt-instruction-text-no-answer als Prompt verwendet, wenn keine Antworten gefunden wurden. Wenn Antworten gefunden wurden, wird der Wert von data-llm-prompt-instruction-text verwendet. Standardwert: true
Anweisung, wenn keine Antworten gefunden wurden	data-llm-prompt-instruction-text-no-answer	Definiert die LLM-Prompt-Anweisung, wenn keine Antworten gefunden wurden.
Benutzerdefinierten Prompt verwenden	data-use-custom-prompt	Aktiviert die Verwendung eines benutzerdefinierten Prompts zur Textgenerierung anstelle des Standard-Prompts.
Pipeline Auswahl	data-pipeline-selection	Bestimmt, welche Pipeline für die Datenverarbeitung nach der Textgenerierung verwendet wird. Mögliche Werte: key id Standardwert: key
Pipeline	data-pipeline-selection-value	Gibt den Key- oder ID-Wert der Pipeline zur Textgenerierung an.
Quellen der Insight App für Generierung verwenden	data-use-insight-app-sources-for-generation	Ermöglicht die Nutzung von Quellen aus der Insight App zur Verbesserung der Textgenerierung.
Einschränkungen durch Filter	data-use-user-constraints	Aktiviert die Berücksichtigung von Benutzereingaben und -einschränkungen bei der Textgenerierung.
Eingabe verwenden	data-use-user-input	Dies ermöglicht die Verwendung der Eigenschaft „input“ für Generierungsaufrufe. Durch Setzen dieses Attributs auf „false“ können Generierungsaufrufe ohne die Eigenschaft durchgeführt werden.
Einschränkung durch Sucheingabe	data-use-search-input	Beschränkt die Textgenerierung auf die Sucheingabe. (Ignoriert das Attribute „user_constraint.query“)
Basiseinschränkung der Suche	data-use-source-context-constraints	Beschränkt die Textgenerierung auf den Kontext, der durch festgelegte Einschränkungen vorgegeben ist.
Preset JSON	data-conversation-input-presets-json	Voreingestellte Eigenschaften des Generate-Requests
Zeige Lade-Progress bis zum ersten erhaltenen Token	data-enable-computing-when-generate	Verlängert den visuellen Effekt des Fortschritts einer Anfrage, bis der /generate Request den ersten Token liefert. (Dieses Flag ist standardmäßig aktiviert.)

Erweiterte Einstellungen

Einstellung	HTML	Beschreibung
Erweiterte Prompts	data-prompt-use-templates	Ist diese Einstellung aktiviert, werden die nachfolgenden erweiterten Prompts mit Platzhaltern verwendet.
LLM Prompt Anweisung mit Platzhalter	data-llm-prompt-instruction-template	Definiert die LLM Prompt-Anweisung mit einem Platzhalter.
Andere LLM Prompt Anweisung, wenn keine Antworten gefunden wurden	data-prompt-conditional-instruction-template	Ist diese Einstellung aktiviert, wird der Wert von data-llm-prompt-instruction-template-no-answer als Prompt verwendet, wenn keine Antworten gefunden wurden. Falls Antworten gefunden wurden, wird der Wert von data-llm-prompt-instruction-template verwendet. Standardwert: false.
LLM Prompt Anweisung mit Platzhalter, wenn keine Antworten gefunden wurden	data-llm-prompt-instruction-template-no-answer	Definiert die LLM Prompt-Anweisung mit einem Platzhalter, wenn keine Antworten gefunden wurden.
LLM Prompt Nutzernachricht mit Platzhaltern	data-prompt-user-message-template	Definiert die LLM Prompt Nutzernachricht mit einem Platzhalter.
Andere LLM Prompt Nutzernachricht für keine Antworten	data-prompt-conditional-user-message-template	Ist diese Einstellung aktiviert, wird der Wert von data-prompt-user-message-template-no-answer als Prompt verwendet, wenn keine Antworten gefunden wurden. Falls Antworten gefunden wurden, wird der Wert von of data-prompt-user-message-template verwendet. Standardwert: false.
LLM Prompt Nutzernachricht mit Platzhaltern, wenn keine Antworten gefunden wurden	data-prompt-user-message-template-no-answer	Definiert die LLM Prompt Nutzernachricht mit einem Platzhalter, wenn keine Antworten gefunden wurden.
	data-transform-event	Dies ist eine Funktion, die nach jedem Answer-Stream-Event aufgerufen werden kann. Dabei sollte „Promise“ mit dem transformierten Text zurückgeben werden. Function arguments: event: {data: text: <text from the stream event>}} oder {data: text: "", completeText: ‘<Full answer text>’}}. Der Wert “text” ist der aktuelle Stream-Text. Falls “completeText” gesetzt ist, ist das aktuelle Ereignis das letzte Stream-Event, dass den vollständigen Text der Antwort enthält. application: Die “application” Instanz. Beispiel: var MyApplication = Application.extend({ transformEvent: function (event, application) { return new Promise(function(res, rej) { event.data.text = event.data.text.toUpperCase(); if (event.data.completeText) event.data.completeText = event.data.completeText.toUpperCase(); res(event); }) }, });
Immediate reset generated answers on user input	data-clear-answer-on-change	Die Eigenschaft steuert, ob die aktuell von der AI generierte Antwort gelöscht wird, wenn der Benutzer eine neue Eingabe macht. Typ: Boolean Standardwert: false

applists (Auswahl an föderierbaren Quellen)

Bietet eine Auswahl an föderierbaren Quellen.

Modell: application.models.applists

Beispiel:

breadcrumb (Anzeige von Sucheinschränkungen)

Wenn Aktionen die Ergebnisse einschränken, stehen diese Einschränkungen im breadcrumb-Widget zur Verfügung und können dort wieder deaktiviert werden.

Modell: application.models.search.user.constraints

Beispiele:

<div>

<span title="{{{description}}}">{{{description}}}</span>

</label>

</div>

</script>

</ul>

Einstellungen:

Einstellung

Beschreibung

data-display-filteredfacets

Bei „true“ werden ausgewählte Filterwerte auch angezeigt.

Standardwert: false

chat (Mindbreeze InSpire AI Chat)

Mit dem Mindbreeze InSpire 25.7 Release steht ein neuer Mindbreeze InSpire AI Chat mit visuellen und funktionalen Redesigns zur Verfügung.

Eine Übersicht über die neuen Funktionen finden Sie unter Release Notes 25.7 Release - Mindbreeze InSpire.

Weitere Informationen zum neuen AI Chat, eine Liste aller Einstellungen und eine Erklärung zum Erstellen eines benutzerdefinierten Themes finden Sie in den folgenden Kapiteln.

Die chat Komponente kann wie folgt in Ihr HTML integriert werden:

Voraussetzungen

Ein konfigurierter Index
- Die Einstellung „Enable Language Detection“ ist aktiviert
- Die Einstellung „Enable Sentence Transformation“ ist aktiviert
Zugriff auf Insight Services für RAG im Management Center
- Ein konfiguriertes Large Language Model (LLM)
- Eine konfigurierte und veröffentlichte RAG-Pipeline

Einstellungen

Die folgenden Einstellungen sind im Insight App Designer verfügbar:

Einstellung	HTML	Beschreibung
Pipeline Auswahl	data-pipeline-selection	Bestimmt, welche Pipeline für die Datenverarbeitung nach der Textgenerierung verwendet wird. Mögliche Werte: By Key By ID Standardwert: By Key
Pipeline	data-pipeline-selection-value	Gibt den Key- oder ID-Wert der Pipeline zur Textgenerierung an.
Einschränkung durch Sucheingabe	data-use-search-input	Beschränkt die Textgenerierung auf die Sucheingabe. (Ignoriert das Attribute „user_constraint.query“)
Einschränkungen durch Filter	data-use-user-constraints	Legt fest, ob der AI Chat vom Benutzer festgelegte Einschränkungen wie Filter anwenden soll. Beispiel: Der Benutzer setzt den Datumsfilter auf „2024“. Der AI Chat wendet den Datumsfilter an und generiert nur Antworten, die auf Dokumenten aus dem Jahr 2024 basieren. Verfügbare Optionen: • true • false Standardeinstellung im Insight App Designer: true
Basiseinschränkung der Suche	data-use-source-context-constraints	Legt fest, ob der AI Chat die vom Benutzer festgelegten Einschränkungen für die Datenquelle anwenden soll. Beispiel: Der Benutzer setzt den Datenquellenfilter auf „Web“. Der AI Chat wendet den Datenquellenfilter an und verwendet nur Webdokumente, um eine Antwort zu generieren. Verfügbare Optionen: • true • false Standardeinstellung im Insight App Designer: true
Zitate aktivieren	data-enable-citation	Aktiviert Zitate im generierten Antworttext.
Metadaten verwenden	data-use-metadatakeys	Wenn diese Einstellung aktiviert ist, werden die in der Einstellung „Metadata Keys“ definierten Metadaten Keys verwendet.
Metadata Keys	data-metadatakeys	Definiert eine Liste von Metadaten oder Eigenschaften, die zusätzlich angefordert werden sollten und möglicherweise von Datenquellen benötigt werden.
Initiale Benutzereingabe aus Sucheingabe	data-initialize-from-user-query	Initialisiert den Chat anhand des Query-Parameters. Beispiel: ?query=Was ist der aktuelle Status von Projekt XY?
Initiale Benutzereingabe	data-initial-user-input	Definiert einen Query-Parameter, der als erste Frage beim Öffnen des Chats verwendet wird. Achtung: Diese Einstellung überschreibt die vorherige Einstellung „Initiale Benutzereingabe aus Sucheingabe“, wenn die Einstellung „Initiale Benutzereingabe aus Sucheingabe“ aktiviert ist.
Neue Chat Aktion anzeigen	data-show-create-new-conversation	Zeigt die Aktion “Neuer Chat“ im AI Chat an.
Pipeline Auswahl und Presets von AI Antworten Einstellungen übernehmen	data-apply-answers-settings	Wenn diese Einstellung aktiviert ist, werden die Pipeline und die Voreinstellungen aus dem „Antwort“-Widget im AI Chat verwendet.

Benutzerdefiniertes Theme

AI Answers bietet verschiedene Optionen für die individuelle Gestaltung, beispielsweise um das Aussehen der Antworten besser an das Corporate Design anzupassen. Folgende Elemente des Designs können beispielsweise angepasst werden:

• Farben

• Schriftarten

• Symbole

• Rahmen

• Widget-spezifische Designs

• Responsives Verhalten

Um ein benutzerdefiniertes Design zu erstellen, muss eine JSON-Datei mit einem bestimmten Namen im Dateimanager definiert werden. Bitte stellen Sie sicher, dass der Name und der Pfad der Datei wie folgt lauten:

Name der JSON-Datei: mindbreeze-theme-descriptor.json
Pfad zur JSON-Datei: /data/resources/client-service/default/plugin-config/

Struktur des Theme Descriptors

Die Struktur des Theme Descriptors besteht aus den folgenden Abschnitten:

Abschnitt	Beschreibung	Beispiel
defaultBreakpoints	Definiert die verschiedenen Bildschirmgrößen für das responsive Verhalten von AI Answers. Die folgenden Variablen für die verschiedenen Bildschirmgrößen sind verfügbar: • Mobilgeräte: xs • Kleine Tablets: sm • Tablets: md • Kleine Desktops: lg • Große Desktops: xl • Ultra-große Desktops: 2xl	const defaultBreakpoints: Mindbreeze.BreakpointMap = { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536, };
defaultTheme.themes.base	Der Abschnitt base definiert die Standardstile für AI-Antworten wie Farben, Schriftarten und Rahmen. Die im Abschnitt base beschriebenen Elemente sind in anderen Abschnitten zu referenzieren, wenn beispielsweise dieselbe Farbe verwendet werden soll.	export const defaultTheme: Mindbreeze.ThemeDescriptor = { themes: { base: { boxShadow: "0 0 0 2px var(--mindbreeze-colors-secondary)", // foreground color (font) colors: { primary: "#222", onPrimary: "white", onPrimaryFixed: "#fec800", secondary: "#fec800", onSecondary: "black", }, },
breakpoints	Definiert das reaktionsfähige Verhalten von Elementen wie Symbolen.	breakpoints: defaultBreakpoints, icons: { "on-primary-logo": { resourceLocation: "img/v2/Mindbreeze-Logo-NEG.svg", width: "257px", height: "34px", }, "primary-logo": { resourceLocation: "img/v2/Mindbreeze-Logo-NEG.svg", width: "257px", height: "34px", }, },
fonts	Definiert die zu verwendenden Schriftarten.	fonts: [ { fontFamily: "Roboto", fontStyle: "normal", fontWeight: "normal", src: { local: "Roboto", url: "/font/Roboto-Light.woff", format: "woff", }, } ],
widgets	Definiert Elemente von AI-Antworten wie die Anzeige von Ergebnissen, Quellen und anderen.	widgets: { resultsources: { sources: { showIndex: true, autoCollapseNonFocused: true, color: { var: "colors.textDisabled" }, fontSize: "15px", defaulIconColor: { var: "colors.textTitle" }, hideDataSourceIcon: false, sourceIndexMinWidth: "25px" }, result: { base: { borderRadius: { var: "borderRadius.small" }, border: { color: "#999", width: "2px", style: { var: "border.style" }, }, hideLeftAccentBorder: true, closeBtnColor: { var: "colors.onSurface" }, backgroundColor: "#fff" }, }

Farben

Die Farben des benutzerdefinierten Themes werden im Abschnitt base in Hex-Codes definiert.

Die folgenden Attribute sind verfügbar:

Attribut	Beschreibung	Beispiel
primary	Legt die Hauptfarbe Ihres benutzerdefinierten Designs fest.	colors: { primary: "#222", onPrimary: "white", onPrimaryFixed: "#fec800", secondary: "#fec800", onSecondary: "black", tertiary: "#0052a7", onTertiary: "white", surface: "white", onSurface: "black", surfaceComponent: "#f3f3f6", onSurfaceComponent: "black", surfaceContainer: "#e5e7eb", onSurfaceContainer: "black", titleText: "black", text: "black", textDisabled: "#ccc", textAdditional: "#595959", textAdditionalVariant: "#e5e7eb", error: "#b94a48", onError: "white", errorContainer: "#FFDAD6", onErrorContainer: "#7D2B25" },
onPrimary	Legt die Farbe fest, die auf einer primären Hintergrundfarbe angezeigt wird. Wenn Sie beispielsweise die Farbe einer Schaltfläche anpassen möchten: • Farbe der Schaltfläche = primär • Textfarbe auf der Schaltfläche = onPrimary
onPrimaryFixed	Legt die Farbe fest, die auf einem primären Hintergrund angezeigt wird. Während die Farben „onPrimary“ und „onPrimaryFixed“ beide auf einem primären Hintergrund angezeigt werden, wird die Farbe „onPrimaryFixed“ auch angezeigt, wenn der Anzeigemodus geändert wird. Wenn beispielsweise vom hellen Modus in den dunklen Modus gewechselt wird, wird die Farbe „onPrimaryFixed“ nicht invertiert oder auf andere Weise verändert. Daher ist die Farbe „onPrimaryFixed“ nützlich für Elemente, die immer gleich angezeigt werden sollen, wie z. B. unternehmensspezifische Farben oder Logos.
secondary	Legt die Sekundärfarbe Ihres benutzerdefinierten Designs fest.
onSecondary	Legt die Farbe fest, die auf einer sekundären Hintergrundfarbe angezeigt wird. Wenn Sie beispielsweise die Farbe einer Schaltfläche anpassen möchten: • Farbe der Schaltfläche = sekundär • Textfarbe auf der Schaltfläche = onSecondary
tertiary	Legt die Tertiärfarbe Ihres benutzerdefinierten Designs fest.
onTertiary	Legt die Farbe fest, die auf einer tertiären Hintergrundfarbe angezeigt wird. Wenn Sie beispielsweise die Farbe einer Schaltfläche anpassen möchten: • Farbe der Schaltfläche = tertiär • Textfarbe auf der Schaltfläche = onTertiary
surface	Legt die Hintergrundfarbe eines Bereichs fest, beispielsweise den Hintergrund der App.
onSurface	Legt die Farbe fest, die auf einer Oberflächenhintergrundfarbe angezeigt wird. Wenn Sie beispielsweise die Farbe eines Bereichs anpassen möchten: • Farbe des Bereichs = Oberfläche • Textfarbe auf dem Bereich = auf Oberfläche
surfaceContainer	Legt die Hintergrundfarbe eines Containers fest, der auf der Hintergrundfarbe der Oberfläche angezeigt wird.
onSurfaceContainer	Legt die Farbe fest, die auf der Oberfläche angezeigt wird. Hintergrundfarbe des Containers. Beispielsweise die Farbe eines Textes oder Symbols.
surfaceComponent	Legt die Farbe der UI-Komponenten fest, die auf der Oberfläche angezeigt werden. Containerfarbe. Beispielsweise die Farbe eines Eingabefelds oder die Hintergrundfarbe der Chat-Sprechblasen.
onSurfaceComponent	Legt die Farbe fest, die auf der Oberfläche angezeigt wird. Hintergrundfarbe der Komponente. Beispielsweise die Textfarbe eines Eingabefelds oder die Chat-Sprechblasen.
titleText	Legt die Farbe der Überschriften fest.
text	Legt die Farbe des Fließtextes fest.
textDisabled	Legt die Farbe von Texten in deaktivierten Schaltflächen oder inaktiven Texten fest. Beispiel: Die Farbe der Fußnoten in der Übersicht der gefundenen Quellen.
textAdditional	Legt die Farbe von zusätzlichen Texten wie Metadaten, Untertiteln, Hilfetexten und Datumsangaben fest.
textAdditionalVariant	Legt die Farbe von Texten wie Fußnoten und Platzhaltern fest.
error	Legt die Farbe des Textes, Symbols oder Indikators für den Fehler fest.
onError	Legt die Farbe fest, die als Hintergrundfarbe für Fehler angezeigt wird.
errorContainer	Legt die Hintergrundfarbe des Fehlercontainers fest.
onErrorContainer	Legt die Text- oder Symbolfarbe auf der Hintergrundfarbe des errorContainer fest.

Schriften und Typografie

Um die Schriftarten und die Typografie anzupassen, müssen die Schriftarten im Abschnitt fonts definiert und anschließend im Abschnitt base.typography.fontFamily zugewiesen werden.

Um Schriftarten zu definieren, müssen die folgenden Attribute im Abschnitt fonts konfiguriert werden:

Attribut

Beschreibung

Beispiel

fontFamily

Der benutzerdefinierte Name der Schriftart, auf die im Abschnitt „Typografie“ verwiesen wird.

"fonts": [

{

"fontFamily": "Font 1",

"fontStyle": "normal",

"fontWeight": "400",

"src": {

"local": "Playfair Display",

"url": "https://inspire.mindbreeze.com:12345/resources/client-service/default/plugin-config/PlayfairDisplay.ttf",

"format": "truetype"

}

fontStyle

Der Stil der Schriftart. Zum Beispiel normal oder kursiv.

fontWeight

Die Schriftstärke. Zum Beispiel 400.

src

Die Quelle der Schriftart mit den folgenden Attributen:

Attribut	Beschreibung
locale	Der Name der Schriftart. Beispielsweise Times New Roman, Helvetica oder Arial.
url	Der Pfad zur Schriftartdatei. Hinweis: Der Pfad muss zu einer Truetype-, WOFF- oder WOFF 2-Datei führen.
format	Das Format der Schriftartdatei. Das Format „truetype“ wird unterstützt. Die Formate „woff“ und „wof 2“ werden empfohlen. Hinweis: Stellen Sie sicher, dass das Format mit dem Format des Pfads im Attribut „url“ übereinstimmt, da die Schriftart sonst nicht im benutzerdefinierten Design angewendet wird.

Nun können die definierten Schriftarten den folgenden Attributen im Abschnitt base.typography.fontFamily zugewiesen werden:

Attribut	Beschreibung	Beispiel
default	Die Standardschriftart für jeden Text.	"typography": { "fontFamily": { "default": "Font 1", "heading": { "var": "typography.fontFamily.default" }, "code": "Font 1", "pre": { "var": "typography.fontFamily.code" }, "em": { "var": "typography.fontFamily.default" }, "quote": { "var": "typography.fontFamily.default" } } },
heading	Die für Überschriften verwendete Schriftart.
code	Die Monospace-Schriftart, die für einzelne Codezeilen in einem Text verwendet wird.
pre	Die für Codeblöcke verwendete Schriftart.
em	Die Schriftart, die für Text verwendet wird, der sich optisch abheben soll. Zum Beispiel durch Kursivschrift oder Fettdruck.
quote	Die für Zitate verwendete Schriftart.

Rahmen

Die verschiedenen Rahmen können im Abschnitt base.border und base.borderRadius angepasst werden.

Die folgenden Attribute sind im Abschnitt base.border verfügbar:

Attribut	Beschreibung	Beispiel
width	Legt die Breite des Rahmens in Pixel fest.	"border": { "width": "0px", "color": "#ddd", "style": "solid" },
color	Definiert die Farbe des Rahmens mit einem Hex-Code.
style	Legt den Stil der Umrandung fest. Zum Beispiel durchgehend, gestrichelt, doppelt und andere.

Die folgenden Attribute sind im Abschnitt base.borderRadius verfügbar:

Attribut	Beschreibung	Beispiel
default	Definiert den Standard-Eckenradius in Pixel, Prozent, em oder rem.	"borderRadius": { "default": "1px", "extra-small": "20px", "small": "20px", "medium-small": "0.375rem", "standard": "2px", "large": "1px", "pill": "62.4375rem", "circle": "50%" },
extra-small	Definiert den Eckenradius für sehr kleine Bildschirmgrößen in Pixel, Prozent, em oder rem.
small	Definiert den Eckenradius für kleine Bildschirmgrößen in Pixel, Prozent, em oder rem.
medium-small	Definiert den Randradius für mittlere Bildschirmgrößen in Pixel, Prozent, em oder rem.
standard	Definiert den Standard-Eckenradius in Pixel, Prozent, em oder rem.
large	Definiert den Randradius für große Bildschirmgrößen in Pixel, Prozent, em oder rem.
pill	Definiert den Radius der Pille in Pixel, Prozent, em oder rem.
circle	Definiert den Kreisradius in Pixel, Prozent, em oder rem.

Standard-Vorlage

Die folgende Standard-Vorlage kann bei der Erstellung eines benutzerdefinierten Theme als Startpunkt verwendet werden:

{

"themes":{

"base":{

"boxShadow":"0 0 0 2px var(--mindbreeze-colors-secondary)",

"colors":{

"primary":"#222",

"onPrimary":"white",

"onPrimaryFixed":"#fec800",

"secondary":"#fec800",

"onSecondary":"black",

"tertiary":"#0052a7",

"onTertiary":"white",

"outline":"#595959",

"outlineVariant":"#e5e7eb",

"surface":"white",

"onSurface":"black",

"surfaceComponent":"#f3f3f6",

"onSurfaceComponent":"black",

"surfaceContainer":"#e5e7eb",

"onSurfaceContainer":"black",

"titleText":"black",

"text":"black",

"textDisabled":"#ccc",

"textAdditional":"#595959",

"textAdditionalVariant":"#e5e7eb",

"error":"#b94a48",

"onError":"white",

"errorContainer":"#FFDAD6",

"onErrorContainer":"#7D2B25"

"padding":{

"margin":{

"typography":{

"fontFamily":{

"default":"\"Roboto\", Arial, Helvetica, sans-serif",

"heading":{

"var":"typography.fontFamily.default"

"code":"Monaco, Menlo, Consolas, \"Courier New\", monospace",

"pre":{

"var":"typography.fontFamily.code"

"em":{

"var":"typography.fontFamily.default"

"quote":{

"var":"typography.fontFamily.default"

}

"textAlign":{

"border":{

"width":"1px",

"color":"#ddd",

"style":"solid"

"borderRadius":{

"default":"0",

"extra-small":"0.125rem",

"small":"0.25rem",

"medium-small":"0.375rem",

"standard":"0",

"large":"0.75rem",

"pill":"62.4375rem",

"circle":"50%"

"cursor":{

}

"breakpoints":{

"xs":320,

"sm":640,

"md":768,

"lg":1024,

"xl":1280,

"2xl":1536

"icons":{

"on-primary-logo":{

"resourceLocation":"img/v2/Mindbreeze-Logo-NEG.svg",

"width":"257px",

"height":"34px"

"primary-logo":{

"resourceLocation":"img/v2/Mindbreeze-Logo-NEG.svg",

"width":"257px",

"height":"34px"

"assistant-avatar":{

"themeable":true,

"html":"<svg… ></svg>"

"chat-input-send":{

"themeable":false,

"html":"<svg… ></svg>"

"close-x-icon":{

"themeable":true,

"html":"<svg… ></svg>"

"arrow-left":{

"themeable":true,

"html":"<svg… ></svg>"

"arrow-right":{

"themeable":true,

"html":"<svg… ></svg>"

"data-source-default-icon":{

"themeable":true,

"html":"<svg… ></svg>"

"scroll-to-bottom-icon":{

"themeable":false,

"html":"<svg… ></svg>"

"exclamation":{

"themeable":true,

"html":"<svg… ></svg>"

"pen-to-square":{

"themeable":true,

"html":"<svg… ></svg>"

"pen-to-square2":{

"themeable":true,

"html":"<svg… ></svg>"

"drop-down-arrow":{

"themeable":true,

"html":"<svg… ></svg>"

"copy":{

"themeable":true,

"class":"icon-copy",

"private":true

"refresh":{

"themeable":true,

"class":"icon-refresh",

"private":true

"info-sign":{

"themeable":true,

"class":"icon-info-sign",

"private":true

"angle-up":{

"themeable":true,

"class":"icon-angle-up",

"private":true

"angle-down":{

"themeable":true,

"class":"icon-angle-down",

"private":true

}

"fonts":[

{

"fontFamily":"Roboto",

"fontStyle":"normal",

"fontWeight":"normal",

"src":{

"local":"Roboto",

"url":"/font/Roboto-Light.woff",

"format":"woff"

}

"modules":{

"basic.card":{

"height":"100%",

"mb-mod-card":{

"height":"100%"

"cardBorder":{

"height":"100%",

"border":{

"width":"2px",

"color":"#e7e7e7",

"style":"solid",

"radius":{

"var":"borderRadius.extraSmall"

}

"overflowY":"auto",

"borderRadius":"3px",

"backgroundColor":{

"var":"colors.surface"

}

"cardHeader":{

"padding":"16px 16px 8px",

"backgroundColor":{

"var":"colors.surface"

}

"cardBody":{

"padding":"8px 16px 0px"

"cardTitle":{

"fontWeight":{

"var":"typography.fontWeight.title"

"color":{

"var":"colors.primary"

"typography":{

"fontSize":{

"var":"typography.fontSize.heading1"

}

"cardTitle h1":{

"margin":"0",

"typography":{

"fontSize":{

"var":"typography.fontSize.heading1"

}

"cardTitle h2":{

"margin":"0",

"typography":{

"fontSize":{

"var":"typography.fontSize.heading2"

}

"cardTitle h3":{

"margin":"0",

"typography":{

"fontSize":{

"var":"typography.fontSize.heading3"

}

"cardTitle h4":{

"margin":"0",

"typography":{

"fontSize":{

"var":"typography.fontSize.heading4"

}

"cardTitle h5":{

"margin":"0",

"typography":{

"fontSize":{

"var":"typography.fontSize.heading5"

}

"cardTitle h6":{

"margin":"0",

"typography":{

"fontSize":{

"var":"typography.fontSize.heading6"

}

"cardSubtitle":{

"color":{

"var":"colors.primary"

"typography":{

"fontSize":{

"var":"typography.fontSize.heading3"

}

"cardFooter":{

"padding":"16px 16px 16px"

"cardAction":{

"margin":"10px 0 0 0 "

}

"basic.resultform":{

"resultFormField":{

"padding":"8px",

"margin":"0",

"border":{

"width":"0px",

"color":"rgba(0,0,0,0) rgba(0,0,0,0) #888 #888;",

"style":"solid"

}

"fieldTitle":{

"color":"#000",

"typography":{

"fontSize":"13px",

"fontWeight":"900"

}

"fieldContent":{

}

"basic.resultlist":{

"resultlistHeader":{

"textAlign":"left",

"typography":{

"fontSize":{

"var":"typography.fontSize.base"

"fontWeight":"bold"

}

"resultlistContent tr td":{

"padding":"5px 0",

"border":{

"width":"0 0 1px 0",

"color":"#d4d4d4",

"style":"solid"

"typography":{

"fontSize":{

"var":"typography.fontSize.base"

}

"cursor":"pointer"

"resultlistContent > tr:hover":{

"backgroundColor":"#f4f4f4"

}

"basic.userinput":{

"mbUserInput":{

}

"widgets":{

"chat":{

"showScrollToBottom":true,

"showMessageOnTop":true,

"offsetHeight":4,

"header":{

"isFullWidth":false,

"paddingTop":"38px",

"action":{

"passiveColor":{

"var":"colors.surfaceComponent"

"clickedColor":{

"var":"colors.surfaceContainer"

"border":{

"color":{

"var":"border.color"

}

"message":{

"base":{

"maxLines":4,

"borderColor":"",

"borderWidth":{

"var":"border.width"

"borderStyle":{

"var":"border.style"

"backgroundColor":{

"var":"colors.surfaceComponent"

"showAvatarIcon":true,

"defaultOrientation":"left",

"fontFamily":{

"var":"fontFamily.default"

"messageGap":"20px",

"citation":{

"link":{

"color":{

"var":"colors.tertiary"

}

"user":{

"color":{

"var":"colors.onSurfaceComponent"

"orientation":"right",

"avatarWidth":"18px",

"avatarHeight":"18px",

"bubblePadding":"10px",

"minBubbleWidth":"40%",

"borderRadius":"8px"

"assistant":{

"backgroundColor":{

"var":"colors.surfaceComponent"

"color":{

"var":"colors.onSurfaceComponent"

"borderColor":{

"var":"colors.outlineVariant"

"borderWidth":{

"var":"border.width"

"borderStyle":{

"var":"border.style"

"borderRadius":"10px",

"hideLeftAccentBorder":false,

"avatarWidth":"24px",

"avatarHeight":"24px",

"fontFamily":{

"var":"fontFamily.default"

"maxBubbleWidth":"90%",

"minBubbleWidth":"70%",

"bubblePadding":"0px"

}

"input":{

"textInput":{

"forceFocus":true,

"color":{

"var":"colors.onSurfaceComponent"

"backgroundColor":{

"var":"colors.surfaceComponent"

"borderRadius":{

"var":"borderRadius.large"

"border":{

"color":{

"var":"colors.outlineVariant"

"width":{

"var":"border.width"

"style":{

"var":"border.style"

}

"boxShadow":{

"var":"boxShadow"

"fontFamily":{

"var":"fontFamily.default"

"focus":{

"border":{

"color":{

"var":"colors.secondary"

"width":{

"var":"border.width"

"style":{

"var":"border.style"

}

"maxInputWidth":"75%"

}

"chat[xs]":{

"header":{

"isFullWidth":true,

"action":{

}

"message":{

"base":{

"maxLines":0,

"messageGap":"10px"

"user":{

"showAvatarIcon":false,

"minBubbleWidth":"90%",

"maxBubbleWidth":"100%"

"assistant":{

"showAvatarIcon":false,

"maxBubbleWidth":"100%"

}

"input":{

"textInput":{

"maxInputWidth":"100%"

}

"chat[sm]":{

"header":{

"isFullWidth":true,

"action":{

}

"message":{

"user":{

"showAvatarIcon":false,

"minBubbleWidth":"90%",

"maxBubbleWidth":"100%"

"assistant":{

"showAvatarIcon":false,

"maxBubbleWidth":"100%"

}

"chat[md]":{

"header":{

"isFullWidth":true,

"action":{

}

"message":{

"base":{

"maxLines":0

"user":{

"showAvatarIcon":false,

"orientation":"right",

"minBubbleWidth":"80%",

"maxBubbleWidth":"100%"

"assistant":{

"showAvatarIcon":false,

"maxBubbleWidth":"100%"

}

"input":{

"textInput":{

"maxInputWidth":"100%"

}

"chat[lg]":{

"message":{

"user":{

"showAvatarIcon":false,

"minBubbleWidth":"60%",

"maxBubbleWidth":"95%"

}

"chat[xl]":{

"message":{

"user":{

"maxBubbleWidth":"90%"

"assistant":{

}

"chat[2xl]":{

"message":{

"base":{

"maxLines":8

"user":{

"maxBubbleWidth":"95%"

"assistant":{

}

"resultsources[xs]":{

"sources":{

"showIndex":false

}

"resultsources":{

"sources":{

"showIndex":true,

"autoCollapseNonFocused":true,

"color":{

"var":"colors.textDisabled"

"fontSize":"15px",

"defaulIconColor":{

"var":"colors.textTitle"

"hideDataSourceIcon":false,

"sourceIndexMinWidth":"25px"

"result":{

"base":{

"borderRadius":{

"var":"borderRadius.small"

"border":{

"color":"#999",

"width":"2px",

"style":{

"var":"border.style"

}

"hideLeftAccentBorder":true,

"closeBtnColor":{

"var":"colors.onSurface"

"backgroundColor":"#fff"

"actions":{

"color":{

"var":"colors.tertiary"

"hoverColor":{

"var":"colors.tertiary"

"font":{

"family":{

"var":"fontFamily.default"

"size":"14px",

"weight":"700"

"separator":{

"color":{

"var":"colors.secondary"

"width":"1px",

"height":"12px"

}

"title":{

"color":{

"var":"colors.onSecondary"

"font":{

"family":{

"var":"fontFamily.default"

"size":"16px",

"weight":"700"

"lineHeight":"22px"

"snippet":{

"maxLines":"10",

"highlightMaxChars":"512",

"border":{

"color":{

"var":"border.color"

"width":{

"var":"border.width"

"style":{

"var":"border.style"

}

"summary":{

"color":{

"var":"textAdditional"

"font":{

"size":"10px",

"weight":"normal",

"family":{

"var":"fontFamily.default"

}

"property":{

"label":{

"color":{

"var":"colors.outline"

"font":{

"size":"10px",

"weight":"700",

"family":{

"var":"fontFamily.default"

}

"value":{

"color":{

"var":"colors.outline"

"font":{

"size":"10px",

"weight":"normal",

"family":{

"var":"fontFamily.default"

}

chatframe (Mindbreeze InSpire AI Chat - iframe)

Der Mindbreeze InSpire AI Chat kann mit der chatframe Komponente in Insight Apps eingebaut werden. Mit dem AI Chat können Nutzer Informationen in natürlicher Sprache in Form von Antworten finden. Neben der Antwort wird auch ein Link bereitgestellt, der den Nutzern direkten Zugriff auf die Quelle und den Kontext der Antwort ermöglicht.

Die chatframe Komponente kann wie folgt in Ihr HTML integriert werden:

Wenn Sie die Attribute im HTML-Code verwenden, stellen Sie sicher, dass Sie das Präfix „data“ an das Attribut anhängen. Zum Beispiel: data-constraint="ALL AND extension:pdf" .

Der HTML-Code mit Attributen kann dann wie folgt aussehen:

CSS-Variablen für die Höhe des AI Chats

Die Standard- und Mindesthöhe des AI Chats ist in einer CSS-Datei vordefiniert. Um die CSS-Datei zu verwenden, wird adapted.css benötigt:

Standardhöhe: 100 vh
Mindesthöhe: 300 px

Attribute

Die folgenden Attribute sind verfügbar:

Attribut

Beschreibung

data-constraint

Definiert Einschränkungen für den AI-Chat, z. B. die Beschränkung des AI-Chats auf PDF-Dokumente. Die Einschränkung wird mit einem Abfrageausdruck definiert.

Beispiel: "ALL AND extension:pdf"

data-height

Definiert die vordefinierte Höhe für den AI-Chat im Designer.

Die folgenden Werte sind verfügbar:

Wert	Beschreibung
Automatisch	Berechnet die Höhe, wenn ein Ereignis ausgelöst wird, das die Größe ändert.
Maximale Höhe	Höhe ist auf 95 vh festgelegt.
2/3 Höhe	Höhe ist auf 75 vh festgelegt.
Halbe Höhe	Höhe ist auf 50 vh festgelegt.
1/4 Höhe	Höhe ist auf 25 vh festgelegt.

Standardwert: Automatisch

Achtung: Das Attribut data-height akzeptiert auch Werte in %, em, rem und px, wenn es von außen gesetzt wird. Bei der Verwendung der Option "Automatisch" wird die Höhe automatisch berechnet.

data-show-model

Legt fest, ob das Large Language Model (LLM), das für die Generierung von Antworten verwendet wird, im AI Chat angezeigt wird. Kann aktiviert und deaktiviert werden.

Verfügbare Einstellungen:

True
False

Standardeinstellung im Insight App Designer: True

data-show-side-navigation

Legt fest, ob die Seitennavigation sichtbar sein soll oder nicht. Die Seitennavigation zeigt eine Liste aller erstellten Chats an.

Verfügbare Einstellungen:

True
False

Standardeinstellung im Insight App Designer: True

data-use-user-query

Legt fest, ob der AI Chat die Abfrage aus der Suchanfrage verwenden soll.

Beispiel:

Der Nutzer sucht nach „Was ist ein Konnektor?“.

Der AI Chat nutzt diese Abfrage und generiert Antworten, die auf „Was ist ein Konnektor?“ basieren.

Verfügbare Einstellungen:

True
False

Standardeinstellung im Insight App Designer: True

data-use-user-constraints

Legt fest, ob der AI Chat Einschränkungen wie Filter anwenden soll, die vom Nutzer gesetzt wurden.

Beispiel:

Der Nutzer setzt den Datumsfilter auf „2024“.

Der AI Chat wendet den Datumsfilter an und verwendet nur Dokumenten aus dem Jahr 2024 und jünger, um eine Antwort zu generieren.

Verfügbare Einstellungen:

True
False

Standardeinstellung im Insight App Designer: True

data-use-source-context-constraint

Legt fest, ob der AI Chat Einschränkungen der Datenquelle anwenden soll, die vom Nutzer gesetzt wurden.

Beispiel:

Der Nutzer setzt den Filter für Datenquellen auf „Web“.

Der AI Chat wendet den Filter an und verwendet nur Webdokumente, um eine Antwort zu generieren.

Verfügbare Einstellungen:

True
False

Standardeinstellung im Insight App Designer: True

data-model-id

Durch die Angabe eines Modells, generiert der AI Chat nur mit diesem Modell die Antworten. Ist dieses Attribut gesetzt, wird empfohlen das Attribut data-show-model auf false zu setzen, um die Modellauswahlkomponente auszublenden.

Beispiel:

Der Entwickler setzt das Attribut data-model-id im HTML.

Der AI Chat zwingt den Chat dazu nur dieses Modell zu verwenden, um eine Antwort zu generieren.

Verfügbare Einstellungen:

Der Entwickler muss die Modell-UUID kennen.

Standardeinstellung im Insight App Designer: Nicht sichtbar im Insight App Designer.

Achtung: Die Attribute werden einmalig bei der Initialisierung der Anwendung festgelegt. Spätere Änderungen an den Attributen werden aktuell nicht unterstützt.

Achtung: Die Informationen zur Suchanfrage werden automatisch gesammelt und an den AI Chat gesendet, wenn der Benutzer mit der Insight App interagiert.

charts (Anzeige von Diagrammen)

Zeigt Filter in Form von Charts an und besitzt somit eine Ähnliche Funktion wie die Komponente filteredfacet.

Verfügbare Chart-Typen

Pie

Wählt man den Chart-Type „pie“ aus, erhält man eine Grafik wie in folgender Grafik angezeigt. Die möglichen Einstellungen findet man hier.

Beispiel:

<div data-template="charts"

data-charttype="pie"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

data-showlegend="true"

></div>

Attribute

Attribut

Beschreibung

data-colors

Definiert eine Liste von Farben, die in einem Pie Chart verwendet werden können. Die Farben können mit einem Doppelpunkt unterschieden werden.

Typ: Array

Beispiel:

data-colors="#FFCC00;#FFEE11"

Bar

Wählt man den Chart-Type „bar“ aus, erhält man eine Grafik wie in folgender Grafik angezeigt. Die möglichen Einstellungen findet man hier.

Beispiel:

<div data-template="charts"

data-charttype="bar"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

></div>

Line

Wählt man den Chart-Type „line“ aus, erhält man eine Grafik wie in folgender Grafik angezeigt. Die möglichen Einstellungen findet man hier.

Beispiel:

<div data-template="charts"

data-charttype="line"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

></div>

Einstellungen der Charts

Einstellung	Beschreibung
data-template	Als Template wird “charts” angegeben.
data-charttype	Gibt den Type des Charts an. In diesem Fall wird „pie“ verwendet.
data-chartsourcename	Gibt den zu verwendenen Filter an. Beispiel: „extension“, „mes:size“, etc
data-enablecustomsourcename	Verwendung von benutzerdefiniertem Sourcename oder Sourcename. Mögliche Werte: True False Standardeinstellung: false
data-customsourcename	Gibt den zu verwendenen benutzerdefinierten Sourcename an, sollte dieser nicht in der Auswahlliste von „Sourcename“ vorhanden sein. Wenn der falsche Quellenname eingestellt ist, wird die Warnung angezeigt. Standardeinstellung: nicht gesetzt
data-charttitle	Setzt eine Überschrift bzw. den Titel. Beispiel: „Erweiterung“
data-showlegend	Zeigt die Werte in der Legende an. Mögliche Werte: True False Standardeinstellung: false
data-chartheight	Setzt die Höhe des Charts. Standardeinstellung: 200
data-chartwidth	Setzt die Breite des Charts. Standardeinstellung: 100%
data-chartcategories	Legt die Kategorien des Diagramms fest. Mindestwert: 3 Beispiel: “Solution Design,Go-Live,Project Setup”
data-chartresults	Legt die Nummer des Diagramms fest. Standardeinstellung: 5
data-titlealign	Ausrichtung der Überschrift. Mögliche Werte: Left Center Right Standardeinstellung: Center

collect (Ergebnisse sammeln)

Widget für Ergebnisse, die mit der "Sammeln"-Aktion gesammelt wurden.

Modell: application.models.collected

Beispiel:

Einstellungen:

Einstellung

Beschreibung

data-favorites-collection-path

Persisted Collection Pfad zum Speichern der gesammelten Ergebnisse. Muss mit favorites/ beginnen.

Standardeinstellung: leer

data-results-shortcut

Beschreibung der Tastenkombination, die verwendet wird, um zu den Resultaten zu navigieren.

Beispiel:

Alt+2

Standardeinstellung: leer

constraints (Datenquellen-Filter)

Zeigt einen Filter für die Einschränkungen der Datenquellen an. Bei Microsoft Exchange stehen beispielsweise E-Mail, Anhang, Kalender, Kontakt, Aufgabe, Notiz und Post zur Auswahl.

Modell: application.models.userSourceInfo

Beispiel:

Mustache-Templates

Siehe Mustache-Templates im Kapitel filteredfacet.

clientnotification (Client Benachrichtigungen)

Mit "clientnotification" haben Sie die Möglichkeit, Ihre Benutzer über die neuesten Funktionen und Tools zu informieren. Bitte beachten Sie, dass das clientnotification -Widget nur von einem Administrator aktiviert werden kann.

Diese Komponente ist standardmäßig in der Client-Anwendung integriert. Um die Benachrichtigung einzurichten, erstellen Sie eine JSON-Datei passend zu Ihrem Anwendungskontext im Hauptmenüpunkt “File Manager”. Öffnen Sie dafür den File Manager und dann das “Local Filesystem”. Klicken Sie dort auf den Ordner “data” und dann auf den Ordner “resources”. Erstellen Sie dann im Ordner “resources” einen neuen Ordner mit dem Namen „client_notifications“. Erstellen Sie in diesem Ordner die JSON-Datei “client_notification.json”.

Achtung: Der Name dieser Datei muss "client_notification.json" lauten, sonst funktioniert die Funktion nicht, auch wenn der Inhalt korrekt ist.

Default Template

Das Default Template ist für den Standard-Client verfügbar und standardmäßig aktiviert. Fügen Sie das Default Template in die erstellte Datei client_notification.json ein, um Ihre Client Benachrichtigungen anzupassen:

{

"theme": {

"rightPosition": "1.25rem",

"topPosition": "4.75rem",

"leftPosition": "",

"bottomPosition": "",

"backgroundColor": "",

"previewTextColor": "",

"previewTextFontSize": "",

"leftBorderColor": "",

"okButtonColor": "",

"okButtonTextColor": "",

"deactivateButtonColor": "",

"deactivateButtonTextColor": "",

"notNowButtonColor": "",

"notNowButtonTextColor": "",

"titleFontSize": "",

"maxWidth": ""

"generalConfig": {

"notificationSnoozeTimeInHours": 24,

"enableAllNotifications": false

"items": [

{

"id": "1",

"version": 1,

"clientNotificationType": "outlook-add-in",

"targetApplications": [

"Chrome",

"Firefox",

"Edge"

"clientNotificationContent": {

"title": {

"en": "Microsoft Outlook Add-In available",

"de": "Microsoft Outlook Add-In verfügbar"

"previewTextDescription": {

"en": "With the Outlook Add-in, search and your Insight apps are seamlessly integrated into Microsoft Outlook.",

"de": "Mit dem Outlook-Add-in werden die Suche und Ihre Insight Apps nahtlos in Microsoft Outlook integriert."

}

"clientNotificationActions": [

{

"action": "download",

"label" : {

"en": "Download Installer",

"de": "Installer herunterladen"

"href": "/api/download/Mindbreeze%20Outlook%20Add-In/vsto/setup.exe",

"precheckUrl": "/api/download/Mindbreeze%20Outlook%20Add-In/vsto/Mindbreeze.OutlookAddin.vsto"

}

"requiresResourcePlugin" : "Mindbreeze Outlook Add-In",

"isEnabled": true

{

"id": "2",

"version": 1,

"clientNotificationType": "edge-plugin",

"targetApplications": [

"Edge"

"clientNotificationContent": {

"title": {

"en": "Microsoft Edge Add-on available",

"de": "Microsoft Edge Add-on verfügbar"

"previewTextDescription": {

"en": "The Microsoft Edge Add-on integrates the search functionality into the Microsoft Edge browser.",

"de": "Mit dem Microsoft Edge Add-on wird die Suchfunktionalität in den Microsoft Edge Browser integriert."

}

"clientNotificationActions": [

{

"action": "download",

"label" : {

"en": "Open Microsoft Edge Add-on",

"de": "Microsoft Edge Add-on öffnen"

"href": "https://microsoftedge.microsoft.com/addons/detail/mindbreeze-inspire/olnededlkneidefhclnhcambjlhpcmfa"

}

"isEnabled": true

{

"id": "3",

"version": 1,

"clientNotificationType": "chrome-plugin",

"targetApplications": [

"Chrome"

"clientNotificationContent": {

"title": {

"en": "Google Chrome Extension available",

"de": "Google Chrome Erweiterung verfügbar"

"previewTextDescription": {

"en": "The Google Chrome extension integrates the search functionality into the Chrome browser.",

"de": "Mit der Google Chrome Erweiterung wird die Suchfunktionalität in den Chrome Browser integriert."

}

"clientNotificationActions": [

{

"action": "download",

"label" : {

"en": "Open Extension in Webstore",

"de": "Erweiterung im Webstore öffnen"

"href": "https://chromewebstore.google.com/detail/mindbreeze-inspire/ejlaikiclffdgdnpjhgikiefnnaajgdi?pli=1"

}

"isEnabled": true

}

]

}

Sie haben auch die Möglichkeit, einige grundlegende Themes nach Ihren Bedürfnissen anzupassen. Für erweiterte Änderungen verwenden Sie bitte die CSS-Datei. Alle HTML-Tags sind über das Präfix ".clientnotification" in der CSS-Datei zugänglich.

Properties

theme

Hier können Sie einfache CSS-Werte übergeben, um die Schriftposition und die Farbe der Benachrichtigung zu ändern. Bitte beachten Sie, dass Sie nur vorhandene Schlüssel verwenden können. Zum Beispiel funktioniert der vorhandene Schlüssel "leftPosition", während eine leichte Variation des Schlüssels wie "myleftPosition" nicht funktioniert.

Die folgenden Properties können an Ihre Bedürfnisse angepasst werden:

Property	Wertetyp	Beschreibung
rightPosition	px , em rem	Abstand der Benachrichtigung von der rechten Seite.
topPosition	px , em rem	Abstand der Benachrichtigung von oben.
leftPosition	px , em rem	Abstand der Benachrichtigung von der linken Seite.
bottomPosition	px , em rem	Abstand der Benachrichtigung von unten.
backgroundColor	HEX	Die Hintergrundfarbe der Benachrichtigung.
previewTextColor	HEX	Die Textfarbe des Vorschautextes.
previewTextFontSize	px	Die Schriftgröße des Vorschautextes.
leftBorderColor	HEX	Die Farbe des linken Randes.
okButtonColor	HEX	Die Hintergrundfarbe des "OK" Knopfes.
okButtonTextColor	HEX	Die Textfarbe des "OK" Knopfes.
deactivateButtonColor	HEX	So deaktivieren Sie die Hintergrundfarbe des "OK" Knopfes.
deactivateButtonTextColor	HEX	Zum Deaktivieren der Textfarbe des "OK" Knopfes.
notNowButtonColor	HEX	Die Hintergrundfarbe des Knopfes "Nicht jetzt".
notNowButtonTextColor	HEX	Die Textfarbe des Knopfes "Nicht jetzt".
titleFontSize	px	Die Schriftgröße des Titels der Benachrichtigung.

cid:image004.png@01DA60B1.34C82220

generalConfig

Die Property "generalConfig" definiert Konfigurationen, die für jede Benachrichtigung gelten. Die folgenden Properties können an Ihre Bedürfnisse angepasst werden:

Property

Wertetyp

Beschreibung

notificationSnoozeTimeInHours

Nummer

Legt fest, wie lange die Benachrichtigung inaktiv ist, wenn der Nutzer auf den Knopf "Nicht jetzt, später" klickt.

Wenn der Wert Null oder leer ist, wird die Benachrichtigung in 24 Stunden wieder angezeigt, was der Standardwert ist.

enableAllNotifications

Boolean

Wenn der Wert für dieses Property auf „false“ gesetzt oder das Property aus dem Objekt „generalConfig“ entfernt wird, werden alle Client-Benachrichtigungen ausgeschaltet.

Wichtig: Sie können weiterhin über URL-Parameter auf deaktivierte Client Benachrichtigungen zugreifen, ohne sie global und/oder individuell zu aktivieren. Weitere Informationen finden Sie auch unter Debuggen und Prüfen deaktivierter Client Benachrichtigungen

Items

Die Property "Items" definiert eine Liste aller anzuzeigenden Client Benachrichtigungen. Die folgenden Properties können an Ihre Bedürfnisse angepasst werden:

Property	Wertetyp	Beschreibung
id	string	Legt die ID der Benachrichtigung fest.
version	number	Legt die Version der Benachrichtigung fest. Wenn Sie dieselbe Benachrichtigung mit verschiedenen Versionen haben, wird dem Nutzer die neueste Version angezeigt. Dies bedeutet, dass Sie dieselbe ID mit verschiedenen Versionen haben können.
clientNotificationType	string	Definiert die Art der Benachrichtigung, z. B. "outlook add in".
targetApplications	Array<string>	Legt die Browser-Plattformen fest, auf denen die Benachrichtigung angezeigt werden soll.
clientNotificationContent	Object	Hier können Sie den Titel und den Text der Benachrichtigung festlegen. Sie können verschiedene Sprachen mit den entsprechenden Sprachschlüsseln hinzufügen. Zum Beispiel "fr" für Französisch.
previewTextDescription	string	Hier können Sie den Vorschautext der Benachrichtigung festlegen. Sie können den Vorschautext auch in mehreren Sprachen festlegen.
clientNotificationActions	Array < ClientNotificationActionObject >	Legt die Aktion fest, die vom Nutzer durchgeführt werden kann. Derzeit kann nur ein Download als Aktion definiert werden. Hier können Sie sowohl einen absoluten Pfad als auch einen relativen Pfad zu der Ressource angeben, die der Nutzer sehen soll.
isEnabled	boolean	Aktiviert oder deaktiviert die Benachrichtigung.

Client notification action object

Property	Wertetyp	Beschreibung
action	enum	Mögliche Werte: download. Achtung: Der Wert “download” muss kleingeschrieben sein.
label	Array <Object>	Eine Liste von Objekten mit der Sprache und ihren Werten. Zum Beispiel: [ {key: "en", value: "Download Installer"} ]
href	string	Ziel-Link für die Aktion.
precheckUrl	string	Ein Link zur Vorabprüfung, ob eine Ressource verfügbar ist, damit die Benachrichtigung angezeigt werden kann. Wenn diese Vorabprüfung fehlschlägt, wird die Benachrichtigung nicht angezeigt.

Clientnotification deaktiveren

Es stehen vier Möglichkeiten zur Auswahl:

Setzen Sie die Einstellung disabledClientNotifications in den Application Options auf „true“. Damit verhindert man vollständig, dass Client Benachrichtigungen angefordert werden.
Setzen Sie die Einstellung enableAllNotifications in der JSON-Konfiguration auf „false“ oder entfernen Sie die Eigenschaft aus generalConfig. Dies verhindert vollständig, dass Client-Benachrichtigungen angezeigt werden.
Legen Sie unter /data/resources/client_notifications/client_notification.json (Linux) oder in C:\Program Files\Mindbreeze\Enterprise Search\Server\resources\client_notifications\client_notification.json (Windows) eine leere JSON-Datei an, worin sich der Wert “{ }” befindet.
Falls Sie ein JSON Notification Item besitzen, worin sich Werte befinden, steht pro clientnotification die Flag „isEnabled“ zur Verfügung. Setzen Sie diese auf „false“.

Debuggen und Prüfen deaktivierter Client Benachrichtigungen

Wenn die Client-Benachrichtigung in der globalen Konfiguration aktiviert ist, können Sie Ihre Client Benachrichtigungen überprüfen, bevor Sie die Property "isEnabled" auf "true" setzen. Jede Benachrichtigung hat eine eigene "isEnabled" Property, die individuell aktiviert oder deaktiviert werden kann.

Wenn Sie eine Benachrichtigung überprüfen möchten, die deaktiviert ist (d. h. nicht für alle Benutzer veröffentlicht oder "isEnabled: false"), können Sie über den Query-Parameter auf diese Benachrichtigung zugreifen. Zum Beispiel:

apps/client/?previewClientNotificationId=2.

datasources (Datenquellen-Einschränkung)

Zeigt einen Filter für die Datenquellen an. Hier können Datenquellen, wie Microsoft Exchange, Fabasoft Folio, Microsoft SharePoint ausgewählt werden.

Modell: application.models.userSourceInfo

Beispiel:

Mustache-Templates

Siehe Mustache-Templates unter filteredfacet.

inputdate (Datumsauswahl)

Bietet eine Datumsauswahl für ein Eingabefeld an. Das Template muss auf einem input-Element verwendet werden. Das name-Attribut gibt an, welches Metadatum eingeschränkt wird.

Beispiele:

Standardmäßige Unterstützung für Platzhalter und Icon über das "Options" Objekt:

Entwickler können das Options-Objekt erweitern, indem sie es an data-template="inputdate" übergeben. Dies ermöglicht die automatische Integration von Icon und Platzhaltern.

Beispiele:

Options = _.extends(options , {

inputdatePlaceholder :"Date",

inputdateIcon : "icon-calendar",

})

Einstellungen:

Einstellung

Beschreibung

name

Name des Metadatums für die Einschränkung.

data-isrange

Bei „true“ kann ein Zeitbereich angegeben werden.

Standardwert: false

data-format

Datumsformat.

Wert	Beschreibung
D	Einstellige Zahlen ohne Null.
DD	Nummer des Tages.
M	Einstellige Zahlen ohne Null.
MM	Nummer des Monats.
MMM	Kurzer Name des Monats.
MMMM	Voller Name des Monats.

Andere Werte:

"DD.MM.YYYY"
"DD-MM-YYYY"
"MM.DD.YYYY"
"MM-DD-YYYY",
"D. MMMM YYYY"
"DD. MMMM YYYY"
"DD MMMM YYYY"

Standardeinstellung: “DD.MM.YYYY”

date filter (Datumfilter)

Der Datumsfilter kann auch auf Monatsebene beginnen. Die Reihenfolge ist vom neuesten zum ältesten Datum. Diese Einstellung findet man in den Client Services unter „Filter Settings. Die Einstellung „Flat Date Filter Values (Month Year)” muss dafür aktiviert werden:

feedback (Ergebnisse kategorisieren)

Die Feedback-Komponente zeigt die persistierten Daten von Ergebniselementen an und bietet die Möglichkeit, deren Wert in Persisted Resources zu ändern.

Diese Komponente zeigt in den Resultatsaktionen eine Dropdown-Liste mit Einträgen aus dem Backend-Service an. Für authentifizierte Benutzer ist dieser Wert änderbar, ansonsten ist er nur lesbar.

Beispiel:

<div

data-template="feedback"

data-enabled="$$DOCUMENT_LABELING_ENABLED$$"

data-label-path="$$DOCUMENT_LABELING_LABEL_PATH$$"

data-feedback-path="$$DOCUMENT_LABELING_FEEDBACK_PATH$$"

data-label-property="$$DOCUMENT_LABELING_LABEL_PROPERTY$$"

</div>

Sollten die Platzhalter-Attribute nicht verwendet werden, muss folgendes Format verwendet werden:

data-label-path=”labeldefinition/<label-pfad>”
data-collection-path=”itemdata/<feedback-collection>”

Attribute der Vorlage:

Attribut	Beschreibung	Wert
data-label-path	Verfügbare Labels-Collection.	$$DOCUMENT_LABELING_LABEL_PATH$$
data-feedback-path	Bezeichnung der Feedback-Collection.	$$DOCUMENT_LABELING_FEEDBACK_PATH$$
data-label-property	Die Eigenschaft, die als Standardwert für ein Ergebnis angezeigt wird. Beispiele: learningcontent no-learningcontent	$$DOCUMENT_LABELING_LABEL_PROPERTY$$
data-enabled	Aktiviert die Komponente.	"$$DOCUMENT_LABELING_ENABLED$$" Typ: Boolean Standardeinstellung: false

Einstellungen:

Einstellung	Beschreibung
Enable	Aktiviert die Persistierten Ressourcen. Standardeinstellung: false
User Administrator Users	Angabe der User Administratoren. User Administratoren können alle User verwalten (löschen, bearbeiten (z.B. E-Mail Adresse bearbeiten), hinzufügen). Jeder User wird in einer neuen Zeile eingetragen.
JDBC URL	Angabe der Datenbank URL.
Max Number Of Database Connections	Maximale Anzahl der Datenbankverbindungen. Minimalwert: 2. Standardeinstellung: 10
User	Bitte stattdessen ein Credential für die JDBC URL verwenden.
Password	Bitte stattdessen ein Credential für die JDBC URL verwenden.
Database Table Prefix	Angabe des Tabellen-Prefix in der Datenbank.

Um die Komponente Feedback einzubinden, müssen die folgenden Einstellungen im Client Service aktiviert und richtig konfiguriert sein:

Text Classification Insight Service. Document Labeling und Persisted Resources: Die Konfiguration dazu finden Sie hier: „Text Classification Insight Service“.

feedbackbutton (Anzeige des Feedback-Button)

Zeigt den app.telemetry-Feedback-Button an. Der Feedback-Button ist nur sichtbar, wenn app.telemetry für den Client aktiviert und der URL im Clientservice angegeben ist.

Beispiel:

Einstellungen:

Einstellung

Beschreibung

data-check-if-enabled-in-profile

Der Feedback-Button kann im Profil aktiviert/deaktiviert werden. Mit dieser Einstellung legen Sie fest, ob die Profileinstellung berücksichtigt wird.

Mögliche Werte:

true
false

data-formid

Definiert welches Feedback-Formular verwendet wird. Die notwendige Form ID findet man in app.telemetry. Ist keine Form ID angegeben, wird das Standardformular verwendet.

Der URL muss im Manager unter Clientservice beim Punkt: Fabasoft app.telemetry Web API URL eingetragen werden (http://yourdomain.com/web.telemetry).

filteredfacet (Anzeige eines Filters)

Modell: application.models.search + FacetValueCollection + FacetValueCollection.Entry

Beispiele:

data-tag-name="span"

data-attr-title="{{name}}{{^name?}}{{html}}{{/name?}}"

{{{html}}}

<span class="pull-right">{{^count?}}-{{/count?}}{{count}}</span>

<span class="pull-right">{{count}}</span>

</script>

</div>

<div data-template="filteredfacet"

data-name="Author"

data-container-tag-name="div"

data-container-class-name="filter"

data-entry-tag-name="div"

data-entry-class-name="entry">

</div>

Ausgabe:

<div data-template="filteredfacet"

data-name="Author"

data-title-tag-name="h3"

data-title-class-name="title"

data-container-tag-name="div"

data-container-class-name="filter"

data-entry-tag-name="div"

data-entry-class-name="entry">

<h3 class="title">Autor</h3>

...

</div>

...

</div>

Einstellungen:

Einstellung	Beschreibung
data-name	Das Metadatum, das für den Filter verwendet wird.
data-user-input	Mit „disabled“ kann die Benutzereingabe unter dem Filter deaktiviert werden. Mit auto wird die Benutzereingabe an den Typ des Filters angepasst, z.B. Datumseingabe für Datumswerte, Autovervollständigung für Textwerte. Ohne Angabe wird auto verwendet. Die Einstellung ersetzt data-suggest: data-suggest="false" => data-user-input="disabled" data-suggest="true" => data-user-input="auto"
data-user-input-template	Das Widget, das für die Benutzereingabe verwendet wird. Mit suggest wird die Autovervollständigung angezeigt, inputdate zeigt die Datumseingabe. Damit der Wert verwendet wird, darf data-user-input nicht gesetzt sein.
data-user-input-<Einstellung>	Übergeben Sie Einstellungen an das Benutzereingabe-Widget. Zum Beispiel: data-user-input-isrange="true" beim inputdate-Widget.
data-always-visible	Mit „true“ wird der Filter auch angezeigt, wenn noch keine Suche abgesetzt wurde. Da der Typ eines Filters ohne Suche nicht bekannt ist, muss data-user-input-template definiert sein. Standardeinstellung: false
data-incomplete-class	Diese Klasse wird dem HTML-Element gesetzt, wenn der Filter „incomplete“ liefert. Standardeinstellung: „mb-incomplete“
data-title	Falls Sie nicht die Standardübersetzung des Metadatennamens anzeigen möchten, geben Sie hier den gewünschten Titel an.
data-title-tag-name	HTML-Tag, das für die Überschriften der Filter verwendet wird. Standardeinstellung: h3
data-title-class-name	CSS-Klassenname, der für die Überschriften der Filter verwendet wird. Standardeinstellung: leer
data-title-template	Mustache-Template zur Darstellung des Titels. Verfügbare Werte: title isOpen Standardeinstellung: leer
data-container-tag-name	HTML-Tag für das Element, das die Filtereinträge enthält. Standardeinstellung: ul
data-container-class-name	CSS-Klassenname für das Element, das die Filtereinträge enthält. Standardeinstellung: leer
data-entry-tag-name	HTML-Tag für einen Filtereintrag. Standardeinstellung: li
data-entry-class-name	CSS-Klassenname für einen Filtereintrag. Standardeinstellung: leer
data-entry-role	ARIA-role-Attribut für einen Filtereintrag. Standardeinstellung: leer
data-collapsible	Bei „true“ kann der Filter geöffnet und geschlossen werden. Standardeinstellung: false
data-default-open	Gibt an, ob der Filter standardmäßig geöffnet oder geschlossen ist. Standardeinstellung: false
data-displayed	Anzahl der angezeigten Filterwerte. Schränkt die Anzeige der am Client Service konfigurierten Anzahl weiter ein. Sind mehr Einträge vorhanden, können diese mit einer Schaltfläche angezeigt werden.
data-dropdownfilter	Zeigt den gesamten Filter in einer Dropdown-Liste an.
data-close-on-focus-out	Gibt an, ob die Dropdown-Liste automatisch geschlossen werden soll, wenn man außerhalb der Dropdown-Liste klickt. Wird diese Einstellung auf „true“ gesetzt, bleibt die Liste offen, wenn man außerhalb der Liste klickt. Standardeinstellung: false
data-and-available	Aktiviert eine Schaltfläche „+“ neben einem Filterwert, mit dem eine Und-Verknüpfung gemacht werden kann. Standardeinstellung: false
data-intersect-values	Verwendet für die Verknüpfung der ausgewählten Werte AND, somit müssen Treffer alle ausgewählten Werte enthalten. Standardeinstellung: false
data-order-criteria	COUNT sortiert nach Häufigkeit des Auftretens, VALUE nach dem Filterwert, PREDEFINED sortiert nach Titel in aufsteigender Reihenfolge und es können die ersten Werte in data-predefined-order angegeben werden.
data-order-direction	ASCENDING und DESCENDING legen die Richtung direkt fest. Standardeinstellung: ASCENDING
data-predefined-order	Liste der zu Beginn anzuzeigenden Werte, beistrichgetrennt oder JSON. Zum Beispiel: pdf, gif oder ["pdf", "gif"]
data-restore-focus	Setzt den Fokus nach Auswahl eines Wertes wieder auf die Checkbox. Standardeinstellung: true
data-show-checkbox	Zeigt die Checkbox an. Standardeinstellung: true
data-show-all	Zeigt die Option „Alle“ an. Standardeinstellung: true
data-all-title	Legt den Text fest, der angezeigt wird, wenn keine Filter ausgewählt sind. Ist kein Text festgelegt, wird ein von Mindbreeze InSpire vordefinierter Text angezeigt.
data-all-descendants	Liefert die komplette Hierarchie ohne Einschränkung zurück. Standardeinstellung: false
data-hide-filter-options	Zeigt nur das Suchfeld an und blendet alle Filterwerte aus. Standardeinstellung: false
data-inputdate-placeholder	Kann eine Standardübersetzung für Englisch und Deutsch über "i18n.daterangepicker_placeholder" bereitstellen oder durch eine beliebige andere gültige Zeichenfolge ersetzt werden. Falls data-user-input-template="inputdate" gesetzt ist, wird automatisch der angegebene Platzhalter angezeigt.
data-inputdate-icon	Akzeptiert fontawesom icons als Eingabe. Als Standardeinstellung wird "icon-calendar" vorgeschlagen. Wenn data-user-input-template="inputdate" gesetzt ist, wird automatisch das angegebene Symbol angezeigt.

Mustache-Templates

In der Vorlage steht der Wert eines Filtereintrags, die Anzahl der Dokumente, sowie ob der Eintrag aktuell bei der Suche berücksichtigt wird oder nicht.

Standardvorlage:

{{{html}}}

<span class="pull-right">{{^count?}}-{{/count?}}{{count}}</span>

<span class="pull-right">{{count}}</span>

Werte:

Wert	Beschreibung
html	Der formatierte Wert des Filtereintrages. Zum Beispiel: pdf, Max Mustermann, 2014
value	Der Wert des Filtereintrages (z.B. bei Datumswerten).
count	Die Anzahl der gefundenen Dokumente für diesen Eintrag.
excluded	Der Eintrag ist nicht ausgewählt, obwohl andere ausgewählt sind.

filteredfacets (Anzeige mehrere Filter)

Zeigt eine Gruppe von Filtern an. Aktuell steht die Gruppe "mes:configuredfacets" zur Verfügung, die alle in der Client Service-Konfiguration ausgewählten Filter enthält.

Für die Darstellung der einzelnen Filter wird das filteredfacet-Widget verwendet. Eine Darstellungsvorlage dafür kann in filteredfacets hinterlegt werden. Die Möglichkeiten für diese Vorlage finden Sie unter Mustache-Templates bei filteredfacet. Zusätzlich können die Filter per Option als Comboboxen angezeigt werden.

Modell: application.models.search + application.models.search.facets + FacetValueCollection + FacetValueCollection.Entry

Beispiele:

data-tag-name="span"

data-attr-title="{{name}}{{^name?}}{{html}}{{/name?}}"

{{{html}}}

<span class="pull-right">{{^count?}}-{{/count?}}{{count}}</span>

<span class="pull-right">{{count}}</span>

</script>

</div>

Einstellungen:

Einstellung	Beschreibung
data-name	Die Filtergruppe, die angezeigt wird.
data-user-input	Mit „disabled“ kann die Benutzereingabe unter dem Filter deaktiviert werden. Mit auto wird die Benutzereingabe an den Typ des Filters angepasst, z.B. Datumseingabe für Datumswerte, Autovervollständigung für Textwerte. Ohne Angabe wird auto verwendet. Die Einstellung ersetzt data-suggest: data-suggest="false" => data-user-input="disabled" data-suggest="true" => data-user-input="auto"
data-user-input-template	Das Widget, das für die Benutzereingabe verwendet wird. Mit suggest wird die Autovervollständigung angezeigt, inputdate zeigt die Datumseingabe. Damit der Wert verwendet wird, darf data-user-input nicht gesetzt sein.
data-user-input-<Einstellung>	Übergeben Sie Einstellungen an das Benutzereingabe-Widget. Zum Beispiel: data-user-input-isrange="true" beim inputdate-Widget.
data-title-tag-name	HTML-Tag, das für die Überschriften der Filter verwendet wird. Standardeinstellung: h5
data-title-class-name	CSS-Klassenname, der für die Überschriften der Filter verwendet wird. Standardeinstellung: leer
data-facet-container-tag-name	HTML-Tag für das Element, das die Filtereinträge enthält. Standardeinstellung: ul
data-facet-container-class-name	CSS-Klassenname für das Element, das die Filtereinträge enthält. Standardeinstellung: leer
data-facet-entry-tag-name	HTML-Tag für einen Filtereintrag. Standardeinstellung: li
data-facet-entry-class-name	CSS-Klassenname für einen Filtereintrag. Standardeinstellung: leer
data-collapsible	Bei „true“ kann der Filter geöffnet und geschlossen werden. Standardeinstellung: false
data-default-open	Gibt an, ob der Filter standardmäßig geöffnet oder geschlossen ist. Standardeinstellung: false
data-displayed	Anzahl der angezeigten Filterwerte. Schränkt die Anzeige der am Client Service konfigurierten Anzahl weiter ein. Sind mehr Einträge vorhanden, können diese mit einer Schaltfläche angezeigt werden.
data-dropdownfilter	Zeigt alle Filter in einer Dropdown-Liste an. Bei „true“ werden die Filter als Dropdown bzw. Combobox dargestellt. Standardeinstellung: false
data-close-on-focus-out	Gibt an, ob die Dropdown-Liste automatisch geschlossen werden soll, wenn man außerhalb der Dropdown-Liste klickt. Wird diese Einstellung auf „true“ gesetzt, bleibt die Liste offen, wenn man außerhalb der Liste klickt. Standardeinstellung: false
data-inputdate-placeholder	Kann eine Standardübersetzung für Englisch und Deutsch über "i18n.daterangepicker_placeholder" bereitstellen oder durch einen anderen gültigen String ersetzt werden. Falls filteredfacets ein filteredfacet mit data-template="inputdate" enthält, wird der angegebene Platzhalter automatisch auf filteredfacet übertragen.
data-inputdate-icon	Akzeptiert fontawesom icons als Eingabe. Als Standardeinstellung wird "icon-calendar" vorgeschlagen. Falls filteredfacets ein filteredfacet mit data-template="inputdate" enthält, wird das bereitgestellte Icon automatisch an filteredfacet weitergegeben.

Mustache-Templates

Die Vorlage für das filteredfacet-widget wird wie folgt definiert:

...

</div>

Siehe Mustache-Templates unter filteredfacet.

map (Anzeige von Ergebnissen in einer Karte)

Zeigt Ergebnisse, die Geodaten enthalten, in einer Karte. Gibt es kein Ergebnis mit Geodaten wird die Karte nicht angezeigt. Geodaten müssen in den Metadaten geo_latitude und geo_longitude enthalten sein (als Float, Integer oder String, wobei das Dezimaltrennzeichen in diesem Fall ein Punkt sein muss).

Modell: application.models.search + ResultCollection + ResultCollection.Entry

Beispiel:

Mustache-Templates

Der Inhalt des Markers kann mittels Mustache-Template angepasst werden. Die Vorlage für das Map-Widget wird wie folgt definiert (Hilfe siehe mustache):

<a target="_blank" href="{{actions[0].href}}">{{{title}}}</a>

</script>

</div>

Mehrere Markierungen zu einem Resultat anzeigen

Mit folgendem Beispiel können für nur ein einziges Resultat mit mehreren geo_latitude/geo_longitude Weten mehrere Marker in der Map angezeigt werden.

Folgender Aufbau ist notwendig:

"geo_latitude": { data: [ {"value": 15.3343 ], {"value": 14.11111}, … ] }

"geo_longitude": { data: [ {"value": 48.1234 ], {"value": 57.1234}, … ] }

"customProperty": { data: [ {"value": "Title 1"], {"value": "Title 2 }, … ] }

{{{customProperty[geo_index]}}}

</a>

</script>

</div>

Einstellungen:

Einstellung

Beschreibung

data-allow-symbolic-path

Um dynamische Eigenschaften zu aktivieren.

Zum Beispiel:

„myProp[index]“

Standardeinstellung: false

mustache (Mustache-Templates)

Mit dem Mustache-Widget können beliebige JavaScript-Objekte mit Mustache-Templates angezeigt werden.

Spezialverhalten:

{{#...?}}{{/...?}} {{..}} vs. {{{...}}}

Beispiele:

<h3>{{{icon}}} {{{title}}}</h3>

<p>

{{{content}}}

</p>

</script>

<h3>{{{icon}}} {{{title}}}</h3>

<p>

{{{content}}}

</p>

</script>

<h3>{{{icon}}} {{{title}}}</h3>

<p>

{{{content}}}

</p>

</script>

Einstellungen:

Einstellung	Beschreibung
data-tag-name	Der HTML-Tag für die Vorlage. Standardeinstellung: div
data-class-name	CSS-Klassenname für die Vorlage. Standardeinstellung: leer
data-use-output-only	Wenn aktiviert, wird der Input-Teil des Modells nicht für die Darstellung verwendet. Standardeinstellung: false
data-attr-*	Attribute können mit Mustache-Templates berechnet werden. Zum Beispiel: data-attr-id="{{myId}}" → <... id="valueOfMyId">.

Werte:

Die Werte hängen vom verwendeten Model, also dem umgebenden Widget ab. Für Übersetzungen steht immer i18n zur Verfügung, z.B.

Events:

afterRender: modelType:
- Parameters: application, widget, model
- Eventziel: application.views

pages (Seitennavigation)

Zur seitenweisen Navigation der Suchresultate. Verwenden Sie dieses Widget, falls Sie bei den Ergebnissen die Option „Ergebnisse beim Scrollen anzeigen“ nicht aktiviert haben und nicht nur nach vorne und zurück navigieren möchten.

Beispiele:

</script>

</div>

Einstellungen:

Einstellung	Beschreibung
data-max-page-count	Anzahl der maximal angezeigten Seiten. Gibt es mehr Seiten, wird im Standardtemplate „…“ ausgegeben (siehe Bildschirmfoto).

Mustache-Templates

In der Vorlage stehen folgende Eigenschaften zur Verfügung:

Eigenschaft	Beschreibung
pages	Eine Liste der verfügbaren Seiten. Die aktuell ausgewählte Seite liefert current_page true. Mit page kann auf die Seitenzahl zugegriffen werden.
onFirstPage	Enthält true, wenn die erste Seite ausgewählt ist.
onLastPage	Enthält true, wenn die letzte Seite ausgewählt ist.
more_avail	Enthält true, wenn mehr als die angeforderten Seiten verfügbar sind.

Die Standardvorlage:

<ul>

</ul>

</script>

pagination (Laden von weiteren Ergebnissen)

Mit dem pagination-Widget können die Benutzer weitere Suchergebnisse anzeigen. Verwenden Sie dieses Widget, falls Sie bei den Ergebnissen die Option „Ergebnisse beim Scrollen anzeigen“ nicht aktiviert haben.

Bildschirmfoto des pagination-Widgets

Beispiele:

Weitere Ergebnisse laden

</a>

</div>

Zurück

</a>

Weiter

</a>

</div>

Das pagination-Widget zeigt Elemente mit CSS-Klassenname mb-next an, wenn weitergeblättert werden kann. Falls zurückgeblättert werden kann, wird der CSS-Klassenname mb-previous verwendet.

Für das Auslösen der Aktionen verwenden Sie class="... action" data-action="<Aktion>". Mit der Aktion this.nextPage() können Sie weiterblättern, mit this.previousPage() zurück. Wenn die Ergebnisse am Ende der Liste hinzugefügt werden sollen, verwenden Sie this.nextPage({ append: true }).

preview (Dokumentenvorschau)

Zeigt die Vorschau eines Dokuments an, wenn die Preview-Aktion ausgeführt wurde.

Modell: preview

Beispiele:

<h3>

{{{icon}}} {{{title}}}

</a>

</h3>

{{#Author?}}Autor: {{{Author}}}{{/Author?}}

<p>

{{{content}}}

</p>

</script>

</div>

Einstellungen:

Einstellung	Beschreibung
data-loading-message	Kann verwendet werden um wärend des Ladens von Dokumenten im Vorschaufenster eine Nachricht anzuzeigen.
data-loading-message-styles	Kann verwendet werden, um den Stil der Nachricht anzupassen.
data-content-highlight-regions	Kann eine bestimmte Region festlegen, die in einer PDF-Datei in der PDF-Vorschau farblich hervorgehoben werden soll. Dies kann in der Property „initAction“ im Application-Objekt konfiguriert werden. Dort kann das Hervorheben in der Property „settings“ konfiguriert werden. Siehe folgendes Beispiel: var application = new Application({ startSearch: false, enableProfile: true, updateTitle: true, initAction:{ settings: { "preview.contentHighlightRegions" : '{"regions":[{"start":4350,"end":4680}]}' } } }); Um den Start- und/oder Endpunkt einer Quelle zu markieren oder den Text der Quelle hervorzuheben, müssen Hervorhebungsstrategien eingestellt werden. Weitere Informationen zu den Einstellungen der Hervorhebungsstrategie finden Sie im Kapitel Das Application-Objekt.

Mustache-Templates

Die Optionen für diese Vorlage finden Sie unter Mustache-Templates bei results.

Eigenständige Vorschau

Um die Vorschau-Komponente als eigenständige Komponente zu aktivieren, setzen Sie das Attribut "data-standalone" auf "true". Wenn Sie den Insight App Designer verwenden, können Sie die Vorschau-Komponente nun standardmäßig als eigenständige Komponente integrieren.

Dies ist vor allem dann sehr nützlich, wenn Sie eine Insight App erstellen möchten, in der Sie mit Dokumenten chatten können.

Die eigenständige Vorschau nimmt das erste Ergebnis aus den Ergebnissen und projiziert den Inhalt je nach Kontext (HTML-Seite oder PDF-Dokument).

Achtung: Um die Vorschau im eigenständigen Modus zu verwenden, müssen Sie sie nicht in data-template="stack" verpacken.

Hinweis: Um die initialisierte Höhenanpassung und die Größenanpassung der Fensterhöhe anzuwenden, nutzen Sie data-height=„auto“. Dadurch wird die Höhe der PDF-Vorschau relativ zur Einstellung viewportElement angepasst. Weitere Informationen zur Einstellung viewportElement finden Sie in viewportElement.

queryinfo (Anzeige von Expressions)

Zeigt grafisch Expressions an.

Beispiel:

<div

data-template="queryinfo"

data-input-path="user.constraints.parsed.and.constraints"

data-title="Query Constraints"

class="constraints-container searchinfo_constraints">

</div>

Die Liste der verschiedenen Options für das Dropdown wird über die Funktion ‘getQueryinfoSelectOptionProperties’ beretigestellt.

Diese Funktion gibt ein object mit “key”, “label” und „type“ zurück:

Object	Beschreibung
key	Die Eigenschaft. Zum Beispiel: “extension”
label	Der lesbare Wert im Dropdown. Zum Beispiel: „Endung“
type	Gibt den Typ an, der entweder ein Freitext oder Datumsfeld sein kann. Folgende zwei Optionen sind möglich: suggest inputdate

var customApp = Application.extend({

getQueryinfoSelectOptionProperties: function () {

return {

"extension": { label: "File Format", type: "suggest"}

}

});

Der input-path ist entscheidend dafür, von wo aus die Exressions zur Anzeige verwendet werden.

In folgendem Beispiel muss sichergestellt sein, dass die Such-Einschränkungen am Search Input unter „user.constraints.parsed.and.constraints“ zu finden sind und würde somit wie folgt aussehen:

search_request.user:

{

"query": {

"and": [{

"unparsed": "Searchterm",

"description": "Searchterm",

"id": "query"

}]

"constraints": [{

"and": [{

"or": [{

"label": "extension",

"unparsed": "PDF",

"id": "constraintsGroupFound[0].constraints[0]"

},{

"label": "extension",

"unparsed": "TXT",

"id": "constraintsGroupFound[0].constraints[1]"

}],

"id": "constraints"

}],

"id": "parsed"

}]

}

resetfilters (Zurücksetzen von Filtern)

Setzt alle ausgewählten Filter zurück, wenn die Reset-Aktion ausgeführt wurde.

Modell: resetfilters

Beispiel:

results (Anzeige von Ergebnissen)

Zeigt Ergebnisse an.

Modell: application.models.search + ResultCollection + ResultCollection.Entry

Beispiel:

</div>

Einstellungen:

Einstellung	Beschreibung
data-appendonscroll	Es werden automatisch zusätzliche Ergebnisse geladen, wenn der Benutzer nach unten scrollt. Aktivieren Sie diese Einstellung nur, wenn die Ergebnisanzeige das letzte Element auf der Seite ist, andernfalls können die Benutzer die Elemente unter den Ergebnissen nicht erreichen.
data-enable-optional-terms	Es wird automatisch ein Element an die Resultate hinzugefügt, mit dem man die Suche expliziter einschränken kann „Enthält nicht: {Term}“ und „Enthält: {Term}“. Mögliche Werte: true false Standardeinstellung: true
data-optional-terms-ratio	Ist dieses Feature aktiviert, kann zusätzlich das Verhältnis der Terms angegeben werden. Typ: Float Mögliche Werte: 0 – 1 Standardeinstellung: 0.33
data-enable-answers	Wird verwendet, um Antworten, welche über den Resultaten angezeigt werden, aus-oder einblenden zu können. Das kann hilfreich sein, wenn man die ‚Answer‘ Komponente an einer anderen Stelle verwenden möchte. Die „Answers“-Komponente ist auch als eigenständige Komponente verfügbar. Für mehr Informationen, siehe answers (Anzeige von Antworten). Mögliche Werte: true false Standardeinstellung: true

Events:

this.options.application.views.trigger("afterRender:Result", this.options.application, view, model);

Mustache-Templates

<h3>{{{icon}}} {{{title}}}</h3>

<p>

{{{content}}}

</p>

Schreiben Sie den Namen eines Metadatums in {{{ }}}, um das Metadatum anzuzeigen, z.B.:

{{{Author}}}

oder

Autor: {{{Author}}}

Wenn das Metadatum nicht vorhanden ist, soll auch "Autor:" nicht angezeigt werden? Mit einer Bedingung machen Sie die Ausgabe optional:

{{#Author?}}Autor: {{{Author}}}{{/Author?}}

Die komplette Vorlage:

<h3>{{{icon}}} {{{title}}}</h3>

{{#Author?}}Autor: {{{Author}}}{{/Author?}}

<p>

{{{content}}}

</p>

Die Ausgabe könnte dann wie folgt aussehen:

<div>

<h3><img src="..."> Dokument</h3>

Autor: Max Mustermann

<p>

Lorem impsum ...

</p>

</div>

<div>

<h3><img src="..."> Max Mustermann</h3>

</div>

Mit {{#actions.data}}{{{html}}}{{/actions.data}} geben Sie alle Aktionen aus. Um nur auf die erste Aktion zuzugreifen, können Sie {{actions.data[0].value.href}} verwenden.

Die komplette Vorlage mit der ersten Aktion als Link:

<h3>

{{{icon}}} {{{title}}}

</a>

</h3>

{{#Author?}}Autor: {{{Author}}}{{/Author?}}

<p>

{{{content}}}

</p>

Die Ausgabe könnte dann wie folgt aussehen:

<div>

<h3><a href="http://..."><img src="..."> Dokument</a></h3>

Autor: Max Mustermann

<p>

Lorem impsum ...

</p>

</div>

<div>

<h3><a href="http://..."><img src="..."> Max Mustermann</a></h3>

</div>

resultsprogress (Anzeige geladener Ergebnisse)

Das resultsprogress-Widget zeigt in einem Fortschrittsbalken wie viele der verfügbaren Resultate bereits geladen wurden.

$\\minddatastore\pccommon\home\biebl.michael\searchapps-screenshots\resultsprogress.PNG$

Beispiel:

savedsearches (Anzeige gespeicherter Suchen)

Dieses Widget zeigt Ihre gespeicherten Suchen an. Wenn sich der Mauszeiger über dem Text befindet, erscheint außerdem ein „Kopieren“-Icon. Wenn Sie auf dieses Icon klicken, wird ein Link erzeugt, der alle Einstellungsfilter usw. dieser Suche enthält, und Sie können diesen direkt in die Adressleiste einfügen und so ebenfalls Ihre gespeicherte Suche absetzen. Somit haben Sie auch die Möglichkeit Ihre Suche mit anderen Personen zu teilen.

Modell: application.models.savedSearches

Beispiele:

Einstellungen:

Einstellung	Beschreibung
aria-controls	Enthält das Attribut die ID eines anderen Elements, wird dieses Element fokussiert, nachdem eine Suche abgesetzt wurde. Standardeinstellung: leer
data-title-tag-name	Das HTML-Tag, das für die Überschrift verwendet wird. Standardeinstellung: h2
data-title-class-name	Der CSS-Klassenname, der für die Überschrift verwendet wird. Standardeinstellung: leer
data-serversaved	Speichert die Suche am Server. Standardeinstellung: false
data-query-string-limit	Grenzt die Länge der generierten URL ein. Zur Aktivierung muss der Wert größer als 0 sein.

Beispiel:
<div data-template="savedsearches" data-query-string-limit="2084" ></div>

search (Anzeige von mehreren Suchen)

Das search-Widget dient zum Darstellen mehrerer Suchen in einer Applikation bzw. auf einer Seite. Verwenden Sie die template-refid, um einen Platzhalter dafür anzulegen (siehe Beispiel unten). Bei allen Suchen kann die Anzahl der Treffer angepasst werden (data-count). Somit eignet sich dieses Widget sehr gut, um z.B. neben den gewöhnlichen Treffern auch noch Personen oder bestimmte Filetypen anzuzeigen.

Beispiele:

Das Beispiel zeigt 3 Resultate mit der Extension „txt“ sowie direkt darunter 5 Resultate an Personen.

{{{title}}}

</div>

</script>

</div>

{{{title}}}

</div>

{{{person.name}}}

</script>

</div>

Beispiel 2:

Alternativ zur Variante data-template-refid können die zu verwendenden Komponenten direkt als Children des ‚Search‘ Widgets angegeben werden:

</div>

In diesem Beispiel werden im Search Container nur Treffer mit der Endung ‚txt‘ angezeigt.

Einstellungen:

Einstellung	Beschreibung
data-template-refid	Der Verweis zum Container mit dem data-template=“results“. Der Container muss von einem <div data-mb-exclude="true"> umschlossen sein.
data-count	Die Anzahl der angezeigten Resultate für jeden Search-Container. Beachten Sie, dass die Anzahl der Ergebnisse durch die erweiterte Einstellung „Maximum Request Result Count“ im Tab „Client Service“ im „Configuration“ Menü begrenzt wird. Das bedeutet, dass die Einstellung data-count nicht den Maximalwert, der in der Einstellung „Maximum Request Result Count“ konfiguriert ist, überschreiten kann.
data-constraint	Die Einschränkung für die jeweilige Suche (z.B. Files, Personen, Bilder etc.).
data-enabled-views	Gibt an, auf welchen Tabs ein Search Container angezeigt bzw. aktiviert werden soll. Die Liste besteht aus den Namen der Tabs, in denen der Search Container aktiviert werden soll. Die einzelnen Namen müssen mit einem Komma getrennt werden. Beispiel: "tab1,tab2".
data-disabled-views	Gibt an, auf welchen Tabs ein Search Container nicht angezeigt bzw. deaktiviert werden soll. Die Liste besteht aus den Namen der Tabs, in denen der Search Container deaktiviert werden soll. Die einzelnen Namen müssen mit einem Komma getrennt werden. Beispiel: "tab1,tab2".
data-name	Um Suchen zu unterscheiden und den Request.Name in app.telemetry einsehen zu können.
data-channel-url	Die URL des Zielservers der für die Föderierung benutzt werden soll. Typ: String
data-inherit-constraints-from-parent	Um Einschränkungen der Hauptsuche auch im Suchcontainer zu verwenden. Beispiel: Ein Filter in der Hauptsuche wird ebenfalls im Suchcontainer angewendet. Standardeinstellung: true.
data-channel-type	Legt den Typ des Kommunikationskanals fest. (z.B.: CrossDomainAjaxChannel, EWSChannel, …etc.). Wenn die data-channel-url gesetzt ist der data-channel-type jedoch nicht, wird der Typ CrossDomainAjaxChannel verwendet. Typ: String
data-parent-user-query-as-constraint	Um den Suchterm der Hauptsuche als weitere Such-Einschränkung zu verwenden.
data-initialize-from-parent-user-query	Initialisierung der Suche mit der der Hauptsuche.
data-propagate-to-parent	Wenn „true“ gesetzt ist, werden Änderungen, die an der Suche in einem Suchcontainer vorgenommen wurden, auch auf Elemente außerhalb des Suchcontainers wie den Mindbreeze Client übertragen. Mögliche Werte: true false Standardeinstellung: false

searchform (Suchfeld-Formular)

Das searchform-Widget dient zur Eingabe von Suchbegriffen. Es kann mehrere Eingabeelemente (input, select) enthalten. Verwenden Sie das name-Attribut, um den Suchbegriff nur in einem Metadatum zu suchen. Ohne name-Attribut oder bei name="query" wird die Eingabe als genereller Suchbegriff verwendet.

Modell: application.models.search.input

Beispiele:

<button type="submit" tabindex="-1">Suchen</button>

</form>

<input data-template="suggest"

data-disabled="$$DISABLE_MAIN_SUGGEST$$"

data-placeholder="search"

class="mb-query" name="query" type="search"

data-aria-label="search"

autofocus

</form>

Einstellungen:

Einstellung	Beschreibung
data-requires-user-input	Ist die Option aktiviert, muss ein Suchbegriff eingegeben werden, damit eine Suche gestartet wird (es genügt nicht, dass ein Karteireiter oder ein Filter ausgewählt ist). Diese Einstellung kann auf ein „searchform“ und einen Search Container angewandt werden. Standardeinstellung: false
aria-controls	Enthält das Attribut die ID eines anderen Elements, wird dieses Element fokussiert, nachdem eine Suche abgesetzt wurde. Standardeinstellung: leer
data-autofocus	Ist diese Einstellung aktiviert, wird der Fokus beim Laden der Seite automatisch auf das Suchfeld gesetzt. So können Benutzer sofort ihre Suchanfrage in das Suchfeld eingeben. Standardeinstellung: false

Das Attribut data-query-template legt die Suche fest, die für ein Eingabefeld verwendet wird. Verwenden Sie {{value}} als Platzhalter für den eingegebenen Wert:

searchinfo (Informationen zu den Ergebnissen)

Zeigt Informationen zu den Suchergebnissen an. Die Standardvorlage zeigt Suchtimeouts, "Keine Ergebnisse gefunden" und Alternative Suchbegriffe an.

Modell: application.models.search

Beispiele:

</div>

<h5>

</h5>

<p>

{{{i18n.client_did_you_mean}}}:

{{{alternatives.query_spelling.entries[0].html}}}

</a>

</p>

</script>

</div>

Mustache-Templates

In der Vorlage steht das gesamte Search-Modell zur Verfügung.

Standardvorlage:

</div>

</h2>

<p>

{{{i18n.client_did_you_mean}}}:

{{{alternatives.query_spelling.entries[0].html}}} </a>

</p>

Werte:

Wert	Beschreibung
alternatives	Vorschläge zum eingegebenen Suchbegriff, aktuell führt query_spelling.entries[0] zum ersten Korrekturvorschlag. Hinweis: Falls wieder keine Alternativen erscheinen und eigene logische Operatoren in der Query verwendet werden, siehe: Hinweise zu Query Spelling Alternativen
computing	Ist „true“, wenn gerade eine Suche durchgeführt wird.
status_messages	Statusnachrichten zur Suche (z.B. status_messages.timeout oder status_messages.no_results).
estimated_count	Die Anzahl der Treffer für die abgesetzte Suche.
orderable	Eine Liste von verfügbaren Sortierkriterien, enthält localized_name für die Anzeige und name für die Auswahl in der API. isSelected enthält true, falls das Sortierkriterium ausgewählt ist.

sortswitch (Anzeige von Sortierkriterien)

Zeigt die für die Suche zur Verfügung stehenden Sortierkriterien an.

Modell: application.models.search

Beispiele:

</div>

<ul>

<a class="action" tabindex="0" data-name="orderby" data-value="{{name}}">{{localized_name}}</a>

</li>

</ul>

</div>

Mustache-Templates

In der Vorlage steht das gesamte Search-Modell zur Verfügung.

Standardvorlage:

<h2>{{{i18n.client_toolbar_sortingalgorithm_label}}}</h2>

<option {{#isSelected?}}selected{{/isSelected?}} value="{{name}}">{{localized_name}}</option>

</select>

<legend class="mb-acc">{{i18n.order_direction}}</legend>

<span>

<span class="mb-acc">{{i18n.sort_ascending}}</span>

</span>

</label>

<span>

<span class="mb-acc">{{i18n.sort_descending}}</span>

</span>

</label>

</fieldset>

</div>

Werte:

Siehe Mustache-Templates searchinfo.

stack (Anzeige des Overlay-Fensters)

Mit dem stack-Widget können Benutzer Aktionen ausführen, die eine neue Suchanwendung als neue Suche ausführen. Optisch liegt die ausgeführte Aktion dann über der zuletzt ausgeführten. Dadurch kann einfach im Navigationspfad zurückgesprungen werden.

+--------------+ +--------------+ +--------------+

| | |+--------------+ | |

| | || Vorschau | | |

| | || | | |

| Aktion o--------> || | | |

| ------ | || | | |

| | || | | |

+--------------+ +| | +--------------+

| |

+--------------+

Beispiele:

Ergebnisse

</div>

<a href="#"

data-action-object="{

"pushStack": {

"title": "PDF-Dokumente",

"template-ref": "pdfAppTemplate",

"applicationOptions": {

"startSearch": true

}}}">

PDF-Dokumente

</a>

</div>

</div>

Beispiel: Anzeige aller Informationen zu einer Person

...

<a href="#"

data-action-object="{

"pushStack": {

"title": "{{name}}",

"template-ref": "personTemplate",

"action": "showPerson"

}}">

Alles zu {{{name}}}

</a>

...

</div>

...

</div>

...

var MyApplication = Application.extend({

showPerson: function (options) {

var personId = options.model.get("id");

this.models.search.set("constraint", {unparsed:'(categoryclass:person AND id:"' + personId + '") OR lastmodifiedby:"' + personId +'"'});

}

});

</script>

Parameter der Aktion pushStack:

Parameter	Beschreibung
template-ref	Die ID des HTML-Elements, das die Vorlage für den Stack enthält.
title	Der Titel des Stack-Elements. Standardeinstellung: Titel des Links
applicationOptions	Die Initialisierungsoptionen für die Insight App.
action	Eine Aktion, die nach dem Initialisieren der neuen Insight App ausgeführt wird.

suggest (Suchvorschläge im Suchfeld)

Erlaubt die Verwendung der Autovervollständigung in einem Eingabefeld. Ab sofort können neben Suchtreffern aus Metadaten beliebte Suchen, die zuletzt durchgeführten Suchen und Begriffe aus Taxonomien vorgeschlagen werden. Zusätzlich können alle verfügbaren Tabs mit dem jeweiligen Suchbegriff durchsucht werden.

Vorschläge bei leerem Suchstring der letzten Suchen:

Vorschläge mit dem Suchbegriff „Mindbreeze“ aus Metadaten und Tabs:

Suggest Default Beispiel (im jeweiligen HTML zu finden):

<input data-template="suggest"

data-disabled="$$DISABLE_MAIN_SUGGEST$$"

data-placeholder="search"

data-shortcut="alt+1"

id="query"

data-aria-describedby="search-description"

data-source-id-pattern="$$SUGGEST_SOURCE_ID_PATTERN$$"

data-initial-source-id-pattern="$$SUGGEST_INITIAL_SOURCE_ID_PATTERN$$"

data-grouped="true"

class="mb-query mb-role" name="query" type="search"

autofocus

Einstellungen:

Einstellung

Beschreibung

property

Das Metadatum, das für die Vervollständigung verwendet werden soll.

Standardeinstellung: title

property-constraint

Ein Suchbegriff zur Einschränkung der möglichen Werte.

Standardeinstellung: leer

count

Die Anzahl der Vorschläge.

Standardeinstellung: 4

source-id-pattern

Angabe der Suggest-Quellen (z.B.: document_property|recent_query|tabs)

Quelle	Beschreibung
document_property	Liefert Vorschläge aus Metadaten.
popularsearches	Liefert Vorschläge aus der Datenbank (Einstellungen in der Konfiguration nötig).
words_and_terms	Liefert Vorschläge aus einem Konzeptindex (CSV-File). Einstellungen in der Konfiguration nötig.
recent_query	Liefert Vorschläge der letzten Suchen.
tabs	Listet die verfügbaren Tabs auf, um in allen Tabs suchen zu können.

Standardeinstellung: $$SUGGEST_SOURCE_ID_PATTERN$$

Achtung: Wird diese Einstellung geändert, werden die Einstellungen im Konfigurator (Checkboxen zum Aktivieren der Vorschläge) nicht mehr berücksichtigt und überschrieben.

initial-source-id-pattern

Verfügbare Quellen sind identisch zur Einstellung source-id-pattern mit dem Unterschied, dass die Treffer von diesen Quellen angezeigt werden, wenn der Suchbegriff leer ist.

Standardeinstellung: $$SUGGEST_INITIAL_SOURCE_ID_PATTERN$$.

Achtung: Wird diese Einstellung geändert, werden die Einstellungen im Konfigurator (Checkboxen zum Aktivieren der Vorschläge) nicht mehr berücksichtigt und überschrieben.

service

Die URL zu einem Suggest-Service.

Standardeinstellung: leer - gleich wie Suche

disabled

Deaktiviert die Vorschläge.

Standardeinstellung: false

grouped

Gruppiert die Autocomplete-Treffer zusammen.

Mögliche Werte:

true
false

initial-grouped

Gruppierung der Treffer bei der Initialsuche.

Mögliche Werte:

true
false

Standardeinstellung: true

show-onfocus

Zeigt das Autocomplete beim Fokussieren des Textfeldes an.

Mögliche Werte:

true
false

Standardeinstellung: false