Mindbreeze InSpire Suchanwendungen in Microsoft SharePoint Online

Einführung

Dieses Dokument beschreibt die Integration von Mindbreeze InSpire Insight Applications in Microsoft SharePoint Online.

Software-Voraussetzungen

Die in diesem Dokument enthaltenen Beschreibungen und Anweisungen basieren auf Microsoft SharePoint Online.

Einbetten einer Insight Application

Mindbreeze InSpire Insight Appliactions werden als Textdokumente in Microsoft SharePoint gespeichert und in Seiten mit dem „Content Editor“ Web Part eingebettet. So kann eine Insight Application auf mehreren Seiten genutzt werden und bleibt dennoch einfach zu pflegen.

Speichern einer Suchanwendung in einem Textdokument

Kopieren Sie das Snippet aus dem Mindbreeze InSpire Designer in ein Textdokument. Klicken Sie hier für weitere Informationen: Entwicklung von Insight Apps.

Hochladen des Textdokuments

Laden Sie das Dokument in eine Dokumentenbibliothek hoch:

Hinweis: Ändern Sie die Suchanwendung (in searchapp.txt) so, dass sie den folgenden hervorgehobenen Text enthält, um die Query-Parameter von Microsoft SharePoint zu verwenden:

new Application({ queryURLParameter: "k" });

Kopieren Sie die Adresse des Dokuments in die Zwischenablage:

Hinweis: Der obige Link ist die URL der Dokumentvorschau-Seite.

Ändern Sie die URL folgendermaßen und kopieren Sie sie:

        https://<your-tenant>.sharepoint.com/sites/<your-site>/Shared%20Documents/searchapp.txt

Hinweis: Ersetzen Sie die Klammern durch Ihren Tenant- und Site-Namen. Kopieren Sie die angepasste URL in einen neuen Browser-Tab und stellen Sie sicher, dass sie funktioniert.

Erstellen einer neuen Webpart-Seite

Navigieren Sie zu "Site Contents" > "Site Pages":

Erstellen Sie eine neue "Web Part Page":

Wählen Sie einen Namen und ein Design. Erstellen Sie die Seite:

Fügen Sie ein neues "Content Editor" Web Part hinzu:

Anmerkung: Das Webpart “Content Editor” wird für “modern pages” oder “modern sites” nicht unterstützt: Offizielle Microsoft Dokumentation

Bearbeiten Sie die Webpart-Einstellungen:

Geben Sie die Adresse (angepasste URL) des Textdokuments in "Content Link" ein und klicken Sie dann auf "Apply":

Klicken Sie auf " Stop Editing", um die Bearbeitung einer Seite abzuschließen: Klicken

(Modern Site) Script Editor Web Part

Um die Suchergebnisse auf eine „Modern Site“ umzuleiten, müssen Sie einen Skript Editor Web Part hinzufügen und konfigurieren. Bitte folgen Sie diesen Schritten:

Schritt 1: Herunterladen und Bereitstellen der „App“ für Ihren Tenant

Laden Sie MicrosoftSharePointOnline-ModernScriptEditor-<xx.x.x.xxx>.sppkg vom Mindbreeze Update Center herunter.

Gehen anschließend Sie zum App-Katalog Ihres Tenants: https://<tenant>.sharepoint.com/sites/AppCatalog/AppCatalog

Hinweis: Falls der App Catalog noch nicht angelegt ist, folgen Sie bitte diesem Link, um einen neuen zu erstellen:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant#create-app-catalog-site

Wählen Sie aus dem linken Menü die Bibliothek „Apps for SharePoint“. Laden Sie dann das sppkg hoch oder ziehen Sie es per Drag & Drop rein.

Klicken Sie im Popup-Fenster auf „Deploy“.

Stellen Sie sicher, dass das Paket fehlerfrei deployed wurde.

Schritt 2: Installieren Sie die „App“ auf Ihrer Modern Site:

Von der „Home“-Seite: Klicken Sie auf „+New“ > „App“.

Klicken Sie im Abschnitt „Apps you can add“ auf „Modern Script Editor web part“, um sie zu installieren.

Hinweis: Bitte warten Sie eine Minute, bis die App installiert und in der Liste "Site Contents" nicht mehr ausgegraut ist. Möglicherweise müssen Sie die Seite aktualisieren, falls der Eintrag noch immer noch ausgegraut ist.

Schritt 3: Erstellen Sie eine neue Ergebnisseite

Klicken Sie auf der „Home“-Seite der Website auf „+New“ und klicken Sie dann auf „Page“.

Erstellen Sie eine „Blank“ Seite und klicken Sie auf „Create page“.

