Template

Layout

Größeneinheiten

Von dem Template werden drei unterschiedliche Größeneinheiten genutzt.

  1. Das sogenannte rem. Ein rem entspricht der Schriftgröße des Wurzelknotens der Seite.
  2. Der prozentuale (%) Anteil am Eltern-Container.
  3. Die relativen Breiten von Spalten im Gestaltungsraster.

Gestaltungsraster

Eine Zeile (<row>) besteht immer aus maximal 12 Spalten (<col>) und bilden so ein Rastersystem auf Basis 12. Rastersysteme/Gestaltungsraster werden verwendet, Seitenlayouts mit einer Reihe von Zeilen und Spalten zu erstellen, die Inhalte enthalten. Eine Verschachtelung ist möglich, d.h. innerhalb einer Spalte können auch wieder Zeilen mit Spalten verwendet werden.

Beispiele:

<col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1"> <col size="1">
<col size="6"> <col size="6">
<col size="4"> <col size="4"> <col size="4">
<col size="4"> <col size="5"> <col size="3">
<col size="11"> <col size="1">

Flexible Container (flex)

Die flexiblen Container passen sich anteilig an der Höhe des Eltern-Containers in ihrer Höhe an. Das flex-Attribut können nur Reihen haben und auch nur die, deren Eltern-Container <layout>, <tab> oder <panel> ist. Der angegebene Wert bestimmt wie hoch der Anteil ist, den der Container im Vergleich zu den anderen Reihen mit flex-Attribut bekommt.

Beispiel: Es sind drei Reihen übereinander angeordnet. Die erste bekommt den Wert 3, die zweite den Wert 2 und die dritte den Wert 1. In diesem Fall ist der erste Container drei mal so groß wie der dritte und der zweite Container zwei mal so groß wieder dritte.

Zusätzlich zu dem flex-Attribut kann das min-size-Attribut bestimmt werden. Mit dieser Angabe (in rem) wird festgelegt, dass die Reihe niemals kleiner werden darf, als der angegebene Wert, auch wenn die Fensterhöhe nicht mehr ausreicht. Sollte die Fensterhöhe nicht mehr ausreichen, wird der Container scrollbar und bleibt somit übersichtlich und bedienbar.


Icons

An einigen Stellen im Template können Icons eingefügt werden. Diese sind vordefiniert und eine Liste mit den verfügbaren Icons finden sie auf Font-Awesome. Die Icons werden grundsätzlich ohne vorstehendes fa- angegeben.


Layout-Typen

Es gibt drei Unterschiedliche Layout-Typen. Diese legen lediglich fest, ob die Elemente innerhalb eines Containers einen Abstand zum Containerrand haben oder nicht.

  • fluid - Hat einen kleinen Abstand links und rechts zum Fensterrand, außerdem ist zwischen Tags vom Typen <col> ein kleiner Abstand.
  • fluid-full - Hat keinen Abstand zum Fensterrand, ebenso ist zwischen Spalten (<col>) kein Abstand.
  • fluid-framed - (Ab v4.7) Hat einen großen Abstand zu allen Rändern des Fensters und einen kleinen Abstand zwischen den Spalten(<col>).

IDs

Fast jedes Tag wird durch eine ID identifiziert. Diese werden beispielsweise gebraucht, wenn Werte aus einem Widget geholt werden sollen (für die weitere Verarbeitung) oder ein Container aus- bzw. eingeblendet werden soll.

Für die IDs gilt es folgende Regeln zu beachten:

  • Das erste Zeichen einer ID muss ein lateinischer Buchstabe (exklusive Umlaute und ß) sein.
  • Erlaubte zeichen: lateinische Buchstaben (exklusive Umlaute und ß), Zahlen, Unterstriche, Bindestriche (Minus), eckige Klammern "[]" und runde Klammern "()"
  • Auf einen Unterstrich darf jedes der zuvor genannten Zeichen folgen außer ein erneuter Unterstrich.
  • Die folgende Liste an IDs ist reserviert und dürfen als eigene IDs nicht verwendet werden:
    • self
    • top
    • parent
    • opener
    • event
    • root

Beispiele für gültige IDs:

  • meine_ID-ist--Toll
  • meinWidget99

Beispiele für ungültige IDs:

  • meine__ID (Alternative → meine_ID)
  • 3fachauswahl (Alternative → dreifachauswahl)

Assignments

Assignments werden in der zu dem Template gehörenden View-Klasse angegeben. Im Template kann darauf mit $ zugegriffen werden.


public function get_assignments()
{
  return array(
    "var_a" => 'test',
    "var_b" => array('var_b_1' => 'val1', 'var_b_2' => 'val2')
  );
}


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col offset="2" size="8">
      <text text="$var_a" /> 
      <text text="$var_b::var_b_1" /> 
    </col>
  </row>
</layout>

Legende

  • * Pflichtattribut
  • *¹ Pflichtattribut wenn condition auf "not", "and", "or", "eq", "ne", "lt", "le", "gt" oder "ge" gesetzt wurde.
  • *² Pflichtattribut wenn condition auf "and", "or", "eq", "ne", "lt", "le", "gt" oder "ge" gesetzt wurde.
  • ¤ Kann mit der Widget-Set-Action manipuliert werden.
  • ¤¹ Kann mit der Widget-Set-Action manipuliert werden, wenn das Attribut ursprünglich im Template angegeben wurde.

Layout

<col>

Beschreibung: Stellt eine Spalte im Layout dar.

Attribute:

  • id - Die ID der Spalte.
  • align - Bestimmt die horizontale Ausrichtung von Texten und Überschriften innerhalb dieser Zeile. Erlaubte Werte sind left, right und center. Default-Wert: left
  • hidden - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • offset - Der Abstand der Spalte zum linken Fensterrand. Nimmt Werte zwischen 1 und 11 entgegen. Default-Wert: 0
  • size - Die Breite der Spalte. Nimmt Werte zwischen 1 und 12 entgegen. Default-Wert: 12
  • valign - Bestimmt die vertikale Ausrichtung von Texten und Überschriften innerhalb dieser Zeile. Erlaubte Werte sind top, middle und bottom. Default-Wert: top

Events: keine

Erlaubt in: <row>

Beispiele:

  • Ein dreispaltiges Layout:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col size="2">
      <text text="Mein linker Text." />
    </col>
    <col size="8"> 
      <text text="Mein mittlerer Text." />
    </col>
    <col size="2"> 
      <text text="Mein rechter Text." /> 
    </col>
  </row>
</layout>

  • Eine Spalte mit einem Abstand von 2 Einheiten nach links:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col offset="2" size="8">
      <text text="Mein Text." /> 
    </col>
  </row>
</layout>


<fieldset>

Beschreibung: Fügt einen umrahmten Bereich innerhalb des Layouts hinzu. Dieser kann zusätzlich mit einem Icon und einem Label versehen werden. Innerhalb dieses Bereiches ist es möglich diverse andere Container einzufügen.

Attribute:

  • id - Die ID des Fieldset.
  • label¤¹ - Die Überschrift des Fieldset. Default-Wert: ""
  • icon¤ - Ein Icon. Default-Wert: ""
  • hidden¤ - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • tooltip¤ - (Ab v4.7) Tooltip, welcher angezeigt wird, wenn der Cursor sich auf der Überschrift des Fieldsets befindet. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""

Events: keine

Erlaubt in: <col>

Beispiele:

  • Ein Beispiel für ein Fieldset:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col offset="2" size="8">
      <fieldset label="Mein Fieldset" icon="calendar">
        <row>
          <col offset="2" size="8">
            <text text="Mein Text." /> 
          </col>
        </row>
      </fieldset>
    </col>
  </row>
</layout>


Beschreibung: Siehe <toolbar> und <footer>


