Development of Search Apps

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.

IntroductionPermanent link for this heading

Mindbreeze search applications shape and design the access to your company's information and customize it tailored to your needs. You can use search applications 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 a search application.

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, search applications are HTML snippets that can be used on any web page.

Required resourcesPermanent link for this heading

StylesPermanent link for this heading

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

<link href="/apps/css/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/minimal-adapted.css" rel="stylesheet">

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

ScriptsPermanent link for this heading

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>

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 “false”

Search App EditorPermanent link for this heading

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

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

  1. 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/editor/).
  2. Click on the "Add Widget" button: This button appears wherever it’s possible to add widgets (more on this in Layouts).
  3. 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.

  4. Adjust the settings: After you add a widget, you can adjust its settings at the right edge of the window (1). Here you will see choices like search term, number of results and presentation template.
    To edit the settings again later, click the Edit button (2).

  1. Snippet fehlt!

    Use the search application: Click the "Export" button and copy your newly produced snippet onto any web page.

  2. All done! Show your colleagues the new search application.

Building BlocksPermanent link for this heading

LayoutPermanent link for this heading

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 FieldPermanent link for this heading

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

Screenshot:

ResultsPermanent link for this heading

Lists, pictures and maps can be used to display the results.

SettingsPermanent link for this heading

  • Search Restrictions: Only the results that correspond to a given constraint are displayed, e.g. extension:pdf, to display only PDF documents.
  • Results: The number of displayed results
  • Sort by: Results can be sorted by relevance or date.
  • Sort order: The results are sorted in ascending or descending order

In List View and Picture View, the following additional options are available:

  • Display results while scrolling: 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.

The following options are also available for the timeline view:

  • 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 & end date: Limits the timeline to a specific period
  • In List View and Picture View, the following additional options are available:
  • Vorlage: 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-TemplatesPermanent link for this heading

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 as follows:

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

LinkPermanent link for this heading

Your Search can be resumed in an external search engine.

Screenshot:

Settings:

  • 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 search app.
  • Text: The text of the link.

ScrollingPermanent link for this heading

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.

PagesPermanent link for this heading

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.

FilterPermanent link for this heading

Filters are used to restrict the search results. When you add a widget you’ll be able to choose from all available filters which are possible for the current search.

Screenshot:

Settings:

  • 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).
  • Allow 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.
  • User input widget: Select the widget that will be used for user input.
  • Always display user input: Should user input be displayed even if no search term has been entered yet?
  • Expandable: The user can shut the filter, so that only the title bar is displayed.
  • Open by default: The filter is displayed in expanded form from the beginning.
  • AND operation of filter values possible: Enables a "+" button next to a filter value, which can be used to make an AND operation.
  • Template: You can customize the appearance of the filter using the mustache-Templates.

mustache-TemplatesPermanent link for this heading

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">&ndash;</span>

{{/excluded}}

Values:

  • 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 filteredfacet widget.

Available WidgetsPermanent link for this heading

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>

alertedsearchesPermanent link for this heading

The alert widget enables the user to subscribe to email notifications.

Example:

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

Configuration: Configuration using the management Interface is needed to use this widget.

accordionPermanent link for this heading

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:

  • data-enabled: Using true allows areas on the screen to be opened and closed. Default: false
  • data-default-open: indicates whether the included areas are by default open or closed. Default: false

