Development of Insight Apps

Introduction

Mindbreeze Insight Apps shape and design the access to your company's information and customize it tailored to your needs. You can use Insight Apps to display and highlight important information without the user having to search for it, to create a special search mask that is ideal for an application, or simply to set up a query targeted toward people. The possibilities are almost limitless. Indeed, the Mindbreeze Client itself is an Insight App.

Examples: Contact search, ticket search, display of recently modified documents, all information pertaining to a person, all information about a topic, embedding in Microsoft SharePoint, embedding in the intranet, embedding a web page, etc.

From a technical point of view, Insight Apps are HTML snippets that can be used on any web page.

Video Tutorial “Creating an Insight App”

This video shows you how to create your own Mindbreeze InSpire Insight App using the integrated Insight App Designer. All the functions of the standard client are explained in detail, such as improving the result list using filter and the Mindbreeze InSpire Query Language.

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

Required resources

Head

Meta-Tags

It is recommended to specify and use the following meta-tags in the <head> area of your Insight App:

Meta tag	Description
mes:user	Username of the currently logged in user.
<meta name="mes:user" content="$$USERNAME$$">

Meta tag	Description
display:mes:user	Specifies whether the username should be displayed or not.
<meta name="display:mes:user" content="$$IS_USERNAME_DISPLAYED$$">

Meta tag	Description
mes:emailaddress	Email address of the currently logged in user.
<meta name="mes:emailaddress" content="$$EMAILADDRESS$$">

Meta tag	Description
mes:loginstatus	Specifies which action is currently available for the user (login or logout).
<meta name="mes:loginstatus" content="$$LOGIN_ACTION$$">

Meta tag	Description
mes:logoutdisabled	Specifies whether the user can safely log off or not.
<meta name="mes:logoutdisabled" content="$$LOGOUTDISABLED$$">

Meta tag	Description
mes:decrypted:user	Decrypted username of the currently logged in user.
<meta name="mes:decrypted:user" content="$$DECRYPTEDUSERNAME$$">

Meta tag	Description
app:telemetry:enabled	Specifies whether App.Telemetry should be enabled.
<meta name="app:telemetry:enabled" content="$$APP_TELEMETRY_ENABLED$$">

Meta tag	Description
app:telemetry:application:id	Specifies the App.Telemetry application ID.
<meta name="app:telemetry:application:id" content="$$APP_TELEMETRY_APPLICATION_ID$$">

Meta tag	Description
app:telemetry:application:tier:id	Specifies the App.Telemetry application tier ID.
<meta name="app:telemetry:application:tier:id" content="$$APP_TELEMETRY_APPLICATION_TIER_ID$$">

Meta tag	Description
enablePersonalization	Specifies whether personalization is active.
<meta name="enablePersonalization" content="$$ENABLE_PERSONALIZATION$$">

Styles

The styles are delivered via the file adapted.css. This is located in apps/css/.

In addition, a minimal stylesheet (minimal-adapted) is available. This file is also located in apps/css/.

We recommend that you load these styles within the <head> in the HTML.

Scripts

The required JavaScript is supplied by client.js. This is located in apps/scripts/.

Attribute

Description

data-mindbreeze-lib

If this attribute is set, this means that the path of this resource is used for the remaining files/resources to be loaded.

data-global-export

Specifies whether resources can be used globally or not.

Default setting: false

Default Libraries

The client.js is shipped with the following libraries:

Library	Key	Version	Website	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

The libraries can now be used with the help of require():

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

var body = $("body");

var now = moment().toDate();

});

Minimal client.js version

A lighter version of client.js with base components and functionalities named client-base.js exists. The size of the client-base.js bundle is reduced by more than 50% compared to the client.js.

Components removed from client-base.js:

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

Insight App Designer

The easiest way to create an Insight app is the Insight App designer. It allows you to assemble the building blocks of your Insight App using drag-and-drop. Such building blocks include layouts, search fields, results, navigation elements and filters.

Because it’s so easy to use, the designer is particularly helpful for staff specialists, enabling those who need the information to get maximum value from the data.

General

