JS-API

Die Beschreibung entspricht der JS-API-Version 1.1.

Einbindung

Zur Einbindung muss die JavaScript-Datei https://www.maklerinfo.biz/js/api-1.1.js eingebunden werden. Dies kann über verschiedene Wege geschehen:

HTML

<script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js"></script>

JavaScript

var apiScript = document.createElement("script");
if(apiScript.addEventListener) {
    apiScript.addEventListener("load",function() {
    //...
    },false);
} else {
    apiScript.onreadystatechange=function() {
    if(this.readyState == "loaded" || this.readyState=="complete"){
        //...
    }
    };
}
apiScript.type = "text/javascript";
apiScript.src = "https://www.maklerinfo.biz/js/api-1.1.js";
document.getElementsByTagName("head")[0].appendChild(apiScript);

Konfiguration

Die API besitzt ein globales Konfigurations-Objekt, welches in folgende Namespaces unterteilt ist:

global (gilt für alle Modul)
rechner (gilt für alle Rechner)
spinner (gilt für alle Spinner)

Wird ein Modul erzeugt, werden dessen Optionen folgendermaßen in dieser Hierarchie zusammengesetzt:

dem Konstruktor übergebene Optionen
die dem Modul-Typ entsprechende Konfiguration
der globalen Konfiguration

Folgende Parameter müssen zwingend global gesetzt werden.

Name	Beschreibung
vermittler	Ihre Vermittler-Nummer

Außerdem sollte der Spinner konfiguriert werden, da dieser keine Standardkonfiguration besitzt und somit unsichtbar ist.

Globale Konfiguration

Name	Bescheibung	Standardwert
vermittler	Vermittler-Nummer
titlepattern	Steuert das Setzten des Seitentitels, wobei {title} durch den Seitentitel des Moduls ersetzt wird. Durch das Setzen auf false wird dieses Verhalten deaktiviert	[Originaltitel] ::
fixedHeaderHeight	Numerische Angabe der Pixel welche definiert wie hoch ein möglicherweise fixed-positionierter Header der Seite ist.

Spinner

Name	Beschreibung	Standardwert
img	Pfad zu einer Bild-Datei, welche als Spinner verwendet wird
styles	Objekt mit CSS-Eigenschaften, welche dem Mutter-Container des Spinners übergeben werden	{cursor:"progress"}
stylesImage	CSS-Eigenschaften welche dem Bild-Container des Spinners übergeben werden	{margin:"auto"}
wrapperClass	Zusätzliche CSS-Klasse für den Mutter-Container
spinnerClass	Zusätzliche CSS-Klasse für den Bild-Container

Rechner

Version 3

Name	Bescheibung	Standardwert
directorder	Platziert einen Beantragen-Button direkt neben jedem Angebot	false

Version 4

Name	Bescheibung	Standardwert
theme	Theme des Rechners	Fallback auf Mandanten-Theme

Setzen der Konfiguration

JavaScript

dio.api.Api.config.setOptions({global:{vermittler:"003542"} /** ... */})

JSON

Hier wird dem HTML-<script>-Tag, welches die JS-API einbindet, als innerHTML die Konfiguration übergeben.

<script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js">
{
    "global": {
    "vermittler": "003542"
    },
    "spinner": {
    "img": "https://example.com/spinner.gif"
    }
}
</script>

DioML

Alle Attribute, die nicht mit on oder do beginnen, werden als Option übergeben.
Komplexe Optionen müssen als JSON beginnend mit json dargestellt werden.

<dio:module option1="wert1" params="json{'param1':'wertParam1'}" />

Im Hash des Pfades zur JavaScript-Datei

Folgende Optionen lassen sich direkt an den Pfad anhängen:

Name
vermittler

<script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542"></script>

Übergabe von Parametern

Parameter können über die Option params übergeben werden.

Rechner

Zusätzlich zu den Feldvorbelegungen im Angebotsformular können folgende Parameter an alle Rechner der entsprechenden Generation übergeben werden.

Version 3

Name	Typ	Beschreibung
Job_titel_button	Object	Gibt an welche Icons in der Titelleiste angezeigt werden sollen. Mgl. Werte: hilfe, drucken, filter, lexikon, speichern, oeffnen, dokumentation, tariffinder.
Job_titel_anzeige	boolean	Gibt an ob die Titel-Leiste ausgegeben werden soll.
Job_titel_zeile	String	Überschreibt den Titel.
Page_css_disabled	boolean	Blendet alle CSS-Dateien vom Server maklerinfo.biz aus.

Events

Event-Object

Den Callback-Funktionen wird als Argument ein Event-Object mit den folgenden Eigenschaften übergeben:

Name	Beschreibung
type	Typ des Events
options	Objekt mit weiteren eventspezifischen Werten

Event Typen

Allgemein

Typ	Beschreibung	Optionen
ready	Das Modul ist fertig geladen
resize	Die Größe des Moduls hat sich verändert	size: Object mit x für die Breite und y für die Höhe
title	Der Seitentitel des Moduls	title String

Rechner

Typ	Beschreibung	Optionen
quote	Der Anwender befindet sich im Angebotsformular	substep: Numerischer Wert für die Position des Unterschrittes
quotes	Der Anwender befindet sich in der Angebotsliste	substep: leer oder "covercomparison" falls der Deckungsvergleich geöffnet wurde
order	Der Anwender befindet sich im Antragsformular	substep: Numerischer Wert für die Position des Unterschrittes
conclusion	Der Anwender hat den Antrag abgeschlossen	contractId: Vertrags-ID, customerId: Kunden-ID

