JS-API – Tricks für Fortgeschrittene

Fortgeschrittene Nutzer der JS-API haben u.a. die Möglichkeit auf Events zu lauschen, Actions auszuführen und die Layout-Config zu überschreiben. Dies kann immer dann sinnvoll sein, wenn man gewisse Aktionen messen oder die Vergleichsrechner / den Kunden-Login noch lückenloser in die eigene Software implementieren möchte.

Aus wirtschaftlichen Erwägungen heraus ist es uns nicht möglich für jede nur erdenkliche Einsatzmöglichkeit / Einzelanforderung unserer Software eine fertige Lösung zu präsentieren oder diese gar über ein spezielles Backend für Laien zur Verfügung zu stellen. Mit den durch unsere JS-API gebotenen Möglichkeiten ist es aber bereits mittelguten Webentwicklern möglich (fast) alle Wünsche mit minimalem Aufwand zu implementieren.

Events

Event Parameter Beschreibung
onresize height, width Wenn sich die Größe des iFrames ändert.
onload Wenn der Inhalt des iFrames geladen wurde und die serverseitige JS-API initialisiert ist.
onunload Wenn der iFrame neu geladen wird, window on(before)unload-Event.
ontitle title Wenn der Titel gesetzt werden soll. (Bei Lightboxen im Loghtbox-Header, bei Modulen document.title)
ondestroy Wenn das Modul zerstört werden soll.
onquotation action(„started“, “abborded“) Wenn die Berechnung gestartet oder abgebrochen wird. (Nur im Rechner-Kontext verfügbar.)
ondetailedcomparison Wenn der Detailvergleich / Deckungsvergleich geöffnet wird. (Nur im Rechner-Kontext verfügbar.)
onoffer action(„form“, “completed“, “abborded“) Wenn das Beantragen-Formular geöffnet, gesendet oder abgebrochen wird. (Nur im Rechner-Kontext verfügbar.)

Beispiel (mit blauML):


Actions

Action Parameter Beschreibung
dotooltip action(„show“, „hide“), id(tooltip), position(object {top:xx, left:xx}), html(content), classNames(array[ css-klassen ]) Erzeugt einen Tooltip.
docss array css [{css:“css code“, base:“domain aus der das css kommt“}, {…}, …] Überträgt den definierten Style für Tooltips, Buttons, etc.
dolightbox id, action(„open“, „update“, „close“), type(„inline“, „iframe“, „file“), title, content(html) / src(src), offset(object {height:xx, width:xx}), title, show_header Erzeugt eine Lightbox. Je nach type ist content oder src zulässig.
dodestroy Zerstört das Modul.

Beispiel #3 (mit blauML):


Layout-Config

Die Layout-Config-Parameter sind Parameter, die in jedem JS-API-Kontext zur Verfügung stehen und bei denen es i.d.R. Sinn macht diese global zu definieren. Deshalb können diese Parameter gleich beim Laden der JS-API gesetzt werden.

Context Config Beschreibung Default
* vermittler Vermittler-Nummer. Der Vermittler benötigt die Lizenz „JS-API“. NULL
* titlepattern Ersetzt den Title. Beispiel: „{title} :: Wacholder Versicherungen“
false um die Title-Ersetzung zu deaktivieren.
{title}
spinner img Pfad zur Spinner-Grafik.
spinner css CSS für die verwendeten CSS-Klassen, sofern img gesetzt.
spinner container ID eines HTML-Elementes, welches als Spinner genutzt werden soll. Sofern gesetzt werden spinner.img und spinner.css ignoriert. NULL
lightbox css CSS für die verwendeten CSS-Klassen der Lightbox.
lightbox background Pfad zur Transparenz-Grafik.

Beispiel #4 (mit blauML):

Weitere optionale Parameter (Vergleichsrechner)

Die hier aufgeführten weiteren optionalen Parameter für Vergleichsrechner stehen nur im Vergleichsrechner-Kontext zur Verfügung. Daher können diese Parameter nicht global beim Laden der JS-API gesetzt werden sondern müssen bei der Einbindung des jeweiligen Vergleichsrechners mitgegeben werden.

Variable 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_design int Gibt an in welchem Layout die Ergebnisse erscheinen. 0 = einzeilig; 1 = zweizeilig mit der Logo der Gesellschaft; 3 = zweizeilig ohne Logo der Gesellschaft.
Job_titel_anzeige boolean Gibt an ob die Titel-Leiste ausgegeben werden soll.
Job_titel_zeile String Überschreibt den Titel.
Job_header_bild_anzeige boolean Blendet das Bild unter dem Titel aus.
Page_css_disabled boolean Blendet alle CSS-Dateien vom Server maklerinfo.biz aus.
Job_css Array Fügt weitere CSS-Definitionen in die Website ein.

Achtung: Komplexe Datentypen (Arrays, Objekte) werden in blauML bspw. folgendermaßen dargestellt:

Job_titel_button="json{'hilfe':0, 'drucken':0}"

Zum Vergleich ohne blauML:

new blau.api.Rechner("...",{"Job_titel_button[hilfe]":0,"Job_titel_button[drucken]":0})

Anmerkung in eigener Sache

Mit der JS-API stellt blau direkt Ihnen eine Vielzahl an Möglichkeiten zu Verfügung. Es gilt aber wie immer im Leben: Nur weil ich etwas kann, muss ich es noch lange nicht tun.
In manchen Konstellationen kann ein Einsatz der o.g. Mittel durchaus sinnvoll sein – in den meisten wird er aber zur Verschlimmbesserung führen. Hobby-Bastler möchte ich an dieser Stelle auf einen Blog-Artikel von Oliver verweisen.




9 Kommentare zu “JS-API – Tricks für Fortgeschrittene

  1. Hallo, gibt es auch die Möglichkeit den Ergebnis-Datensatz als json abzurufen und das rendering der Informationen komplett selber zu machen? Und wenn ja, gibt es eine eindeutige ID für die einzelnen Ergebnisse der Suche? Dann könnte man die Informationen ja mit eigenen Informationen anreichern.

  2. Hallo Herr Teske,

    in der aktuellen Rechner-Version ist dies leider noch nicht möglich. Etwas ähnliches ist aber bereits für die nächste Rechner-generation geplant. Das kann aber noch etwas dauern.

    Mit freundlichen Grüßen

  3. Hallo Ivo,

    theoretisch kannst du die Action „dotooltip“ natürlich abfangen und entsprechend manipulieren. Zur Tooltip-Identifikation hast du allerdings nur den Tooltip-Text zur Verfügung.

  4. Hallo Ivo,

    mit JS:
    new blau.api.Rechner("..",{directorder:true})

    mit blauML:
    <blau:rechner ... directorder="true" />

Komentar verfassen

Die E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.