Search App Tutorial

Mit dem Fabasoft Mindbreeze InApp Client können Sie auf einfache Art eine suchbasierte Anwendung gestalten. Dieses Tutorial zeigt Ihnen welche Schritte dafür nötig sind.

1. Legen Sie mit script-Elementen fest wo und wie die Suchtreffer angezeigt werden

<script class="mindbreeze renderedresult" type="text/x-mustache-template">
  <h2>{{title}}</h2>
  <p>
    {{#author}}by <b>{{author}}</b><br/>{{/author}}
    {{content}}
  </p>
</script>

Das script-Element legt die Stelle im Dokument fest, an der die Suchresultate angezeigt werden sollen. Search App fügt die Suchresultate direkt nach dem script-Element ein.

Wichtig: geben Sie die css-Klassen: mindbreeze und renderedresult, sowie den type: text/x-mustache-template an. Andernfalls werden keine Suchresultate angezeigt.

Außerdem können Sie im Inhalt des script-Elements das Aussehen der Suchresultate bestimmen. Sie definieren damit eine Vorlage, die für jeden Treffer verwendet wird als Mustache Template. Kurz erklärt: Sie geben für jede Eigenschaft des Suchtreffers, die Sie anzeigen möchten, den Namen der Eigenschaft in doppelten geschwungenen Klammern an (z.B. {{title}} für den Titel eines Treffers). Um Teile nur dann auszugeben, wenn eine Eigenschaft vorhanden ist, können Sie den Teil der Vorlage in

{{#eigenschaft}}optionaler Teil{{/eigenschaft}}

einschließen (siehe {{#author}} im ersten Beispiel). Eine komplette Anleitung zu den Möglichkeiten der Vorlagen finden Sie im Mustache Manual.

Zusätzlich zu Position und Darstellung können Sie noch folgende Einstellungen vornehmen:

Den Suchbegriff: data-constraint="Mindbreeze"
Die Anzahl der Treffer: data-count="3" (Voreinstellung: 5)
Die Sortierung der Treffer: data-ranking-strategy="RANK|DATE" (Voreinstellung: RANK)
Die Datenquelle: data-datasource="https://wikipedia.mindbreeze.com/de/search/"

<script
  class="mindbreeze renderedresult"
  type="text/x-mustache-template"
  data-constraint="Mindbreeze"
  data-count="3"
  data-ranking-strategy="DATE"
  data-datasource="https://wikipedia.mindbreeze.com/de/search/">
...
</script>

Alle Einstellungen sind optional.

2. Search App Javascript einbinden

<script src="http://mindbreezeclient.example.com/api/js/searchapp.js"></script>

Binden Sie das Javascript am Ende ihres Dokuments ein. Damit stellen Sie sicher, dass der Aufbau der Seite nicht aufgehalten wird.

3. Search App-Objekt anlegen

<script>
  var mySearchApp = new mindbreeze.search.SearchApp();
</script>

Nach diesem Aufruf wird eine Suche gestartet und die Suchresultate werden in das Dokument eingefügt.

Wichtig: Die Reihenfolge der Schritte muss sich in Ihrem HTML-Dokument widerspiegeln, z.B.:

<html>
  <head>
    ...
  </head>
  <body>
    <h1>Meine Firma</h1>
    ...
    <h2>Aktuelle Blog-Einträge</h2>
    <script class="mindbreeze renderedresult" type="text/x-mustache-template">
      <h2>{{title}}</h2>
      <p>
        {{#author}}by <b>{{author}}</b><br/>{{/author}}
        {{content}}
      </p>
    </script>
    ...
    <script src="http://mindbreezeclient.example.com/api/js/searchapp.js"></script>
    <script>
      var mySearchApp = new mindbreeze.search.SearchApp();
    </script>
  </body>
</html>

(Optional: 4. Die Suchresultate aktualisieren)

Wenn Sie die script-Elemente ändern, müssen Sie das Search App mitteilen. Führen Sie dazu

mySearchApp.refresh()

aus. Dadurch werden alle bestehenden Suchresultate aktualisiert und alle neu hinzugefügten Skript-Elemente geladen.

Information Pairing – Knowledge Match Making for your Company!

von Daniel Fallmann in Cloud

Oct 19, 2011 | Knowledge grows constantly. 24 hours a day, 7 days a week, 52 weeks a year. This applies to personal knowledge, both life experience and further learning in equal measures. The same concept applies to a company’s knowledge. Customers, partners and of course employees continuously bring new inputs, technological and commercial. Their perspective on the company and its products can highlight new opportunities and provide valuable feedback. However, this newly acquired knowledge often doesn�...

Global Tradeshow Organizer Opts for Mindbreeze InSite

von Patrick Kapfer in Fabasoft Mindbreeze Enterprise

Oct 17, 2011 | Simple, quick and secure Cool. Smoothly operated. Fast. Welcome to the web requirements of the Web 2.0 generation. Here you can quickly end up looking old and left behind – without really wanting to. For me personally, it’s important to be able to find what I’m looking for – quickly. No great surprise seeing as I work in the search technology sector. I just feel particularly at ease on websites with quick, precise searches. It’s service for site visitors, a digital business card fo...

My 24×7 Personal Assistant. Experience a New Dimension of Mobility.

von Daniel Fallmann in Fabasoft Mindbreeze Mobile

Oct 17, 2011 | New York, JFK Airport, Monday Morning. 5 tiring conference days behind me, the joy of returning home in front of me. Even a 5 hour flight delay is no longer a big deal. An e-mail from a business partner still is however. He wants to know there and then which settings he needs to activate so that our embedded client runs smoothly in a Kerberos environment. As I said – to briefly re-set the scene – I’m sitting in JFK Airport in New York, 6 hours time difference, 5 hour delay, dog-tired a...