Embedding the Insight App Designer
Mindbreeze Insight App Designer embedded in an external environment
Copyright ©
Mindbreeze GmbH, A-4020 Linz, 2023.
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.
Introduction
With the Mindbreeze Insight App Designer, users can create their own Insight App. The snippet generated for this can then be copied and integrated into a wide variety of systems and websites. Basically, the Insight App Designer is available under /apps/designer.
It is also possible to use the Mindbreeze Insight App Designer as a stand-alone, embedded application. As with the Insight App itself, this works in just a few steps.
Required Resources
Styles
General designer styles are supplied via the designer.css file. It can be requested at the client service address under apps/css/v2/ folder.
Mindbreeze delivers also, for purpose of embedding, the designer-prefixed.css that includes prefixed selectors and only absolutely necessary rules.
<link href="/apps/css/v2/designer-prefixed.css" rel="stylesheet">
It is recommended to load these styles within the <head> in the HTML
Scripts
The required JavaScript is provided by editor.js. It can be requested at the client service address under apps/scripts/.
<script src="/apps/scripts/editor.js" data-mindbreeze-lib data-global-export="false"></script>
Create designer
CSS
A Mindbreeze Insight App Designer consists of CSS, HTML and JavaScript areas. The CSS can be embedded using the resource described in section “Styles”.
HTML
The next step is to place the necessary HTML within a container element (root element) in the HTML. A corresponding element with the ID “designer-container” is suitable for this.
<div id="designer-container"> … </div>
This container is necessary so that the designer can only expand in this element and has the following content (can be copied and pasted):
<div 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
The application constructor creates a search application and enables editing with the Mindbreeze Insight App Designer.
The necessary JavaScript snippet is located under the HTML elements. A new application is created here and the application edit mode is called in the callback.
Mindbreeze.require([
"client/application",
"utils/browser"
], function (
Application,
browser) {
var options = {
startSearch: false,
rootEl: document.getElementById("insight-app-container"),
containerEl: document.getElementById("designer-container"),
callback: function (application) {
application.edit()
}
};
var sources = browser.getURLParameter("sources");
if (sources)
options.sources = [sources + "../../api/v2/"];
new Application(options);
});