Wählen Sie einen Namen für Ihre Seite und klicken Sie auf „Publish“.

Schritt 4: Hinzufügen und Konfigurieren des „Modern Script Editor“ Web Part

Klicken Sie oben rechts auf der Seite auf " Edit ". Klicken Sie dann auf das Plus-Symbol, um einen neuen Web Part hinzuzufügen.

Geben Sie „script“ in das Suchfeld ein und wählen Sie „Modern Script Editor“ aus.

Klicken Sie auf „Edit Markup“. Das Konfigurationsfenster wird geöffnet. Klicken Sie auf „Edit HTML code”.

Kopieren Sie den Inhalt Ihrer Insight App (exportiert vom Mindbreeze InSpire Designer) und fügen Sie ihn in den Code-Editor ein.

Schritt 5: Wichtige erforderliche Änderungen im Code Snippet:

Ändern des queryURLParameter und Exportieren in das Fensterobjekt

Am letzten <script>-Tag des kopierten/eingefügten HTML-Code-Snippets ändern Sie bitte folgendes:

Vorher:

<script>Mindbreeze.require(["client/application"], function(Application) {  

   var application = new Application({

     rootEL: document.getElementById("mb-custom-searchapp-wrapper")

   });

});

</script>

Nacher:

<script>Mindbreeze.require(["client/application"], function(Application) {  

   window.appmb = new Application({

     rootEL: document.getElementById("mb-custom-searchapp-wrapper"),

      queryURLParameter: "k"

   });

});

</script>

Hinzufügen eines Listeners für Microsoft-Suchfeld-Ereignisse:

Zusätzlich müssen wir im gleichen <script>-Tag den folgenden Listener hinzufügen, um das Suchfeld wieder zu verwenden und die Suchanfragen umzuleiten:

Vorher:

<script>Mindbreeze.require(["client/application"], function(Application) {  

   window.appmb = new Application({

     rootEL: document.getElementById("mb-custom-searchapp-wrapper"),

      queryURLParameter: "k"

   });

});

</script>

Nacher:

<script>Mindbreeze.require(["client/application"], function(Application) {  

   window.appmb = new Application({

     rootEL: document.getElementById("mb-custom-searchapp-wrapper"),

      queryURLParameter: "k"

   });

});

  window.O365Shell.Search.OnSubmitSearch(function(query) {

      window.appmb.setUnparsedUserQuery(query);

  });

</script>

Lösen der Styling-Konflikte

Um schließlich die CSS-Konflikte zwischen SharePoint Online und Mindbreeze aufzulösen, müssen Sie den <link> oben im Snippet der Suchanwendung (in der ersten Zeile) bearbeiten:

Vorher:

<link href="" rel="stylesheet">

Nacher:

<link href="https://<your-inspire>/apps/designer/../css/v2/minimal-prefixed-adapted.css" rel="stylesheet">

Klicken Sie abschließend auf „Save“.

Und klicken Sie auf „Republish“, um die Änderungen wirksam zu machen.

Ändern der Suchergebnisseite

Klicken Sie auf das Zahnradsymbol „Site Contents“

Klicken Sie auf „Site Settings“

Gehen Sie zum Suchabschnitt und klicken Sie dann auf den Link „Search Settings”

Navigieren Sie zur Konfigurationsseite der „Search Settings“.

Unter “Which search results page should queries be sent to?”:

• Wählen Sie den Auswahlknopf „Send queries to a custom results page URL“
• Geben Sie die benutzerdefinierte Suchergebnisseite in “Result Page URL” an

Klicken Sie auf die Schaltfläche OK und warten Sie dann eine Minute, um die betroffenen Änderungen zu erhalten.

Suchen Sie nun etwas im oberen Suchfeld und drücken Sie Enter - Sie sollten auf die konfigurierte Ergebnisseite weitergeleitet werden.

Troubleshooting

Cross-origin resource sharing (CORS)

Aus Sicherheitsgründen schränken Browser Cross-Origin-HTTP-Anfragen von Skripts ein. Wenn Sie in diesem Fall https://{mytenant}.sharepoint.com in einem Browser öffnen, wird ein Skript vom Webserver Ihrer Appliance geladen. Dieses Skript initiiert dann XHR-Anfragen an Ihre Appliance, was nach den CORS-Richtlinien standardmäßig nicht zulässig ist. Um Anfragen von Ihrem SharePoint-Tenant an Ihre Appliance zuzulassen, müssen Sie Ihren SharePoint-Tenant in den Allowed Origins der CORS-Einstellungen auf Ihrer Appliance hinzufügen. Konfigurieren Sie die folgenden Einstellungen im Mindbreeze Management Center:

Configuration > Client Services > Advanced Settings