Page tree
Skip to end of metadata
Go to start of metadata

Mit den unten aufgelisteten XML-Elementen gestallten Sie die graphischen Benutzeroberflächen Ihrer Add-Ons 

 

1. Konzepte

1.1. Layout

1.1.1. 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 Template#Gestaltungsraster.

1.1.2. Gestaltungsraster

Eine Zeile (<row>) besteht immer aus maximal 12 Spalten (<col>) und bilden so einen Raster auf Basis von 12. Gestaltungsraster werden verwendet, um Seitenlayouts mit einer Reihe von Zeilen und Spalten zu erstellen. 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">


1.1.3. 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ß wie der 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.

1.1.4. Icons

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

1.1.5. Layout-Typen

Es gibt drei Unterschiedliche Layout-Typen. Diese legen lediglich fest, ob die Elemente innerhalb eines Containers einen Abstand zum Rand des Containers 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>).

1.2. 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)

1.3. 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>

1.4. Hintergrundfarben

Folgende Hintergrundfarben stehen ab v5.0 zur Verfügung:

  • info_1

  • info_2

  • info_3

  • done_1

  • done_2

  • done_3

  • warning_1

  • warning_2

  • warning_3

  • important_1

  • important_2

  • important_3

  • achromatic_1

  • achromatic_2

  • achromatic_3

2. Tags

2.1. 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.

2.2. Layout

2.2.1. <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

  • background-color - (Ab v5.0) Hintergrundfarbe, siehe Template#Hintergrundfarben

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>

2.2.2. <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, der angezeigt wird, wenn der Cursor sich auf der Überschrift des Fieldsets befindet. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""

  • background-color - (Ab v5.0) Hintergrundfarbe, siehe Hintergrundfarben

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>

2.2.3. <footer>

Beschreibung:

Siehe <toolbar> und <footer>

2.2.4. <layout>

Beschreibung:

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

Attribute:

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>

2.2.5. <line>

Beschreibung:

Fügt einen horizontalen Abstandshalter ein.

Attribute:

  • id - Die ID der Linie.

Erlaubt in: <col>

Events: keine

2.2.6. <panel>

Beschreibung:

Fügt einen Container innerhalb der Seite hinzu, in dem 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.

  • background-color - (Ab v5.0) Hintergrundfarbe, siehe Template#Hintergrundfarben

Erlaubt in: <col>

Events: keine

2.2.7. <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.

  • background-color - (Ab v5.0) Hintergrundfarbe, siehe Template#Hintergrundfarben

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>

2.2.8. <separator>

Beschreibung:

Fügt einen Abstandhalter zwischen freien Buttons oder Widgets innerhalb einer Toolbar 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

2.2.9. <splitter>

Beschreibung:

Fügt einen Abstandhalter zwischen freien Buttons oder Widgets innerhalb einer Toolbar hinzu, so dass die nachfolgenden Widgets nach rechts geschoben werden.

Attribute: keine

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

Events: keine

2.2.10. <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 bei Öffnung nachgeladen werden soll.

  • tooltip¤ - (Ab v4.7) Tooltip, der 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

2.2.11. <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

2.2.12. <toolbar> und <footer>

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 der Toolbar. Default-Wert: default

    • default - Helle Toolbar.

    • brand - Dunkle 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>

2.3. Widgets

2.3.1. <area>

Beschreibung: 

Ab v4.7 können Widgets in einer Area zusammengefasst werden. Das ermöglicht eine einfache Manipulation oder 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 dem ü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, die über 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, die ü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
                )
            ),
        );
    }
}

2.3.2. <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 fokussiert ist. Wenn das Add-On mehrsprachig ist, wird dieser übersetzt. Default-Wert: ""

  • 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, der 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')
  );
}

2.3.3. <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 fokussiert 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')
  );
}

2.3.4. <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 und 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 und 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, der im Feld eingetragen werden darf. Betrifft nur Zahleneingabefelder, Datumsfelder, Zeitfelder oder Slider.

  • min-value - Ist der Mindestwert, der im Feld eingetragen werden darf. Betrifft nur 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 - Dar darzustellende Hinweistext, wenn das Feld fokussiert ist. Default-Wert: ""

  • type - Folgende Typen stehen zur Verfügung:

    • 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, das zusätzlich die direkte Löschung des Inhaltes über einen Button ermöglicht

  • value - Der initiale Wert für das Feld.

  • 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 mit folgenden Schlüsseln erfolgen:

    •  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 vor dem Monatsende rückwärts gezählt.)

    • days_of_week (für Wochentagen, 0 [für Sonntag] bis 6) enthalten kann.

    • Die Werte dahinter sind einfache Arrays, in denen 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>


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>

2.3.5. <filemanager>

Beschreibung:

Verfügbar ab v4.7.

Zeigt einen Dateimanager an, dessen Basisverzeichnis das Addon-Daten-Verzeichnis ist.

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 Dokumentenverzeichnis Modulobjekts an, z.B. eines Kontakts. (Weitere Informationen unter addTree)

  • object-id - (Ab v4.8) ID des Objektes, dessen Dokumentenverzeichnis 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>

2.3.6. <form>

Beschreibung:

Verfügbar ab v4.10.

Stellt ein Formular bereit. Durch das Hinzufügen von Buttons mit dem Typ submit wird automatisch eine Schaltfläche mit entsprechenden Events und Beschriftung für das Absenden des Formulars bereitgestellt. Gleiches 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-Formularen, 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 (bspw. über einen außerhalb liegenden Button) abzusenden oder wiederherzustellen, muss die get_trigger_action verwendet werden. 