<layout>

Beschreibung: Das layout-Tag ist der Hauptcontainer jedes Templates, innerhalb dessen wird das Template definiert.

Attribute:

  • id - Die ID des Containers.
  • type - Der Layout-Type. Default-Wert: fluid

Events: keine

Erlaubt in: nur als Wurzelknoten zulässig

Beispiel:

Im folgenden ist der Aufbau eines simplen XML-Templates zu sehen:


<?xml version=1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col>
      <text text="Mein Text." />
    </col>
  </row>
</layout>


<line>

Beschreibung: Fügt einen horizontalen Abstandshalter ein.

Attribute:

  • id - Die ID der Linie.

Erlaubt in: <col>

Events: keine


<panel>

Beschreibung: Fügt einen Container innerhalb der Seite hinzu in welchem sich weitere Elemente mit einem anderen Layout-Typ unterbringen lassen. Dieser Container fungiert als Layout-Container.

Attribute:

  • id - ID des Containers.
  • hidden¤ - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • layout-type - Layout-Typ des Containers. Default-Wert: fluid
  • src* - Der Klassenname der zu ladenden Action.

Erlaubt in: <col>

Events: keine


<row>

Beschreibung: Stellt eine Zeile innerhalb des Templates dar. In einer Zeile können grundsätzlich nur Spalten (<col>) eingetragen werden.

Attribute:

  • id - Die ID der Zeile.
  • flex - Siehe flex. Default-Wert: null
  • hidden¤ - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • min-size - Die Mindesthöhe einer Zeile arbeit Hand in Hand mit dem flex-Attribut. Sie sorgt dafür, dass die Zeile niemals niedriger wird als angegeben.
  • size - Die Höhe der Zeile als rem oder als prozentualer Anteil an der Seite (%). Wird keine Einheit angegeben so wird die Zahl als rem interpretiert. Diese hat nur einfluss, wenn flex nicht gesetzt wurde.

Events: keine

Erlaubt in: <layout>, <panel>, <col>, <tab>, <fieldset> und (Ab v4.7) <snippet>

Beispiele:

  • Eine einzelne Zeile mit einer höhe von drei rem:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row size="3">
    <col> <text text="Mein Text." /> </col>
  </row>
</layout>

  • Zwei Zeilen, wobei die obere den übrigen Platz ausfüllt und eine mindesthöhe von 5 rem hat.


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row flex="1" min-size="5">
    <col> <text text="Mein oberer Text." /> </col>
  </row>
  <row>
    <col> <text text="Mein unterer Text." /> </col>
  </row>
</layout>

  • Drei Zeilen bei der die obere zwei drittel des übrigens Platzes bekommt und die mittlere das andere Drittel.


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row flex="2" min-size="2">
    <col> <text text="Mein oberer Text." /> </col>
  </row>
  <row flex="1" min-size="2">
    <col> <text text="Mein mittlerer Text." /> </col>
  </row>
  <row>
    <col> <text text="Mein unterer Text." /> </col>
  </row>
</layout>


<separator>

Beschreibung: Fügt einen Abstandhalter zwischen freien Buttons oder Widgets innerhalb eines Toolbars hinzu.

Attribute:

  • id - ID des Abstandhalters.
  • hidden¤ - Bestimmt, ob der Abstandhalter initial unsichtbar ist. Default-Wert: false

Erlaubt in: <col>, <toolbar> und <footer>

Events: keine


<splitter>

Beschreibung: Fügt einen Abstandhalter zwischen freien Buttons oder Widgets innerhalb eines Toolbars hinzu, so dass die nachfolgenden Widgets nach rechts geschoben werden.

Attribute: keine

Erlaubt in: <col>, <toolbar> und <footer>

Events: keine


<tab>

Beschreibung: Generiert eine einzelne Registerkarte. Diese fungiert als Layout-Container.

Attribute:

  • id - ID der Registerkarte.
  • active - Aktiviert diese Registerkarte. Default-Wert: false
  • label¤ - Text auf der Registerkarte. Default-Wert: ""
  • layout-type - Layout-Typ des Containers. Default-Wert: "fluid"
  • preload - Lädt den Inhalt des Tabs bereits beim Öffnen des Fenster. Nur in Verbindung mit dem Attribut src. Default-Wert: false
  • src - Eine optionale Quelle, wenn der Inhalt dieses Tabs nachgeladen werden soll, wenn dieser geöffnet wird.
  • tooltip¤ - (Ab v4.7) Tooltip, welcher angezeigt wird, wenn der Cursor sich auf dem Register befindet. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""

Erlaubt in: <tabgroup>

Events: keine


<tabgroup>

Beschreibung: Generiert einen Container für Registerkarten. In diesem Können beliebig viele Registerkarten abgelegt werden.

Attribute:

  • id - ID des Containers.

Erlaubt in: <col>

Events: keine


Beschreibung: Fügt eine Werkzeugleiste ein. Der Footer ist erst ab v4.6 verfügbar. Auf dieser können sämtliche erlaubten Widgets eingefügt werden. Es sind pro Seite lediglich ein Toolbar und ein Footer erlaubt.

Attribute:

  • id - ID der Werkzeugleiste.
  • hidden¤ - Gibt an, ob die Werkzeugleiste initial unsichtbar ist. Default-Wert: false
  • style - (Ab v4.6) Bestimmt den Stil des Toolbars. Default-Wert: default
    • default - Heller Toolbar.
    • brand - Dunkler Toolbar.

Bis v4.5 Erlaubt in: <col>

Ab v4.6 Erlaubt in: <layout>, <tab> und <panel>

Events: keine

Bis v4.5 Beispiel:

  • Ein Beispiel für eine Werkzeugleiste mit zwei Schaltern:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col>
      <toolbar>
        <button text="rechter Button" hposition="right" />
        <button text="linker Button" />
      </toolbar>
    </col>
  </row>
</layout>

Ab v4.6 Beispiel:

  • Ein Beispiel für eine Werkzeugleiste mit zwei Schaltern:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <toolbar>
    <button text="rechter Button" hposition="right" />
    <button text="linker Button" />
  </toolbar>
</layout>

Widgets

<area>

Beschreibung: Ab v4.7 können Widgets in einer Area zusammengefasst werden. Das ermöglicht eine einfache Manipulation, bzw. den Abruf von Daten, mehrerer Widgets durch einen Aufruf.

Zusätzlich können mehrere Areas zusammengefasst werden indem ein einheitlicher Name vergeben wird. Um Aktionen für alle Areas mit einem Namen auszuführen muss in das Feld, in welchem üblicherweise der Parameter ID verlangt wird, der Name mit einem führenden Punkt angegeben werden.

Attribute:

  • id - Die ID der Area.
  • name - Der Name der Area um mehrere Areas zusammenzufassen.
  • hidden¤ - Gibt an, ob die Widgets, welche sich innerhalb der Area befinden initial unsichtbar sind. Default-Wert: false

Erlaubt in: Überall, außer in <tabgroup> zum zusammenfassen von tabs oder in <selection>.

Events: keine

Beispiele:

  • Datei "area_test.xml":

<?xml version="1.0" encoding="UTF-8"?>
<layout type="fluid-full">
  <row flex="1">
    <col>
      <area id="area1" name="area_group">
        <field type="integer" placeholder="Bitte eine Zahl eingeben" />
      </area>
      <area id="area2" name="area_group">
        <field type="text" placeholder="Bitte Text eingeben" />
      </area>
    </col>
  </row>
  <toolbar>

    <button label="Senden" on-press="send_data" />
    <splitter />
    <button id="show_button" label="Felder anzeigen" on-press="show_fields" hidden="true" />
    <button id="hide_button" label="Felder verstecken" on-press="hide_fields" />

  </toolbar>
