Lade...
 

Organigramm

Organigramm (WebWidget)

Organigramm mit Beispieldaten
Organigramm mit Beispieldaten

 

Stellt hierachische Strukturen in einem Baum mit rechteckigen Knoten und Kanten dar. Dieses Widget eignet sich nicht für zyklische Strukturen. Farbe der Knoten und die Größe lassen sich von InstantView aus steuern. Das WebWidget kann sowohl einen vollständig geladenen Baum darstellen, als auch die einzelnen Knoten erst beim Öffnen nachladen. 

Verwendung

Web(orga, APP("organization.html"), 0, 0, 100, 50)

Abhängigkeiten

  • organization.html
  • organization-directive.js
  • dependencies/
    • d3.min.js
    • d3-orgchart.js
    • organization.css

Nachrichtenschnittstelle

Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.

Typ Richtung Parameter Beschreibung
get_options HTML→IV NULL Die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Das Widget erwartet eine options-Nachricht als Antwort. Die Antwort ist optional, sie muss nicht geschickt werden.
get_root HTML→IV NULL Diese Nachricht wird direkt nach get_options geschickt. Das Widget erwartet eine root-Nachricht als Antwort, bevor es sich zeichnet.
options IV→HTML OPTIONS Über diese Nachricht kann das Ausshen des Organigramms gesteuert werden, solange es noch nicht initialisiert wurde (root). Ein leeres JSON-Objekt bedeutet, dass sich an den Voreinstellungen nichts ändert.
root IV→HTML NODE | ID Als Antwort auf die get_root Nachricht soll hier der Wurzelknoten des Baums entweder als Node-Objekt, oder dessen ID als Parameter übergeben werden. Im Fall der ID wird der tatsächliche Knoten durch eine nachfolgende get_node-Nachricht während der Initialisierung nachgeladen.
get_node HTML→IV ID

Wenn das WebWidget einen Knoten dynamisch nachladen muss, weil es nur dessen ID kennt, dann wird diese Nachricht ausgelöst. Als Antwort wird eine node-Nachricht erwartet. Wird in der root-Nachricht ein vollständig befüllter Wurzelknoten an das Widget gegeben, dann werden keine get_node-Nachrichten vom Widget ausgelöst.

node IV→HTML NODE Als Antwort auf eine get_node Anfrage sollte IV ein Node-Objekt für die angegebene ID liefern.
Steuernachrichten
expand IV→HTML NULL | ID Expandiert den Knoten mit der angegebenen ID, oder alle Knoten, falls NULL als ID angegeben wurde. Falls für das Aufklappen der entsprechenden Knoten noch Knoten nachgeladen werden müssen, dann werden diese daraufhin per get_node angefragt bevor die Knoten tatsächlich aufgeklappt werden.
collapse IV→HTML NULL Klappt alle Knoten zusammen, sodass nur der Wurzelknoten zu sehen ist. Dies ist der Ausgangszustand, nachdem das Widget initialisiert wurde. Beim erneuten ausklappen werden bereits geladene Knoten jedoch nicht erneut per get_node angefragt.
reload IV→HTML NODE | ID

Initialisiert das Widget mit einem neuen Wurzelknoten vollständig neu. Alle bisher geladenen Knoten werden wieder verworfen. Dies ganz genutzt werden, um eine gänzlich andere Hierarchie in dem Widget darzustellen. Duch das Verwerfen der bisher geladenen Knoten können IDs aus der vorherigen Hierarchie für ganz andere Objekte wiederverwendet werden.

Die Darstellung des Widgets lässt sich vor dem Reload über eine weitere options-Nachricht anpassen, sodass sich das gleiche WebWidget je nach angezeigten Daten unterschiedlich darstellt.

 

Das Node-Objekt

Das Node-Objekt ist vom Typ CX_JSON_OBJECT und repräsentiert einen oder mehrere Knoten im Organigramm. Jeder Knoten wird über eine id identifiziert, hat einen optionalen text und children (Kindknoten).

Feld Typ Beschreibung
id STRING | INTEGER Eindeutige Identifikation des Knotens, die in der Baumstruktur einmalig sein muss und dazu benutzt wird, Knoten in Nachrichten zu referenzieren.
text STRING Optionaler Text, der in dem Knoten dargestellt werden soll. Falls kein Text angegeben ist, wird die id des Knotens dargestellt.
children ARRAY(ID | NODE) Eine Liste von IDs oder Node-Objekten, die die Kindknoten dieses Knotens repräsentieren. Wenn dieses Feld nicht angegeben wird, dann lässt sich der entsprechende Knoten nicht ausklappen.

 

 

Das Options-Objekt

Das Options-Objekt ist ein CX_JSON_OBJECT, welches verwendet werden kann, um selektiv die Standardoptionen zu überschreiben. Die Standardwerte sind mit ihrer Bedeutung in der folgenden Tabelle abgebildet.

Feld Typ Wert Beschreibung
node.width INTEGER 150 Breite eines Knotens in Pixel
node.height INTEGER 50 Höhe eines Knotens in Pixel
node.padding INTEGER 20 Vertikaler und horizontaler Innenabstand vom Text
node.vSpace INTEGER 30 Vertikaler Abstand zwischen zwei Knoten (zwischen zwei Ebenen)
node.color.hasChildren COLOR {...}

Die Farbe, in der die Knoten gezeichnet werden sollen, die weitere Kindknoten zum Aufklappen enthalten. Standard:

Farbverlauf #FF8E00→#FF1600

node.color.hasNoChildren COLOR {...}

Die Farbe, in der die Knoten gezeichnet werden sollen, die  keine Kindknoten besitzen. Standard: 

Farbverlauf #03A9F4→#0288D1

text.color.hasChildren COLOR #FFFFFF Die Textfarbe für Knoten, die Kindknoten enthalten
text.color.hasNoChildren COLOR #FFFFFF Die Textfarbe für Knoten, die keine Kindknoten enthalten
duration INTEGER 750 Animationsdauer für das Auf- und Zuklappen von Knoten. (ms)

 

Der Color-Typ

Als Farbe kann in dem Organigramm-Widget entweder eine einfache HTML-Farbe als STRING angegeben werden (Bsp: #FF0000 = rot) oder als ein Objekt, welches einen vertikalen Farbverlauf definiert.

Feld Typ Beschreibung
top STRING HTML-Farbe für den oberen Bereich des Knotens
bottom STRING HTML-Farbe für den unteren Bereich des Knotens

InstantView Scriptsprache