(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 das der gedrückte Button identifizierbar ist.

Im Submit-Event können alle Felder anhand des Platzhalters {event} ermittelt werden. Festgestellt werden die Werte der folgenden Widgets field, textarea, checkbox, timer, selection und objectselection. Die Rückgabe erfolgt als assoziatives Array, dessen 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 desselben.

  • 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;
    } 
}

2.3.7. <gantt>

Beschreibung:

Verfügbar ab v4.8.

Zeigt ein Gantt-Diagramm an, das zuvor als Instanz 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. Dort 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 werden sollen oder nach dem Aufbau der Seite durch den Browser-Client ein weiterer AJAX-Request erfolgt, der 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>

2.3.8. <graph>

Beschreibung:

Zeigt einen Graphen an, der zuvor als Klasse in Ihrem Add-On definiert sein muss.

Attribute:

  • src - Pfad zur Klasse des Graphen. Dieser muss ausgehend vom Basis-Verzeichnis des Add-Ons angegeben werden.

  • query - Parameter, die an die Graph-Klasse übergeben werden. Dort werden diese im Request-Array zur Verfügung gestellt.

  • preload - (Ab v4.6) Gibt an, ob der Graph während des Ladevorgangs der Seite geladen werden soll oder nach dem Aufbau der Seite auf dem Browser-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>

2.3.9. <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>

2.3.10. <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, das 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 in Schritten zwischen 1 und 6.

  • tooltip - (Ab v4.7) Tooltip, der 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>

2.3.11. <image>

Beschreibung:

Verfügbar 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, der 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>

2.3.12. <list>

Beschreibung:

Verfügbar 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 (deprecated) - (Bis v4.7) Die Daten, die in der Liste angezeigt werden sollen.

  • data - (Ab v4.7) Die Daten, die 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 Bearbeiten-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 anklickt.

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}")
  );
}

2.3.13. <listbutton>

Beschreibung:

Verfügbar 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, das 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}")
  );
}

2.3.14. <listfield>

Beschreibung:

Verfügbar ab v4.5 (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. Gibt man keine Position an, 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.

  • 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ögliche 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 und 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 - Der darzustellende Hinweistext, wenn das Feld fokussiert 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.

2.3.15. <objectselection>

Beschreibung:

Verfügbar ab v4.6.

Generiert ein Such-/Tokenfeld für CRM-Objekte. In diesem Element kann der Nutzer einen Begriff eingeben, 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 zur Auswahl zur Verfügung gestellten 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. Gibt man keine Position an, wird das Label links von der Auswahl angezeigt. Default-Wert: "left"

  • module - Das Modul, in dem gesucht werden soll. Diese Angabe ist verpflichtend. Folgende 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 und 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 - Der darzustellende Hinweisetext, wenn das Feld fokussiert 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><footer>

Events:

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

2.3.16. <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 allerdings nicht identisch mit IDs des restlichen Template sein.

  • value - Der Rückgabewert, wenn diese Option durch den Nutzer ausgewählt wurde.

  • label - Der Bezeichner, der 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, das keine Mehrfachauswahl zulässt, wird der letzte,  mit selected markierte, Eintrag ausgewählt. Default-Wert: false

Erlaubt in: <selection>

Events: keine

Beispiele: siehe <selection>

2.3.17. <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 (deprecated) - (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) Die ID einer CRM-Liste, angegeben mit vorstehendem Dollarsymbol. 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ögliche Werte sind TRUE und FALSE. Default-Wert: false

  • placeholder - Der Platzhalter steht nur zur Verfügung, wenn das Feld als ausklappbar 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 und 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 - Der darzustellende Hinweisetext, wenn das Feld fokussiert 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><footer>

Events:

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


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"),
    )
  );
}

2.3.18. <text>

Beschreibung:

Ein gewöhnlicher Text.

Attribute:

  • id - ID des Textes.

  • text (deprecated, siehe value) - 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>

2.3.19. <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 - Der darzustellende Hinweisetext, wenn das Feld fokussiert 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>

2.3.20. <timeline>

Beschreibung:

Verfügbar ab v4.7. 

Erzeugt eine Timeline.

Attribute:

  • id - ID der Datentabelle.

  • src - Pfad zur Klasse der Datentabelle. Dieser muss ausgehend vom Basis-Verzeichnis des Add-Ons angegeben werden.

  • query - Parameter, die an die Timeline-Klasse übergeben werden und dort im Request-Array zur Verfügung stehen.

  • preload - Gibt an, ob die Timeline während des Ladevorgangs der Seite geladen wird oder nach dem Aufbau der Seite auf dem Browser-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>

2.3.21. <timer>

Beschreibung:

Verfügbar 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. Gibt man keine Position an, 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 Timers. 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><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')
  );
}

2.4. Kontrollstrukturen

2.4.1. <if> <elseif> und <else>

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

Attribute:

  • condition - Die Bedingung, um den Zweig zu betreten. Diese kann entweder ein vorher definiertes Assignment sein oder einer der folgenden Operatoren, die in Verbindung mit den Attributen left und right arbeiten:

    • not - Akzeptiert als einziger Operator nur einen Wert im Attribut left. Invertiert den angegebenen Wert.

    • and - Verknüpft zwei Werte mit einem logischen Und.

    • or - Verknüpft 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 folgende Implementierung möglich:
public function get_assignments()
{
  return array(
    "meineBedingung" => function($assignments, $scope)
    {
      return true;
    }
  );
}

2.4.2. <for>

Beschreibung:

Generiert eine Schleife, mithilfe 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, die 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",
    )
  );
}

2.4.3. <assign>

Beschreibung:

Weist einer Laufzeitvariable einen gewünschten Wert zu.

Attribute:

  • var - Der Name der Laufzeitvariable.

  • value - Der Wert, der einer Laufzeitvariable zugewiesen wird.

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>

2.4.4. <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>
  • No labels