</layout>

  • Zwei Areas welche über die ID angesteuert werden:

namespace addon;

class area_test extends addon_view
{
    public function get_template() { return "area_test.xml"; }

    public function get_title() { return "Eine Area"; }

    public function get_assignments() { return array(); }

    public function get_actions()
    {
        return array(
            "send_data" => addon_util_action::get_ajax_action(
                "area_test_ajax_class",
                array(
                    "result1" => "{area1}",
                    "result2" => "{area2}"
                )
            ),
            "hide_fields" => array(
                addon_util_action::get_widget_set_action(
                    array("area1", "area2", "hide_button"),
                    "hidden",
                    true
                ),
                addon_util_action::get_widget_set_action(
                    array("show_button"),
                    "hidden",
                    false
                )
            ),
            "show_fields" => array(
                addon_util_action::get_widget_set_action(
                    array("area1", "area2", "hide_button"),
                    "hidden",
                    false
                ),
                addon_util_action::get_widget_set_action(
                    array("show_button"),
                    "hidden",
                    true
                )
            )
        );
    }
}

  • Zwei Areas welche über den Namen area_group angesteuert werden:

namespace addon;

class area_name_test extends addon_view
{
    public function get_template() { return "area_test.xml"; }

    public function get_title() { return "Eine Area"; }

    public function get_assignments() { return array(); }

    public function get_actions()
    {
        return array(
            "send_data" => addon_util_action::get_ajax_action(
                "area_test_ajax_class",
                array(
                    "result" => "{.area_group}"
                )
            ),
            "hide_fields" => array(
                addon_util_action::get_widget_set_action(
                    array(".area_group", "hide_button"),
                    "hidden",
                    true
                ),
                addon_util_action::get_widget_set_action(
                    array("show_button"),
                    "hidden",
                    false
                )
            ),
            "show_fields" => array(
                addon_util_action::get_widget_set_action(
                    array(".area_group", "hide_button"),
                    "hidden",
                    false
                ),
                addon_util_action::get_widget_set_action(
                    array("show_button"),
                    "hidden",
                    true
                )
            ),
        );
    }
}


<button>

Beschreibung: Ein Schalter zum Ausführen einer Aktion.

Attribute:

  • id - Die ID des Schalters.
  • hidden¤ - Gibt an, ob der Schalter initial unsichtbar ist. Default-Wert: false
  • text¤ - (Bis v4.5) Der Text auf dem Schalter. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""
  • label¤ - (Ab v4.6) Der Text auf dem Schalter. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""
  • tooltip¤ - Der darzustellende Hinweistext, wenn der Schalter fokusiert ist. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""
  • icon - (Ab v4.7) Stellt ein Icon vor dem Text im Button dar.
  • readonly¤ - (Ab v4.7) Deaktiviert den Button wenn das Attribut auf true gesetzt wurde. Default-Wert: false
  • type - (Ab v4.10) Für die Verwendung in Formularen. Default-Wert: default Möglich sind folgende Typen:
    • default - Gewöhnlicher Button, hat ohne Events keinerlei Funktion.
    • submit - Sendet ein Formular ab und sollte auch nur innerhalb dieser verwendet werden. Die Beschriftung, wird - insofern nicht angegeben - automatisch gesetzt.
    • reset - Stellt ein Formular wieder her und sollte auch nur innerhalb dieser verwendet werden. Die Beschriftung, wird - insofern nicht angegeben - automatisch gesetzt.

Erlaubt in: <col>, <toolbar> und (Ab v4.6) <footer>

Events:

  • on-press - Führt eine angegebene Aktion aus, wenn der Nutzer den Schalter betätigt.
  • on-alt-press - (Ab v4.6) Führt die angegebene Aktion aus, wenn der Nutzer den Schalter mit der rechten Maustaste betätigt.

Beispiel:

  • Ein Schalter, welcher einen Ajax-Request auslöst, wenn er gedrückt wird:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
     <col>
       <button label="mein Button" on-press="meineAktion" />
     </col>
   </row>
</layout>

// in ihrer addon_view-Klasse
public function get_actions()
{
  return array(
    "meineAktion" => addon_util_action::get_ajax_action('ajax/myAjax')
  );
}


<checkbox>

Beschreibung: Ein Kontrollkästchen.

Attribute:

  • id - Die ID des Kontrollkästchens.
  • checked¤ - (Ab v4.6) Gibt an, ob der Schalter aktiviert ist. Default-Wert: false
  • hidden¤ - Gibt an, ob der Schalter initial unsichtbar ist. Default-Wert: false
  • label¤¹ - Der Text auf dem Schalter. Default-Wert: ""
  • label-position - Der Text auf dem Schalter. Default-Wert: "left"
  • readonly¤ - (Ab v4.6) Die Checkbox kann nicht geändert werden. Default-Wert: "false"
  • tooltip¤ - Der darzustellende Hinweistext, wenn der Schalter fokusiert ist. Default-Wert: ""

Erlaubt in: <col>, <toolbar> und (Ab v4.6) <footer>

Events:

  • on-change - Führt eine angegebene Aktion aus, wenn der Nutzer den Schalter betätigt.

Beispiel:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col>
      <checkbox label="mein Button" on-press="meineAktion" />
    </col>
  </row>
</layout>


// in ihrer addon_view-Klasse
public function get_actions()
{
  return array(
    "meineAktion" => addon_util_action::get_ajax_action('ajax/myAjax')
  );
}


<field>

Beschreibung: Das field-Tag repräsentiert diverse Feld-typen.

Attribute:

  • id - Die ID des Feldes.
  • hidden¤ - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • mandatory - Gibt an, ob das Feld ein Pflichtfeld ist. Default-Wert: false
  • size - Gibt die Breite des Eingabefeldes an. Nimmt Werte von 1 bis 12 entgegen. Der übrige Platz wird dem Bezeichner zugeschrieben. Wenn das Feld 10 Einheiten Breit ist, bekommt der Bezeichner 2 Einheiten. Der Wert ist davon abhängig, ob ein Bezeichner angegeben wurde. Ist das nicht der Fall, bekommt das Eingabefeld die volle Breite.
  • label¤¹ - Der Bezeichner des Feldes. Default-Wert: ""
  • label-position - Die Position des Bezeichners des Feldes. Die folgenden Werte sind zulässig: left, right und top. Ist kein Wert angegeben wird für das Feld immer left angenommen, der Bezeichner steht also Links vom Eingabefeld. Ist nur von Bedeutung, wenn label angegeben wurde. Default-Wert: "left"
  • max-length - (Ab v4.6) Beschränkt die maximale Zeichenlänge bei Eingabefeldern der Typen email, text, password und url.
  • max-value¤ - Ist der Höchstwert, welcher in dem Feld eingetragen werden darf. Nur für Bedeutung für Zahleneingabefelder, Datumsfelder, Zeitfelder oder Slider.
  • min-value¤ - Ist der Mindestwert, welcher in dem Feld eingetragen werden darf. Nur für Bedeutung für Zahleneingabefelder, Datumsfelder, Zeitfelder oder Slider.
  • placeholder¤ - Der Platzhalter innerhalb eines Feldes, wenn dieses einen leeren Wert enthält. Default-Wert: ""
  • readonly¤ - Das Feld kann nicht geändert werden. Default-Wert: "false"
  • step¤ - (Ab v4.6) Interval für Zahleneingabefelder oder Slider.
  • tooltip¤ - Das darzustellende Hinweistext, wenn das Feld fokusiert ist. Default-Wert: ""
  • type* - Der Typ des Feldes. Folgende Typen können Sie nutzen:
    • currency - Währungsfeld, abhängig von der im CRM eingestellten Währung
    • date - Datumsfeld
    • datetime - Kombiniertes Datums- und Zeitfeld
    • email - E-Mail-Feld
    • float - Eingabefeld für reele Zahlen; Hinweis: Wird das Attribut step für float nicht gesetzt ist 0.01 die Schrittweite!
    • integer - Eingabefeld für natürliche Zahlen
    • password - Passwortfeld
    • slider - (Ab v4.6) Werte-Auswahl mit Slider
    • text - einfaches Textfeld
    • time - Zeitfeld
    • url - URL-Feld für Webseiten oder FTP-Links
    • search - (Ab v4.7) Einfaches Eingabefeld für Text, welches zusätzlich das direkte Löschen des Inhaltes über einen Button ermöglicht
  • value¤ - Der initiale Wert welche im Feld steht.
  • disabled-dates¤ - (Ab v4.7) Funktioniert nur wenn type auf datetime oder date gesetzt ist. Ermöglicht es Daten mittels Angabe von Wochen- oder Monatstag zu deaktivieren. Deaktivierte Daten können durch den Nutzer nicht selektiert werden. Die Übergabe muss in form eines assoziativen Arrays erfolgen, welches die Schlüssel days_of_month (Für Monatstage, 1 bis 31 oder 'last' für letzten Monatstag. Ab v4.10 ist es möglich negative Werte anzugeben, in diesem Fall wird vorm Monatsende rückwärts gezählt.) und days_of_week (für Wochentagen, 0 [für Sonntag] bis 6) enthalten kann. Die Werte dahinter sind einfache Arrays in welchem die zu deaktivierten Tage in Form von Nummern oder als String angegeben werden können. Bei Übergabe eines leeren Arrays werden keine Daten deaktiviert.
  • prefix¤¹ - (Ab v4.7) Definiert ein Präfix für das Feld. Nicht erlaubt, wenn type auf date, time oder datetime gesetzt wurde.
  • suffix¤¹ - (Ab v4.7) Definiert ein Suffix für das Feld. Nicht erlaubt, wenn type auf date, time oder datetime gesetzt wurde.

