Copyright ©
Mindbreeze GmbH, A-4020 Linz, .
All rights reserved. All hardware and software names used are registered trade names and/or registered trademarks of the respective manufacturers.
These documents are highly confidential. No rights to our software or our professional services, or results of our professional services, or other protected rights can be based on the handing over and presentation of these documents.
Distribution, publication or duplication is not permitted.
The term ‘user‘ is used in a gender-neutral sense throughout the document.
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
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.
It is recommended to specify and use the following meta-tags in the <head> area of your Insight App:
<meta name="mes:user" content="$$USERNAME$$">
<meta name="display:mes:user" content="$$IS_USERNAME_DISPLAYED$$">
<meta name="mes:emailaddress" content="$$EMAILADDRESS$$">
<meta name="mes:loginstatus" content="$$LOGIN_ACTION$$">
<meta name="mes:logoutdisabled" content="$$LOGOUTDISABLED$$">
<meta name="mes:decrypted:user" content="$$DECRYPTEDUSERNAME$$">
<meta name="app:telemetry:enabled" content="$$APP_TELEMETRY_ENABLED$$">
<meta name="app:telemetry:application:id" content="$$APP_TELEMETRY_APPLICATION_ID$$">
<meta name="app:telemetry:application:tier:id" content="$$APP_TELEMETRY_APPLICATION_TIER_ID$$">
<meta name="enablePersonalization" content="$$ENABLE_PERSONALIZATION$$">
mes:user | Username of the currently logged in user |
display:mes:user | Specifies whether the username should be displayed or not |
mes:emailaddress | Email address of the currently logged in user |
mes:loginstatus | Specifies which action is currently available for the user (login or logout). |
mes:logoutdisabled | Specifies whether the user can safely log off or not |
mes:decrypted:user | Decrypted username of the currently logged in user |
app:telemetry:enabled | Specifies whether App.Telemetry should be enabled |
app:telemetry:application:id | Specifies the App.Telemetry application ID |
app:telemetry:application:tier:id | Specifies the App.Telemetry application tier ID |
enablePersonalization | Specifies whether personalization is active |
The styles are delivered via the file adapted.css. This is located in apps/css/.
<link href="/apps/css/v2/adapted.css" rel="stylesheet">
In addition, a minimal stylesheet (minimal-adapted) is available. This file is also located in apps/css/.
<link href="/apps/css/v2/minimal-adapted.css" rel="stylesheet">
We recommend that you load these styles within the <head> in the HTML.
The required JavaScript is supplied by client.js. This is located in apps/scripts/.
<script src="/apps/scripts/client.js" data-mindbreeze-lib data-global-export="false"></script>
The client.js is shipped with the following libraries:
Library | Key | Version | Website | Patches |
jQuery | jquery | 1.12.4 | CVE-2015-9251 CVE-2019-11358 CVE-2020-11022 CVE-2020-11023 CVE-2021-20086 CVE-2021-41182 CVE-2021-41183 CVE-2021-41184 | |
Underscorejs | underscore | 1.4.3 | CVE-2021-23358 | |
Backbone | backbone | 0.9.9 | ||
Highcharts | highcharts | 8.1.2 | CVE-2018-20801 | |
MomentJS | moment | 2.8.3 | CVE-2022-24785 CVE-2017-18214 | |
RequireJS | require | 2.1.8 | ||
Bootstrap | bootstrap | 2.2.2 |
The libraries can now be used with the help of require():
Mindbreeze.require(["jquery","moment"], function($,moment) {
var body = $("body");
var now = moment().toDate();
});
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:
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.
The Mindbreeze Loader can be used to load the created snippet and insert it into the HTML.
Loader.loadAppFromResource(options, additionalOptions);
options
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.
The user can type his or her own key words in the search field.
Screenshot:
Lists, pictures and maps can be used to display the results.
In List View and Picture View, the following additional options are available:
The following options are also available for the timeline view:
In List View and Picture View, the following additional options are available:
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}}}
or
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?}}
{{#content?}}
<p>
{{{content}}}
</p>
{{/content?}}
The output might look like this:
<div>
<h3><img src="..."> Dokument</h3>
Author: John Doe
<p>
Lorem impsum ...
</p>
</div>
<div>
<h3><img src="..."> John Doe</h3>
</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>
{{#actions.data[0].value.href?}}
<a href="{{actions.data[0].value.href}}">
{{/actions.data[0].value.href?}}
{{{icon}}} {{{title}}}
{{#actions.data[0].value.href?}}
</a>
{{/actions.data[0].value.href?}}
</h3>
{{#Author?}}Author: {{{Author}}}{{/Author?}}
{{#content?}}
<p>
{{{content}}}
</p>
{{/content?}}
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>
<h3><a href="http://..."><img src="..."> John Doe</a></h3>
</div>
Your Search can be resumed in an external search engine.
Screenshot:
Settings:
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.
Screenshot:
For detailed information about customizing, see the pagination widget.
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.
Screenshot:
For detailed information about customizing, see the pages widget.
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.
Screenshot:
Settings:
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>
{{^excluded}}
{{#count?}}
<span class="pull-right">{{count}}</span>
{{/count?}}
{{/excluded}}
{{#excluded}}
<span class="pull-right">–</span>
{{/excluded}}
Values:
For detailed information about customization, see the filteredfacet widget.
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.
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.
<link href="/apps/css/v2/designer-prefixed.css" rel="stylesheet">
The required JavaScript is provided by editor.js. It can be called up at the client service address under apps / scripts /.
<script src="/apps/scripts/editor.js" data-mindbreeze-lib data-global-export="false"></script>
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.
<div id=”designer-container“> … </div>
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 id="designer-container">
<div class="mb-editor-content">
<div class="left">
<div id="categories"></div>
<div id="categoryDetails"></div>
<div id="categoryEditor"></div>
<div id="mb-actions-container" class="mb-footer"></div>
</div>
<div class="right">
<div class="infopairing-box-full mb-hidden-loading">
<div id="insight-app-container" class="mb-snippet-source">
<div class="mb-progress-bar mb-fixed"></div>
<div data-template="view" data-count="5" data-constraint="ALL"><div class="mb-component-container container" id="mb-component-container"></div></div>
</div>
</div>
</div>
</div>
<div class="mb-loading-content">
<div class="mb-loading-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
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);
});
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:
<div data-template="map"></div>
<div data-template="view" data-count="5">...</div>
<div data-template="view" data-count="5">
<div data-template="results" data-appendonscroll="true">
<script type="text/x-mustache-template">
<h3>{{{icon}}} {{{title}}}</h3>
<p>
{{{content}}}
</p>
</script>
</div>
</div>
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 data-template="accordion" data-enabled="true" data-default-open="true" aria-label="Filter">
<div data-template="datasources" data-model="userSourceInfo" data-path="sources.data_sources" role="presentation"></div>
<div data-template="constraints" data-model="userSourceInfo" data-path="sources.constraints" role="presentation"></div>
<div data-template="filteredfacet" data-name="mes:date "></div>
<div data-template="filteredfacets" data-name="mes:configuredfacets" role="presentation"></div>
</div>
Settings:
An "alert" indicates errors that occurred during the search.
Screenshot:
Model: application.models.channels.alerts
Examples:
<div data-template="alert"></div>
<div data-template="alert">
<script type="text/x-mustache-template">
<div class="alert alert-{{level}}">
<button type="button" class="close" data-action-object="{"destroyModel": {}}" title="{{i18n.Close}}">×</button>
{{{message}}}
{{{error}}}
{{{warning}}}
{{{info}}}
{{#service_ids?}}
({{{service_ids}}})
{{/service_ids?}}
</div>
</script>
</div>
Values:
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.
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 (Note: These must be available as URL parameters).
Example:
https://entity.yourcompany.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 data-template="annotationPopup" data-enable-feedback="true">
</div>
Another example:
<div data-template="annotationPopup" data-enable-feedback="true">
<script type="text/x-mustache-template">
{{#term?}} <div><b>{{term}}</b></div> {{/term?}}
{{#code?}} <div>Code: {{code}}</div> {{/code?}}
{{#type?}} <div>Type: {{type}}</div> {{/type?}}
</script>
</div>
Settings:
data-enable-feedback: Enables the feedback functionality on the client. Default value: false
This component shows answers to submitted questions in a compact overview. Such answers are automatically displayed directly above the standard results (data-template="results") as soon as answers are available. NLQA must be configured so that answers can be displayed, Whitepaper – Natural Language Question Answering (NLQA) for details.
If answers to a specific search are available but should not be displayed, this component can be disabled in the results template.
Example:
<div data-template="results" data-enable-answers=”false”> … </div>
Settings:
Example:
<div data-template="view" data-answers-count=”3” data-similarity-score=”0.6”> … </div>
Offers a choice of additional search sources and additional external data sources.
Screenshot:
Model: application.models.applists
Example:
<div data-template="applists"></div>
When actions restrict the results, these constraints remain available in the breadcrumb widget and can be disabled there again.
Screenshot:
Model: application.models.search.user.constraints
Examples:
<ul data-template="breadcrumb" data-display-filteredfacets="true" class="nav nav-stacked nav-pills"></ul>
<ul data-template="breadcrumb" data-display-filteredfacets="true" class="nav nav-stacked nav-pills">
<script type="text/x-mustache-template" data-tag-name="li">
<div>
<label class="checkbox">
<input type="checkbox" checked data-action-object="{ "removeConstraint": {} }">
<span title="{{{description}}}">{{{description}}}</span>
</label>
</div>
</script>
</ul>
Settings:
Displays filters in the form of charts and thus has a similar function to the filteredfacet component.
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>
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>
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>
If you select the chart type “polar”, you will receive a graphic similar to the one below. The possible settings can be found here.
<div data-template="charts"
data-charttype="polar"
data-chartSourceName="scrumdata_exel"
data-chartTitle="Scrum"
></div>
If you select the chart type “bubble”, you will receive a graphic similar to the one below. The possible settings can be found here.
Example:
<div data-template="charts"
data-charttype="packedbubble"
data-chartSourceName="scrumdata_exel"
data-chartTitle="Scrum"
></div>
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 (e.g. “extension“, “mes:size“, etc.)
data-enablecustomsourcename: Specifies whether sourcename or custom sourcename should be used (“true” or “false” - Default: "false")
data-customsourcename: Specifies the custom sourcename to be used if it is not present in the Sourcename dropdown-list. (Text – Default: not set) . If the incorrect sourcename is set the warning will be displayed.
data-charttitle: Sets a heading or title. Example: “Extension”.
data-showlegend: Displays the values in the legend (“true” or “false” − default: “false”).
data-chartheight: Sets the height of the chart (default “200”).
data-chartwidth: Sets the width of the chart (default 100 percent).
data-chartcategories: Sets the categories of the chart (minimum is 3). Example: “Solution Design,Go-Live,Project Setup”.
data-chartresults: Sets the number of the chart (default is 5).
data-titlealign: Alignment of the heading (“left”, “center”, “right” - Default: “center”).
Widget for results that were collected using the "Collect" action.
Screenshot:
Model: application.models.collected
Beispiele:
<div data-template="collect"></div>
Settings:
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.
Screenshot:
Model: application.models.userSourceInfo
Example:
<div data-template="constraints" data-model="userSourceInfo" data-path="sources.constraints"></div>
See Mustache templates under filteredfacet.
Displays a filter for the data sources. Here data sources such as Microsoft Exchange, Fabasoft Folio and Microsoft SharePoint can be selected.
Screenshot:
Model: application.models.userSourceInfo
Example:
<div data-template="datasources" data-model="userSourceInfo" data-path="sources.data_sources"></div>
See Mustache templates under filteredfacet.
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:
<input name="mydate" data-template="inputdate" data-isrange="true" placeholder="Datum" >
<input name="mydate" data-template="inputdate">
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:
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 following setting is required:
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:
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 | Whether component should be enabled | Data type: Boolean, Default: false "$$DOCUMENT_LABELING_ENABLED$$" |
In order to include the Feedback component, the following settings must be enabled and configured properly in the Client Service:
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.
Screenshot:
Example:
<span data-template="feedbackbutton" data-check-if-enabled-in-profile="true"></span>
Settings:
The URL has to be entered in the “Fabasoft app.telemetry Web API URL” input box in the client service.
Screenshot:
Model: application.models.search + FacetValueCollection + FacetValueCollection.Entry
Examples:
<div data-template="filteredfacet" data-name="mes:date" data-user-input="disabled"></div>
<div data-template="filteredfacet">
<script type="text/x-mustache-template"
data-tag-name="span"
data-attr-title="{{name}}{{^name?}}{{html}}{{/name?}}"
>
{{{html}}}
<span class="pull-right">{{^count?}}-{{/count?}}{{count}}</span>
{{^excluded}}
{{#count?}}
<span class="pull-right">{{count}}</span>
{{/count?}}
{{/excluded}}
{{#excluded}}
<span class="pull-right">–</span>
{{/excluded}}
</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 class="filter">
<div class="entry">
...
</div>
...
</div>
</div>
Settings:
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>
{{^excluded}}
{{#count?}}
<span class="pull-right">{{count}}</span>
{{/count?}}
{{/excluded}}
{{#excluded}}
<span class="pull-right">–</span>
{{/excluded}}
Values:
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.
Screenshot:
Model: application.models.search + application.models.search.facets + FacetValueCollection + FacetValueCollection.Entry
Examples:
<div data-template="filteredfacets" data-name="mes:configuredfacets"></div>
<div data-template="filteredfacets" data-name="mes:configuredfacets">
<div style="display: none">
<div data-template="filteredfacet">
<script type="text/x-mustache-template"
data-tag-name="span"
data-attr-title="{{name}}{{^name?}}{{html}}{{/name?}}"
>
{{{html}}}
<span class="pull-right">{{^count?}}-{{/count?}}{{count}}</span>
{{^excluded}}
{{#count?}}
<span class="pull-right">{{count}}</span>
{{/count?}}
{{/excluded}}
{{#excluded}}
<span class="pull-right">–</span>
{{/excluded}}
</script>
</div>
</div>
</div>
Settings:
data-user-input-template: 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.
The template for the filteredfacet widget is defined as follows:
<div data-template="filteredfacets" data-name="mes:configuredfacets">
<div style="display: none">
<div data-template="filteredfacet">
...
</div>
</div>
</div>
See Mustache templates under filteredfacet.
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:
<div data-template="map"></div>
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:
<div data-template="map”>
<script type="text/x-mustache-template" data-tag-name="span">
<a target="_blank" href="{{actions[0].href}}">{{{title}}}</a>
</script>
</div>
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 }, … ] }
<div data-template="map” data-allow-symbolic-path=”true” >
<script type="text/x-mustache-template" data-tag-name="span">
<a target="_blank" href="{{actions[0].href}}">
{{{customProperty[geo_index]}}}
</a>
</script>
</div>
Settings:
data-allow-symbolic-path: To enable dynamic properties like ‘myProp[index]’. Default false.
Any JavaScript object with mustache templates can be displayed using the mustache widget.
Special behavior: {{#...?}}{{/...?}} {{..}} vs. {{{...}}}
Examples:
<script type="text/x-mustache-template">
<h3>{{{icon}}} {{{title}}}</h3>
<p>
{{{content}}}
</p>
</script>
<script type="text/x-mustache-template" data-tag-name="span" data-class-name="myclass">
<h3>{{{icon}}} {{{title}}}</h3>
<p>
{{{content}}}
</p>
</script>
<script type="text/x-mustache-template" data-attr-id="{{myId}}" data-attr-title="{{title}}">
<h3>{{{icon}}} {{{title}}}</h3>
<p>
{{{content}}}
</p>
</script>
Settings:
Values:
The values depend on the model used, i.e. the surrounding widget. For translations i18n is always available, e.g.
{{i18n.Close}}
Events:
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.
Screenshot:
Examples:
<div data-template="pagination"></div>
<div data-template="pagination">
<a href="#" style="display:none" class="mb-next action" data-action="this.nextPage({ append: true })">
Load more results
</a>
</div>
<div data-template="pagination">
<a href="#" style="display:none" class="mb-previous action" data-action="this.previousPage()">
Previous
</a>
<a href="#" style="display:none" class="mb-next action" data-action="this.nextPage()">
Next
</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 }).
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.
Screenshot:
Examples:
<div data-template="pages"></div>
<div data-template="pages" data-max-page-count="15"></div>
<div data-template="pages">
<script type="text/x-mustache-template" data-class-name="mypaging" data-tag-name="ul">
{{#pages?}}
{{#pages}}
<li class="{{#current_page?}}active{{/current_page?}}"><a href="#" data-action-name="setPage" data-page="{{page}}">{{page}}</a></li>
{{/pages}}
{{/pages?}}
</script>
</div>
Settings:
The following properties are available in the template:
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:
<script type="text/x-mustache-template" data-class-name="pagination">
{{#pages?}}
<ul>
{{#onFirstPage?}}
<li class="disabled"><span>«</span><li>
{{/onFirstPage?}}
{{^onFirstPage?}}
<li><a href="#" data-action-name="previousPage">«</a><li>
{{/onFirstPage?}}
{{#pages}}
<li class="{{#current_page?}}active{{/current_page?}}"><a href="#" data-action-name="setPage" data-page="{{page}}">{{page}}</a></li>
{{/pages}}
{{#more_avail?}}
<li class="disabled"><span>…</span></li>
{{/more_avail?}}
{{#onLastPage?}}
<li class="disabled"><span>»</span><li>
{{/onLastPage?}}
{{^onLastPage?}}
<li><a href="#" data-action-name="nextPage">»</a><li>
{{/onLastPage?}}
</ul>
{{/pages?}}
</script>
Displays the document preview, if the preview action was executed.
Model: preview
Examples:
<div data-template="preview" id="mb_preview" data-loading-message="Please wait while your file loads. Large documents may take up to 60 seconds to preview." data-loading-message-styles="font-size: 14px; background-color: green; color:white"></div>
<div data-template="preview" id="mb_preview">
<script type="text/x-mustache-template">
<h3>
{{#actions.data[0].value.href?}}
<a href="{{actions.data[0].value.href}}">
{{/actions.data[0].value.href?}}
{{{icon}}} {{{title}}}
{{#actions.data[0].value.href?}}
</a>
{{/actions.data[0].value.href?}}
</h3>
{{#Author?}}Author: {{{Author}}}{{/Author?}}
{{#content?}}
<p>
{{{content}}}
</p>
{{/content?}}
</script>
</div>
You can find the options for this template under Mustache templates at results.
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".
Key: The property - for example "extension"
Label: The readable value in the dropdown - For example "Extension"
Type: suggest | inputdate - Free text or date field
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"
}]
}
Resets all selected filters, if the reset action was executed.
Screenshot:
Model: resetfilters
Example:
<div data-template="resetfilters"></div>
Displays results.
Screenshot:
Model: application.models.search + ResultCollection + ResultCollection.Entry
Example:
<div data-template="results" data-appendonscroll="true">
</div>
Settings:
Events:
this.options.application.views.trigger("afterRender:Result", this.options.application, view, model);
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}}}
or
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?}}
{{#content?}}
<p>
{{{content}}}
</p>
{{/content?}}
The output might look like this:
<div>
<h3><img src="..."> Document</h3>
Autor: John Doe
<p>
Lorem impsum ...
</p>
</div>
<div>
<h3><img src="..."> John Doe</h3>
</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>
{{#actions.data[0].value.href?}}
<a href="{{actions.data[0].value.href}}">
{{/actions.data[0].value.href?}}
{{{icon}}} {{{title}}}
{{#actions.data[0].value.href?}}
</a>
{{/actions.data[0].value.href?}}
</h3>
{{#Author?}}Author: {{{Author}}}{{/Author?}}
{{#content?}}
<p>
{{{content}}}
</p>
{{/content?}}
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>
<h3><a href="http://..."><img src="..."> John Doe</a></h3>
</div>
The resultsprogress widget uses a progress bar to show how many of the available results have already been loaded.
Example:
<div data-template="resultsprogress"></div>
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:
<div data-template="savedsearches" aria-controls="main"></div>
<div data-template="savedsearches" aria-controls="main" data-title-class-name="subhead" data-title-tag-name="h3">
Settings:
Example:
<div data-template="savedsearches" data-query-string-limit=”2084” ></div>
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”.
<div data-template="search" data-name="show-txt" data-constraint="extension:txt" data-template-refid="show-all-txt-files"></div>
<div data-template="search" data-name="persons" data-constraint="categoryclass:person" data-template-refid="show-persons"></div>
<div data-mb-exclude="true">
<div id="show-all-txt-files">
<div data-template="results" data-count="3">
<script type="text/x-mustache-template">
<div class="title">
{{{title}}}
</div>
</script>
</div>
</div>
</div>
<div data-mb-exclude="true">
<div id="show-persons">
<div data-template="results" data-count="5">
<script type="text/x-mustache-template">
<div class="title">
{{{title}}}
</div>
{{{person.name}}}
</script>
</div>
</div>
</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 data-template="search" data-name="show-txt" data-constraint="extension:txt" data-template-refid="show-all-txt-files">
<div data-template="results"></div>
</div>
In this example we just render results with the extension ‘txt’ within the search container
Settings:
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.
Screenshot:
Model: application.models.search.input
Examples:
<form data-template="searchform">
<input autofocus>
<input name="extension"> <!-- Search terms in this search field will only be looked up in the metadata extension -->
<button type="submit" tabindex="-1">Search</button>
</form>
<form class="center search-field mb-print-left" data-template="searchform" data-requires-user-input="true">
<input data-template="suggest"
data-disabled="$$DISABLE_MAIN_SUGGEST$$"
data-placeholder="search"
class="mb-query" name="query" type="search"
data-aria-label="search"
autofocus
>
<button class="btn btn-link mb-no-print" type="submit" tabindex="-1"><i class="icon-search"></i></button>
</form>
Settings:
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.
<input data-query-template="{ "label": "extension", "regex": "{{value}}" }" name="extension">
<!—The input value {{value}} will be replaced in the template, e.g. Input: doc.* Search: { "label": "extension", "regex": "doc.*" } -->
Displays information about the search results. The default template shows search timeouts, "No Results Found" and alternative search queries.
Screenshot:
Model: application.models.search
Examples:
<div data-template="searchinfo"></div>
<div data-template="searchinfo">
<script type="text/x-mustache-template">
{{^computing?}}
{{#status_messages.timeout}}
<div class="alert">
<button type="button" class="close" data-dismiss="alert" title="{{i18n.Close}}">×</button>
{{error}}
{{warning}}
{{info}}
</div>
{{/status_messages.timeout}}
{{#status_messages.no_results?}}
<h5>
{{status_messages.no_results.error}}
{{status_messages.no_results.warning}}
{{status_messages.no_results.info}}
</h5>
{{#alternatives.query_spelling.entries[0]?}}
<p>
{{{i18n.client_did_you_mean}}}:
<a href="#" class="action" data-action-object="{"setDidYouMean": {"query": {{alternatives.query_spelling.entries[0].query_expr}} }}">
{{{alternatives.query_spelling.entries[0].html}}}
</a>
</p>
{{/alternatives.query_spelling.entries[0]?}}
{{/status_messages.no_results?}}
{{/computing?}}
</script>
</div>
In the template, the entire search model is available.
Default template:
{{^computing?}}
{{#status_messages.timeout}}
<div class="alert">
<button type="button" class="close" data-dismiss="alert" title="{{i18n.Close}}">×</button>
{{error}}
{{warning}}
{{info}}
</div>
{{/status_messages.timeout}}
{{#status_messages.no_results?}}
<h5>
{{status_messages.no_results.error}}
{{status_messages.no_results.warning}}
{{status_messages.no_results.info}}
</h5>
{{#alternatives.query_spelling.entries[0]?}}
<p>
{{{i18n.client_did_you_mean}}}:
<a href="#" class="action" data-action-object="{"setDidYouMean": {"query": {{alternatives.query_spelling.entries[0].query_expr}} }}">
{{{alternatives.query_spelling.entries[0].html}}}
</a>
</p>
{{/alternatives.query_spelling.entries[0]?}}
{{/status_messages.no_results?}}
{{/computing?}}
Displays the sort criteria available for the search
Screenshot:
Model: application.models.search
Examples:
<div data-template="sortswitch" class="pull-right">
</div>
<div data-template="sortswitch" class="pull-right">
{{#orderable?}}
<ul>
{{#orderable}}
<li class="{{#isSelected?}}selected{{/isSelected?}}">
<a class="action" tabindex="0" data-name="orderby" data-value="{{name}}">{{localized_name}}</a>
</li>
{{/orderable}}
</ul>
{{/orderable?}}
</div>
In the template, the entire search model is available.
Default template:
{{#orderable?}}
{{{i18n.client_toolbar_sortingalgorithm_label}}}:
<ul class="mb-inline">
{{#orderable}}
<li class="mb-selectable {{#isSelected?}}mb-selected{{/isSelected?}}"><a class="action" tabindex="0" data-name="orderby" data-value="{{name}}">{{localized_name}}</a></li>
{{/orderable}}
</ul>
{{/orderable?}}
Values:
See Mustache templates searchinfo.
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.
Screenshot:
+--------------+ +--------------+ +--------------+
| Results | | Results o------> | Results |
| | |+--------------+ | |
| | || Preview | | |
| | || | | |
| | || | | |
| Action o--------> || | | |
| ------ | || | | |
| | || | | |
| | || | | |
| | || | | |
+--------------+ +| | +--------------+
| |
+--------------+
Examples:
<div class="mb-stack" data-template="stack" data-model="stack">
<div class="mb-stack-title">
Results
</div>
<div class="mb-stack-content">
<a href="#"
data-action-object="{
"pushStack": {
"title": "PDF-Dokumente",
"template-ref": "pdfAppTemplate",
"applicationOptions": {
"startSearch": true
}}}">
PDF-Dokumente
</a>
<div data-template="view" data-count="5">
<div data-template="results"></div>
</div>
</div>
</div>
<div style="display: none" data-mb-exclude="true">
<div id="pdfAppTemplate">
<div data-template="view" data-count="5" data-constraint="extension:pdf">
<div data-template="results"></div>
</div>
</div>
</div>
<div data-template="results">
...
<a href="#"
data-action-object="{
"pushStack": {
"title": "{{name}}",
"template-ref": "personTemplate",
"action": "showPerson"
}}">
All about {{{name}}}
</a>
...
</div>
...
<div style="display: none" data-mb-exclude="true">
<div id="personTemplate">
<div data-template="view" data-count="5">
<div data-template="results"></div>
</div>
</div>
</div>
...
<script>
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:
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.
Screenshot: 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:
The snipped above can be extended by the settings. You can even remove some settings from the snipped. To Add a setting to the snipped, add a line to it, which looks like: data-SETTING=”VALUE”. In the example below we add the settings for the source, that just the content from the tabs is shown in the suggests and nor the default settings. If you do not add some the source-line yourself it will take the default-value.
Before:
input data-template="suggest"
data-placeholder="search"
class="mb-query"
name="query"
type="search"
data-aria-label="search"
autofocus
data-source-id-pattern="database"
data-grouped="true"
data-show-onfocus="true"
>
After:
input data-template="suggest"
data-placeholder="search"
class="mb-query"
name="query"
type="search"
data-grouped="true"
data-show-onfocus="true"
data-source=”TABS”
>
The settings for the suggested search terms can be entered in the configurator as follows:
Similar Terms
Suggest Settings (Concept CSV):
The CSV file must contain the columns Disabled, PrefLabel, AltLabel and Definition. The columns are used as follows:
Name | Function | Search term is checked | Must be set |
Disabled | TRUE: Line is ignored | No | No |
PrefLabel | Main part of the suggestion | Yes | Yes |
AltLabel | Displayed in parentheses after Preflabel | Yes | No |
Definition | Is displayed below the suggestion | No | No |
Example: The line
Disabled | PrefLabel | AltLabel | Definition |
Example | Sample | A definition |
is displayed in the autocompletion like this:
Suggest Settings and Initial Suggest Settings:
In principle: The settings under “Suggest Settings” are used as soon as a search term has been entered. “Initial Suggest Settings” are used if the search term is empty (see screenshot – suggestions with an empty search string of the last search).
Tip: Simple instructions for creating the database for "Similar Terms":
- create database similarterms;
- CREATE USER mindbreeze WITH PASSWORD 'Mindbreeze123';
- grant all privileges on database " similarterms" to mindbreeze;
Allows the usage of suggest-sources (pouplar searches, words and terms) as separate component.
Settings:
Screenshot:
Examples:
<div data-template=”suggestlist” data-count=”4” data-source-id-pattern=”words_and_terms”></div>
Allows you to group similar results.
Configuration:
This feature can be enabled or disabled in the client service:
If this feature is active, the client gets a new section "Summarize by".
<div data-template="summarize" data-enabled="true"></div>
Settings:
To enable this feature in your custom Insight App, you have to modify the mustache snippet as described here.
This widget is also available in Designer under “More” tab.
Tabs that offer search constraints to choose from. The tabs are stored in the user profile, come from the sources and can also be determined in the element.
Screenshot:
Model: application.models.tabs, application.models.userSourceInfo
Examples:
<ul data-template="tabs" data-model="tabs" data-datasourcetabs="true">
</ul>
<ul class="nav" data-template="tabs" data-model="tabs" data-datasourcetabs="true">
<script type="text/x-mustache-template" data-tabconfig="true" data-name="PDF-Dokumente" data-constraint="extension:pdf"></script>
<script type="text/x-mustache-template" data-tabconfig="true" data-name="Everything"></script>
</ul>
<ul class="nav" data-template="tabs" data-model="tabs" data-datasourcetabs="true">
<script type="text/x-mustache-template" data-tabconfig="true" data-name="PDF-Dokumente" data-constraint="extension:pdf"></script>
<script type="text/x-mustache-template" data-tabconfig="true" data-name="Everything"></script>
<script type="text/x-mustache-template"
data-tag-name="a"
data-attr-tabindex="{{#selected?}}-1{{/selected?}}{{^selected?}}0{{/selected?}}"
data-attr-class="action {{#selected?}}mb-selected{{/selected?}}"
data-attr-data-action-object="{"changeView":{"constraints.view": {{^constraint?}}null{{/constraint?}}{{{constraint}}} } }"
aria-hidden="true">
{{{name}}}
</script>
</ul>
Settings:
You can create your own tabs in the template. To do this, use the following HTML:
<script type="text/x-mustache-template" data-tabconfig="true" data-name="PDF-Dokumente" data-constraint="extension:pdf"></script>
<script type="text/x-mustache-template" data-tabconfig="true" data-name="Everything"></script>
Settings:
The template contains the value of the filter entry, the number of documents and whether or not the entered item is being considered for the current search.
Default template:
<script type="text/x-mustache-template"
data-tag-name="a"
data-attr-tabindex="{{#selected?}}-1{{/selected?}}{{^selected?}}0{{/selected?}}"
data-attr-class="action {{#selected?}}mb-selected{{/selected?}}"
data-attr-data-action-object="{"changeView":{"constraints.view": {{^constraint?}}null{{/constraint?}}{{{constraint}}} } }"
aria-hidden="true">
{{{name}}}
Values:
Renders a collection consisting of models.
This collection is ideally created in the initializeModels of the application and enriched in the "computed" event of the search.
In the following example a collection is created and filled with the properties "title" and "mes:key" in the "computed" event of the search and rendered.
HTML:
<ul data-template="treeview" data-model="treeViewCollection">
<script type="text/x-mustache-template">
<span>{{title}}</span>
</script>
</ul>
JavaScript:
var application = new Application({
startSearch: false,
initializeModels: function (application) {
application.models.treeViewCollection = new Backbone.Collection();
application.listenTo(
application.models.search,
"computed",
function(options) {
_.each(application.models.search.get("resultset.results"),
function (result) {
application.models.treeViewCollection.add({
'title': result.properties.title.data[0].value,
'mes:key': result.properties['mes:key'].data[0].value,
});
});
});
}
});
If you extend the HTML with an action (data-action-name, data-action-object, ...), a stack can be opened by clicking on the result and a 360° view of a certain result can be displayed. The new search required for this can be adjusted with properties of the clicked result or the clicked model (options.model).
Instructions on how to initialize and use a stack.
It is also possible to further restrict the results and to create a hierarchical result list.
For this purpose a search model is created, which terminates the detailed search and fills and displays the subsequent hits in the "children" of the model.
Tip: In the arguments of the "exampleAction" the clicked result/model is passed along (options.model). This allows access to all properties (title, mes:key, ...) of the result.
HTML:
<ul data-template="treeview" data-model="treeViewCollection">
<script type="text/x-mustache-template">
<span data-action-name="exampleAction">{{title}}</span>
</script>
</ul>
JavaScript:
/* require api via "api/v2/api" */
var searchModel = api.search.createModel(application.models.channels);
searchModel.once("computed", function () {
var children = new Backbone.Collection();
_.each(searchModel.get("resultset.results"), function (result) {
children.add({
title: result.properties.title.data[0].value,
'mes:key': result.properties['mes:key'].data[0].value,
});
});
options.model.set("children", children);
searchModel.destroy();
}
searchModel.set("count", 5, { silent: true });
searchModel.set("source_context.constraints.view_base", {
unparsed: "ALL",
});
Displays the results on a timeline. Navigation inside the timeline is possible by using the mouse-wheel and drag&drop.
Screenshot:
Model: application.models.search + ResultCollection + ResultCollection.Entry
Examples:
<div data-template="timeline"></div>
<div data-template="timeline"
data-height="50px"
data-range-start="2015-01-01"
data-range-end="2015-12-31"
data-date="mes:date">
</div>
Settings:
To display the items in the timeline, mustache templates can be used. More information can be found under results.
The view widget defines the basic settings for the search. It does not change the appearance of the page.
Model: application.models.search.input
Examples:
<div data-template="view" data-count="5">...</div>
<div data-template="view" data-count="5" data-constraint="extension:pdf">...</div>
Values:
The application constructor creates an Insight App with the widgets contained in the HTML. Settings as name-value pairs are expected as arguments.
Settings:
Example:
modelDefaults: {
search: {
properties: { "my_custom_application_property": { "formats": ["VALUE"]} },
computed_properties: [{"name": "my_prop", "expr": 'my_expression'}]
}
}
{
"version": "1.0",
"elements": {
"entities": {
// …
}
}
}
Read more about theme customization in the .
Examples:
new Application({});
new Application({
callback: function (application) {
…
},
rootEl: document.getElementById("mySearchApp"),
crossDomainAjax: {
loggedInHandlerBasePath: “apps/client/handle-login.html”
}
});
Example:
new Application( { queryStringLimit:2084 } )
Functions:
The difference between "UnparsedUserQuery" and "Constraints" is that "UnparsedUserQuery" restricts the search fundamentally (via the search field). The constraints are used to refine the search, but do not update the search field.
Examples:
application.setConstraint({ unparsed: "extension:PDF" });
application.setACLConstraint({ unparsed: "%ID:123456" });
You can customize the Insight Application theme by defining theme properties in application object.
Properties:
Each entity contains CSS properties and a tooltip object, where entity tooltip styles are defined.
When no entity custom theme styles are provided, the default styles of the application are used.
"person": {
"background-color": "#f44d6157",
// … other CSS properties
"tooltip": {
"background-color": "#f44d61",
"color": "white",
// … other CSS properties
}
}
To improve logging in app.telemetry, there are several URL parameters for it.
Such transformers in your Insight application will be executed right after the search response. A transformer should return a jQuery deferred object. The transformer function contains the response result in parameters list. Please remember that these transformers will be applied only to search responses.
e.g: var myTransformer = function(responseData) {
return $.Deferred(function() {
var self = this;
// modify your responseData here
self.resolve();
});
}
The list of transformers must be appended to the application.models.search.output.loadTransformers. One way how to do that is by extending the Application and modifying the output model from the prepareModels application function as the following:
Example:
var newApp = Application.extend({
prepareModels: function () {
var myTransformer = function(responseData) {
return $.Deferred(function() {
var self = this;
// modify your responseData here
self.resolve();
});
this.models.search.output.loadTransformers.push(myTransformer);
}
});
application.models.search.on("computing", function () {
});
application.models.search.on("computed", function () {
});
You can use view.el to access the rendered DOM element.
Examples:
application.views.on("entity:annotation:mouseover", function (data) {
});
Data object:
eventName: Name of triggered event.
view: the view object.
model: Computed model.
targetInfo: The read-only target property of the event.
application: Application object.
Listen to multiple events with start (*) character:You can use star (*) character to listen to multiple events.
application.views.on("*:annotation:mouseover", function (data) {
});
This will listen to all events followed by :annotation:mouseover. E.g
entity:annotation:mouseover
preview:annotation:mouseover
To know which event triggered the current event handler, you can check data.eventName.
More examples:
application.views.on("entity:*:mouseover", function (data) {
});
application.views.on("entity:annotation:*", function (data) {
});
PDF Preview events:
application.views.on("preview:annotation:mouseover", function(obj){});
application.views.on("preview:annotation:mouseleave", function(obj){});
application.views.on("preview:annoation:click", function(obj){});
Read more details in the section.
After a widget is rendered a “afterRender:{Widget name}” is triggered.
application.views.on("afterRender:Result", function(application, model){});
Links and buttons can trigger actions in the Insight App with the attribute data-action-object. For example,
<a data-action-object="{"openSearch":{}}"
data-href="https://duckduckgo.com/?q={searchTerms}">
Bei DuckDuckGo suchen
</a>
The openSearch action searches the current term using an external search engine, such as Bing, DuckDuckGo, Google or Yahoo.
Attribute:
Options:
searchTerms: additional restrictions on the search terms can be added, for example, "{searchTerms} image" searches for the current term and the word image
Examples:
<a data-action-object="{"openSearch":{}}"
data-href="https://duckduckgo.com/?q={searchTerms}">
Bei DuckDuckGo suchen
</a>
<a data-action-object="{"openSearch":{}}"
data-href="https://www.bing.com/search?cc={language}&q={searchTerms}">
Bei Bing suchen
</a>
<a data-action-object="{"openSearch":{"searchTerms": "{searchTerms} Bild"}}"
data-href="https://duckduckgo.com/?q={searchTerms}">
Bei DuckDuckGo suchen
</a>
The exportResults action opens a new stack, to export the current search.
Attribute:
Examples:
<button
class="btn hidden-when-mb-stack-has-child btn-export mb-no-print"
name="export"
data-action-name="exportResults"
data-properties="title,mes:date,mes:size,action_0"
data-export-enabled="true">Export
</button>
An API extension allows developers to react to hyperlinks in the PDF preview. For example, an interactive tooltip for a component in a technical drawing can be displayed.
Events:
application.views.on("preview:annotation:mouseover", function(obj){});
application.views.on("preview:annotation:mouseleave", function(obj){});
application.views.on("preview:annoation:click", function(obj){});
Examples:
<div data-mb-exclude="true">
<script type="text/x-mustache-template" id="linkoverlayinfo">
<div>{{name}}</div>
</script>
</div>
application.views.on("preview:annotation:mouseover", function(obj){
dataObject = {
name: “My Value”
}
var model = new Backbone.Model(dataObject);
var innerHTML = document.querySelector('#linkoverlayinfo').innerHTML;
var mustacheTemplate = new Mustache(innerHTML);
var str = mustacheTemplate.render(model);
});
If you want the custom action to be visible in App.Telemetry, you can specify the value "actionType" as argument. The following values are allowed: "preview", "openHref", "vote", "sendFeedback":
<a data-action-object="{"myCustomAction":{ "actionType": "preview" }}">
Open custom preview
</a>
A click on "Open custom preview" executes the function "myCustomAction" and sends a "personalization" request.
Using the attribute data-shortcut, key combinations for areas and actions can be set. If the attribute is set to a button or link, this is executed when you press the key combination. For all other elements, the element is focalized. If the element itself is not focusable, the first focusable element contained will be focalized.
For the key combination, the following keys are available in the order indicated:
Examples:
<div data-shortcut="alt+5">
…
</div>
<button data-shortcut="alt+shift+s">Aktion</button>
<button data-shortcut=" ctrl+meta+shift+x">Aktion</button>
The Mindbreeze InSpire Client uses Bootstrap Version 2.2.2 (http://getbootstrap.com/2.2.2/) for the design of the user interface.
The basic framework forms a two-column layout with the following structure (http://getbootstrap.com/2.2.2/scaffolding.html#fluidGridSystem):
.container .row-fluid
.span9
.span3
Icons, such as the magnifying glass in the search field, are transcribed with an icon font, which enables the colors to be changed easily. The icons are integrated with elements such as <i class="icon-search"></i>, making it possible to exchange the icon font for your own implementation. The utilized library is Font Awesome (http://fortawesome.github.io/Font-Awesome/3.2.1/).
h2-elements are used as headers for the main areas.
The description of the numbering is as follows:
While a search is being performed, the widgets obtain the CSS class mb-computing. Use this CSS class to show the activity.
Examples:
<div class="mb-progress-indicator mb-absolute mb-center"><i class="icon-spinner icon-large"></i></div>
.mb-progress-indicator {
display: none;
}
.mb-computing .mb-progress-indicator {
display: block;
}
Your own widgets can be installed as plugins and be used by you as your own Insight Apps and in the Insight App designer.
Once the plugin has been downloaded, it can be adjusted (see from Plugin structure onwards) and uploaded again under "Plugins". Once the plugin has been activated under "Client-Service“ > “Client Resources ", it is in the editor and ready for use.
Mindbreeze plugins are zip files that contain a description in the plugins.xml. The element id contains a clear string for the plugin, and mindbreeze.webapp.Resources is the extension point used. resource_path specifies the path inside the plugin, where the files are stored.
<?xml version="1.0" encoding="utf-8"?>
<Plugins>
<version>
<major>1</major>
<minor>0</minor>
<micro>0</micro>
<id>0</id>
</version>
<id>mycompany.example</id>
<plugins>
<Plugin>
<kind>RESOURCE</kind>
<extension>
<Extension>
<point>mindbreeze.webapp.Resources</point>
</Extension>
</extension>
<resource_path>resources</resource_path>
</Plugin>
</plugins>
</Plugins>
Using Mindbreeze resource plugins, the Mindbreeze Client Service can also act as a proxy for remote Web resources.
To make remote resources accessible for Insight Apps, a <resource_destination> element must be added to the plugin configuration:
<?xml version="1.0" encoding="utf-8"?>
<Plugins>
<version>
<major>1</major>
<minor>0</minor>
<micro>3</micro>
<id>0</id>
</version>
<id>remote.resource</id>
<plugins>
<Plugin>
<kind>RESOURCE</kind>
<extension>
<Extension>
<point>mindbreeze.webapp.Resources</point>
</Extension>
</extension>
<resource_destination>
<base_url>https://www.myserver.com</base_url>
<request_headers>
<KeyValuePair>
<key>User-Agent</key>
<value>curl/7.19.7 (x86_64-redhat-linux-gnu) libcurl/7.50.0 OpenSSL/1.0.1e zlib/1.2.3 libidn/1.18</value>
</KeyValuePair>
<KeyValuePair>
<key>CustomHeader</key>
<value>CustomValue</value>
</KeyValuePair>
</request_headers>
<request_query_parameters>
<KeyValuePair>
<key>QueryParam1</key>
<value>Value1</value>
</KeyValuePair>
</request_query_parameters>
</resource_destination>
</Plugin>
</plugins>
</Plugins>
A “resource_destination” element contains a “base_url” element. The base URL for the remote resources is configured here.
HTTP requests in the form of <InSpire_searchapp_base_url>/resource/<plugin_id>/path are redirected to <base_url>/path.
For example, with the “remote.resource” plugin (see plugin configuration above) requests to https://inspire.mindbreeze.com/searchapp/resource/remote.resource/api are sent to https://myserver.com/api.
The <request_headers> element can also be used to determine which HTTP headers are to be set in the redirected HTTP requests. HTTP header names and values can be stored as “KeyValuePair” elements, like the User-Agent or CustomHeader headers in our example.
Similar to headers, HTTP query parameters can also be configured with KeyValuePair elements. These must be located in a “request_query_parameters” element.
Templates.View.extend creates a new view. These are Backbone.Views with extensions. To create a custom view, use Templates.View.extend:
var MyView = Templates.View.extend({ … });
At extend, the custom functions are transferred. The main features include:
initialize | Retrieved when creating the view. Always start by calling up Templates.View.prototype.initialize.apply[this, arguments]), so that the groundwork is done. |
setModel | Retrieved when you change the model. Can be opened in Designer even during operation. Deleting a View will call up setModel is called with a null model. The procedure consists of: 1. Cleaning up dependencies to the current model 2. Templates.View.prototype.setModel.apply(this, arguments(this, arguments) 3. Create Event Handlers and other dependencies for the new model |
render | Used to customize the HTML. The DOM element is available under this.el as a jQuery object under this.$el. |
remove | Opened when deleting the View. At the end always open Templates.View.prototype.remove.apply(this, arguments, so that the groundwork is done. |
After creating your own widget it needs to be registered so that it is available in Insight Apps and in the Designer. To do this, use Templates.add:
Templates.add({
name: "exampleresults",
view: MyView,
attributes: {
size: {
title: "mycompany_results_size",
type: "string",
defaultValue: "test"
}
},
designer_menu: [{
name: "mycompany_results",
icon: Mindbreeze.require.toUrl("mycompany.example/example.png"),
description: "mycompany_results_description",
group: {
name: "mygroup",
description: "mygroup_description"
}
}]
});
});
Options:
name | Name of the widget. This can be used in Insight Apps data-template="exampleresults". Required field |
view | View object, see section. Required field |
attributes | Description of the available options. Used in Designer and for the options of the View. |
designer_menu | Menu items for the Designer. |
When you register your own widgets, you can use the property attributes to transfer options to the widget, for example:
attributes: {
size: {
title: "mycompany_results_size",
type: "string",
defaultValue: "test"
}
}
- If it’s usable in the HTML as data-size:
<div data-template="exampleresults" data-size="mysize"></div>
- then in the widget, the option is automatically available:
var MyView = Templates.View.extend({
…
initialize: function () {
console.log(this.options.size); // logs mysize
},
…
});
The title for the designer is specified with title. If the text is included in the translations, it is automatically translated.
The following types are available in types:
string | Strings |
boolean | true/false |
int | integers |
date | Date values that can be parsed with new Date(<value>). For example, 25 Dec 1995 13:30:00 GMT |
list | JSON array or comma- separated list of string values. ["a", "b", 1] or a, b |
i18nString | Values that begin with i18n. are translated. |
QueryExpr | The string is stored as an unstructured search Unstructured Search. |
With defaultValue, a default value can be specified to be used if the Option was not set.
When you register your own widgets, menu options for the widget can be filed in Designer with the property designer_menu menu options; for example:
designer_menu: [{
name: "mycompany_results",
icon: Mindbreeze.require.toUrl("mycompany.example/example.png"),
description: "mycompany_results_description",
group: {
name: "mygroup",
description: "mygroup_description"
}
}]
With the following translations:
i18n.loadExtension({
mygroup: {
"de": "Meine Gruppe",
"en": "My Group"
},
mygroup_description: {
"de": "Meine Gruppe macht ...",
"en": "My Group takes care of...."
},
mycompany_results: {
"de": "Resultate",
"en": "Results"
},
mycompany_results_description: {
"de": "Anzeige von Resultaten",
"en": "Result Display"
},
mycompany_results_size: {
"de": "Größe",
"en": "Size"
}
});
This menu appears:
Options:
name | Automatically translated name |
icon | Address of an image. Mindbreeze.require("<plugin-id>/<Pfad>") delivers the path of a file in the plugin |
description | Detailed description of the widget |
group | Name (name) and description (description) of the group in which the widget is to be sorted. |
With i18n.loadExtension your own translations can be added:
Mindbreeze.require(["i18n/i18n"], function(i18n) {
i18n.loadExtension({
mygroup: {
"de": "Meine Gruppe",
"en": "My Group"
}
});
});
Prerequisites:
Apache Ant | |
Node JS |
Folder structure:
build.xml | Retrieved with ant. Combines all dependencies in a new JavaScript file and packetizes the plugin. |
build.js | Configuration for packetizing plugin. Uses require.js |
src/css/plugin.css | |
lib | |
lib/r.js | Optimizing script |
lib/text.js |
In order to develop the plugin without installation, it can be stored on a web server and loaded using the following JavaScript:
<script src="https://demo.mindbreeze.com/public/apps/scripts/client.js"></script>
<!-- load plugin during development -->
<script>
window.define = Mindbreeze.define;
Mindbreeze.require.config({ paths: { "mycompany.example": "/plugins/mycompany.example/src" }});
Mindbreeze.require(["mycompany.example/init"]);
</script>
<!-- load plugin during development (end) -->
<script>
Mindbreeze.require(["client/application"], function (Application) {
new Application({
…
})
});
</script>
It is important that the plugin and the Client.js both stem from the same server.
Mindbreeze offers you the possibility of performing the search in the form of a dynamic RSS feed. To do this, open the URL below:
https://YourAppliance/mindbreeze/cmis/content/query?q=ALL&qtype=mes:sanskrit&maxItems=5&skipCount=5&language=de_DE
The following section describes the URL parameters and their function
Parameter | Optional | Description |
q | No | Search term – the entire search language can be used |
maxItems | Yes | Number of search results. Default value: 5 |
skipCount | Yes | Number of results to be skipped. This parameter can be used for scrolling. e.g. skipCount=5, in order to get to the second page with maxItems 5. Default value: 0 |
language | Yes | This parameter controls the translation of the metadata. Example: language=de Default value: Language of the browser |
To run your own Insight App directly via the client service and also configure them there as a default, the following parameters can be configured in the menu item "Web Application Contexts Settings" in the client service configuration. The corresponding files should then be copied to the appropriate location via the InSpire file uploader.
URL Path | URL path of the Insight App. |
File Path | URL path of the Insight App. |
Override Existing Path | If enabled, you can overwrite threads that normally exist in the standard client. This setting can cause standard applications to stop working in the usual way. |
Allow Symlinks | If enabled, symbolic links can also exist in the displayed threads. |
Authenticated URL pattern | The pattern determines the request URLs for which filters (which perform authentication, among other things) are applied. Usually the pattern contains the entire Insight App (standard pattern: /* ). For reasons of performance, however, URLs with static content (e.g. images, CSS or Javascript libraries) should not be included in the pattern. The pattern must be relative to the URL path and match the Tomcat web.xml URL pattern. [Servlet 3.0 specification] If the pattern is empty, no filters are applied and the Insight App can only be used without user authentication. |
Login URL pattern | If “optional” is selected in the “Require Authentication” field, a user authentication is requested for all request URLs that correspond to this pattern (the pattern must be relative to the URL path). The pattern must match the Tomcat web.xml URL pattern. [Servlet 3.0 specification] |
Not Cached MIME-Types Pattern | Basically, all resources in "Authenticated URL pattern" are cached by the browser. With this option certain resources can be explicitly excluded. This option defines a regular expression that is matched against the MIME-type of the resource. Resources with matching MIME-types are explicitly not cached. For example, by default, the index.html is not cached because the index.html can contain personalized values. default value: text/plain|text/html|application/json |
[Servlet 3.0 specification] http://download.oracle.com/otn-pub/jcp/servlet-3.0-fr-oth-JSpec/servlet-3_0-final-spec.pdf
The default Insight App is available as a template at /data/apps/client/index.html.
In the following example, two Insight Apps (marketing and sales) are configured on the client service, which can be reached at https://search.mycompany.com. The Insight App marketing can then be found at https://search.mycompany.com and https://search.mycompany.com/apps/marketing and the Insight App sales at https://search.mycompany.com/apps/sales.
The source info is retrieved when the Insight App is loaded using a POST request to /api/v2/sourceinfo. This contains information about data sources and API endpoints. For performance reasons, it is cached on the server side. To refresh the cache, the HTTP header "x-mes-refresh-cache" must be set, e.g:
curl -k -H "x-mes-refresh-cache:refresh" -X POST --data "{}" https://<your_appliance>:<your_client_port>/api/v2/sourceinfo
If Content Security Policy is used on a web server and resources are integrated from a Mindbreeze InSpire using, for example, an iframe, it is necessary to adapt possible Content Security Policy headers so that the resource is allowed be loaded by the web browser.
The following Content Security Policy header is very restrictive. A frame-src parameter must be specified here to allow access to the resources of Mindbreeze InSpire, accessible at https://search.mindbreeze.com.
Content-Security-Policy: default-src 'none'; frame-src https://search.mycompany.com
or
Content-Security-Policy: default-src 'none'; frame-src https://*.mycompany.com