The positionIt editor

Dieser Teil der Dokumentation bezieht sich auf den positionIt Editor, das Herzstück von positionIt.

Es wird hier nicht auf jede einzelne Funktion eingegangen sondern zunächst generelle Bedienungskonzepte erläutert und im Anschluss daran spezielle Objekte oder Prinzipien, die erklärungsbedürftig sind.

Der positionIt Editor
General usage

Objekte einfügen

Über die linke Leiste werden Objekte eingefügt. Für jedes Objekt existiert ein eigenes Symbol.

Objekteigenschaften

Jedes Objekt hat allgemeine und spezifische Eigenschaften. Allgemeine Eigenschaften wie z.B. Ränder oder Hintergrundeinstellungen werden über den rechten Bereich "Objekte" verändert.

Spezifische Einstellungen sind immer ein exta Dialog mit Einstellungen nur für dieses Objekt. Diese können über drei Wege erreicht werden:

  • Doppelklick auf das Objekt
  • Rechtsklick und dann über den Punkt "Eigenschaften" im Kontextmenü
  • Durch Klick auf "Objekteigenschaften öffnen" in der rechten Leiste
Rechte Leiste
Eingabefeld Spezialeigenschaften

Editor Fläche Eigenschaften

Die Editor Fläche ist der Bereich auf dem Objekte eingefügt werden können. Die Einstellungen dieser Fläche können Sie rechts unter dem Tab "Seite" ändern.

Seiteneigenschaften
 
Validation & error messages

positionIt arbeitet generell mit serverseitiger Validierung und indirekt durch die Unterdrückung fehlerhafter Eingaben (sofern möglich) auch mit clientseitiger Validierung.

Um eine Fehlermeldung zu konfigurieren gehen Sie wie folgt vor:

Validierung und Fehlermeldungstext festlegen

Jedes Objekt hat eigene Validierungseinstellungen. Diese finden Sie unter dem Tab "Validierung" und können je nach Bedarf konfiguriert werden.

Validierungseigenschaften des Eingabefeld Objekts

Optik der Fehlermeldungen

positionIt Fehlermeldungen werden in kleinen Tooltips angezeigt. Das Aussehen dieser Tooltips können Sie mit einem Klick auf "Darstellung der Fehlermeldung(en) bearbeiten" anpassen.

Falls Sie die Fehlermeldungen lieber als Javascript-alert anzeigen möchten, können Sie unter diesen Einstellungen den entsprechend Haken setzen.

Bedingte Validierung

positionIt untersützt ebenfalls die bedingte Validierung. Aktivieren Sie für ein Element diese Art der Validierung, dann wird zunächst geprüft ob die ausgewählte Bedingung zutrifft. Falls ja, dann erst wird das Objekt validiert. Dies kann beispielsweise nützlich sein wenn Sie folgenden Sachverhalt abbilden wollen: "Das Eingabefeld darf nicht leer sein wenn die Checkbox angekreuzt ist".

 
Invisible area

Der Einsatzzweck einer unsichtbaren Fläche ist, alle darauf befindlichen Objekte entweder unsichtbar oder - je nach Einstellung - sichtbar darzustellen.

Damit können viele Elemente auf einmal (z.B. durch eine Regel, siehe ein Beispiel hier: Regelmanager) sichtbar oder unsichtbar gesetzt werden.

Ob die unsichtbare Fläche zu Anfang sichtbar ist oder nicht kann über die Eigenschaften der unsichtbaren Fläche eingestellt werden.

Unsichtbare Fläche mit mehreren Objekten darauf
 
Labels for form elements

Labels zu Formularelementen können mit wenigen Schritten erstellt werden:

1. Text Objekt einfügen und Texttyp ändern

Fügen Sie ein Text Objekt ein und ändern Sie den Typ auf "Label für Formularelement"

Eigenschaften bei Texttyp "Label"

2. Mit einem Formularelement verknüpfen

Durch Klick auf die kleine gelbe Box in der Zeile "Label verknüpfen mit" erscheint ein Dialog. Innerhalb des Dialogs können Sie das Label durch Doppelklick auf das gewünschte Formularelement verknüpfen.

Ein Label kann immer nur mit einem Formularelement verknüpft werden.

Label verknüpfen Dialog
 
Multilanguage

Eines der zentralen, vollintegrierten Features von positionIt ist Mehrsprachigkeit. Im Editor können alle relevanten Absendewerte, Texte,... direkt mehrsprachig gepflegt werden.

Dazu sind wenige Schritte notwendig:

1. Prozesssprachen definieren

Nicht jeder positionIt Prozess muss Mehrsprachig werden. Auf der Prozessübersicht können alle in TYPO3 verfügbaren Sprachen einem Prozess zugewiesen werden. Die Defaultsprache ist immer verfügbar.

Prozesssprachen verwalten

2. Übersetzungen festlegen

Alle sichtbaren Texte, Absendewerte, Fehlermeldungen,... eines Objekts können mehrsprachig gepflegt werden. Durch Klick auf das Übersetzungssymbol (siehe Bild) öffnet sich ein Dialog in dem Übersetzungen für alle Sprachen definiert werden können.

Bei Texteditoren befindet sich eine Selectbox neben dem Übersetzungssymbol. Durch Ändern der Sprache in der Selectbox kann die Sprache im Texteditor gewechselt werden.

Übersetzungsdialog
Übersetzungssymbol

Sprachenansicht ändern

Welche Sprache im Editor angezeigt wird, kann durch die Selectbox rechts oben geändert werden. Bei Wechsel auf eine andere Sprache ändern sich im Editor alle sichtbaren Texte der einzelnen Objekte.

So können Sie schnell und einfach prüfen ob der Prozesschritt in einer anderen Sprache optisch passend erscheint.

Sprachenansicht Selectbox
 
Rules manager

Allgemeine Funktionsweise

Der positionIt Regelmanager ist dazu gedacht, in kurzer Zeit durch einfache Bausteine ein Formular flexibler zu gestalten. positionIt übersetzt diese Regeln dann automatisch in Javascript.

Die Regeln sind speziell darauf ausgelegt, Interaktionen zwischen Elementen zu ermöglichen. Aus diesem Grund sind nahezu alle positionIt Objekte (Eingabefelder, Checkboxen,...) als Bausteine verwendbar.

Der Regelmanager

Regeln hinzufügen / bearbeiten / löschen

Über die Registerkarte "Regeln" in der rechten Leiste können neue Regeln hinzugefügt und gelöscht werden.

Durch Klick auf den Namen der Regel kann die Regel bearbeitet werden.

Einzelne Anweisungen wie z.B. A = B + C; müssen durch ein Semikolon getrennt werden. Eine Regel kann eine unbegrenzte Anzahl Anweisungen enthalten.

Regeln Tab

Ausführung von Regeln

Wenn der Code eines Prozesschritts generiert wird, erstellt positionIt zu allen Regeln Javscript Code.

Dieser wird in der Reihenfolge der Regeln ausgeführt, falls also Regeln sich gegenseitig beeinflussen, müssen diese in der richtigen Reihenfolge angelegt sein.

Regel Syntax

Die Syntax von positionIt Regeln ist eng an die Syntax gängiger Programmiersprachen wie z.B. Java oder Javascript angelehnt, besteht jedoch aus weit weniger Elementen.

VALUE OF Baustein

Eine zentrale Rolle spielt dar VALUE OF Baustein, dargestellt als gelbe Box. Diesem Baustein muss immer ein Objekt folgen. Handelt es sich um eine Zuweisung, so wird der Wert des Objektes gesetzt. Bei einer Operation wird der Wert des Objektes gelesen.

Ein kurzes Beispiel, das einen in Inputfield2 eingegebenen Wert automatisch mit 1.19 multipliziert und in Inputfield1 ausgibt:

Objektfunktionen

Es gibt mehrere Objektfunktionen, mittels derer die Eigenschaften oder die Darstellung von Objekten beeinflusst werden können:

  • VALUE OF: Wert eines Objektes setzen oder lesen (Objekt Baustein nachfolgend)
  • SHOW: Objekt anzeigen (Objekt Baustein nachfolgend)
  • HIDE: Objekt verbergen (Objekt Baustein nachfolgend)
  • ACTIVATE: Objekt aktivieren (Objekt Baustein nachfolgend)
  • DEACTIVATE: Objekt deaktivieren (Objekt Baustein nachfolgend)
  • MESSAGE: Nachricht darstellen (String Baustein nachfolgend)
  • HAS ERROR: ist TRUE wenn ein Objekt einen Validierungsfehler hat (Objekt Baustein nachfolgend)

Beispiel: wenn eine Checkbox gesetzt wird, wird eine Unsichtbare Fläche dargestellt (und damit alle sich auf dieser Fläche befindlichen Objekte!).

Operatoren

Die Verwendung der Operatoren entspricht genau der Verwendung in Programmiersprachen. Es gibt demnach arithmetische-, logische- sowie Zuweisungsoperatoren.