alertPermanent link for this heading

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="{&quot;destroyModel&quot;: {}}" title="{{i18n.Close}}">&times;</button>

      {{{message}}}

      {{{error}}}

      {{{warning}}}

      {{{info}}}

      {{#service_ids?}}

        ({{{service_ids}}})

      {{/service_ids?}}

    </div>

  </script>

</div>

mustache-TemplatesPermanent link for this heading

Values:

  • level: info, warning, error
  • message: Error message
  • error: Error message
  • warning: Warning message
  • info: Information message
  • service_ids: Services that prompted the message

annotationPopupPermanent link for this heading

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

applistsPermanent link for this heading

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

Screenshot:

Model: application.models.applists

Example:

<div data-template="applists"></div>

breadcrumbPermanent link for this heading

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" class="nav nav-stacked nav-pills"></ul>

 

<ul data-template="breadcrumb" 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="{ &quot;removeConstraint&quot;: {} }">

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

      </label>

    </div>

  </script>

</ul>

collectPermanent link for this heading

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

Screenshot:

Model: application.models.collected

Beispiele:

<div data-template="collect"></div>

Settings:

  • data-favorites-collection-path: Persisted Collection path for saving the collected results. Has to start with favorites/. Default: empty
  • data-results-shortcut: Describtion of the keyboard-shortcut used to navigate to the results Example: Alt+2, Default: empty

constraintsPermanent link for this heading

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>

mustache-TemplatesPermanent link for this heading

See mustache templates under filteredfacet.

datasourcesPermanent link for this heading

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>

mustache-TemplatesPermanent link for this heading

See mustache templates under filteredfacet.

Input DatePermanent link for this heading

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

Settings:

  • name: Name of the metadata for the restriction
  • data-isrange: If true, a time range can be specified. Default value: false

Date filterPermanent link for this heading

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:

Flat Date Filter Values (Month Year): “true“

feedbackbuttonPermanent link for this heading

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:

  • data-check-if-enabled-in-profile: the feedback button can be enabled or disabled in the profile. This option allows you to specify whether the profile setting is taken into account. Values: true, false.

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

filteredfacetPermanent link for this heading

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">&ndash;</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:

  • 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 value: false
  • 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 value: h3
  • data-title-class-name: The CSS class name used for the filter headings. Default value: empty
  • data-title-template: Mustache template for displaying the title. Available values: title, isOpen. Default value: empty
  • data-container-tag-name: The HTML tag for the element containing the filter entries. Default value: ul
  • data-container-class-name: The CSS class name for the element containing the filter entries. Default value: empty
  • data-entry-tag-name: The HTML tag for a filter entry. Default value: li
  • data-entry-class-name: The CSS class name for a filter entry. Default value: empty
  • data-entry-role: The ARIA role attribute for a filter entry. Default value: empty
  • data-collapsible: “true” allows you to open and close the filter. Default value: false
  • data-default-open: specifies whether the filter is open or closed by default. Default value: 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-and-available: Activates a “+” button next to a filter value with which an AND operation can be performed. Default value: false
  • data-intersect-values: Used for linking the selected values AND, so that hits should contain all selected values. Default value: 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 value: 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 value: true
  • data-show-checkbox: Should a checkbox be displayed? Default value: true
  • data-show-all: Should the option “All” be displayed? Default value: true

mustache templatesPermanent link for this heading

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">&ndash;</span>

{{/excluded}}

Values:

  • html: The formatted value of the filter entry, e. g. 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

filteredfacetsPermanent link for this heading

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">&ndash;</span>

        {{/excluded}}

      </script>

    </div>

  </div>

</div>

Settings:

  • 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: 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-<Einstellung>: 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: h5
  • data-title-class-name: CSS class name that is used for the titles of the filter. Default: empty
  • data-facet-container-tag-name: HTML tag for the element that contains the filter entries. Default: ul
  • data-facet-container-class-name: CSS class name for the element that contains the filter entries. Default: empty
  • data-facet-entry-tag-name: HTML tag for a filter entry. Default: li
  • data-facet-entry-class-name: CSS class name for a filter entry. Default: empty
  • data-collapsible: If true, the filter can be opened and closed. Default: false
  • data-default-open: specifies whether the filter is opened or closed by default. Default: 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: If “true”, the filters are displayed as a dropdown/combobox. Default: false.

mustache-TemplatesPermanent link for this heading

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.

mapPermanent link for this heading

Shows results that contain geodata on a map. If there is no result with geodata, the map is not displayed. Geodata must be present in the metadata geolatitude und geolongitude.

Screenshot:

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

Example:

<div data-template="map"></div>

mustache templatesPermanent link for this heading

The content of the marker can be customized using a mustache template.

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>

mustachePermanent link for this heading

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:

  • data-tag-name: HTML tag for the template. Default value: div
  • data-class-name: CSS class name for the template. Default: empty
  • data-use-output-only: If enabled, the input part of the model is not used for display. Default: false
  • data-attr-*: attributes can be calculated with mustache templates, e.g. 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.

{{i18n.Close}}

Events:

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

paginationPermanent link for this heading

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 }).