Open the Editor: The Editor can be found at the same address as the Client, using the path apps/editor (e.g. https://example.com/apps/designer/).

Click on the "Add Widget" button: This button appears wherever it’s possible to add widgets (more on this in Layouts).

Choose a widget: The widget selection appears at the right edge of the window. The individual widgets are organized into thematic categories. You can add a widget simply by clicking on it or by using drag and drop.

Adjust the settings: After you add a widget, you can adjust its settings at the left edge of the window. Here you will see choices like search term, number of results and presentation template.

To edit the settings again later, use the edit buttons.

Use the Insight App: Click the "Generate Embed Code" button.

Copy your newly produced snippet onto any web page.

All done! Show your colleagues the new Insight App.

Changes in the generated HTML

Loader

The Mindbreeze Loader can be used to load the created snippet and insert it into the HTML.

Loader.loadAppFromResource(options, additionalOptions);

Application settings:

Setting

Description

appid

The App ID can be copied from the menu item “Insight Apps” in the Management Center (see screenshot).

useMessageFrameForNonBuiltinSources

An additional option. If set to True, the application should use legacy MessageFrame channel for application sources.

Values:

true
false

Default value: true

Building Blocks

Layout

Use layout building blocks to organize the subsequent sections. You can add columns with different partitions or a header. All layouts are displayed optimally using "Responsive Web Design" both on workstations as well as on mobile devices.

Search Field

The user can type his or her own key words in the search field.

Results

The following views are available for displaying results:

List:

Image Gallery:

Table:

Map:

Timeline:

General settings

Setting

HTML Attribute

Description

Search Restrictions

data-constraint

Only the results that correspond to a given constraint are displayed.

Here, a distinction is made between two query types:

Query Type

Description

Text Query

Is used, when the input is an unparsed value e.g. ”Mindbreeze InSpire”

Type: String

Structural Query

Is used, when the input is a parsed value, so that we can implement complex constraints e.g.
{
"id": "additional_constraint",
"quoted_term": "Mindbreeze InSpire"
}
to display only documents with occurrences of the complete phrase.

Type: JSON

Note: Whether it is a Text Query or a Structural Query is recognized automatically.

Results

data-count

The number of displayed results.

Answer Results

data-answers-count

To determine the number of answers displayed, this attribute can be inserted into the view (data-template=“view”).

Please note that the number of answers is limited by the advanced setting “Maximum Request Answers Count” under the tab “Client Service” in the menu item “Configuration”. This means that this setting cannot exceed the maximum value configured in the setting “Maximum Request Answers Count”.

The default value is 5.

Minimum answer similarity score

data-min-similarity-score

Determines the minimum similarity score that an answer must have in order to be displayed in the search.

The default value is 50% (“0.5”).

Type: String.

Title

data-name

The name of the search (visible in the API request).

Content sample length

data-content_sample_length

The number of characters for the preview text of a search result.

Sort by

data-orderby

Results can be sorted by relevance or date.

Sort order

data-order-direction

The results are sorted in ascending or descending order

Display count for deselected filter values

data-count_filtered_facet_values

If this setting is enabled, the number of results is also displayed for filter options that are not selected.

Default setting: Disabled

Computed properties

data-computed_properties

Enables the computation of properties.

Application extension options (JSON)

data-application_extension_options_json

Enables the application to be extended using JSON.

Show answers

data-enable-answers

Used to show/hide answers displayed above the results. This can be helpful if you want to use the “Answer” component in a different location.

Possible values:

true
false

Default setting: true

Show non matched terms

data-enable-optional-terms

An element is automatically added to the results, allowing you to narrow down your search more explicitly: “Does not contain: {term}” and “Contains: {term}”.

Possible values:

true
false

Default setting: true

Optional terms ratio

data-optional-terms-ratio

If this feature is enabled, the ratio of the terms can also be specified.

Type: Float

Possible values: 0 – 1

Default setting: 0.33

Allow symbolic path

data-allowSymbolicPath

Allows the use of a symbolic path.

List Settings

Setting

HTML Attribut

Description

Append results when scrolling

data-appendonscroll

Additional results are automatically shown when the user scrolls down.

Please Note: Enable this setting only if the results display is the last element on the page, otherwise the users cannot get to the elements under the results.

Template

You can customize the display of results using mustache templates. This way you can, for instance:

Show or hide metadata,
Customize the displayed presentation, e.g. of a person,
Use the HTML structure of the target page.

Image Gallery Settings

Setting

HTML Attribut

Description

Append results when scrolling

data-appendonscroll

Additional results are automatically shown when the user scrolls down.

Please Note: Enable this setting only if the results display is the last element on the page, otherwise the users cannot get to the elements under the results.

Template

You can customize the display of results using mustache templates. This way you can, for instance:

Show or hide metadata,
Customize the displayed presentation, e.g. of a person,
Use the HTML structure of the target page.

Table Settings

Setting	HTML Attribut	Description
Properties	data-properties	List of properties to be displayed in the export. Default: Title, Date, Actions
Exclude properties from translation	data-exclude-from-translation	Specifies which properties should not be translated when exporting the table.
Editable table	data-edittable	Determines whether the table can be edited. Editing refers to deleting, changing, and adding properties, for example. This setting overrides the setting in the Client Service.
Allow export	data-allowexport	If this setting is enabled, a “Download” button will be available for export.
Exportformat CSV	data-exportformat	Specifies the format in which the table is exported. This setting overrides the setting in the Client Service.
Enable dumping	data-enabledumping	Enables dumping of the table.

Timeline Settings

Setting	HTML Attribut	Description
Property (eg. mes:date)	data-date=“mes:date“	Defines which property of a document should be used for the timeline. Default setting: mes:date
Height (auto or eg. 200px)	data-height	Height of the timeline, auto for automatic adjustment to the displayed hits, or height according to CSS, e.g. 200px. Default value: auto.
Start date	data-range-start	Limits the timeline to a specific period
End date	data-range-end	Limits the timeline to a specific period
Date scale left (in month)	data-padding-left="10"	Defines the left margin from the edge of the timeline to the first date displayed.
Date scale right (in month)	data-padding-right="10"	Defines the right margin from the edge of the timeline to the last date displayed.
Template	-	You can customize the display of results using mustache templates. This way you can, for instance: Show or hide metadata, Customize the displayed presentation, e.g. of a person, Use the HTML structure of the target page.

Mustache templates

All metadata, the preview image (thumbnail) and all actions of the document are available in the template. The following template shows the thumbnail and the title as a headline, underneath which you see the content of the document:

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

<p>

{{{content}}}

</p>

Enter the name of the metadata item in curly braces {{{ }}}, in order to view it. For instance:

{{{Author}}}

Author: {{{Author}}}

If the metadata is not available, should "Author:" not be shown either? You can make the output optional using a condition:

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

The complete template:

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

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

<p>

{{{content}}}

</p>

The output might look like this:

<div>

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

Author: John Doe

<p>

Lorem impsum ...

</p>

</div>

<div>

</div>

With {{#actions.data}}{{{html}}}{{/actions.data}} you output all actions. In order to access the first action only, you can use {{actions.data[0].value.href}}.

The complete template with the first action as link:

<h3>

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

</a>

</h3>

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

<p>

{{{content}}}

</p>

The output could look like the following:

<div>

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

Author: John Doe

<p>

Lorem impsum ...

</p>

</div>

<div>

</div>

Link

Your Search can be resumed in an external search engine.

Setting

Description

Adress

The path to the external search engine including placeholder, for example: https://duckduckgo.com/?q={searchTerms}.

{searchTerms} replaces the searched term.

{language} gets replaced with the language of your Insight app.

Text

The text of the link.

Scrolling

The scrolling widget allows users to view more search results. Use this widget if you have not enabled the Show results when scrolling option for the results.

For detailed information about customizing, see the pagination widget.

Pages

The page widget can be used to navigate through the search results page by page. For the results, the option “Show results when scrolling” should be disabled so that only one variant is available for scrolling.

For detailed information about customizing, see the pages widget.

Filter

Filters are used to restrict the search results. When adding the widget, all filters that are possible for the current search are available for selection.

Setting	Description
Filter	The metadata that is used for the filter.
Title	If you do not want to display the standard translation of the metadata name, enter your preferred title here (but be careful if your search client is used in different languages).
Show user input	"Select widget automatically" adjusts the user input under the filter to its type, e.g. date input for date values, auto-completion for text values. "Disabled" hides the user input. “Use Widget” will display the widget option for user input.
Number of displayed filter values	The specified number is displayed by default; additional values can be shown or hidden using “Show more” and “Show less.”
Suggest term property alias	Defines the term property alias that should be suggested.
Date range input placeholder	Defines which text is used as the default in the date range input.
Icon for date range input	Defines the path to the icon to be used when entering the date range.
Include all descendants (inefficient)	When enabled, all descendants are returned without restrictions.
Collapsible	The user can shut the filter, so that only the title bar is displayed.
Hide filter options	Hides the available filters and displays only the filter title and the input field.
CSS class for incomplete filter results	Defines the CSS class that is applied to incomplete filter results.
Combine selected filter values using	Must a hit have all selected values (AND) or is one sufficient (OR)? Default setting: OR
Allow combinations of filter values	Activates a “+” button next to a filter value that can be used to create an AND link.
Sort by	“Number of filter values” sorted by frequency of occurrence, ‘Title’ by filter value, “Adjusted” sorted by title in ascending order, and the first values can be specified.
Sort order	“Ascending” and “Descending” directly determine the direction. Default setting: Ascending
Display count for deselected filter values	Displays the number of results for filter values that have not been selected. If this setting is disabled, the number of results is only displayed for the selected filter values.
Template	You can customize the appearance of the filter using the mustache templates.

Mustache templates

The template contains the value of the filter entry, the number of documents and whether or not the entered item is being taken into account for the current search.

Default Template:

{{{html}}}

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

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

Values:

Value	Description
html	The formatted value of the filter entry.
value	The value of the filter entry (e.g. calendar date and time values).
count	The number of documents found for this entry.
excluded	The entry is not selected although others are.

For detailed information about customization, see the chapter filteredfacet.

Embedding designer

It is also possible to use the Mindbreeze Insight App Designer as a stand-alone, embedded application. As with the Insight App itself, this works in just a few steps.

Required Resources

Styles

General designer style is supplied via the designer.css file. It can be called up at the client service address under apps/css/v2/ folder.

Mindbreeze delivers also, for purpose of embedding, the designer-prefixed.css that includes prefixed selectors and only absolutely necessary rules.

Scripts

The required JavaScript is provided by editor.js. It can be called up at the client service address under apps / scripts /.

HTML

The next step is to place the necessary HTML within a container element (root element) in the HTML. A corresponding element with the ID “designer-container” is suitable for this.

This container is necessary so that the designer can only expand in this element and has the following content (can be copied and pasted):

</div>

</div>

</div>

JavaScript

The application constructor creates a search application and enables editing with the Mindbreeze Insight App Designer.

The necessary JavaScript snippet is located under the HTML elements. A new application is created here and the application edit mode is called in the callback.

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);

});

Available Widgets

The following section contains a description of all available widgets. Widgets are HTML tags that are inserted into any HTML files. HTML tags with the attribute data-template="<Widget-ID>" become widgets. Settings and templates can be defined either as additional attributes or contents of the tag.

Examples:

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

<p>

{{{content}}}

</p>

</script>

</div>

accordion (Collapsible filter)

The accordion widget is an element for surrounding areas which are expandable/collapsible.