Für nähere Informationen verweisen wir hier auf die Operatorendokumentation gängiger Programmiersprachen oder der Beschreibung in Wikipedia.

Bedingungen

Es gibt eine WENN....DANN und eine WENN...DANN...ANSONSTEN Bedingung. Die Funktionsweise ist identisch zu der gängiger Programmiersprachen.

 
Actions

Was sind Actions? Mit Actions können fertige Javascript Funktionsbausteine angelegt und mehrfach in einem Prozesschritt verwendet werden. Diese Funktionsbausteine können an vielen Stellen innerhalbs eines Prozessschritts aufgerufen werden, z.B. durch Events oder durch einen Button.

Neue Action hinzufügen
Einstellungen einer Action

Actiontypen

Es gibt mehrere Typen von Actions:

  • Weiter zu einem Prozessschritt
    (Leitet weiter zu einem frei definierbaren Prozessschritt)
  • Zurück zu einem Prozessschritt
    (Leitet zurück zu einem frei definierbaren Prozessschritt, es findet keine Eingabevalidierung statt)
  • Das aktuelle Fenster schließen
    (Schließt das aktuelle Fenster)
  • Einen Link aufrufen
    (Im Linkdialog kann man festlegen, welcher Link geöffnet werden soll)
  • Den Druckdialog öffnen
    (Öffnet den Drucken Dialog)
  • Javascript Code ausführen
    (Führt beliebigen Javascript Code aus, der in einer Eingabemaske hinterlegt werden kann)

Actions zuweisen

Ein Event mit zwei zugewiesenen Actions

Für sich alleinstehend bewirken Actions nichts - erst wenn diese zugewiesen sind, werden diese gebenenfalls aktiv.

Actions können einem Button zugewiesen werden (sie werden dann bei einem Klick auf den Button ausgeführt). Zusätzlich können Actions auch Events zugewiesen werden. Die Actions werden dann ausgeführt sobald das Event aufgerufen wird.

Actions von "außen" aufrufen

Nicht nur innerhalb positionIt können Actions verwendet werden, sondern auch ausserhalb. Was bedeutet ausserhalb? Damit ist alles ausserhalb eines Prozesschritts gemeint, d.h. das HTML/CSS/JS Template bzw. sämtlicher anderer, nicht zu positionIt gehörender, Quellcode.

Der Aufruf funktioniert sehr einfach über den Befehl:

  1. composition.executeAction('name_of_action_js_function);

Der Eingabeparameter ist der in der Action hinterlegte Javascript Funktionsname.

Ein Anwendungsfall hierfür ist beispielsweise ein Link, der verursachen soll, dass der Prozess zum nächsten Schritt weiterleitet. Dieser Link ist aber nicht auf dem positionIt Prozess selbst.

In diesem Fall würde der Link - egal in welchem Schritt der Prozess gerade ist - immer die gleiche Action über composition.executeAction('nextstep') aufrufen. Voraussetzung ist, dass jeder Prozessschritt eine Action vom Typ "Weiter zu einem Prozessschritt" mit dem Javascript Funktionsnamen "nextstep" enthält.

Hinweis: bei mehr als einem Prozess auf einer TYPO3 Seite ist ein verlässlicher Aufruf von aussen nicht gewährleistet.

 
Events

Zu jedem Objekt im positionIt Editor können Events definiert werden. Diese Events sind unterschiedlich, je nach Objekt.

Es handelt sich hierbei um bekannte Javascript Events wie onClick, onDoubleClick, onKeyDown, onMouseOver, onMouseDown...

Was kann aufgerufen werden?

Event mit zugewiesenem Javascript Code

Über Events kann eine unbegrenzte Anzahl Actions aufgerufen und/oder Javascript Code hinterlegt werden. Die Reihenfolge der aufzurufenden Actions bzw. Codebausteine kann frei definiert werden.

 
Technical name of a form element

Der Absendename eines Formularelements ist besonders wichtig für die Weiterverarbeitung mit Businesslogik. Hier kann auf die Werte von Formularelementen zugegriffen werden und diese entsprechend manipuliert oder weiterverarbeitet werden. 

1. Absendename herausfinden

Jedes Formularelement bietet in den Objekteigenschaften die Möglichkeit den Absendenamen (technischer Name) einzusehen oder zu bearbeiten.

Im Reiter "Technische Details" finden man folgende Maske:

Technische Details
 
© 2017 Ososoft GmbH