pagesPermanent link for this heading

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:

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

mustache templatesPermanent link for this heading

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>&laquo;</span><li>

      {{/onFirstPage?}}

      {{^onFirstPage?}}

        <li><a href="#" data-action-name="previousPage">&laquo;</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>&hellip;</span></li>

      {{/more_avail?}}

      {{#onLastPage?}}

        <li class="disabled"><span>&raquo;</span><li>

      {{/onLastPage?}}

      {{^onLastPage?}}

        <li><a href="#" data-action-name="nextPage">&raquo;</a><li>

      {{/onLastPage?}}

    </ul>

  {{/pages?}}

</script>

paginationPermanent link for this heading

The pagination widget allows users to view additional search results. Use this widget if you have not enabled the Show results when scrolling option for 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 })">

    Weitere Ergebnisse laden

  </a>

</div>

 

<div data-template="pagination">

  <a href="#" style="display:none" class="mb-previous action" data-action="this.previousPage()">

    Back

  </a>

  <a href="#" style="display:none" class="mb-next action" data-action="this.nextPage()">

    Weiter

  </a>

</div>

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

To trigger the actions, use class="... action" data-action="<Aktion>". You can scroll forward using the action this.nextPage(), and using this.previousPage() you can scroll back. If you want the results to be added at the end of the list, use this.nextPage({ append: true }).

previewPermanent link for this heading

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

Screenshot:

Model: preview

Examples:

<div data-template="preview" id="mb_preview"></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>

mustache-TemplatesPermanent link for this heading

You can find the options for this template under mustache-Templates at results.

resultsPermanent link for this heading

Displays results.

Screenshot:

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

Example:

<div data-template="results" data-appendonscroll="true">

</div>

Settings:

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

Events:

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

mustache-TemplatesPermanent link for this heading

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>

resultsprogressPermanent link for this heading

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>

savedsearchesPermanent link for this heading

Displays the saved searches.

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:

  • aria-controls: if the attribute contains the ID of another element, this element is focalized after a search has been discontinued. Default: empty
  • data-title-tag-name: HTML tag which is used for the header. Default: h2
  • data-title-class-name: CSS class name which is used for the header. Default: empty
  • data-serversaved: Saves the search at the server. Default: false

searchPermanent link for this heading

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>

Settings:

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.

data-constraint: Restriction for the search.

searchformPermanent link for this heading

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:

  • data-requires-user-input: when this option 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). Default: false
  • aria-controls: if the attribute contains the ID of another element, this element is focalized after a search has been discontinued. Default: empty

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="{ &quot;label&quot;: &quot;extension&quot;, &quot;regex&quot;: &quot;{{value}}&quot; }" name="extension">

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