Events:

  • on-change - (Ab v4.6) Führt die angegebene Aktion aus, wenn der Wert durch den Nutzer verändert wurde und der Focus das Feld verlässt.
  • on-confirm - [Deprecated] (Ab v4.6) Wird ausgelöst, wenn der Nutzer die Eingabetaste in einem Suchfeld drückt. Dieses Feature wird in einer der folgenden Versionen entfernt. Stattdessen muss das Formular benutzt werden.

Erlaubt in: <col>, <toolbar> und (Ab v4.6) <footer>

Hinweise: Das dargestellte Format der Zeit- und Datumsfelder ist abhängig von den Einstellung im CRM.

Beispiele:

  • Ein einfaches Texteingabefeld:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
     <col>
       <field type="text" />
     </col>
   </row>
</layout>

  • Ein Texteingabefeld mit vordefiniertem Wert:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
     <col>
       <field type="text" value="Mein Text." />
     </col>
   </row>
</layout>

  • Ein Texteingabefeld mit Label:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
     <col>
       <field type="text" label="Ihr Text:" />
     </col>
   </row>
</layout>

  • Ein Zahleneingabefeld für Integerwerte mit einem beschränktem Wertebereich (20 bis 200):


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
     <col>
       <field type="integer" min-value="20" max-value="200" />
     </col>
   </row>
</layout>


<filemanager>

Beschreibung: (Ab v4.7) Zeigt einen Dateimanager an. Das Basisverzeichnis ist das Addon-Daten-Verzeichnis.

Attribute:

  • id - ID des Filemanagers.
  • folder - Unterverzeichnis
  • preload - Lädt den Inhalt des Elements sofort
  • selected¤ - (Ab v4.8) Ausgewähltes Unterverzeichnis (wird ignoriert, wenn das angegebene Verzeichnis nicht existiert)
  • module - (Ab v4.8) Zeigt (in Verbindung mit object-id) das Verzeichnis eines Dokumenten-Moduls an. (Weitere Informationen unter addTree)
  • object-id - (Ab v4.8) ID des Objektes, dessen Verzeichnis angezeigt werden soll

Erlaubt in: <col>

Events: keine

Beispiel:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

  <row>
    <col>
      <filemanager folder="test" id="files" preload="true" />
    </col>
  </row>

</layout>


<form>

Beschreibung: (Ab v4.10) Stellt ein Formular bereit. Durch das Hinzufügen von Buttons mit dem Typ submit wird automatisch ein Button, mit entsprechenden Events und Beschriftung, für das Absenden des Formulars bereitgestellt. Selbiges gilt für den Typ reset, wobei in diesem Fall das Formular in seinen Ursprungszustand zurückgesetzt wird.

Das Formular wird, im Unterschied zu HTML-Formalen, nicht automatisch versendet. Stattdessen muss der Event on-submit zum Anhängen einer Aktion genutzt werden. Für diesen Fall eignet sich besonders die get_ajax_action.

Um ein Formular von außen (Beispielsweise über einen außerhalb liegenden Button) abzusenden oder wiederherzustellen, muss die get_trigger_action verwendet werden. Das erfolgt unter Angabe der Formular-ID und der dem Event-Namen, also submit für das Absenden oder reset für das Wiederherstellen. (Ab v4.10.33072) Wichtig hierfür ist, dass sowohl ein Button im Formular sein muss, wie auch ein Button außerhalb welcher den Button innerhalb des Formulars auslöst. Das erfolgt mithilfe der get_trigger_action unter Angabe der Button-ID und dem Event-Namen press. Im Event wird zusätzlich das Feld button_id mitgeliefert über welches der gedrückte Button identifizierbar ist.