Elements included with role=tab are displayed as expandable/collapsible and can be operated using the keyboard. The widget uses the ARIA-role tab list (http://www.w3.org/TR/wai-aria/roles#tablist); the sub-elements must conform to the defined structure.

Examples:

</div>

Settings:

Setting

Description

data-enabled

Using true allows areas on the screen to be opened and closed.

Default setting: false

data-default-open

Indicates whether the included areas are by default open or closed.

Default setting: false

alert (Error and warning message)

An "alert" indicates errors that occurred during the search.

Bildschirmfoto des alert-Widgets

Model: application.models.channels.alerts

Examples:

{{{message}}}

{{{error}}}

{{{warning}}}

{{{info}}}

({{{service_ids}}})

</div>

</script>

</div>

Mustache templates

Values:

Value	Description
level	info, warning, error
message	Error message
error	Error message
warning	Warning message
info	Information message
service_ids	Services that prompted the message.

alertcenter (Alerts)

The alertcenter widget is an element for displaying any alerts. These alerts can either be created by the user or stored as templates by administrators. For this purpose, an e-mail address is stored for each user, to which these alerts (in case of changes in hits) are sent at the desired interval. Thus this component is an extension of the "alertedsearches" component, which will be replaced by it.

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

Configuration
To use this widget, settings are required in the configurator.

annotationPopup (Interactive Exploded View)

The annotationPopup widget is an element for displaying properties in the preview component by using mouse hover over an annotation. All properties from the URL that are specified as URL parameters are used. If you don't want all properties, you can explicitly specify the required properties in the mustache template.

Attention: These must be available as URL parameters.

AnnotationPopup1

Example:
https://entity.yourorganization.com/?type=Search&code=J01FA09&term=Mindbreeze%20InSpire

In addition, feedback can be given for each annotation, which is shown in app.telemetry:

Once embedded, it looks like this in the PDF preview:

Example:

To use this feature, the following container must be added to the client:

</div>

Another example:

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

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

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

</script>

</div>

Settings:

Setting

Description

data-enable-feedback

Enables the feedback functionality on the client.

Default value: false

answers (Display of answers)

The “answers” widget generates full-text answers from the search results found. These answers can be displayed in an Insight app in two ways:

Answers (list of answers)
AI Answers (answer text is generated with GenAI)

Answers

With this feature, answers to submitted questions are shown in a compact overview. Such answers are automatically displayed directly above the standard results (data-template="results") as soon as answers are available.

Requirement:

NLQA must be configured so that answers can be displayed, Whitepaper – Natural Language Question Answering (NLQA) for details.

If answers to a specific search should not be displayed, this component can be disabled in the results template.

Example:

Settings:

Setting	Description
data-answers-count	To specify the number of displayed answers, this attribute can be added to the view (data-template="view"). Note that the number of answers is limited by the advanced setting “Maximum Request Answers Count” under the “Client Service” tab in the “Configuration” menu. This means that the setting data-answers-count cannot excceed the limit configured in the setting “Maximum Request Answers Count”. The default value of this setting is 5.
data-request-properties	If this setting is active, all properties of this component are requested in the search query. Default setting: true Type: Boolean
data-min-similarity-score	Determines the minimum similarity factor an answer must have to be displayed in the search. The default value is 50% ("0.5"). Type: String

Example:

AI Answers

With AI Answers, answers to submitted questions are shown in a compact overview, with the answer text being generated using GenAI. This makes it possible, for example, to summarize the content of several documents in one answer. The Large Language Model used to generate the answer can be defined by the admin.

The feature “AI Answers” is available in two ways:

As a component in the building block “GenAI”
As the setting “Create text from found responses using GenAI’ that can be activated and deactivated in the “List” component

In both cases, GenAI is used to generate an answer. Since Mindbreeze can differentiate between a direct and indirect citation, it is also possible to access the source document via the footnote next to the direct citation. Users can stop and restart the generation of the answer. In addition, the generated answer can be copied with a single click. The “Information” symbol indicates that the answer was generated with Mindbreeze AI. An overview of the sources used can be expanded below the AI Answer, where users can directly access the text in the source documents.

Example:

Requirements

A configured index
- The setting “Enable Language Detection” is activated
- The setting “Enable Sentence Transformation” is activated
Access to Insight Services for RAG in the Management Center
- A configured Large Language Model (LLM)
- A configured and published RAG pipeline

Hint: For the standard client, the AI Answer uses the first RAG pipeline that is published. Make sure that other RAG pipelines are not published to ensure that the AI Answer uses the wanted RAG pipeline.

For Insight Apps or the case that more than one RAG pipeline has to be published at the same time, a RAG pipeline can be assigned to the AI Answer with the basic setting “Pipeline selection”.

Basic settings

Setting	HTML	Description
Generate text from retrieved answers using GenAI	data-ai-generate-text	Generate text from retrieved answers using GenAI. Default: true.
Retrieved Context Source	data-add-answers-from-results	Defines the strategy to specify the provided answers to GenAI. Possible values: false - uses the answers only. Is the default value. true - Merges the answers and results. noanswers - Uses results if no answer is available. replaceanswers - Uses only results.
Retrieved Context Limit	data-retrieved-context-limit	Limits the answers to be used in the setting “Retrieved Context Source”.
Answer template reference	data-result-answer-template-refid	Reference to the answers template to be used by the setting “Retrieved Context Source” when using results as answers.
LLM Prompt instruction	data-llm-prompt-instruction-text	Defines the LLM Prompt instruction.
Use different instruction if no answers were found	data-prompt-conditional-instruction-text	If this setting is activated, the value of data-llm-prompt-instruction-text-no-answer will be used as a prompt if no answers were found. If answers were found, the value of data-llm-prompt-instruction-text is used. Default value: true
LLM Prompt instruction if no answers were found	data-llm-prompt-instruction-text-no-answer	Defines the LLM Prompt instruction if no answers were found.
Use custom prompt	data-use-custom-prompt	Activates the use of a custom prompt for text generation instead of the standard prompt.
Pipeline selection	data-pipeline-selection	Determines which pipeline is used for data processing after text generation. Possible values: key id Default value: key
Pipeline	data-pipeline-selection-value	Specifies the key or ID value of the pipeline for text generation.
Use sources from Insight App for generation	data-use-insight-app-sources-for-generation	Enables the use of sources from the Insight App to improve text generation.
Restrict to Filter Constraints	data-use-user-constraints	Activates the consideration of user input and user restrictions when generating text.
Use Input	data-use-user-input	This enables the use of the “input” property for generation calls. Setting this attribute to “false” allows generation calls to be made without the property.
Restrict to Search Input	data-use-search-input	Restricts the text generation to the search input. (Ignores the attribute “user_constraint.query”)
Restrict to Search Constraint	data-use-source-context-constraints	Restricts the text generation to the context specified by defined restrictions.
Preset JSON	data-conversation-input-presets-json	Preset of generate-request payload.
Show Progress Until First Token Received	data-enable-computing-when-generate	This extends the visual effect of a request being processed until the /generate request delivers the first token. (This flag is activated by default.)

Advanced settings

Setting	HTML	Description
Advanced Prompts	data-prompt-use-templates	When this setting is activated, the following advanced prompts with placeholders are used.
LLM Prompt instruction with placeholder	data-llm-prompt-instruction-template	Defines the LLM prompt instruction with placeholder.
Use different instruction if no answers were found	data-prompt-conditional-instruction-template	If this setting is enabled, the value of data-llm-prompt-instruction-template-no-answer will be used as the prompt if no answers were found. If answers were found, the value of data-llm-prompt-instruction-template is used. Default value: false.
LLM Prompt instruction with placeholder, if no answers were found	data-llm-prompt-instruction-template-no-answer	Defines the LLM Prompt instruction with a placeholder, if no answers were found.
LLM Prompt user message with placeholder	data-prompt-user-message-template	Defines the LLM prompt user message with a placeholder.
Different LLM Prompt user message for no answers	data-prompt-conditional-user-message-template	If this setting is enabled, the value of data-prompt-user-message-template-no-answer will be used as a prompt if no answers were found. If answers were found, the value of data-prompt-user-message-template is used. Default value: false.
LLM Prompt user message with placeholders, if no answers were found	data-prompt-user-message-template-no-answer	Defines the LLM prompt user message with a placeholder when no answers were found.
	data-transform-event	This is a function which can be called after every answer stream event. It should return “Promise” with the transformed text. Function arguments: event: {data: text: <text from the stream event>}} or {data: text: "", completeText: ‘<Full answer text>’}}. The value „text” is the current stream text. If “completeText” is set, it means that the current event is the last stream event containing the full text of the answer. application: application instance. Example: 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	The property controls whether the current AI-generated answer is cleared when the user provides new input. Type: Boolean Default value: false

applists (Choice of additional search and data sources)

Offers a choice of additional search sources and additional external data sources.

Model: application.models.applists

Example:

breadcrumb (Display of search restrictions)

When actions restrict the results, these constraints remain available in the breadcrumb widget and can be disabled there again.

Model: application.models.search.user.constraints

Examples:

<div>

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

</label>

</div>

</script>

</ul>

Settings:

Setting

Description

data-display-filteredfacets

If true, the selected facets are shown.

Default setting: false.

chat (Mindbreeze InSpire AI Chat)

With the Mindbreeze InSpire 25.7 Release, a new Mindbreeze InSpire AI Chat is available with visual and functional redesigns.

For an overview about the new features, please see Release Notes 25.7 Release - Mindbreeze InSpire.

For more information about the new AI Chat, a list of all settings and an explanation on how to create a custom theme, see the following chapters.

The chat component can be integrated into your HTML file like this:

Requirements

A configured index
- The setting “Enable Language Detection” is activated
- The setting “Enable Sentence Transformation” is activated
Access to Insight Services for RAG in the Management Center
A configured Large Language Model (LLM)

Settings

The following settings are available in the Insight App Designer:

Setting	HTML	Description
Pipeline selection	data-pipeline-selection	Determines which pipeline is used for data processing after text generation. Possible values: By Key By ID Default value: By Key
Pipeline	data-pipeline-selection-value	Specifies the key or ID value of the pipeline for text generation.
Restrict to Search Input	data-use-search-input	Restricts the text generation to the search input. Ignores the attribute “user_constraint.query”.
Restrict to Filter Constraints	data-use-user-constraints	Defines if the AI Chat should apply constraints set by the user like filters. Example: The user sets the date filter to “2024”. The AI Chat applies the date filter and only generates answers from documents dated 2024. Available options: true false Default setting in Insight App Designer: true
Restrict to Search Constraint	data-use-source-context-constraints	Defines if the AI Chat should apply constraints set by the user for the data source. Example: The user sets the sources filter to “Web”. The AI Chat applies the sources filter and only uses web documents to generate an answer. Available options: true false Default setting in Insight App Designer: true
Enable Citations	data-enable-citation	Enables citations in the generated answer text.
Use Metadata	data-use-metadatakeys	When this setting is activated, the defined metadata keys in the setting “Metadata Keys” will be used.
Metadata Keys	data-metadatakeys	Defines a list of metadata or properties that should be additionally requested which might be needed by data sources.
Initial User Input from Search Query	data-initialize-from-user-query	Initializes the chat from the query parameter. Example: ?query=What is the current status of Project XY?
Initial User Input	data-initial-user-input	Defines a query parameter that is used as the initial question when the chat is opened. Attention: This setting overrules the previous setting "Initial User Input from Search Query" if the setting "Initial User Input from Search Query" is activated.
Show New Chat Action	data-show-create-new-conversation	Displays the action “New Chat” in the AI Chat.
Apply Pipeline Selection and Presets from AI Answers Settings	data-apply-answers-settings	When this setting is activated, the pipeline and presets from the Answer widget are used in the AI Chat.