searchinfoPermanent link for this heading

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}}">&times;</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="{&quot;setDidYouMean&quot;: {&quot;query&quot;: {{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>

mustache-TemplatesPermanent link for this heading

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}}">&times;</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="{&quot;setDidYouMean&quot;: {&quot;query&quot;: {{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?}}

Values:

  • alternatives: Suggestions for the entered search term, currently query_spelling.entries[0] leads to the first suggested correction.
  • computing: 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: 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.

sortswitchPermanent link for this heading

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>

mustache-TemplatesPermanent link for this heading

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.

stackPermanent link for this heading

Using the stack widget, users can perform actions that execute a new search application 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="{

         &quot;pushStack&quot;: {

         &quot;title&quot;: &quot;PDF-Dokumente&quot;,

         &quot;template-ref&quot;: &quot;pdfAppTemplate&quot;,

         &quot;applicationOptions&quot;: {

           &quot;startSearch&quot;: 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>

Example: Display all Information About a PersonPermanent link for this heading

<div data-template="results">

  ...

  <a href="#"

     data-action-object="{

       &quot;pushStack&quot;: {

       &quot;title&quot;: &quot;{{name}}&quot;,

       &quot;template-ref&quot;: &quot;personTemplate&quot;,

       &quot;action&quot;: &quot;showPerson&quot;

       }}">

    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:

  • template-ref: The id of the HTML element that contains the template for the stack.
  • title: The title of the stack element. Default: title of the link
  • applicationOptions: The initialization options for the search application
  • action: An action that is executed after initializing the new search application

suggestPermanent link for this heading

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:

Examples (This Snipped can be found in the default-client/in your searchapp and can be adapted):

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

>

 

<input data-template="suggest"        

       name="extension">

Settings:

  • property: the metadata to be used for completion. Default value: title
  • property-constraint: a search term to restrict the possible values. Default value: empty
  • count: the number of suggestions. Default value: 4
  • source-id-pattern: Specifies the suggest sources (e.g.: document_property|recent_query|tabs)
    Default value: $$SUGGEST_SOURCE_ID_PATTERN$$. If this setting is changed, the settings in the configurator (checkboxes for activating the suggestions) are not taken into account and overwritten.

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 required)
  • recent_query – delivers suggestions from the most recent queries
  • tabs – lists the available tabs to be able to search in all tabs
  • initial-source-id-pattern: Settings are the same as source-id-pattern except that the hits from these sources are displayed when the search term is empty.
    Default value: $$SUGGEST_INITIAL_SOURCE_ID_PATTERN$$. If this setting is changed, the settings in the configurator (check-boxes for activating the suggestions) are not taken into account and overwritten.
  • service: URL to a suggest service. Default value: empty − same as search
  • disabled: Suggestions are disabled. Default value: false
  • grouped: groups the autocomplete hits (true/false)
  • initial-grouped: Grouping of the hits at the initial search (true/false). Default value: true
  • show-onfocus: Displays the Autocomplete when focusing the text field (true/false).  Default value: false*1
  • suggest-timeout: Sets a timeout for the request. Specified in seconds.
  • source-id-document_property-title: Sets the title of the “document_property” source.*1
  • source-id-popularsearches-title: Sets the title of the “popularsearches” source.*1
  • source-id-word_and_terms-title: Sets the title of the “word_and_term” source.*1
  • source-id-recent_query-title: Sets the title of the “recent_query” source.*1
  • default-tab-title: If no tab is available, this value is used as the title.*1
  • source-id-order: Determines the order in Suggest:*1
    Example: “document_property,words_and_terms,tabs,recent_query“ (separated by commas)
  • initial-source-id-order: Determines the order in Suggest, which is displayed when the search field is focused (setting identical to source-id-order).*1
  • *1 Upon request, these settings have to be adapted directly in the HTML file.

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:

  1. Similar Terms

Enable Suggesting of Similar Queries: If checked, the Suggest will be read via the related search terms from the database app.telemetry.

ID: An ID can be assigned for each Suggest source (e.g. for styling)

Source Name: The source name can be “Popular Searches“, for instance

Database JDBC URL: URL for app.telemetry database

Table Name: Table name from the App.Telementry configuration

Table Column for Query: Selection of the number of results - App Telemetry Configuration

Table Column for Score: Selection of the column names of the results from the App Telemetry configuration

Table Column for View ID: Selection of the column name of the queries from the App Telemetry configuration

Additional WHERE Clause: Here you have the possibility to create and add different "WHERE" clauses.

Suggest If User Query Is Empty: if "true" is enabled, suggestions are given, even if the user has not yet searched.


Suggest Settings (Concept CSV):

  • ID: The ID “words_and_terms” must be assigned (can be used for styling).
  • Source Name: The source name can be e.g. “Words and terms”
  • CSV File Path: The path to the CSV file

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

  • Enable Suggesting from CSV File: If this option is checked, the suggestion is read from a CSV file using similar search terms.
  • Enable Suggesting of Similar Queries: If this option is checked, the suggestion is read from the App.Telemetry database using similar search terms.
  • Enable Suggesting of Tabs: If this option is checked, the suggestion is read from the App.Telemetry database using similar search terms.
  • Enable Suggesting of Document Property: If this option is checked, the suggestion is read from the App.Telemetry database using similar search terms.
  • Enable Suggesting of Recent Queries: If this option is checked, the suggestion is read from the App.Telemetry database using similar search terms.

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;

suggestlistPermanent link for this heading

Allows the usage of suggest-sources (pouplar searches, words and terms) as separate component.

Settings:

  • count: number of suggestions: default value 4
  • title: default: Popular Searches
  • property: metadata to be used for autocomplete. Default value: title
  • source-id-pattern: suggest source

Screenshot:

Examples:

<div data-template=”suggestlist” data-count=”4” data-source-id-pattern=”words_and_terms”></div>

summarizePermanent link for this heading

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

Example:

<div data-template="summarize" data-enabled="true"></div>

Settings:

  • data-enabled: Enables or disables the feature (Default true).

tabsPermanent link for this heading

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="{&quot;changeView&quot;:{&quot;constraints.view&quot;: {{^constraint?}}null{{/constraint?}}{{{constraint}}} } }"

          aria-hidden="true">

    {{{name}}}

  </script>

</ul>

Settings:

  • data-model: tabs
  • data-editable: if true, tabs can be added and edited by the user
  • data-datasourcetabs: if true, tabs are displayed for the activated sources
  • data-role: ARIA role of the tabs. Default value: tablist
  • data-entry-role: ARIA role of the list entries. Default value: presentation

Create your own TabsPermanent link for this heading

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:

  • data-tabconfig: true
  • data-name: Name of the tab. If there is a translation for the name, it appears in the current language
  • data-constraint: The search term that is used as a constraint. If there is no constraint, all constraints are removed; this way you can create an "All" tab

mustache-TemplatesPermanent link for this heading

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:

<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="{&quot;changeView&quot;:{&quot;constraints.view&quot;: {{^constraint?}}null{{/constraint?}}{{{constraint}}} } }"

        aria-hidden="true">

{{{name}}}

Values:

  • selected: returns true if the tab is selected
  • constraint: the used constraint
  • name: the translated name

timelinePermanent link for this heading

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:

  • data-height: Height of the timeline, auto for automatic adjustment to the displayed results or height indication according to CSS, for example, 200px. Default: auto
  • data-range-start & data-range-end: Limits the timeline to a specific time period. The information is converted into a date with new Date (<attributevalue>).
  • data-date: Specifies the metadata that is used to position the results on the timeline (default-value: mes:date).
  • data-padding-right: Specifies the amount of space to the right to be left empty. (In case the title is not fully visible)
  • data-padding-left: Specifies the amount of space to the left to be left empty. (In case the title is not fully visible)

mustache Templates   Permanent link for this heading

To display the items in the timeline, mustache templates can be used. More information can be found under results.

viewPermanent link for this heading

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:

  • constraint: Constraint for the search
  • count: number of hits
  • orderby: Sorting parameters – currently: mes:relevance or mes:date

chartsPermanent link for this heading

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

Available chart typesPermanent link for this heading

PiePermanent link for this heading

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

Example:

<div data-template="charts"

data-charttype="pie"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

data-showlegend="true"

></div>

BarPermanent link for this heading

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

Example:

<div data-template="charts"

data-charttype="bar"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

></div>

LinePermanent link for this heading

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

Example:

<div data-template="charts"

data-charttype="line"

data-chartSourceName="extension"

data-chartTitle="Erweiterung"

></div>

Chart settingsPermanent link for this heading

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-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-titlealign: Alignment of the heading (“left”, “center”, “right” - Default: “center”).

The application objectPermanent link for this heading

The application constructor creates a search application with the widgets contained in the HTML. Settings as name-value pairs are expected as arguments.

Settings:

  • apiRequestHeaders: This setting can be used to transfer headers for search queries. Type: Object. e.g: apiRequestHeaders: headers["x-mes-auth-token"]
  • callback: Function that is called after the initialization of the application. Receives the application object as an argument.
  • datasourcesCategoryOrder: List of the data source categories used for sorting the data sources. For unspecified categories, the alphabetical default sorting is used. For example: ["Web", "Microsoft Exchange"]
  • datasourcesGroupByCategory: Displays data sources grouped by data source category. Values: true, false. Default value: true
  • datasourcesNameOrder: List of the data source name used for sorting the data sources. If datasourcesGroupByCategory is enabled, the data sources are sorted in the groups. For non-specified data sources, the alphabetical default sorting is used. E.g. ["User drive", "Intranet"]
  • enableProfile: Enables the user profile. Values: true, false. Default value: false
  • enableRemoteSources: Enables federated data sources entered in the configuration. Values: true, false. Default value: true
  • loginAsError: Login requests are treated as errors. No login is displayed. Values: true, false. Default value: false
  • queryURLParameter: Name of the URL parameter for search terms (e.g. a search for test is started when the page http://www.example.com/?query=test is opened). Default value: empty
  • rootEl: DOM element that contains the search application. Default value: document.body
  • rootEls: List of DOM elements that contain the search application. Overwrites the rootEl setting. Default value: document.body
  • sources: List of search addresses, e.g. ["<Client Service URL>/api/v2/"]. Default value: Address of the client service from which the JavaScript file was loaded. Alternatively, an AjaxChannel can be specified instead of the list, e.g. new AjaxChannel({ url: "<Client Service URL>/api/v2/”}), to allow crossDomain requests.
    AjaxChannel can be required via "service/ajax_channel".
  • linkOpenTarget: Default target option to open links. Values: “_blank”, “_parent”, “_self”, “_top”. Default value: “_blank”
  • enableImmediateDisplayOfFederatedResults: Do you want to display all results requested by the individual services for federated data sources? This means that results that are less relevant may already be displayed on the first page. Values: true, false. Default value: false
  • startSearch: Should a search be started during initialization if constraints are defined? Values: true, false. Default value: true
  • updateTitle: Should a search be started during initialization if constraints are defined? Values: true, false. Default value: true
  • titleTemplate: A mustache template can be configured for the title to display the search term (unparsedUserQuery), the title of the current stack element (stackTitle), and the status of the current search (computing). Default value:
  • {{#stackTitle}}{{stackTitle}} - {{/stackTitle}}{{^stackTitle}}{{#unparsedUserQuery?}}{{unparsedUserQuery}} - {{/unparsedUserQuery?}}{{/stackTitle}}" + document.title + "{{#computing?}} ...{{/computing?}}

Examples:

new Application({});

new Application({

  callback: function (application) {

    …

  },

  rootEl: document.getElementById("mySearchApp")

});

Functions:

  • getUserConstraints(): Returns the current constraits (for use with setUserConstraints)
  • setUserConstraints(userConstraints, options): Sets the constraints (for use with getUserConstraints)
  • getUnparsedUserQuery(): Returns the current search term
  • setUnparsedUserQuery(unparsedUserQuery, options): Sets the search term

Events:

You can register for events on the individual models. Here you can find the supported events.

  • Start of search:

application.models.search.on("computing", function () {

});

  • End of search:

application.models.search.on("computed", function () {

});

  • After rendering a result

application.views.on("afterRender:Result", function (application, view, resultModel) {

});

You can use view.el to access the rendered DOM element.

ActionsPermanent link for this heading

Links and buttons can trigger actions in the search application with the attribute data-action-object. For example,

<a data-action-object="{&quot;openSearch&quot;:{}}"

   data-href="https://duckduckgo.com/?q={searchTerms}">

     Bei DuckDuckGo suchen

</a>

openSearchPermanent link for this heading

The openSearch action searches the current term using an external search engine, such as Bing, DuckDuckGo, Google or Yahoo.

Attribute:

  • data-href: the address of the external search engine with placeholders for the search term {searchTerms} and language {language}.
  • 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="{&quot;openSearch&quot;:{}}"

   data-href="https://duckduckgo.com/?q={searchTerms}">

     Bei DuckDuckGo suchen

</a>

<a data-action-object="{&quot;openSearch&quot;:{}}"

   data-href="https://www.bing.com/search?cc={language}&q={searchTerms}">

     Bei Bing suchen

</a>

<a data-action-object="{&quot;openSearch&quot;:{&quot;searchTerms&quot;: &quot;{searchTerms} Bild&quot;}}"

   data-href="https://duckduckgo.com/?q={searchTerms}">

     Bei DuckDuckGo suchen

</a>

exportResultsPermanent link for this heading

The exportResults action opens a new stack, to export the current search.

Attribute:

data-properties: List of default export properties

data-export-enabled: Aktivate or deactivate the export feature

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

PDF Preview InteractionsPermanent link for this heading

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

});

Key combinationsPermanent link for this heading

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:

  • alt
  • ctrl
  • meta
  • shift
  • Character/Number

  • Examples:

<div data-shortcut="alt+5">

  …

</div>

<button data-shortcut="alt+shift+s">Aktion</button>

<button data-shortcut=" ctrl+meta+shift+x">Aktion</button>

CSSPermanent link for this heading

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.

2

4

3

5

1

Search fieldPermanent link for this heading

The following elements are available for the design of the search field:  

form.search-field

input

button

ResultsPermanent link for this heading

For the results, the structure of the media object-components (http://getbootstrap.com/2.2.2/components.html#media) is used:

.media

.media-heading

.media-object

.media-body

The titles of the results are h3-elements.

FilterPermanent link for this heading

For Filter, the structure of the stacked pills components (http://getbootstrap.com/2.2.2/components.html#navs) is used:

.nav.nav-stacked.nav-pills

The titles of the individual filters, e.g. date, are h3-elements.

Expandable ElementsPermanent link for this heading

For elements that can be expanded and collapsed, the structure for the ARIA roll tablist + multiselectable is used (http://www.w3.org/TR/wai-aria/roles#tablist):

Title collapsedPermanent link for this heading

.mb-role[role=tablist][aria-multiselectable=true] [role=tab]

Title expandedPermanent link for this heading

.mb-role[role=tablist][aria-multiselectable=true] [role=tab][aria-expanded=true]

Search TabPermanent link for this heading

For the search tab, the structure of the Basic Navbar components

(http://getbootstrap.com/2.2.2/components.html#navbar) is used with Nav links:

.navbar .nav

HeaderPermanent link for this heading

For the header, the structure of the Basic Navbar components

(http://getbootstrap.com/2.2.2/components.html#navbar) is used with Nav links:

.mb-header.navbar.navbar-inverse .mb-top-menu .nav

mb-computingPermanent link for this heading

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;

}

Developing your own custom widgetsPermanent link for this heading

Your own widgets can be installed as plugins and be used by you as your own search applications and in the Search App editor.

ExamplepluginPermanent link for this heading

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.

Plugin structurePermanent link for this heading

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>

Creating your own widgetsPermanent link for this heading

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:

var = MyView Templates.View.extend ({...});

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.

Registering your own widgetsPermanent link for this heading

After creating your own widget using Creating your own widgets, it needs to be registered so that it is available in search applications 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 search applications data-template="exampleresults". Required field

view

View object, see section Creating your own widgets. Required field

attributes

Description of the available options. Used in Designer and for the options of the View. Details in the section.

designer_menu

Menu items for the Designer. Details in the section .

AttributePermanent link for this heading

When you register your own widgets under , you can use 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.

Display in DesignerPermanent link for this heading

When you register your own widgets at , menu options for the widget can be filed in Designer with 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.

Adding TranslationsPermanent link for this heading

With i18n.loadExtension your own translations can be added:

Mindbreeze.require(["i18n/i18n"], function(i18n) {

  i18n.loadExtension({

    mygroup: {

      "de": "Meine Gruppe",

      "en": "My Group"

    }

  });

});

Development environmentPermanent link for this heading

Prerequisites:

Apache Ant

https://ant.apache.org/

Node JS

https://nodejs.org/

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.

CMIS RSS feed interfacePermanent link for this heading

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

Running Search Apps through the client service and changing the default search applicationPermanent link for this heading

To run your own search applications 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 search application.

File Path

URL path of the search application.

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 search application (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 search application 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]

[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 search application is available as a template at /data/apps/client/index.html.

In the following example, two search applications (marketing and sales) are configured on the client service, which can be reached at https://search.mycompany.com. The search application marketing can then be found at https://search.mycompany.com and https://search.mycompany.com/apps/marketing and the search application sales at https://search.mycompany.com/apps/sales.