Im Submit-Event können alle Felder mit Hilfe des Platzhalters {event} ermittelt werden. Ermittelt werden die Werte der folgenden Widgets field, textarea, checkbox, timer, selection und objectselection. Die Rückgabe erfolgt als assoziatives Array, in welchem die Schlüssel den IDs der Felder entsprechen. Die Werte der Felder können trotz dessen - wie gewohnt - über die Platzhalter {widget_id} oder {widget_id#value} ermittelt werden.

Attribute:

  • id - ID des Formulars zum Auslösen von Events von außerhalb dieses.
  • validate - (Ab v4.10.33072) Default ist false. Wenn true angegeben wird, erfolgt automatisch eine Validierung der beinhalteten Widgets, entsprechend der Aktion get_validate_action.

Events:

  • on-submit - Wird ausgeführt, wenn der Nutzer das Formular absendet.

Beispiel:

  • Ein Beispiel für ein Formular:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

  <form>
    <row>
      <col>
        <field id="text" type="text" label="text" value="mein text" />
        <button type="submit" />
        <button type="reset" />
      </col>
    </row>
    
  <form>

</layout>

Beispiel für Buttons außerhalb:

  • Template:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

  <form id="form_id" on-submit="my_submit">
    <row>
      <col>
        <field id="text" type="text" label="text" value="mein text" />
        <button id="send_me" type="submit" hidden="true" />
        <button id="reset_me" type="reset" hidden="true" />
      </col>
    </row>
  <form>
  
  <row>
    <col>  
      <button label="Senden" on-press="button_send" />
      <button label="Wiederherstellen" on-press="button_reset" />
    </col>
  </row>

</layout>

  • PHP-Klasse:

<?php
namespace addon;

class my_view extends addon_view
{
    public function get_template()
    {
        return 'template.xml';
    }

    public function get_title()
    {
        return 'Formularbeispiel';
    }

    public function get_assignments()
    {
        return [];
    }

    public function get_actions()
    {
        $actions['button_send'] = addon_util_action::get_trigger_action('send_me', 'press');
        $actions['button_reset'] = addon_util_action::get_trigger_action('reset_me', 'press');
        $actions['my_submit'] = addon_util_action::get_ajax_action('my_ajax', array('event' => '{event}'));

        return $actions;
    }


}


<gantt>

Beschreibung: (Ab v4.8) Zeigt ein Gantt-Diagramm an, welches zuvor als Ableitung der Klasse addon_gantt im Add-On definiert sein muss.

Attribute:

  • id - ID des Gantt-Diagramms.
  • src* - Pfad zur Klasse des Gantt-Diagramms. Dieser muss ausgehen vom Basis-Verzeichnis des Add-Ons angegeben werden.
  • query - Parameter, die an die Gantt-Klasse übergeben werden. In der Gantt-Klasse werden diese im Request-Array zur Verfügung gestellt.
  • preload - Gibt an ob die Daten des Gantt-Diagramms während des Ladevorgangs der Seite geladen wird oder nach dem Aufbau der Seite durch den Client ein weiterer AJAX-Request erfolgt, welcher die Daten vom Server abholt. Default-Wert: false

Erlaubt in: <col>

Events: keine

Beispiel:

  • Ein Beispiel für ein Gantt-Diagramm, welche die Klasse meinGantt voraussetzt:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

  <row>
    <col>
      <gantt id="myGantt" src="gantts/meinGantt" />
    </col>
  </row>

</layout>


<graph>

Beschreibung: Zeigt einen Graphen an, welcher zuvor als Klasse im Addon definiert sein muss.

Attribute:

  • src* - Pfad zur Klasse des Graphen. Dieser muss ausgehen vom Basis-Verzeichnis des Add-Ons angegeben werden.
  • query - Parameter, die an die Graph-Klasse übergeben werden. In der Graph-Klasse werden diese im Request-Array zur Verfügung gestellt.
  • preload - (Ab v4.6) Gibt an ob das Graph während des Ladevorgangs der Seite geladen wird oder nach dem Aufbau der Seite auf dem Client. Default-Wert: false

Erlaubt in: <col>

Events: keine

Beispiel:

  • Ein Beispiel für einen Graphen, welche die Klasse meinGraph voraussetzt:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

  <row>
    <col>
      <graph src="graph/meinGraph" />
    </col>
  </row>

</layout>


<grid>

Beschreibung: Zeigt eine Datentabelle an, welche zuvor als Klasse im Addon definiert sein muss.

Attribute:

  • id - ID der Datentabelle.
  • src* - Pfad zur Klasse der Datentabelle. Dieser muss ausgehen vom Basis-Verzeichnis des Add-Ons angegeben werden.
  • query - Parameter, die an die Grid-Klasse übergeben werden. In der Grid-Klasse werden diese im Request-Array zur Verfügung gestellt.
  • preload - (Ab v4.6) Gibt an ob das Grid während des Ladevorgangs der Seite geladen wird oder nach dem Aufbau der Seite auf dem Client. Default-Wert: false

Erlaubt in: <col>

Events: keine

Beispiel:

  • Ein Beispiel für eine Datentabelle, welche die Klasse meineTabelle voraussetzt:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

  <row>
    <col>
      <grid id="myGrid" src="tabellen/meineTabelle" />
    </col>
  </row>

</layout>


<headline>

Beschreibung: Stellt eine gewöhnliche HTML-Überschrift dar.

Attribute:

  • id - ID der Überschrift.
  • hidden¤ - Bestimmt, ob die Überschrift initial unsichtbar ist. Default-Wert: false
  • icon¤ - Ein Icon welches vor der Überschrift steht. Die Größe des Icons passt sich der gewählten Schriftgröße an. Default-Wert: ""
  • label¤ - Der Text der Überschrift. Default-Wert: ""
  • value¤ - (Ab v4.7) Der darzustellende Text. Default-Wert: ""
  • size* - Die Schriftgröße der Überschrift. Der Wert muss sich zwischen 1 und 6 befinden.
  • tooltip¤ - (Ab v4.7) Tooltip, welcher angezeigt wird, wenn der Cursor sich auf der Überschrift befindet. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""

Erlaubt in: <col>

Events: keine

Beispiel:

  • Einige Überschriften in unterschiedlichen Größen:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

 <row>
   <col>
     <headline size="1" label="Überschrift 1" />
     <headline size="2" label="Überschrift 2" />
     <headline size="3" label="Überschrift 3" />
     <headline size="4" label="Überschrift 4" />
     <headline size="5" label="Überschrift 5" />
     <headline size="6" label="Überschrift 6" />
   </col>
 </row>

</layout>


<image>

Beschreibung: (Ab v4.6) Stellt ein Bild dar.

Attribute:

  • id - ID des Bildes.
  • hidden¤ - Bestimmt, ob das Bild initial unsichtbar ist. Default-Wert: false
  • label¤ - Der Text der Überschrift. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""
  • src¤* - Der Pfad zum Bild im Add-On.
  • size - (Ab v4.7) Erlaubt die Anpassung der Breite des Bildes in rem oder prozentual. Die Höhe wird im Verhältnis zur ursprünglichen Breite des Bildes angepasst.
  • tooltip¤ - (Ab v4.7) Tooltip, welcher angezeigt wird, wenn der Cursor sich auf dem Bild befindet. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""

Erlaubt in: <col>

Events:

  • on-press - Führt eine angegebene Aktion aus, wenn der Nutzer auf das Bild klickt. In diesem Fall gibt es in der Aktion die speziellen Parameter self::offset_x und self::offset_y. Darin sind die Koordinaten des Klicks enthalten.

Beispiel:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

 <row>
   <col>
     <image src="demo.gif" />
   </col>
 </row>

</layout>


<list>

Beschreibung: (Ab v4.6) Stellt eine Listenansicht für den Nutzer bereit. In dieser kann der Nutzer Einträge verschieben, löschen, deaktivieren und wenn durch den Entwickler angegeben auch weitere Aktionen ausführen (siehe <listbutton>).

Attribute:

  • id - Die ID der Liste.
  • data-id - (Bis v4.7) Die Daten welche in der Liste angezeigt werden sollen.
  • data - (Ab v4.7) Die Daten welche in der Liste angezeigt werden sollen.
  • size - Definiert die Höhe einer Zeile in Pixeln. Default-Wert: 30
  • template - Definiert das Template für die Zeilen. Es sind nur sehr primitive Templates möglich. Sie können Text einsetzen und mit Platzhaltern Werte aus den Daten einfügen. Default-Wert: "{title}"
  • items-moveable - Bestimmt ob die Einträge bewegt werden dürfen. Default-Wert: false
  • items-deleteable - Bestimmt ob Einträge vom Nutzer gelöscht werden dürfen. Wenn ein einzelner Eintrag nicht Löschbar sein soll muss in den Daten deleteable als false angegeben werden. Default-Wert: false
  • items-deactivateable - Bestimmt ob Einträge vom Nutzer deaktiviert werden dürfen. Wenn ein einzelner Eintrag nicht Löschbar sein soll muss in den Daten deactivateable als false angegeben werden. Default-Wert: false

Erlaubt in: <col>

Events:

  • on-change - Führt die angegebene Aktion aus, wenn ein Eintrag verschoben wurde.
  • on-edit - Führt die angegebene Aktion aus, wenn der Editier-Button eines Eintrags durch den Nutzer betätigt wurde. Gleichzeitig wird der Button eingefügt. Wenn ein einzelner Eintrag nicht Löschbar sein soll muss in den Daten editable als false angegeben werden.
  • on-delete - Führt die angegebene Aktion aus, wenn der Nutzer einen Eintrag löscht.
  • on-press - Führt die angegebene Aktion aus, wenn der Nutzer auf einen Eintrag drückt.

Hinweis: Die Ids der Datensätze dürfen nicht den Wert 0 haben.

Beispiel:

  • Hinzufügen einer Liste im Template mit Verschiebe- und Editier-Funktion:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col>
      <list data="$myListData" items-moveable="true" on-edit="myEditAction" />
    </col>
  </row>
</layout>

  • Bereitstellung der Daten und Funktionalität in ihrer addon_view-Klasse


public function get_assignments()
{
  return array(
    "myListData" => array(
      array("id" => 1, "title" => "Eintrag Eins"),
      array("id" => 2, "title" => "Eintrag Zwei", "editable" => false),
      array("id" => 3, "title" => "Eintrag Drei"),
    )
  );
}

public function get_actions()
{
  return array(
    "myEditAction" => addon_util_action::get_message_box_action("Der Name des angeklickten Eintrages ist {self#clicked_item#title}")
  );
}


<listbutton>

Beschreibung: (Ab v4.6) Erweitert Einträge in Listen um weitere Aktionen, welche über Buttons durch den Nutzer ausgelöst werden.

Attribute:

  • name* - Der Bezeichner für den Button. Dieser dient nicht der Anzeige sondern der internen Identifizierung.
  • icon* - Das Icon welches in der Liste als Button angezeigt werden soll.

Events:

  • on-press - Führt die angegebene Aktion aus, wenn der Nutzer den Button betätigt.

Erlaubt in: <list>

Beispiel:

  • Hinzufügen einer Liste im Template mit Verschiebe- und Editier-Funktion:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col>
      <list data-id="myListData">
        <listbutton name="myCalendarButton" icon="calendar" on-press="myCustomAction" />
      </list>
    </col>
  </row>
</layout>

  • Bereitstellung der Daten und Funktionalität in ihrer addon_view-Klasse


public function get_assignments()
{
  return array(
    "myListData" => array(
      array("id" => 0, "title" => "Eintrag Eins"),
      array("id" => 1, "title" => "Eintrag Zwei"),
      array("id" => 2, "title" => "Eintrag Drei"),
    )
  );
}

public function get_actions()
{
  return array(
    "myCustomAction" => addon_util_action::get_message_box_action("Der Name des angeklickten Eintrages ist {self::clicked_item#title}")
  );
}


<listfield>

Beschreibung: (Bis v4.5, benutzen Sie stattdessen <selection>) Stellt für den Nutzer eine Auswahl aus einer vordefinierten CRM-Liste bereit. Diese kann als Mehrfachauswahl (multiple) definiert werden. Außerdem ist es einstellbar, ob sie als ausklappbares Feld bzw. als Box dargestellt wird.

Attribute:

  • id - Die ID der Auswahl.
  • empty-value - Der Wert, wenn keine Auswahl getroffen wurde.
  • hidden¤ - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • label¤¹ - Der Bezeichner des Feldes. Default-Wert: ""
  • label-position - Die Position des Bezeichners des Feldes. Mögliche Werte sind left, right und top. Wird keine Position angegeben wird das Label links von der Auswahl angezeigt. Default-Wert: left
  • list-id* - Die ID der CRM-Liste. Die ID der Liste wird mit einem vorstehendem Dollarsymbol angegeben angegeben.
  • mandatory¤ - Das Feld wird als Pflichtfeld markiert. Default-Wert: false
  • multiple - Bestimmt, ob das Feld anbietet mehrere Einträge auszuwählen oder lediglich einen einzelnen. Möglichliche Werte sind true und false. Default-Wert: false
  • readonly¤ - Das Feld kann nicht geändert werden. Default-Wert: "false"
  • size - Gibt die Breite des Eingabefeldes an. Nimmt Werte von 1 bis 12 entgegen. Der übrige Platz wird dem Bezeichner zugeschrieben. Wenn das Feld 10 Einheiten Breit ist, bekommt der Bezeichner 2 Einheiten. Der Wert ist davon abhängig, ob ein Bezeichner angegeben wurde. Ist das nicht der Fall, bekommt das Eingabefeld die volle Breite.
  • tooltip¤ - Das darzustellende Hinweistext, wenn das Feld fokusiert ist. Default-Wert: ""
  • type - Einstellung, ob es eine Box (box) oder ein ausklappbares Feld (expandable) ist. Default-Wert: box

Erlaubt in: <col>, <toolbar>, <footer>

Events:

  • on-change - Führt die angegebene Aktion aus, wenn der Wert durch den Nutzer verändert wurde.

Beispiel: Das listfield entspricht im wesentlichen der <selection> mit dem Unterschied, dass eine Liste ihres CRM-Systems verwendet wird, statt eigene Optionen anzugeben.


<objectselection>

Beschreibung: (Ab v4.6) Generiert ein Such-/Tokenfeld für CRM-Objekte. In diesem kann der Nutzer einen Begriff eingeben und aus vorgeschlagenen Suchergebnissen Einträge auswählen und diese in die Listen einfügen.

Attribute:

  • id - ID des Feldes.
  • amount - Gibt die maximale Anzahl der auszuwählenden Einträge an.
  • hidden¤ - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • label¤¹ - Der Bezeichner des Feldes. Default-Wert: ""
  • label-position - Die Position des Bezeichners des Feldes. Mögliche Werte sind left, right und top. Wird keine Position angegeben wird das Label links von der Auswahl angezeigt. Default-Wert: "left"
  • module* - Das Modul in dem gesucht werden soll. Diese Angabe ist verpflichtend. Die folgenden Module stehen zur Auswahl:
    • contacts - Kontakte
    • projects - Projekte
    • contracts - Verträge
    • offers - Angebote
    • tickets - Tickets
    • orders - Aufträge
    • articles - Artikel
  • multiple - Bestimmt, ob das Feld anbietet mehrere Einträge auszuwählen oder lediglich einen einzelnen. Mögliche Werte sind true und false. Default-Wert: false
  • new-button - Zeigt den Button zum Hinzufügen eines neuen Objektes an. Default-Wert: false
  • readonly¤ - Das Feld kann nicht geändert werden. Default-Wert: "false"
  • size - Gibt die Breite des Eingabefeldes an. Nimmt Werte von 1 bis 12 entgegen. Der übrige Platz wird dem Bezeichner zugeschrieben. Wenn das Feld 10 Einheiten Breit ist, bekommt der Bezeichner 2 Einheiten. Der Wert ist davon abhängig, ob ein Bezeichner angegeben wurde. Ist das nicht der Fall, bekommt das Eingabefeld die volle Breite.
  • tooltip¤ - Das darzustellende Hinweisetext, wenn das Feld fokusiert ist. Default-Wert: ""
  • value¤ - Semikolon-getrennte Liste ausgewählter Objekte (nur in Verbindung mit multiple). Default-Wert: ""
  • mandatory - Gibt an ob das Feld ein Pflichtfeld ist.
  • data-id - Objekt-ID, mit der ein Objekt beim Klick auf den "Neu"-Button verknüpft werden soll. Default-Wert: 0
  • id-param - Der Name des Parameters, dem die Objekt-ID aus data-id übergeben wird. Default-Wert: ""

Erlaubt in: <col>, <toolbar> und <footer>

Events:

  • on-change - Führt die angegebene Aktion aus, wenn der Wert durch den Nutzer verändert wurde.

<option>

Beschreibung: Das <option>-Tag wird nur innerhalb von Auswahlfeldern zugelassen. Es dient der Beschreibung von Einträgen in der Auswahl.

Attribute:

  • id* - Die ID des Attributes, diese muss nicht einmalig sein (kann in weiteren Auswahlfeldern verwendet werden), sollte sich allerdings nicht IDs des restlichen Template gleichen.
  • value* - Der Rückgabewert, wenn diese Option durch den Nutzer ausgewählt wurde.
  • label* - Der Bezeichner, welcher im Auswahlfeld für diesen Wert zu sehen ist.
  • selected - Bestimmt, ob der Wert initial ausgewählt ist. Grundsätzlich können immer mehrere Werte ausgewählt sein, bei einem Auswahlfeld, welches keine Mehrfachauswahl zulässt, wird der letzte - mit selected markierte - Eintrag ausgewählt. Default-Wert: false

Erlaubt in: <selection>

Events: keine

Beispiele: siehe <selection>


<selection>

Beschreibung: Stellt für den Nutzer eine Auswahl bereit. Diese kann als Mehrfachauswahl (multiple) definiert werden. Außerdem ist einstellbar, ob sie als ausklappbares Feld bzw. als Box dargestellt wird.

Es gibt zwei Möglichkeiten das Feld mit Werten zu befüllen:

  1. Über das Tag <option> können diverse Wert eingefügt werden.
  2. Mit angabe des data-id-Attributes. Dafür muss ein entsprechendes Assigment mit der ID in der zugehörigen Klasse angegeben werden.

Attribute:

  • id - Die ID der Auswahl.
  • data-id¤ - (Bis v4.7) Die ID des Assigments der Daten in der zugehörigen Klasse. Vor dem Schlüssel muss ein Dollarzeichen angegeben werden.
  • data¤ - (Ab v4.7) Alias für options.
  • options¤ - (Ab v4.6) Die ID des Assigments der Daten in der zugehörigen Klasse. Vor dem Schlüssel muss ein Dollarzeichen angegeben werden.
  • list-id - (Ab v4.6) Eine ID einer CRM-Liste. Die ID der Liste wird mit einem vorstehendem Dollarsymbol angegeben angegeben. Ist die ID gesetzt werden die Optionen der Selection anhand der CRM-Liste gesetzt.
  • empty-value - Der Wert, wenn keine Auswahl getroffen wurde. Nur gültig wenn multiple gleich false ist. Default-Wert: ""
  • hidden¤ - Gibt an, ob der Container initial unsichtbar ist. Default-Wert: false
  • label¤¹ - Der Bezeichner des Feldes. Default-Wert: ""
  • label-position - Die Position des Bezeichners des Feldes. Mögliche Werte sind left, right und top. Default-Wert: "left"
  • mandatory¤ - Markiert das Feld als Pflichtfeld. Default-Wert: false
  • multiple - Bestimmt, ob das Feld anbietet mehrere Einträge auszuwählen oder lediglich einen einzelnen. Möglichliche Werte sind true und false. Default-Wert: false
  • placeholder¤ - Der Platzhalter steht nur zur Verfügung, wenn das Feld als ausklappbares Feld definiert ist und keine Mehrfachauswahl aktiv ist. Default-Wert: ""
  • readonly¤ - Das Feld kann nicht geändert werden. Default-Wert: "false"
  • size - Gibt die Breite des Eingabefeldes an. Nimmt Werte von 1 bis 12 entgegen. Der übrige Platz wird dem Bezeichner zugeschrieben. Wenn das Feld 10 Einheiten Breit ist, bekommt der Bezeichner 2 Einheiten. Der Wert ist davon abhängig, ob ein Bezeichner angegeben wurde. Ist das nicht der Fall, bekommt das Eingabefeld die volle Breite.
  • tooltip¤ - Das darzustellende Hinweisetext, wenn das Feld fokusiert ist. Default-Wert: ""
  • type - Einstellung, ob es eine Box (box) oder ein ausklappbares Feld (expandable) ist. Default-Wert: "box"
  • selected - Erlaubt es die initial selektierten Einträge zu setzen. Alternativ kann diese Einstellung bei den einzelnen Einträgen hinterlegt werden. Entweder wird eine einzelne ID angegeben oder mehrere - durch ein Semikolon getrennte - IDs.

Erlaubt in: <col>, <toolbar> und <footer>

Events:

  • on-change - Führt die angegebene Aktion aus, wenn der Wert durch den Nutzer verändert wurde.

Hinweise: Wenn sich dieses Tag innerhalb eines Toolbars (<toolbar>) befindet, ist der Typ (type) immer expandable.

Beispiele:

  • Eine Einzelauswahl mit Optionen im Template definiert mit einem vorausgewählten Eintrag:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col>
      <selection multiple="false">
        <option id="ersterEintrag" value="eins" label="Mein erster Eintrag" />
        <option id="zweiterEintrag" value="zwei" label="Mein zweiter Eintrag" selected="true" />
        <option id="dritterEintrag" value="drei" label="Mein dritter Eintrag" />
      </selection>
    </col>
  </row>
</layout>

  • Eine Mehrfachauswahl deren Optionen in den Assignments definiert sind und die ersten beiden Einträge vorausgewählt sind:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
    <col>
      <selection multiple="true" data-id="$auswahl" />
    </col>
  </row>
</layout>


// in ihrer addon_view-Klasse
public function get_assignments()
{
  return array(
    "auswahl" => array(
      array("id" => "ersterEintrag", "value" => "eins", "label" => "mein erster Eintrag", "selected" => true),
      array("id" => "zweiterEintrag", "value" => "zwei", "label" => "mein zweiter Eintrag", "selected" => true),
      array("id" => "dritterEintrag", "value" => "drei", "label" => "mein dritter Eintrag"),
    )
  );
}


<text>

Beschreibung: Ein gewöhnlicher Text.

Attribute:

  • id - ID des Textes.
  • text¤ - Der darzustellende Text. Default-Wert: ""
  • value¤ - (Ab v4.7) Der darzustellende Text. Default-Wert: ""
  • hidden¤ - Bestimmt, ob der Text initial sichtbar ist. Default-Wert: false

Erlaubt in: <col>

Events: keine

Beispiel:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

 <row>
   <col>
     <text text="Ein Textelement." />
   </col>
 </row>

</layout>


<textarea>

Beschreibung: Stellt ein mehrzeiliges Texteingabefeld bereit.

Attribute:

  • id - ID des Eingabefeldes.
  • label¤ - Bezeichner des Eingabefeldes.
  • label-position - Position des Bezeichners. Default-Wert: "top"
  • max-length¤ - Definiert die maximale Zeichenanzahl des Eingabefeldes.
  • placeholder - Der Text des darzustellenden Platzhalters, wenn das Eingabefeld leer ist. Default-Wert: ""
  • tooltip¤ - Das darzustellende Hinweisetext, wenn das Feld fokusiert ist. Default-Wert: ""
  • value¤ - Der darzustellende Text. Default-Wert: ""
  • hidden¤ - Bestimmt, ob des Eingabefeld initial sichtbar ist. Default-Wert: false
  • mandatory¤ - Markiert das Feld als Pflichtfeld. Default-Wert: false
  • readonly¤ - Das Feld kann nicht geändert werden. Default-Wert: false
  • height - Die Höhe des Eingabefeldes.
  • resizable¤ - Das Feld kann vom Benutzer vergrößert werden. Default-Wert: false

Erlaubt in: <col>

Events: keine

Beispiel:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

 <row>
   <col>
     <textarea value="Ein mehrzeiliges Eingabefeld." tooltip="Ich bin ein Eingabefeld." />
   </col>
 </row>

</layout>


<timeline>

Beschreibung: (Ab v4.7) Erzeugt eine Timeline.

Attribute:

  • id - ID der Datentabelle.
  • src* - Pfad zur Klasse der Datentabelle. Dieser muss ausgehen vom Basis-Verzeichnis des Add-Ons angegeben werden.
  • query - Parameter, die an die Timeline-Klasse übergeben werden. In der Timeline-Klasse werden diese im Request-Array zur Verfügung gestellt.
  • preload - Gibt an ob die Timeline während des Ladevorgangs der Seite geladen wird oder nach dem Aufbau der Seite auf dem Client. Default-Wert: false

Erlaubt in: <col>

Events: keine

Beispiel:

  • Ein Beispiel für eine Timeline, welche die Klasse meineTimeline voraussetzt:


<?xml version="1.0" encoding="UTF-8"?>
<layout>

  <row>
    <col>
      <grid id="myTimeline" src="timelines/meineTimeline" />
    </col>
  </row>

</layout>


<timer>

Beschreibung: (Ab v4.6) Dieses Tag erzeugt einen Timer zur Erfassung von Zeiten. Es kann immer nur ein Timer gleichzeitig aktiv sein.

Attribute:

  • id - Die ID des Timers.
  • hidden¤ - Bestimmt, ob der Timer initial unsichtbar ist.
  • init-progress - Option zum automatischen Starten des Timers beim Öffnen eines Fensters. Mögliche Werte sind true oder false.
  • label¤¹ - Die Bezeichnung des Timers.
  • label-position - Die Position des Bezeichners des Feldes. Mögliche Werte sind left, right und top. Wird keine Position angegeben wird das Label links vom Timer angezeigt.
  • owner-id - Die owner-id enthält die ID eines Feldes, in dem der Timer die vergangene Zeit als Dezimalwert in Stunden ablegt. Dieser Wert wird für das Event on-autosave verwendet.
  • size - Die Breite des Timers als rem-Wert.
  • type* - Der Typ des Timer. Es stehende folgende Typen zur Auswahl:
    • default - Die vergangene Zeit wird nur als Text angezeigt.
    • clock - Die vergangene Zeit wird in einem Textfeld angezeigt und kann bei Bedarf manuell angepasst werden.
  • value¤ - Startwert des Timers in Sekunden. Default-Wert 0.

Erlaubt in: <col>, <toolbar> und <footer>

Events:

  • on-autosave - Führt eine angegebene Aktion aus, sobald 36 Sekunden bzw. 0,01 Stunden vergangenen sind.

Beispiel:

  • Timer Nummer 1 ist vom Typ "default", nutzt ein Feld zum Speichern des Wertes in Stunden und führt eine Aktion aus.
  • Timer Nummer 2 ist vom Typ "clock" und erfasst nur die Zeit. Der Timer startet mit einem Wert von zwei Sekunden.


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>  
     <col>
       <field label="Timer 1 value" size="6" type="text" id="timer1Value" tooltip="Timer 1" />
       <timer id="timer1" label="Timer Nummer 1:" size="6" label-position="left" value="0" type="default" owner-id="timer1Value" init-progress="false" on-autosave="timerSave" />
       <timer id="timer2" label="Timer Nummer 2:" size="6" label-position="left" value="2" type="clock" />
     </col>
   </row>
</layout>


// in ihrer addon_view-Klasse
public function get_actions()
{
  return array(
    "timerSave" => addon_util_action::get_ajax_action('ajax/myAjax')
  );
}


Kontrollstrukturen

<if> <elseif> und <else>

Beschreibung: Generiert eine Verzweigung abhängig von der angebenen Bedingung (condition).

Attribute:

  • condition* - Die Bedingung um den Zweig zu betreten. Diese kann entweder ein vorher definiertes Assignment sein, oder einer der folgenden Operatoren welche in Verbindung mit den Attributen left und right Arbeiten:
    • not - Akzeptiert als einzer Operator nur einen Wert im Attribut left. Invertiert den angegebenen Wert.
    • and - Verkünpft zwei Werte mit einem logischen Und.
    • or - Verknüft zwei Werte mit einem logischen Oder.
    • eq - Vergleicht zwei Werte auf Gleichheit.
    • nq - Vergleicht zwei Werte auf Ungleichheit.
    • lt - Überprüft ob der Wert in Attribut left kleiner ist als der in right.
    • le - Überprüft ob der Wert in Attribut left kleiner ist als der in right oder diesem entspricht.
    • gt - Überprüft ob der Wert in Attribut left größer ist als der in right.
    • ge - Überprüft ob der Wert in Attribut left größer ist als der in right oder diesem entspricht.
  • left*¹ - Der linke Wert.
  • right*² - Der rechte Wert.

Erlaubt in: Überall innerhalb des <layout>-Tags.

Beispiel:

  • Ein Beispiel für eine einfache if-Bedingung:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
     <col>
       <if condition="$meineBedingung">
         <text text="Die Bedingung war erfolgreich." />
       </if>
     </col>
   </row>
</layout>


// in Ihrer addon_view-Klasse
public function get_assignments()
{
  return array(
    "meineBedingung" => true
  );
}
// Alternativ ist auch folgendende Implementierung möglich:
public function get_assignments()
{
  return array(
    "meineBedingung" => function($assignments, $scope)
    {
      return true;
    }
  );
}


<for>

Beschreibung: Generiert eine Schleife, mit Hilfe eines vorher definierten Arrays, über sämtliche Tags innerhalb des <for>-Tags.

Attribute:

  • data-id* - Der Name des Assignments mit dem zu durchlaufenden Array.
  • item - Der Name der Laufzeitvariable für den aktuellen Eintrag des Arrays.
  • key - Der Name der Laufzeitvariable für den aktuellen Index des Arrays. Dieser kann sowohl numerisch wie auch alphanumerisch sein.
  • name - Der Name der Laufzeitvariable welche Informationen des aktuellen durchlaufes in Form eines Arrays enthält. In dem Array gibt es die folgenden Schlüssel: key, item, is_first und is_last.

Erlaubt in: Überall innerhalb des <layout>-Tags.

Beispiel:

  • Ein Beispiel für eine einfache for-Schleife:


<?xml version="1.0" encoding="UTF-8"?>
<layout>
  <row>
     <col>
       <for data-id="$meinArray" key="meinKey" item="meinEintrag">
         <text text="{$meinEintrag} hat den Schlüssel {$meinKey}" />
       </for>
     </col>
   </row>
</layout>


// in Ihrer addon_view-Klasse
public function get_assignments()
{
  return array(
    "meinArray" => array(
      "SchlüsselEins" => "Eintrag Eins",
      "SchlüsselZwei" => "Eintrag Zwei",
      "SchlüsselDrei" => "Eintrag Drei",
    )
  );
}


<assign>

Beschreibung: Weist einer Laufzeitvariable einen gewünschten Wert zu.

Attribute:

  • var* - Der Name der Laufzeitvariable.
  • value* - Der Wert, welcher der Laufzeitvariable zugewiesen werden soll.

Erlaubt in: Überall innerhalb des <layout>-Tags.

Beispiel:

  • Beispiel für eine Variablenzuweisung:


<layout>
  <assign var="meineVariable" value="meinWert" />
   <row>
     <col>
       <text text="meine Variable enthält den Wert {$meineVariable}" />
     </col>
   </row>
</layout>


<include>

Beschreibung: Bindet ein weiteres Template an der Stelle ein, an der sich das Tag befindet. Es gilt zu beachten, dass die, für das Template nötigen Variablen, innerhalb der View definiert sein müssen.

Attribute:

  • src* - Die Angabe des Templates, ohne die Endung xml.

Erlaubt in: Überall innerhalb des <layout>-Tags.

Beispiel:


<?xml version="1.0" encoding="UTF-8"?>
<layout type="fluid">
  <include src="templates/import" />
</layout>

// in der Datei template/import.xml könnte folgendes stehen:
<?xml version="1.0" encoding="UTF-8"?>
<layout>

 <row>
   <col>
     <fieldset label="Meine Überschrift">
       <row>
         <col>
           <text text="Mein Importiertes Template" />
         </col>
       </row>
     </fieldset>
   </col>
 </row>

</layout>