Custom theme

AI Answers offer various options for custom theming, for example, to adjust the look of answers more closely to the corporate design. The following elements of the theme can be customized, for example:

Colors
Fonts
Icons
Borders
Widget specific themes
Responsive behavior

To create a custom theme, a JSON file must be defined with a specific name in the File Manager. Please make sure that the name and the path of the file are as follows:

Name of the JSON file: mindbreeze-theme-descriptor.json
Path to the JSON file: /data/resources/client-service/default/plugin-config/

Structure of the theme descriptor

The structure of the theme descriptor is made up of the following sections:

Section	Description	Example
defaultBreakpoints	Defines the different screen sizes for the responsive behaviour of AI Answers. The following variables for the different screen sizes are available: Mobile: xs Small tablets: sm Tablets: md Small desktops: lg Big desktops: xl Ultra large desktops: 2xl	const defaultBreakpoints: Mindbreeze.BreakpointMap = { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, "2xl": 1536, };
defaultTheme.themes.base	The base section defines the standard styles for AI Answers like colors, fonts and border. The elements described in the base section are to be referenced in other sections, if, for example, the same color should be used.	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	Defines the responsive behaviour of elements like icons.	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	Defines the fonts that are to be used.	fonts: [ { fontFamily: "Roboto", fontStyle: "normal", fontWeight: "normal", src: { local: "Roboto", url: "/font/Roboto-Light.woff", format: "woff", }, } ],
widgets	Defines elements of AI Answers like the display of results, sources and others.	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" }, }

Colors

The colors of the custom theme are defined in Hex codes in the base section.

The following attributes are available:

Attribute	Description	Example
primary	Defines the main color of your custom theme.	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	Defines the color that is displayed on a primary background color. For example, if you want to customize the color of a button: Color of the button = primary Text color on the button = onPrimary
onPrimaryFixed	Defines the color that is displayed on a primary background color. While the onPrimary and onPrimaryFixed colors are both displayed on a primary background color, the onPrimaryFixed color is also displayed, when the display mode is changed. For example, when Light Mode is switched to Dark Mode, the onPrimaryFixed color will not be inverted or changed in any other way. Therefore, the onPrimaryFixed color is useful for elements that should always be displayed the same, like corporate specific colors or logos.
secondary	Defines the secondary color of your custom theme.
onSecondary	Defines the color that is displayed on a secondary background color. For example, if you want to customize the color of a button: Color of the button = secondary Text color on the button = onSecondary
tertiary	Defines the tertiary color of your custom theme.
onTertiary	Defines the color that is displayed on a tertiary background color. For example, if you want to customize the color of a button: Color of the button = tertiary Text color on the button = onTertiary
surface	Defines the background color of an area, for example the app background.
onSurface	Defines the color that is displayed on a surface background color. For example, if you want to customize the color of an area: Color of the area = surface Text color on the area = onSurface
surfaceContainer	Defines the background color of a container that is displayed on the surface background color.
onSurfaceContainer	Defines the color that is displayed on the surfaceContainer background color. For example, the color of a text or icon.
surfaceComponent	Defines the color of UI components that are displayed on the surfaceContainer color. For example, the color of an input field or the background color of the chat bubbles.
onSurfaceComponent	Defines the color that is displayed on the surfaceComponent background color. For example, the text color of an input field or the chat bubbles.
titleText	Defines the color of the headlines.
text	Defines the color of the running text.
textDisabled	Defines the color of texts in deactivated buttons or inactive texts. For example. the color of the footnotes in the overview of the found sources.
textAdditional	Defines the color of additional texts like metadata, subtitles, help texts and dates.
textAdditionalVariant	Defines the color of texts like footnotes and placeholder.
error	Defines the color of the text, icon or indicator of the error.
onError	Defines the color that is displayed on the error background color.
errorContainer	Defines the background color of the error container.
onErrorContainer	Defines the text or icon color on the errorContainer background color.

Fonts and Typography

To customize the fonts and typography, the fonts must be defined in the fonts section and then assigned in the base.typography.fontFamily section.

To define fonts, the following attributes must be configured in the fonts section:

Attribute

Description

Example

fontFamily

The user-defined name of the font that will be referenced in the typography section.

"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

The style of the font. For example, normal or cursive.

fontWeight

The weight of the font. For example, 400.

src

The source of the font with the following attributes:

Attribute	Description
locale	The name of the font. For example, Times New Roman, Helvetica or Arial.
url	The path to the font file. Hint: The path must lead to a truetype, woff or woff 2 file.
format	The format of the font file. The format “truetype” is supported. The formats “woff” and “wof 2” are recommended. Hint: Make sure, that the format matches the format of the path in the attribute “url” or the font will not be applied in the custom theme.

Now, the defined fonts can be assigned to the following attributes in the base.typography.fontFamily section:

Attribute	Description	Example
default	The default font for every 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	The font used for headings.
code	The monospace font used for single code lines in a text.
pre	The font used for code blocks.
em	The font used for text that should visually differentiate. For example, by being italic or bold.
quote	The font used for quotations.

Borders

The various borders can be customized in the base.border and base.borderRadius section.

The following attributes are available in the base.border section:

Attribute	Description	Example
width	Defines the width of the border in pixel.	"border": { "width": "0px", "color": "#ddd", "style": "solid" },
color	Defines the color of the border with a Hex code.
style	Defines the style of the border. For example, solid, dashed, double and others.

The following attributes are available in the base.borderRadius section:

Attribute	Description	Example
default	Defines the default border radius in pixel, percent, em or rem.	"borderRadius": { "default": "1px", "extra-small": "20px", "small": "20px", "medium-small": "0.375rem", "standard": "2px", "large": "1px", "pill": "62.4375rem", "circle": "50%" },
extra-small	Defines the border radius for very small screen sizes in pixel, percent, em or rem.
small	Defines the border radius for small screen sizes in pixel, percent, em or rem.
medium-small	Defines the border radius for medium screen sizes in pixel, percent, em or rem.
standard	Defines the standard border radius in pixel, percent, em or rem.
large	Defines the border radius for large screen sizes in pixel, percent, em or rem.
pill	Defines the pill radius in pixel, percent, em or rem.
circle	Defines the circle radius in pixel, percent, em or rem.

Default template

The following default template can be used as a starting point for creating a custom theme:

{

"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)

The Mindbreeze InSpire AI Chat can be included into Insight Apps with the chatframe component. With the AI Chat, users can find information in natural language in the form of answers. In addition to the answer, a link is also provided which gives users direct access to the source and the context of the answer.

The chatframe component can be integrated into your HTML file like this:

When using the attributes in the HTML code, make sure to add the prefix “data” to the attribute. For example: data-constraint="ALL AND extension:pdf" .

The HTML code with attributes can look like this then:

CSS variables for the height of the AI Chat

The default and minimum height of the AI Chat is predefined in a CSS file. To use the CSS file, the adapted.css is needed:

Default height: 100 vh
Minimum height: 300 px

Attributes

The following attributes are available:

Attribut

Description

data-constraint

Defines constraints for the AI Chat like constraining the AI Chat only to PDF documents. The constraint is defined with a query expression.

Example: “ALL AND extension:pdf”

data-height

Defines the predefined height for the AI Chat in Designer.

The following values are available:

Value	Description
Automatic	Calculates the height whenever a resize event is triggered.
Maximum height	Height is fixed to 95vh.
2/3 height	Height is fixed to 75vh.
Half height	Height is fixed to 50vh.
1/4 height	Height is fixed to 25vh.

Default value: Automatic

Important: The attribute data-height also accepts values in %, em ,rem and px if it sets from outside. By using the option “Automatic” the height will be calculated automatically.

data-show-model

Defines if the Large Language Model (LLM) that is used for the generation of answers is shown in the AI Chat. Can be switched on and off.

Available settings:

True
False

Default setting in Insight App Designer:

True

data-show-side-navigation

Defines if the side navigation should be visible or not. The side navigation shows a list of all created chats.

Available settings:

True
False

Default setting in Insight App Designer:

True

data-use-user-query

Defines if the AI Chat should use the user query from the search request.

Example:

The user searches for “What is a connector?”.

The AI Chat applies the same query and generates answers based on the question “What is a connector?”.

Available settings:

True
False

Default setting in Insight App Designer:

True

data-use-user-constraints

Defines if the AI Chat should apply constraints set by the user like filters.

Example:

The user sets the date filter to “2024”.

The AI Chat applies the date filter and only generates answers based of documents from 2024 and younger.

Available settings:

True
False

Default setting in Insight App Designer:

True

data-use-source-context-constraint

Defines if the AI Chat should apply constraints set by the user for the data source.

Example:

The user sets the sources filter to “Web”.

The AI Chat applies the sources filter and only uses web documents to generate an answer.

Available settings:

True
False

Default setting in Insight App Designer:

True

data-model-id

By specifying a model, the AI Chat only generates the answers with this model. If this attribute is set, it is recommended to set the attribute data-show-model to false to hide the model selection component.

Example

The developer sets the attribute data-model-id in the HTML.

The AI Chat enforces the chat to only use that model to generate an answer.

Available settings:

The developer must know the model UUID.

Default setting in Insight App Designer:

Not visible in the Insight App Designer.

Important: The attributes are set once when the application is initialized. Later changes to the attributes are not supported currently.

Important: The search request information will be automatically collected and sent to the AI Chat when the user interacts with the Insight App.

charts (Display of charts)

Displays filters in the form of charts and thus has a similar function to the filteredfacet component.

Available chart types

Pie

If you select the "pie" chart type, you get a graphic as shown below. The possible settings can be found here.

Example:

<div data-template="charts"

data-charttype="pie"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

data-showlegend="true"

></div>

Attributes

Attribute

Description

data-colors

Defines a list of colors that can be used in a pie chart. Colors can be differentiated with a semi colon.

Type: Array

Example:

data-colors="#FFCC00;#FFEE11"

Bar

If you select the "bar" chart type, you get a graphic as shown below. The possible settings can be found here.

Example:

<div data-template="charts"

data-charttype="bar"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

></div>

Line

If you select the chart type “line”, you will receive a graphic similar to the one below. The possible settings can be found here.

Example:

<div data-template="charts"

data-charttype="line"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

></div>

Chart settings

Setting	Description
data-template	“Charts” is specified as the template.
data-charttype	Specifies the type of chart. In this case, “pie” is used.
data-chartsourcename	Specifies the filter to be used. Example: “extension“, “mes:size“, etc
data-enablecustomsourcename	Specifies whether sourcename or custom sourcename should be used. Possible values: True False Default setting: false
data-customsourcename	Specifies the custom sourcename to be used if it is not present in the Sourcename dropdown-list. If the incorrect sourcename is set the warning will be displayed. Default: not set
data-charttitle	Sets a heading or title. Example: “Extension”
data-showlegend	Displays the values in the legend. Possible values: True False Default setting: false
data-chartheight	Sets the height of the chart. Default setting: 200
data-chartwidth	Sets the width of the chart. Default setting: 100%
data-chartcategories	Sets the categories of the chart. Minimum: 3 Example: “Solution Design,Go-Live,Project Setup”
data-chartresults	Sets the number of the chart. Default setting: 5
data-titlealign	Alignment of the heading. Possible values: Left Center Right Default setting: Center

collect (Collecting results)

Widget for results that were collected using the "Collect" action.

Model: application.models.collected

Beispiele:

Settings:

Setting

Description

data-favorites-collection-path

Persisted Collection path for saving the collected results. Has to start with favorites/.

Default setting: empty

data-results-shortcut

Describtion of the keyboard-shortcut used to navigate to the results.

Example:

Alt+2

Default setting: empty

constraints (Data sources filter)

Displays a filter for the constraints of the data sources. In Microsoft Exchange, for example, the user can choose from E-mail, Attachment, Calendar, Contact, Task, Note and Mail.

Model: application.models.userSourceInfo

Example:

Mustache templates

See Mustache templates in the chapter filteredfacet.

clientnotification (Client Notifications)

You have the possibility to inform your users about the latest features and tools via the “clientnotification” component. Please be aware that the clientnotification widget can only be activated by an administrator.

This component is integrated into the client application by default. To set up the notification, create a JSON file suitable for your application context in the main menu item "File Manager". Open the File Manager and then the "Local Filesystem". There, click on the folder "data" and then on the folder "resources". Then create a new folder with the name “client_notifications“ and create the JSON file "client_notification.json" in this folder.

Attention: The name of this file must be "client_notification.json", otherwise the function will not work, even if the content is correct.

Default Template

The default template is available for the standard client and is activated by default. Insert the default template into the created file client_notification.json to customise your client notifications:

{

"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

}

]

}

You also have the possibility to customize some basic themes based on your needs. For advanced changes, please use the CSS file. All HTML tags are accessible via the prefix “.clientnotification” in the CSS file.

Properties

theme

Here you can pass simple CSS values to change the font position and the color of the notification. Please be aware that you can only use existing keys. For example, the existing key “leftPosition” will work, while a slight variation of the key like “myleftPosition” will not work.

The following properties can be adjusted to your needs:

Property	Value type	Description
rightPosition	px , em rem	Distance of the notification from the right side.
topPosition	px , em rem	Distance of the notification from the top.
leftPosition	px , em rem	Distance of the notification from the left side.
bottomPosition	px , em rem	Distance of the notification from the bottom.
backgroundColor	HEX	The background color of the notification.
previewTextColor	HEX	The text color of the preview text.
previewTextFontSize	px	The font size of the preview text.
leftBorderColor	HEX	The color of the left border.
okButtonColor	HEX	The background color of the “OK” button.
okButtonTextColor	HEX	The text color of the “OK” button.
deactivateButtonColor	HEX	To deactivate the background color of the “OK” button.
deactivateButtonTextColor	HEX	To deactivate the text color of the “OK” button.
notNowButtonColor	HEX	The background color of the “Remind me later” button.
notNowButtonTextColor	HEX	The text color of the “Remind me later” button.
titleFontSize	px	The font size of the title of the notification.

cid:image002.png@01DA60B1.05B3D380

generalConfig

The property “generalConfig” defines configurations that apply to every notification. The following properties can be adjusted to your needs:

Property

Value type

Description

notificationSnoozeTimeInHours

number

Defines how long the notification will be inactivate when the user clicks the button “Not now, later”.

If the value is zero or empty, the notification will be shown again in 24 hours which is the default value.

enableAllNotifications

boolean

If the value for this property is set to “false” or the property is removed from the generalConfig object, all client notifications are turned off.

Important: You can still access disabled notifications via URL parameters without making them globally and/or individually enabled. For more information, you can also see Debug and check disabled notifications.

Items

The property “Items” defines a list of all client notifications to be shown. The following properties can be adjusted to your needs:

Property	Value type	Description
id	string	Defines the ID of the notification.
version	number	Defines the version of the notification. If you have the same notification with different versions, the latest version will be shown to the user. This means that you can have the same ID with different versions.
clientNotificationType	string	Defines the type of notification, for example “outlook add in”.
targetApplications	Array<string>	Defines the browser platforms on which you want to show the notification.
clientNotificationContent	Object	Here you can define the title and the text of the notification. You can add different languages with the according language keys. For example “fr” for French.
previewTextDescription	string	Here you can define the preview text of the notification. You can also define the preview text in several languages.
clientNotificationActions	Array <ClientNotificationActionObject>	Defines the action that can be performed by the user. Currently, only a download can be defined as an action. Here you can provide an absolute path as well as a relative path to the resource you want the user to see.
isEnabled	boolean	Enables or disables the notification.

Client notification action object

Property	Value type	Description
action	enum	Possible values: download. Attention: The value “download” has to be lowercase.
label	Array <Object>	A list of objects with the language and its values. For example: [ {key: "en", value: "Download Installer"} ]
href	string	Destination link for the action.
precheckUrl	string	A link to precheck if a resource is available, in order to show the notification. If this precheck request fails, the notification will not be shown.

Disable clientnotification

There are four options to choose from:

Set the setting disabledClientNotifications in the Application Options to "true". This completely prevents client notifications from being requested.
Set the setting enableAllNotifications in the JSON configuration to "false" or remove the property from generalConfig. This completely prevents client notifications from being shown.
Create an empty JSON file under /data/resources/client_notifications/client_notification.json (Linux) or in C:\Program Files\Mindbreeze\Enterprise Search\Server\resources\client_notifications\client_notification.json (Windows) containing the value "{ }".
If you have a JSON notification item containing values, the flag "isEnabled" is available for each notification. Set this flag to "false".

Debug and check disabled notifications

If the client notification is activated in the global configuration, you can check your client notifications before setting the property "isEnabled" to “true”. Each notification has an own “isEnabled” property that can be activated or deactivated individually.

If you want to check a notification that is disabled (in other words not published for all users or "isEnabled: false"), you can access that notification via the query parameter. For example:

apps/client/?previewClientNotificationId=2.

datasources (Data sources constraints)

Displays a filter for the data sources. Here data sources such as Microsoft Exchange, Fabasoft Folio and Microsoft SharePoint can be selected.

Model: application.models.userSourceInfo

Example:

Mustache templates

See Mustache templates under filteredfacet.

inputdate (Date selection)

Provides date selection for an input field. The template must be used on an input element. The name attribute specifies which metadata is restricted.

Examples:

Out of the box support for placeholder and icon via “Options” Object:

Developers can extend the options object passing to data-template=”inputdate”. This enables automatic integration for icon and placeholder.

Examples:

Options = _.extends(options , {

inputdatePlaceholder :"Date",

inputdateIcon : "icon-calendar",

})

Settings:

Setting

Description

name

Name of the metadata for the restriction.

data-isrange

If true, a time range can be specified.

Default value: false

data-format

Format of date.

Value	Description
D	Single digits without zero.
DD	Number of the day.
M	Single digits without zero.
MM	Number of the month.
MMM	Short name of the month.
MMMM	Full name of the the month.

Optional values:

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

Default value: “DD.MM.YYYY”

date filter (Filter for dates)

The date filter can also start on a monthly basis. The order is from the latest to the oldest date.
This setting can be found in Client Services under “Filter Settings”. The setting „Flat Date Filter Values (Month Year)“ must be enabled:

feedback (Categorizing results)

Feedback component displays result items persisted data and offers the possibility to change its value in Persisted Resources.

This component will display a dropdown list in results actions with entries coming from the backend service. For authenticated users this value is changeable, otherwise it will be read only.

Example:

<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>

If you do not want to use language replacement variables in attributes, please use the following format for:

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

Template attributes:

Attribute	Description	Value
data-label-path	Available Labels Collection.	$$DOCUMENT_LABELING_LABEL_PATH$$
data-feedback-path	Labeling Feedback Collection.	$$DOCUMENT_LABELING_FEEDBACK_PATH$$
data-label-property	The property which is displayed as the default value for a result. Example: learningcontent no-learningcontent	$$DOCUMENT_LABELING_LABEL_PROPERTY$$
data-enabled	Enables the component.	"$$DOCUMENT_LABELING_ENABLED$$" Type: Boolean Default setting: false

Settings:

Setting	Description
Enable	Activates persisted resources. Default setting: false
User Administrator Users	Specification of user administrators. User administrators can manage all users (delete, edit (e.g., edit email address), add). Each user is entered in a new line.
JDBC URL	Specify the database URL.
Max Number Of Database Connections	Maximum number of database connections. Minimum value: 2. Default setting: 10
User	Please use a credential for the JDBC URL instead.
Password	Please use a credential for the JDBC URL instead.
Database Table Prefix	Specify the table prefix in the database.

In order to include the Feedback component, the following settings must be enabled and configured properly in the Client Service:

Text Classification, Document Labeling and Persisted Resource configuration: Find more about such configurations in "Text Classification Insight Services".

feedbackbutton (Display of the feedback button)

Displays the app.telemetry feedback button. The feedback button is visible only when app.telemetry is enabled for the client and the URL is configured in the client service.

Example:

Settings:

Setting

Description

data-check-if-enabled-in-profile

The feedback button can be enabled or disabled in the profile. This setting allows you to specify whether the profile setting is taken into account.

Possible values:

true
false.

data-formid

Defines which feedback form is used. The necessary Form ID can be found in app.telemetry. If no Form ID is specified, the default form is used.

The URL has to be entered in the “Fabasoft app.telemetry Web API URL” input box in the client service.

filteredfacet (Display of one filter)

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

Examples:

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>

Output:

<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>

Settings:

Setting	Description
data-name	The metadata used for the filter.
data-user-input	When “disabled”, the user input under the filter can be deactivated. With “auto,” the user input is adapted to the type of filter, e.g. date input for date values, auto-completion for text values. If not otherwise specified, “auto” is used. This setting replaces data-suggest: data-suggest="false" => data-user-input="disabled" data-suggest="true" => data-user-input="auto"
data-user-input-template	The widget that is used for user input. With “suggest” the autocompletion is displayed; “inputdate” shows the date input. To use this value, data-user-input should not be set.
data-user-input-<setting>	Transfers settings to the user input widget. For example: data-user-input-isrange="true" in the input-date widget.
data-always-visible	If “true” is set, the filter will be displayed even if no search has been set yet. Since the type of filter is not recognized without a search, data-user-input-template must be defined. Default setting: false
data-incomplete-class	This class is assigned to the HTML element, if the filter returrns „incomplete“. Default setting: „mb-incomplete“
data-title	If you do not want to display the standard translation of the metadata name, enter the desired title here.
data-title-tag-name	The HTML tag used for the filter headings. Default setting: h3
data-title-class-name	The CSS class name used for the filter headings. Default setting: empty
data-title-template	Mustache template for displaying the title. Available values: title isOpen Default setting: empty
data-container-tag-name	The HTML tag for the element containing the filter entries. Default setting: ul
data-container-class-name	The CSS class name for the element containing the filter entries. Default setting: empty
data-entry-tag-name	The HTML tag for a filter entry. Default setting: li
data-entry-class-name	The CSS class name for a filter entry. Default setting: empty
data-entry-role	The ARIA role attribute for a filter entry. Default setting: empty
data-collapsible	“true” allows you to open and close the filter. Default setting: false
data-default-open	Specifies whether the filter is open or closed by default. Default setting: false
data-displayed	Number of filter values displayed. Further restricts the display of the number configured on the Client Service. If there are more entries, they can be displayed using a button.
data-dropdownfilter	Shows the entire filter in a dropdown list.
data-close-on-focus-out	Specifies wether the dropdown list is closed automatically, when you click outside the dropdown list. By putting this setting to “true”, the dropdown list stays open, when clicking outside of the list. Default setting: false
data-and-available	Activates a “+” button next to a filter value with which an AND operation can be performed. Default setting: false
data-intersect-values	Used for linking the selected values AND, so that hits should contain all selected values. Default setting: false
data-order-criteria	COUNT sorts by frequency of occurrence, VALUE by filter value, PREDEFINED sorts by title in ascending order, and the first values can be specified in data-predefined-order.
data-order-direction	ASCENDING and DESCENDING directly define the direction. Default setting: ASCENDING
data-predefined-order	List of values to be displayed at the beginning, separated by a comma or JSON. For example: pdf, gif or ["pdf", "gif"]
data-restore-focus	Sets the focus back to the checkbox after selecting a value. Default setting: true
data-show-checkbox	Displays a checkbox. Default setting: true
data-show-all	Displays the option “All”. Default setting: true
data-all-title	Specifies the text that is displayed when no filters are selected. If no text is specified, a text predefined by Mindbreeze InSpire will be displayed.
data-all-descendants	Returns the complete hierarchy without restriction. Default setting: false
data-hide-filter-options	Hides the filter options and keeps the search box visible only. Default setting: false
data-inputdate-placeholder	Can provide a default translation for English and German via "i18n.daterangepicker_placeholder" or it can be replaced with any other valid string. In case data-user-input-template="inputdate" is set, then it will automatically show the provided placeholder.
data-inputdate-icon	Accepts fontawesom icons as an input. As default setting "icon-calendar" is suggested. In case data-user-input-template="inputdate" is set then it will automatically show the provided icon.

Mustache templates

The template contains the value of a filter entry, the number of documents, and whether or not the entry is currently being included in the search.

Standard template:

{{{html}}}

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

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

Values:

Value	Description
html	The formatted value of the filter entry. For example: pdf, John Doe, 2014
value	The value of the filter entry (for example, for date values).
count	The number of documents found for this entry.
excluded	The entry is not selected although others are selected.

filteredfacets (Display of several filters)

Displays a set of filters. Currently, the group "mes:configuredfacets" is available, which contains all the filters selected in the client service configuration.

For the presentation of the individual filter, the filteredfacet widget is used. A presentation template for this can be deposited in filteredfacets. You can find the options for this template under mustache templates at filteredfacet. In addition, the filters can be displayed per option as combo boxes.

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

Examples:

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>

Settings:

Setting	Description
data-name	The filter group which is displayed.
data-user-input	With “disabled”, user input can be disabled under the filter. With auto, the user input will be adapted to the type of filter, for example, date for date values, autocomplete for text values. Without specifying otherwise, auto is used. This setting replaces data-suggest: data-suggest="false" => data-user-input="disabled" data-suggest="true" => data-user-input="auto"
data-user-input-template	The widget that is used for the user input. With suggest, autocompletion is displayed, input date displays the date entry. data-user-input should not be entered, so that the value is used.
data-user-input-<Setting>	Transfers settings to the user input widget. For example: data-user-input-isrange="true" with the input-date widget
data-title-tag-name	HTML tag, which is used for the titles of the filter. Default setting: h5
data-title-class-name	CSS class name that is used for the titles of the filter. Default setting: empty
data-facet-container-tag-name	HTML tag for the element that contains the filter entries. Default setting: ul
data-facet-container-class-name	CSS class name for the element that contains the filter entries. Default setting: empty
data-facet-entry-tag-name	HTML tag for a filter entry. Default setting: li
data-facet-entry-class-name	CSS class name for a filter entry. Default setting: empty
data-collapsible	If “true”, the filter can be opened and closed. Default setting: false
data-default-open	Specifies whether the filter is opened or closed by default. Default setting: false
data-displayed	Number of displayed filter values. Further restricts the display of the number configured on client service. If more entries are available, they can be displayed with a button.
data-dropdownfilter	Shows all filters in a dropdown list. If set to “true”, the filters are displayed as a dropdown or combobox. Default setting: false.
data-close-on-focus-out	Specifies wether the dropdown list is closed automatically, when you click outside the dropdown list. By putting this setting to “true”, the dropdown list stays open, when clicking outside of the list. Default setting: false
data-inputdate-placeholder	Can provide a default translation for English and German via "i18n.daterangepicker_placeholder" or be replaced with any other valid string. In case filteredfacets contains a filteredfacet using data-template="inputdate" the provided placeholder will automatically propagate to filteredfacet.
data-inputdate-icon	Accepts fontawesom icons as an input. As Default setting "icon-calendar" is suggested. In case filteredfacets contains a filteredfacet using data-template="inputdate" the provided icon will automatically propagate to filteredfacet.

Mustache templates

The template for the filteredfacet widget is defined as follows:

...

</div>

See Mustache templates under filteredfacet.

map (Display of results in a map)

Shows results that contain geodata on a map. If there is no result with geodata, the map is not displayed. Geodata must be contained in the metadata geo_latitude and geo_longitude (as float, integer or string, in which case the decimal separator must be a point).

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

Example:

Mustache templates

The content of the marker can be customized using a mustache template. The template for the map widget is defined as follows (see mustache for help):

Example:

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

</script>

</div>

Display several markers for one result

With the following example, multiple markers can be displayed in the map for a single result with multiple geo_latitude/geo_longitude values.

The following structure is necessary:

"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>

Settings:

Setting

Description

data-allow-symbolic-path

To enable dynamic properties.

For example:

“myProp[index]”

Default setting: false

mustache (Mustache Templates)

Any JavaScript object with mustache templates can be displayed using the mustache widget.

Special behavior:

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

Examples:

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

<p>

{{{content}}}

</p>

</script>

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

<p>

{{{content}}}

</p>

</script>

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

<p>

{{{content}}}

</p>

</script>

Settings:

Setting	Description
data-tag-name	The HTML tag for the template. Default setting: div
data-class-name	The CSS class name for the template. Default setting: empty
data-use-output-only	If enabled, the input part of the model is not used for display. Default setting: false
data-attr-*:	Attributes can be calculated with mustache templates. For example: data-attr-id="{{myId}}" → <... id="valueOfMyId">.

Values:

The values depend on the model used, i.e. the surrounding widget. For translations i18n is always available, e.g.

Events:

afterRender: modelType:
- Parameters: application, widget, model
- Event target: application.views

pages (Page navigation)

To navigate the search results page by page. Use this widget if you have not enabled the Show results when scrolling option for the results and you don't just want to navigate forward and backward.

Examples:

</script>

</div>

Settings:

Setting	Description
data-max-page-count	Maximum number of pages displayed. If there are more pages, the standard template outputs “...” (see screenshot).

Mustache templates

The following properties are available in the template:

Property	Description
pages	A list of available pages. current_page true returns the currently selected page. Page can be used to access the page number.
onFirstPage	Contains true when the first page is selected.
onLastPage	Contains true if the last page is selected.
more_avail	Contains true if more than the requested pages are available.

The standard template:

<ul>

</ul>

</script>

pagination (Loading of additional results)

With the pagination widget, users can view additional search results. Use this widget if you didn’t activate the option “Display Results while Scrolling” with the results.

Examples:

Load more results

</a>

</div>

</a>

</a>

</div>

The pagination widget displays elements with CSS class name mb-next, if it is possible to scroll forward. If it is possible to scroll back, the CSS class name mb-previous is used.

In order to initiate the actions, use class class="... action" data-action="<Aktion>". Using the action this.nextPage() you can scroll forward; this.previousPage() you can scroll backward. If the results are to be added to the end of the list, use this.nextPage({ append: true }).

preview (Document preview)

Displays the document preview, if the preview action was executed.

Model: preview

Examples:

<h3>

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

</a>

</h3>

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

<p>

{{{content}}}

</p>

</script>

</div>

Settings:

Setting	Description
data-loading-message	Can be used to display a configurable message during the loading of a large document into the preview window.
data-loading-message-styles	Can be used to adjust the stylings of the configurable loading message (e.g. font-size, font-color, background, etc.).
data-content-highlight-regions	Can set a specific region to be highlighted in a PDF file in the PDF preview. This can be configured in the property “initAction” in the application options. There, the highlighting can be configured in the property “settings”. See the following example: var application = new Application({ startSearch: false, enableProfile: true, updateTitle: true, initAction:{ settings: { "preview.contentHighlightRegions" : '{"regions":[{"start":4350,"end":4680}]}' } } }); To mark the start and/or end point of a source or to highlight the source text, highlighting strategies need to be configured. For more information about highlighting strategy settings, please see the chapter The application object.

Mustache templates

You can find the options for this template under Mustache templates at results.

Standalone Preview

To activate the Preview component as standalone, set the attribute “data-standalone” to “true”. If you use the Insight App Designer you can now integrate preview component as standalone per-default.

This is very useful especially when you want to create an Insight App where you can chat with documents.

The standalone preview will take the first result from the results and project the content depending on the context (HTML page or PDF document).

Important: To use the preview in standalone mode you don’t need to wrap it in data-template="stack".

Note: To apply the initialized height adaptation and resize window height adaptation, use data-height=”auto”. This way the height of the PDF preview will adapt relative to the setting viewportElement. For more information about viewportElement, see viewportElement.

queryinfo (Display of expressions)

Displays Search Expressions

Example:

<div

data-template="queryinfo"

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

data-title="Query Constraints"

class="constraints-container searchinfo_constraints">

</div>

The list of different options for the dropdown is provided by the function 'getQueryinfoSelectOptionProperties'.

This function returns an object with "key", "label" and "type":

Object	Description
key	The property . For example: "extension"
label	The readable value in the dropdown. For example: "Extension"
type	Defines the type that can either be a free text or a date field. The following two options are possible: suggest inputdate