Hinzufügen von Events

JavaScript

Jedes Modul besitzt die folgenden Methoden zum Hinzufügen von Events:

Name	Parameter	Beschreibung
addEvent	String event, Function callback	Registriert einen Eventlistener
addEvents	Object events	Fügt alle im übergebenen Objekt enthaltenen Events hinzu, wobei key das Event ist und value die Callback-Funktion ist

module.addEvents({
    ready:function(e){
    //...
    }
});

DioML

Die Inhalte von Attributen die mit on beginnen werden mittels der JavaScript-"Funktion" als Events registriert. Das Event-Objekt wird als Parameter event übergeben.

<dio:module onready="alert(event.type)" />

Module instanziieren

JavaScript

new dio.api.Module(/* argumente */)

DioML

Wenn im ''''-Tag der Namespace ''http://docs.dionera.com/namespace/DioML'' angegeben wurde, wird das Dokument nach entsprechenden Tags der Module geparsed und die ensprechnenden Module werden erstellt.

<html xmlns:dioMLPrefix="http://docs.dionera.com/namespace/DioML">
  <!-- ... -->
  <body>
    <dioMLPrefix:module />
  </body>

Im Hash des Pfades zur JavaScript-Datei

Wird je Seitenaufruf die JS-API nur einmal eingesetzten und wird der Content nicht dynamisch nachgeladen, ist es möglich diese direkt einzubetten:

<html>
    <body>
    <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542/create/module"></script>
    </body>
</html>

Beispiele

Beispiel #1

Einbindung eines Vergleichsrechners mit JavaScript.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JS-API Sample Calculator via JavaScript</title>
        <script type="text/javascript">

            function createRechner() {
                dio.api.Api.config.setOptions({
                    global: {
                        vermittler:"003542"
                    },
                    spinner: {
                        img : "https://www.example.com/spinner.gif"
                    }
                });
                new dio.api.Rechner("hundehaftpflicht").inject("calculator-container");
            }
            var apiScript = document.createElement("script");
            if(apiScript.addEventListener) {
                apiScript.addEventListener("load",createRechner,false);
            } else {
                apiScript.onreadystatechange = function() {
                    if (this.readyState == "loaded" || this.readyState == "complete") {
                        createRechner();
                    }
                };
            }
            apiScript.type = "text/javascript";
            apiScript.src = "https://www.maklerinfo.biz/js/api-1.1.js";
            document.getElementsByTagName("head")[0].appendChild(apiScript);
        </script>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto; width:600px;"></div>
    </body>
</html>

Komplexe Konfiguration für alle Rechnergenerationen

dio.api.Api.config.setOptions({
    global:{
    vermittler:"003542"
    },
    rechner: {
    theme:"9c43", //Theme zur übergabe an die Rechner 4.0
    directorder:true, //Hinzufügen des Beantragenbuttons im Angebot in den Rechnern 3.0
    params: {
        Job_titel_button: {
        hilfe:false //Ausblenden des Hilfe Buttons in den Rechnern 3.0
        }
    }
    }
});

Beispiel #2

Einbindung eines Vergleichsrechners mit DioML.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:dio="http://docs.dionera.com/namespace/DioML">
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542">
            {
                "spinner" : {
                    "img":"https://www.maklerinfo.biz/neu/data/img/loader.gif"
                }
            }
        </script>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto;width:600px">
            <dio:rechner id="hundehaftpflicht" />
        </div>
    </body>
</html>

Beispiel #3

Vereinfachte Einbindung eines Vergleichsrechners. Der Pfad muss folgendermaßen aufgebaut werden:
[vermittler]/create/rechner/[rechner-id]/[theme]
([theme] ist optional.)
Achtung: Diese Art der Einbindung funktioniert nur direkt beim Seitenaufruf. Wenn der Vergleichsrechner bspw. via AJAX nachgeladen werden soll, nutzen Sie bitte die Einbindung via JS oder blauML.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JS-API Sample Calculator via PathHash</title>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto;width:600px">
                <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542/create/rechner/hundehaftpflicht"></script>
        </div>
    </body>
</html>

Beispiel #4

Einbindung eines Vergleichsrechners mit JS. Nach Abschluss des Vergleichsrechners wird ein alert(); ausgegeben. Dieser kann durch eine andere, beliebige JS-Aktion ersetzt werden.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="https://www.maklerinfo.biz/js/api-1.1.js#003542"></script>
        <script type="text/javascript">
            new dio.api.Rechner("hundehaftpflicht")
                .addEvent("conclusion",function(e){
                        console.log("Vertrag-ID:", e.options.contractId);
                        console.log("Kunde-ID:", e.options.customerId);
                        alert("Vielen Dank für den Abschluss!");
                })
                .inject("calculator-container");
        </script>
    </head >
    <body>
        <div id="calculator-container" style="margin:0 auto; width:600px;"></div>
    </body>
</html>

Beispiel #5

Übergabe von Kundendaten wenn die Einbindung eines Vergleichsrechners mit JS erfolgt ist.

new dio.api.Rechner("hundehaftpflicht", {
    params: {
        Vertrag_Kunde_anrede: 2, //Frau
        Vertrag_Kunde_vorname: "Tina",
        Vertrag_Kunde_nachname: "Test",
        Vertrag_Kunde_geburtsdatum: 762566400, //02.03.1994 als unix timsestamp
        Vertrag_Kunde_strasse: "Zum Erfolg 1",
        Vertrag_Kunde_plz: "12345",
        Vertrag_Kunde_ort: "Berlinchen",
    }
})
.inject("calculator-container");