Sure, you can handle it. But should you?
Let our experts manage the tech maintenance while you focus on your business.
Let our experts manage the tech maintenance while you focus on your business.
Einbetten des Insight App Designers
Mindbreeze Insight App Designer auf einer externen Seite einbetten
Copyright ©
Mindbreeze GmbH, A-4020 Linz, 2024.
Alle Rechte vorbehalten. Alle verwendeten Hard- und Softwarenamen sind Handelsnamen und/oder Marken der jeweiligen Hersteller.
Diese Unterlagen sind streng vertraulich. Durch die Übermittlung und Präsentation dieser Unterlagen alleine werden keine Rechte an unserer Software, an unseren Dienstleistungen und Dienstleistungsresultaten oder sonstigen geschützten Rechten begründet. Die Weitergabe, Veröffentlichung oder Vervielfältigung ist nicht gestattet.
Aus Gründen der einfacheren Lesbarkeit wird auf die geschlechtsspezifische Differenzierung, z.B. Benutzer/-innen, verzichtet. Entsprechende Begriffe gelten im Sinne der Gleichbehandlung grundsätzlich für beide Geschlechter.
Einleitung
Mit dem Mindbreeze Insight App Designer können Anwender ihre eigene Insight App erstellen. Anschließend kann das dafür generierte Snippet kopiert und auf den verschiedensten Systemen und Webseiten eingebunden werden. Grundsätzlich ist der Insight App Designer unter /apps/designer verfügbar.
Des Weiteren ist es möglich, den Mindbreeze Insight App Designer als selbstständige, eingebettete Anwendung zu verwenden. Das funktioniert, wie bei er Insight App selbst, in wenigen Schritten.
Benötigte Ressourcen
Styles
Die Basis Styles werden über das File minimal-adapted.css geliefert. Es ist unter der Cient Service Adresse unter apps/css/v2/ aufrufbar.
Mindbreeze liefert zum Einbetten das designer.css aus, welches Selektoren mit Präfixen und nur absolut notwendigen Regeln enthält.
<link href="/apps/css/v2/designer-prefixed.css" rel="stylesheet">
Empfohlen wird, diese Styles innerhalb des <head> im HTML zu laden.
Scripts
Das benötigte JavaScript wird von editor.js geliefert. Es ist unter der Cient Service Adresse unter apps/scripts/ aufrufbar.
<script src="/apps/scripts/editor.js" data-mindbreeze-lib data-global-export="false"></script>
Designer anlegen
CSS
Grundsätzlich besteht ein Mindbreeze Insight App Designer aus CSS, HTML und JavaScript Bereichen. Das CSS kann über die in Abschnitt „Styles“ beschriebene Ressource eingebettet werden.
HTML
Als nächsten wird das nötige HTML innerhalb eines Container-Elementes (Root Element) im HTML platziert. Dafür eignet sich ein entsprechendes Element mit der ID „designer-container“.
<div id="designer-container"> … </div>
Dieser Container ist notwendig, damit sich der Designer nur in diesem Element ausbreiten kann und bekommt folgenden Inhalt (kann kopiert und eingefügt werden):
<div id="designer-container">
<div class="mb-editor-content">
<div class="left">
<div id="categories"></div>
<div id="categoryDetails"></div>
<div id="categoryEditor"></div>
<div id="mb-actions-container" class="mb-footer"></div>
</div>
<div class="right">
<div class="infopairing-box-full mb-hidden-loading">
<div id="insight-app-container" class="mb-snippet-source">
<div class="mb-progress-bar mb-fixed"></div>
<div data-template="view" data-count="5" data-constraint="ALL"><div class="mb-component-container container" id="mb-component-container"></div></div>
</div>
</div>
</div>
</div>
<div class="mb-loading-content">
<div class="mb-loading-ring"><div></div><div></div><div></div><div></div></div>
</div>
</div>
JavaScript
Der Application-Konstruktor erzeugt eine Suchanwendung und ermöglicht das Editieren mit dem Mindbreeze Insight App Designer.
Unter den HTML Elementen befindet sich das nötige JavaScript Snippet. Hier wird eine neue Application erstellt und im Callback der Application-Edit Modus aufgerufen.
"client/application",
"utils/browser"
], function (
Application,
browser) {
var options = {
startSearch: false,
rootEl: document.getElementById("insight-app-container"),
containerEl: document.getElementById("designer-container"),
callback: function (application) {
application.edit()
}
};
var sources = browser.getURLParameter("sources");
if (sources)
options.sources = [sources + "../../api/v2/"];
new Application(options);
});