var customApp = Application.extend({

getQueryinfoSelectOptionProperties: function () {

return {

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

}

});

The input-path is crucial from where the expressions are used for displaying it.

In the following example, it must be ensured that the search constraints at the searchinput are available under "user.constraints.parsed.and.constraints" and this thus look like the following:

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 (Resetting of filters)

Resets all selected filters, if the reset action was executed.

Model: resetfilters

Example:

results (Display of results)

Displays results.

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

Example:

</div>

Settings:

Setting	Description
data-appendonscroll	Additional results will automatically be loaded when the user scrolls down. Enable this setting only if the results display is the last element on the page, otherwise the users cannot get to the elements under the results.
data-enable-optional-terms	An element is automatically added to the results, which allows to set a specific search via "Missing: {Term}" - "Must contain: {Term}". Possible values: true false Default setting: true
data-optional-terms-ratio	If optional terms are enabled, the ratio of the terms can also be specified. Type: Float Possible values: 0 – 1 Default setting: 0.33
data-enable-answers	Used to hide or show answers that are displayed above the results. This can be useful if you want to use the “Answer” component in a different location. The answers component is also available as a standalone component. For more information see answers (Display of answers). Possible values: true false Default setting: false

Events:

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

Mustache templates

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

<p>

{{{content}}}

</p>

Enter the name of the metadata item in curly braces {{{ }}} in order to view it. For instance:

{{{Author}}}

Author: {{{Author}}}

If the metadata is not available, should the label "Author:" not be shown either? You can make the output optional using a condition:

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

The complete template:

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

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

<p>

{{{content}}}

</p>

The output might look like this:

<div>

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

Autor: John Doe

<p>

Lorem impsum ...

</p>

</div>

<div>

</div>

With {{#actions.data}}{{{html}}}{{/actions.data}} you output all actions. In order to access the first action only, you can use {{actions.data[0].value.href}}.

The complete template with the first action as link:

<h3>

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

</a>

</h3>

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

<p>

{{{content}}}

</p>

The output could look as follows:

<div>

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

Autor: John Doe

<p>

Lorem impsum ...

</p>

</div>

<div>

</div>

resultsprogress (Display of loaded results)

The resultsprogress widget uses a progress bar to show how many of the available results have already been loaded.

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

Example:

savedsearches (Display of saved searches)

This widget displays your saved searches. When the mouse pointer hovers over the text, a "copy" icon also appears. Clicking this icon will create a link containing all the settings filters etc. of that search and you can paste it directly into the address bar and thus also submit your saved search. This also gives you the opportunity to share your search with other people.

Model: application.models.savedSearches

Examples:

Settings:

Setting	Description
aria-controls	If the attribute contains the ID of another element, this element is focalized after a search has been discontinued. Default setting: empty
data-title-tag-name	The HTML tag which is used for the header. Default setting: h2
data-title-class-name	The CSS class name which is used for the header. Default setting: empty
data-serversaved	Saves the search at the server. Default setting: false
data-query-string-limit	Sets the length of the generated URL. To enable the setting, the value must be greater than 0.

Example:

search (Display of multiple searches)

The search-widget is used for displaying multiple searches in one application for example your default results and above this results some persons or pictures.
Use the template-refid to reference a placeholder with your search-results (example below). For all placeholders the number of display results can be customized (data-count).

Example:

Use this example if you would like to show three results of “txt”-files and five results of “persons”.

{{{title}}}

</div>

</script>

</div>

{{{title}}}

</div>

{{{person.name}}}

</script>

</div>

Example 2:

In addition to the option data-template-refid you can directly use the components as a child of the ‘Search’ widget:

</div>

In this example we just render results with the extension ‘txt’ within the search container

Settings:

Setting	Description
data-template-refid	The reference to the container with the option data-template=“results“. This container must have a <div data-mb-exclude="true"> around.
data-count	The number of displayed results for every search-container. Note that the number of results is limited by the advanced setting “Maximum Request Result Count” under the “Client Service” tab in the “Configuration” menu. This means that the setting data-count cannot exceed the configured limit in the setting “Maximum Request Result Count”.
data-constraint	The restriction for the search (for example files, people, images etc.).
data-enabled-views	Specifies on which tabs a search container should be displayed or enabled. The list consists of the names of the tabs on which the search container is to be activated. The names must be separated by a comma. Example: "tab1,tab2".
data-disabled-views	Specifies on which tabs a search container should not be displayed or disabled. The list consists of the names of the tabs on which the search container is to be deactivated. The names must be separated by a comma. Example: "tab1,tab2".
data-name	Used to identify specific searched. Is also available as “Request Name” in app.telemetry.
data-channel-url	The URL of the target server to be used for federating search results. Type: String.
data-inherit-constraints-from-parent	To use restrictions from the main search in the search container as well. Example: A filter of the main search is also applied in the search container. Default setting: true
data-channel-type	Used to identify the channel type used for communication. (e.g. CrossDomainAjaxChannel, EWSChannel, …etc.). If the data-channel-url attribute is provided and no data-channel-type is passed the default channel is CrossDomainAjaxChannel. Type: String
data-parent-user-query-as-constraint	To use the search term of the main search as a further search restriction.
data-initialize-from-parent-user-query	The initialization of the search with the main search.
data-propagate-to-parent	If set to “true”, changes made to the search in a search container will be propagated to elements outside of the search container like the Mindbreeze Client. Possible values: true false Default setting: false

searchform (Search field formular)

The searchform widget is used to enter search terms. It can contain multiple input elements (input, select). Use the name-Attribut to search for the query term in one metadata item only. Without name-Attribut or if name="query", the input will be used as a general search term.

Model: application.models.search.input

Examples:

<button type="submit" tabindex="-1">Search</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"

</form>

Settings:

Setting	Description
data-requires-user-input	When this setting is enabled, a search term must be entered in order to start a search (it is not enough to just select a tab or a filter). This setting can be applied to a search form and a search container. Default setting: false
aria-controls	If the attribute contains the ID of another element, this element is focalized after a search has been discontinued. Default setting: empty
data-autofocus	If this setting is enabled, the search input is automatically focused on the search bar, when the page is loaded. This allows users to type the search request in the search bar immediately. Default setting: false

The attribute data-query-template specifies the search that will be used for an input field. Use {{value}} as a placeholder for the value entered:

<!—The input value {{value}} will be replaced in the template, e.g. Input: doc.* Search: { "label": "extension", "regex": "doc.*" } -->

searchinfo (Information for the results)

Displays information about the search results. The default template shows search timeouts, "No Results Found" and alternative search queries.

Model: application.models.search

Examples:

</div>

<h5>

</h5>

<p>

{{{i18n.client_did_you_mean}}}:

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

</a>

</p>

</script>

</div>

Mustache templates

In the template, the entire search model is available.

Default template:

</div>

<h5>

</h5>

<p>

{{{i18n.client_did_you_mean}}}:

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

</a>

</p>

Values:

Value	Description
alternatives	Suggestions for the entered search term, currently query_spelling.entries[0] leads to the first suggested correction. Hint: If contrary to expectations no alternatives appear and own logical operators are used in the query, see: Notes on Query Spelling Alternatives
computing	Is “true”, if a search is being executed.
status_messages	Status messages about the search (e.g. status_messages.timeout or status_messages.no_results).
estimated_count	Is the number of hits for the triggered search.
orderable	A list of available sort criteria includes localized_name for the display and name for the selection in the API. isSelected contains true, if the sort criterion is selected.

sortswitch (Display of sort criteria)

Displays the sort criteria available for the search.

Model: application.models.search

Examples:

</div>

<ul>

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

</li>

</ul>

</div>

Mustache templates

In the template, the entire search model is available.

Default template:

{{{i18n.client_toolbar_sortingalgorithm_label}}}:

<li class="mb-selectable {{#isSelected?}}mb-selected{{/isSelected?}}"><a class="action" tabindex="0" data-name="orderby" data-value="{{name}}">{{localized_name}}</a></li>

</ul>

Values:

See Mustache templates searchinfo.

stack (Display of overlay window)

Using the stack widget, users can perform actions that execute a new Insight App as a new search. Visually, the executed action is on top of the last executed action. This allows the user to easily jump back in the navigation path.

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

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

| | || Preview | | |

| | || | | |

| Action o--------> || | | |

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

| | || | | |

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

| |

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

Examples:

Results

</div>

<a href="#"

data-action-object="{

"pushStack": {

"title": "PDF-Dokumente",

"template-ref": "pdfAppTemplate",

"applicationOptions": {

"startSearch": true

}}}">

PDF-Dokumente

</a>

</div>

</div>

Example: Display all Information About a Person

...

<a href="#"

data-action-object="{

"pushStack": {

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

"template-ref": "personTemplate",

"action": "showPerson"

}}">

All about {{{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>

Parameters of the action pushStack:

Parameter	Description
template-ref	The ID of the HTML element that contains the template for the stack.
title	The title of the stack element. Default setting: title of the link
applicationOptions	The initialization options for the Insight App.
action	An action that is executed after initializing the new Insight App.

suggest (Search suggestions in the search form)

Allows you to use the auto-completion in an input field. From now on, popular searches, recently performed searches, and terms from taxonomies alongside the search results from metadata can be also suggested. Additionally, it is possible to search all available tabs using the search term.

Suggests if the search string is empty (latest searches):

Screenshot: Suggests for the search term “Mindbreeze” from metadata and tabs:

Suggest Default Example (can be found in the respective HTML):

<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

Settings:

Setting

Description

property

The metadata to be used for completion.

Default setting: title

property-constraint

A search term to restrict the possible values.

Default setting: empty

count

The number of suggestions.

Default setting: 4

source-id-pattern

Specifies the suggest sources (e.g.: document_property|recent_query|tabs)

Source	Description
document_property	Provides suggestions from metadata.
popularsearches	Provides suggestions from the database (settings required in the configuration).
words_and_terms	Provides suggestions from a concept index (CSV file). Settings in the configuration are required.
recent_query	Delivers suggestions from the most recent queries.
tabs	Lists the available tabs to be able to search in all tabs.

Default setting: $$SUGGEST_SOURCE_ID_PATTERN$$

Attention: If this setting is changed, the settings in the configurator (checkboxes for activating the suggestions) are not taken into account and overwritten.

initial-source-id-pattern

Available sources are the same as in the setting source-id-pattern except that the hits from these sources are displayed when the search term is empty.

Default setting: $$SUGGEST_INITIAL_SOURCE_ID_PATTERN$$.

Attention: If this setting is changed, the settings in the configurator (check-boxes for activating the suggestions) are not taken into account and overwritten.

service

The URL to a suggest service.

Default setting: empty − same as search

disabled

Disabled the suggestions.

Default setting: false

grouped

Groups the autocomplete hits.

Possible values:

true
false

initial-grouped

Grouping of the hits at the initial search.

Possible values:

true
false

Default setting: true

show-onfocus

Displays the Autocomplete when focusing the text field.

Possible values:

true
false

Default setting: false