Controls

Auf einer Page werden unter dem Hauptpunkt controls Oberflächenelemente definiert.

Layout Controls

Diese Controls werden verwendet, um die Anordnung von Controls zu beeinflussen und damit das Layout der Page zu definieren.

Container

Generisches Control Element, mit dem weitere Controls gruppiert werden können. Alle anderen Container-Ausprägungen erweitern dieses Control.

Name des ControlType: container

Eigenschaften von container

controls	Liste von Controls
labelSize?	(optional) - Angabe zur Größe aller untergeordneten Label-Controls small normal large
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
flow?	(optional) - Ausrichtung der Controls im Container vertical horizontal
header?	(optional) - Überschrift des Containers
collapsible?	(optional) - Gibt an, ob der Inhalt des Containers eingeklappt werden kann.
isCollapsed?	(optional) - Gibt an, ob der Container zu Beginn eingeklappt sein soll.
size?	(optional) - Größe des Containers small normal large full auto
style?	(optional) - Angabe von individuellem Styling

Beispiel:

Auf der linken Seite der Page soll eine Liste von Inputs vertikal angeordnet werden, ebenso wie auf der rechten.

YAML

controlType: container
flow: horizontal
controls:
  - controlType: container
    flow: vertical
    controls: ...
  - controlType: container
    flow: vertical
    controls: ...

TabContainer

Mit dem TabContainer können Controls auf unterschiedlichen Tab-Karten dargestellt werden.

Name des ControlType: tabContainer

Eigenschaften von tabContainer

tabs	Liste von Tab-Definitionen
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling
currentTab?	(optional) - Möglichkeit den aktiven Tab über einen Index oder eine variable zu steuern

Eigenschaften von tabs

label	Anzeigename des Tabs
icon?	(optional) - Name des Icons, das im Tab angezeigt werden soll Entweder existierendes Custom-Icon oder DevExtreme-Icon
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
controls	Liste von Controls in diesem Tab
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

controlType: tabContainer
tabs:
  - label: Tab 1
    controls: ...
  - label: Tab 2
    icon: administration-module
    controls: ...

InputContainer

Der InputContainer wird verwendet, um ein Input-Control und wahlweise ein Label formatiert darzustellen.

Dieses Control sollte immer dann verwendet werden, wenn auf der Oberfläche ein Input mit einem optionalen Label verwendet wird.

Name des ControlType: inputContainer

Eigenschaften des inputContainer

controls	Liste von Controls
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
highlight?	(optional) - Komplexes Objekt zur Definition des Highlighting
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

controlType: inputContainer
controls:
  - controlType: label
    value: 'Text Control'
  - controlType: input
    type: text
    value: 'Geben Sie hier Text ein...'

Card

Einfache Darstellung von Controls im Format einer Card mit Kopf-, Haupt- und Fußbereich.

Name des ControlType: card

Eigenschaften der card

title?	(optional) - Anzeigename im Header
header?	(optional) - Liste von Controls im Header
body	Liste von Controls im Body
footer?	(optional) - Liste von Controls im Footer
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

controlType: card
title: Card Control
header:
  - controlType: ...
body:
  - controlType: ...
footer:
  - controlType: ...

EntityContainer

Mit dem EntityContainer können komplette Stammdaten-Masken aus be mit nur wenigen Zeilen Code im be Portal dargestellt werden.

Eine gesamte Entität kann mit der alleinigen Angabe von data (mit optionalen excludedAttributes) angezeigt werden. Einzelne Attribute einer Entität können mit der Angabe von data mitsamt attributes angezeigt werden. Ein gesamter Gruppenbereich einer Entität kann mit der Angabe von data und group angezeigt werden. Zusätzlich ist mit expandGroup steuerbar, ob auch untergeordnete Gruppen/Felder inkludiert werden sollen. Optional können Attribute mit excludedAttributes ausgenommen werden.

Name des ControlType: entityContainer

Eigenschaften des entityContainer

data	Bindung per `$bind` an eine `entityInstance` Variable
attributes?	(optional) - Hiermit können einzelne Felder angegeben werden, welche auf der Oberfläche angezeigt werden sollen.
group?	(optional) - Wenn keine `attributes` angegeben werden, werden alle Felder der Gruppe auf der Oberfläche angezeigt.
expandGroup?	(optional) - Untergeordnete Gruppen der `group` auch mit anzeigen.
excludedAttributes?	(optional) - Hiermit können einzelne Felder angegeben werden, welche auf der Oberfläche nicht angezeigt werden sollen.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

data:
  variables:
    dab000:
      type: entityInstance
      source: odata
      entity: Dab000
      attributes: '*'
      primaryKey: 4711
controls:     
  - controlType: entityContainer
    data:
      $bind: dab000

PageContainer

Mit dem PageContainer kann eine untergeordnete Page in der (übergeordneten) Page eingebettet werden. Der PageContainer definiert dabei die Größe des Anzeigebereichs für die untergeordnete Page.

Name des ControlType: pageContainer

Eigenschaften des pageContainer

id	ID der Page, die im Container angezeigt werden soll.
data?	(optional) - Möglichkeit zur Interaktion zwischen der aktuellen und der im `pageContainer` angegebenen Page.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Eigenschaften von data

inputs?	(optional) - Angabe von Variablen aus der untergeordneten Page, die per `$bind` an eine Variable aus der aktuellen Page gebunden werden. Der aktuelle Wert von der in `$bind` definierten Variable wird dadurch an die angegebene Variable der untergeordneten Page übergeben (= aktuelle Page leitet Daten an SubPage).
outputs?	(optional) - Angabe von Variablen aus der untergeordneten Page, die per `$bind` an eine Variable aus der aktuellen Page gebunden werden. Der aktuelle Wert von der angegebenen Variable der untergeordneten Page wird dadurch an die in `$bind` definierte Variable übergeben (= SubPage leitet Daten an aktuelle Page).

Beispiel:

Die Page Urlaubs-Konto soll innerhalb der Page Personal angezeigt werden

YAML

controlType: pageContainer
id: PZE.urlaubs_konto

Mithilfe von $script können Subpages auch als Modal angezeigt werden. Syntax hierfür ist:

$.dialog.show(<<PAGEID>>, <<CALLBACK>>, <<OPTIONS>>);

Hierbei wird die Callbackfunction: (event) => void beim schlißen des Modals ausgeführt wird. Als optionen können angegeben werden:

CODE

options = {
  title: <<TITLE OF SUBPAGE MODAL>> // Default ''
  size: <<SIZE OF MODAL>> // Default 'large', possible Values: 'small', 'medium', 'large'
}

Callback oder options sind dabei optional.

Die Button des Modals selbst werden auf der aufrufenden Page unter den contributes definiert und haben die defnition von ganz normalen GUI Button.

CODE

contributes:
  dialog:
    buttons: 
      - <<BUTTON>>

Hier hat man im Clickhandler Zugriff auf die Kontextfunktionen:

$.dialog.cancel(any)
$.dialog.close(any)
$.dialog.success(any)

Die Funktionen verhalten sich alle gleich: der mitgegebene Payload (optional) wird durch event dem callback der aufrufenden $.dialog.showübergeben und das Modal wird geschlossen. Sie unterscheiden sich nur durch den resultCodeder ebenfalls am event verfügbar ist.

Insbesondere laufen button (callbacks) ohne einen solchen Aufruf nur im Kontext der Subpage und schließen das Modal auch nicht.

Input Controls

Input Controls sind Komponenten, mit denen Daten auf der Oberfläche angezeigt und bearbeitet werden können.

Name des ControlType: input

Eigenschaften von input

type?	(optional) - Typ des Inputs. Der Typ beeinflusst, welches Oberflächenelement zur Darstellung verwendet wird. text integer date datetime toggle amount dropdown memo Standardwert: text
value?	(optional) - Wert, der im Input hinterlegt ist. Kann sowohl ein konstanter Wert als auch eine Bindung an eine Variable sein, wobei sich der Input Wert aktualisiert, wenn die Variable geändert wird und umgekehrt.
isReadOnly?	(optional) - Input kann nicht bearbeitet werden. Standardwert: `false`
size?	(optional) - Angabe der Größe des Controls z.B. 100px
hightlight?	(optional) - Komplexes Objekt zur Definition des Highlighting
jump?	(optional) - Wenn eine URL angegeben wird, wird beim Input ein Button dargestellt, mit dem auf diesen Link navigiert werden kann.
selectOptions?	(optional, nur bei Typ dropdown notwendig) - Liste von `value` und `label` Objekten, welche im Dropdown zur Verfügung stehen.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling
typeDetails?	(optional) - Detailierte Einstellungen für das entsprechende Control Siehe bei den beim Details zum `type` für mehr Informationen
isFilterControls?	(optional) - Markiert den Input als Filter Control. Dadurch wird es nach Befüllung hervorgehoben.

Text

Beispiel:

YAML

controlType: input
type: text
value: Hello World
size: 150px
isReadOnly: true
jump: 'https://dontenwill.de'

controlType: input
type: text
value:
  $bind: text_variable

Integer

Beispiel:

YAML

controlType: input
type: integer
value: 4711

controlType: input
type: integer
value:
  $bind: number_variable

Date

Beispiel:

YAML

controlType: input
type: date
value:
  $bind: date_variable

Datetime

Beispiel:

YAML

controlType: input
type: datetime
value:
  $bind: datetime_variable

Toggle

Hier die typeDetails von einem Toggle:

switchedOnText?	(optional) - Text, der angezeigt wird, wenn der Toggle-Schalter aktiviert ist
switchedOffText?	(optional) - Text, der angezeigt wird, wenn der Toggle-Schalter deaktiviert ist

Beispiel:

YAML

controlType: input
type: toggle
value: true

controlType: input
type: text
value:
  $bind: boolean_variable

controlType: input
type: toggle
value: true
typeDetails:
  switchedOnText: ja
  switchedOffText: nein

Amount

Beispiel:

YAML

controlType: input
type: amount
value: 13.37

controlType: input
type: amount
value:
  $bind: amount_variable

Beispiel:

YAML

controlType: input
type: dropdown
value: eur
selectOptions:
  - value: eur
    label: Euro (€)
  - value: usd
    label: Dollar ($)
  - value: gbp
    label: Pounds (£)

controlType: input
type: text
value:
  $bind: text_variable

Memo

Beispiel:

YAML

controlType: input
type: memo
value: "Zeile 1 \n Zeile 2"

controlType: input
type: memo
value:
  $bind: memo_variable

Komplexe Controls

EntityGrid

Tabelle zur Darstellung von mehreren Datensätzen einer Entität. Die Daten werden entweder per OData vom Backend geladen oder können als Array gebunden werden.

Name des ControlType: entityGrid

Eigenschaften des entityGrid

data	Bindung per `$bind` an eine `entitySet` Variable
selected?	(optional) - Bindung per `$bind` an eine Variable, in welche der PrimaryKey des gewählten Datensatzes geschrieben wird.
keepSelectedOnRecordAbsent?	(optional) - Gibt an, ob ein ausgewählter Datensatz weiterhin ausgewählt bleiben soll, wenn er nicht mehr in der Datensatzliste des Grids enthalten ist (kann z.B. beim Scrollen oder Filtern auftreten). Default: false
searchable?	(optional) - Gibt an, ob die Spalten im Grid durchsucht werden können. Default: false
sortable?	(optional) - Gibt an, ob die Spalten im Grid sortiert werden können. Default: true
searchPanel?	(optional) - Definition des SearchPanels
columnsFromEntity?	(optional) - Definiert, ob die Spalten der Tabelle automatisch aus der Entität abgeleitet werden sollen. Wenn diese Eigenschaft auf `false` gesetzt wird, müssen die Spalten manuell in der `columnDefinition` definiert werden.
highlight?	(optional) - Komplexes Objekt zur Definition des Highlighting von Zeilen. Hierbei steht die Variable `dataSet` zu Verfügung. `dataSet` enthält die Daten des Datensatzes, für den die `highlight`-Eigenschaft berechnet wird.
columnDefinition?	(optional) - Liste von Spaltendefinitionen
events?	(optional) - Liste von Events
height?	(optional) - Angabe der maximalen Höhe des Grids. Alle css-typischen Einheiten mit Ausnahme von '%' können genutzt werden. Z.B. 150px, 20rem, 90vh, calc(100vh - 100px)
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling
xlsExport?	(optional) - Gibt an ob der Export der Daten als xlsx erlaubt ist Default: false
selectionMode?	(optional) - Einstellmöglichkeit für Mehrfachausfahl (single/multiple) Default: single
editing	(optional) - Einstellmöglichkeit für Editierbarkeit values: mode: row mode: cell Default: no
highlightFilterControls?	(optional) - Legt fest ob gefüllte Filter des Grids farblich hervorgehoben sollen. Default: true
keyExpression	Ausdruck, der den Schlüsselwert eines Elements in der Datenquelle zurückgibt. Muss nur bei der treeList angegeben werden oder wenn ein Array als Datenquelle gebunden ist.

Eigenschaften des searchPanel

visible	Gibt an, ob das SearchPanel sichtbar ist.
placeholder?	(optional) - Platzhalter-Text des Suchfelds
text?	(optional) - Vorbelegung für die Suche
searchVisibleColumnsOnly?	(optional) - Nur in Spalten suchen, welche sichtbar sind

Eigenschaften von Objekten in der columnDefinition Liste

label?	(optional) - Anzeigename der Spalte
type?	(optional) - Typ der Spalte: boolean date number object string entityLink
sortable?	(optional) - Gibt an, ob die Spalte sortierbar ist. Default: true
searchable?	(optional) - Gibt an, ob in der Spalte gesucht werden kann. Default: false
visible?	(optional) - Gibt an, ob die Spalte sichtbar ist. Default: true
width?	(optional) - Gibt die Breite der Spalte an.
defaultFocus?	(optional) - Gibt an ob der Fokus auf das Suchfeld dieser Spalte gesetzt werden soll.
highlight?	(optional) - Komplexes Objekt zur Definition des Highlighting von Zellen in der zugehörigen Spalte. Hierbei steht die Variable `dataSet` zu Verfügung. `dataSet` enthält die Daten des Datensatzes, für den die `highlight`-Eigenschaft berechnet wird.
displayValue?	(optional) - Gibt den Namen des anzuzeigenden Feldes oder eine JavaScript-Funktion zur Berechnung des Wertes mit Hilfe der Variable `dataSet` an. `dataSet` enthält die Daten des Datensatzes, für den der `displayValue` berechnet wird.
entity	(optional) - Definition eines Nachschaufeldes im Falle `type = entityLink`. Der Wert von `entity` ist ein Objekt, das mindestens die Felder: `name` (der Nachschau Entität) `displayValue` (display Feld aus der gemappten Entität) enthalten muss. Der eigentliche Wert in der angezeigten Entität muss hierbei dem Schlüssel der Nachschauentität entsprechen. Der `displayValue` kann auch einem Javascriptausdruck entsprechen. Während der `displayValue` der `entityLink`-Spalte Zugriff auf die Daten der angezeigten Entität hat, hat dieser `displayValue` Zugriff auf die Daten der gemappten Entität. Im Falle der Editierbarkeit des `EntityGrids` müssen außerdem über `columnDefinition` die Spalten des `EntityLinks` definiert werden. Es werden keine Standardeinstellungen der gemappten Entität für die Spaltendefinition genutzt.

Grid Events

dblClick?

(optional) - $script oder $command. Wird bei Doppelklick auf eine Zeile ausgeführt. Falls eine Variable an selected gebunden ist, wird diese aktualisiert bevor das Event ausgelöst wird.

Beispiel:

YAML

data:
  variables:
    lokaleDaten:
      type: array
      value:
        - name: Max Musterman
          age: 74
          membership_no: 4711
        - name: Maria Musterfrau
          age: 35
          membership_no: 1337     
    dab000_selected_id:
      type: number
    dab000:
      type: entitySet
      source: odata
      entity: Dab000
      attributes:
        - kdnr
        - name1
        - name2
        - matchcode
        - plzort
        - homepage
controls:
  - controlType: entityGrid
    data:
      $bind: membership_no
    keyExpression: membership_no
    columnDefinition:
      - name:
          label: Name
      - age:
          label: Alter
  - controlType: entityGrid
    data:
      $bind: dab000
    selected:
      $bind: dab000_selected_id
    searchable: true
    sortable: true
    searchPanel:
      visible: true
      placeholder: Kunden durchsuchen...
    events:
      dblClick:
        $script: |
          debug.log($.variables.dab000_selected_id);
    columnDefinition:
      - homepage:
          label: Internetseite
      - plzort:
          searchable: false
      - name1:
          displayValue:
            $script: |
              return `${dataSet.name1} - ${dataSet.kdnr} (${dataSet.matchcode})`;

EntityLink

Die EntityLink Komponente ist ein Dropdown-Control, welches ein EntityGrid anzeigt. Im Grid kann ein Datensatz der angezeigten Entität ausgewählt werden kann. Die ID des gewählten Datensatzes ist dabei der value des Dropdown.

Name des ControlType: entityLink

Eigenschaften des entityLink

data	Bindung per `$bind` an eine `entitySet` Variable
selected?	(optional) - Bindung per `$bind` an eine Variable, in welche der PrimaryKey des gewählten Datensatzes geschrieben wird.
grid?	(optional) - Unter dieser Eigenschaft können die gleichen Eigenschaften wie im entityGrid definiert werden.
displayValue?	(optional) - Mit dieser Eigenschaft kann gesteuert werden, was im Eingabefeld angezeigt wird, wenn ein Datensatz ausgewählt wurde. Kann entweder der Name einer Property des entitySets sein oder eine JavaScript-Funktion zur Berechnung des Wertes mit Hilfe der Variable `dataSet`. `dataSet` enthält die Daten des ausgewählten Datensatzes.
placeholder?	(optional) - Platzhalter-Text vom EntityLink
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

CODE

data:
  variables:
    dab000_selected_id:
      type: number
    dab000:
      type: entitySet
      source: odata
      entity: Dab000
      attributes:
        - kdnr
        - name1
        - name2
        - matchcode
        - plzort
        - homepage
controls:
  - controlType: entityLink
    data:
      $bind: dab000
    selected:
      $bind: dab000_selected_id
    displayValue: 
      $script: |
        return `${dataSet.name1} - ${dataSet.kdnr} (${dataSet.matchcode})`
    placeholder: Kundenauswahl
    grid:
      searchable: true
      sortable: true
      searchPanel:
        visible: true
        placeholder: Kunden durchsuchen...
      columnDefinition:
        - homepage:
            label: Internetseite
        - plzort:
            searchable: false

Comments

Komponente zum Darstellen und Verfassen von Kommentaren. Kommentare können sich auf eine beliebige Entität beziehen.

Name des ControlType: comments

Eigenschaften von comments

commentsEntity	Name der Entität
commentsId	Datensatz-ID des Datensatzes der Entität
readonly?	(optional) - Definiert, ob der Kommentarbereich nur lesend dargestellt wird.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

Kommentare zum Datensatz 4711 der Entität Dab010

YAML

controlType: comments
commentsEntity: Dab010
commentsId: 4711

DocumentViewer

Komponente zur Darstellung von Dokumenten, welche aus dem be Portal DMS System geladen werden.

Aktuell werden ausschließlich PDF Dateien und Bilder zur Darstellung unterstützt.

Name des ControlType: documentViewer

Eigenschaften von documentViewer

documentUuid?	UUID des Dokuments im DMS System - nur angeben, wenn keine `bundleUuid` angegeben wurde
bundleUuid?	UUID des Bundles im DMS System - nur angeben, wenn keine `documentUuid` angegeben wurde. Alle Dokumente aus dem Bundle werden in Tabs dargestellt.
width?	(optional) - Breite des `documentViewer`
ocrData?	(optional) - OCR-Daten, die durch den DocumentViewer visualisiert werden
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

controlType: documentViewer
documentUuid:
  $bind: rechnung_uuid
ocrData: |
  {
    "documents": [
      {
        "docType": "invoice",
        "data": {
          "invoiceId": {
            "value": "RECHNUNG-001",
            "rawValue": "RECHNUNG-001",
            "page": 1,
            "bbox": {
              "xMin": 3.8584,
              "yMin": 2.2057,
              "xMax": 5.3722,
              "yMax": 2.4015
            },
            "confidence": 0.922432016372681
          },
          "lineItems": [
            {
              "rowId": 1,
              "amount": {
                "value": 272.88,
                "rawValue": "272.88 EUR",
                "page": 1,
                "bbox": {
                  "xMin": 7.2107,
                  "yMin": 4.822,
                  "xMax": 7.9079,
                  "yMax": 4.9366
                },
                "confidence": 0.863525277251005
              }
            }
          ]
        }
      }
    ]
  }

ocrData wird typischerweise an eine Variable gebunden.
Bei Verwendung des DocumentViewers in contributes → workflow wird ocrData automatisch an die Variable std_proc_be_ocr_result gebunden, sofern diese existiert.

Table

Komponente zur tabellarischen Darstellung von Daten.

Name des ControlType: table

Eigenschaften von table

typeDetails?	(optional) - Definition der Tabelle
data?	(optional) - Liste von Datensätzen
isReadOnly?	(optional) - Definiert, ob die Tabelle nur lesend dargestellt wird.
highlight?	(optional) - Komplexes Objekt zur Definition des Highlighting. Hierbei steht die Variable `dataSet` zu Verfügung. `dataSet` enthält die Daten des Datensatzes, für den die `highlight`-Eigenschaft berechnet wird.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Eigenschaften von typeDetails

columns

Liste von Spaltendefinitionen

Eigenschaften von Objekten in der columns Liste

label?	(optional) - Anzeigename der Spalte
propertyName?	(optional) - Name der Property aus data, welche in dieser Spalte angezeigt wird.
type?	(optional) - Typ der Spalte: text integer date datetime toggle amount dropdown memo
sortable?	(optional) - Gibt an, ob die Spalte sortierbar ist.
searchable?	(optional) - Gibt an, ob in der Spalte gesucht werden kann.
visible?	(optional) - Gibt an, ob die Spalte sichtbar ist.
width?	(optional) - Gibt die Breite der Spalte an.
highlight?	(optional) - Komplexes Objekt zur Definition des Highlighting. Hierbei steht die Variable `dataSet` zu Verfügung. `dataSet` enthält die Daten des Datensatzes, für den die `highlight`-Eigenschaft berechnet wird.
isReadOnly?	(optional) - Definiert, ob die Spalte nur lesend dargestellt wird.
sortIndex?	(optional) - Definiert die Sortierpriorität dieser Spalte.
sortOrder?	(optional) - Definiert die Standard-Sortierreihenfolge.

Beispiel:

YAML

controlType: table
typeDetails:
  columns:
    - label: Textspalte
      propertyName: text_field
      type: text
      width: 150px
    - label: Nummernspalte
      propertyName: numeric_field
      type: number
      sortable: true
      searchable: false
data:
  - text_field: Reihe 1
    numeric_field: 1337
  - text_field: Reihe 2
    numeric_field: 4711

CustomControl

Die CustomControl Komponente kann verwendet werden, um beliebige Elemente innerhalb eines iFrames anzuzeigen. Sofern für eine GUI-Anforderung kein fertiges GUI-Control existiert, kann mit diesem Control eine individuelle Komponente mit Hilfe von HTML/CSS/JS aufgebaut werden.

Bei der Erstellung eines CustomControls sind folgende Punkte zu beachten:

In der package[.install].yaml wird unter objects.customControls eine Liste mit custom Definitionen eingeführt.
Im Ordner .objects.customControls wird ein neuer Ordner mit dem Namen des CustomControls erstellt. In diesem können dann die html, js und css Dateien hinterlegt werden.
Soll eine externe Seite als iFrame eingebunden werden, so muss lediglich in der custom Definition die URL angegeben werden.

Name des ControlType: custom

Eigenschaften von custom in der package[.install].yaml

name	Name des CustomControls. Dieser muss dem Ordnernamen in `.objects.customControls` entsprechen.
description?	(optional) - Beschreibung der Komponente
url?	(optional) - Standardmäßig wird auf die `index.html` des CustomControls verwiesen. Mit `/xyz.html` kann auf eine andere Startseite verwiesen werden. Bei einem externen CustomControl ist die Angabe der vollständigen URL notwendig.

Beispiel:

YAML

customControls:
  - name: demoCustomControl
    description: CustomControl mit Kommunikation zwischen Page und iFrame

Eigenschaften von customControl in der page

name	Name des CustomControls. Dieser muss dem Ordnernamen in `.objects.customControls` entsprechen.
id	ID des CustomControls. Wird für die Kommunikation zwischen Page und iFrame benötigt.
width?	(optional) - Breite der Komponente. Wird direkt an die `width`-property vom iFrame gebunden.
height?	(optional) - Höhe der Komponente. Wird direkt an die `height`-property vom iFrame gebunden.
events?	(optional) - Definition der Events des CustomControls.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Eigenschaften von events

receiveMessage

Aktion, die beim Erhalt einer Nachricht vom zugehörigen CustomControl ausgeführt wird:

$script: JavaScript ausführen
$backend: Codeblock ausführen
$page: Auf eine Page navigieren
$navigation: Auf ein Standardmodul des Portals navigieren
$command: Command ausführen

Die Kommunikation zwischen iFrame und Page ist nur bei selbst definierten iFrames möglich. Sollte eine Kommunikation zu einem externen iFrame benötigt werden, so kann dies in ein CustomControl eingebettet und darin die Kommunikation abgewickelt werden.

Beispiel eines CustomControls mit Kommunikation zum iFrame in einer Page:

YAML

controlType: custom
name: demoControl
id: demoCustomControlId
width: 300px
height: 400px
events: 
  receiveMessage:
    $script: |
      if ($.message.startsWith('Init abgeschlossen')) {
        debug.log('Nachricht vom iFrame erhalten');
      }
...
controlType: button
label: SendMessageToCustomControl
events:
  click:
    $script: |
      $.customControl('demoCustomControlId').postMessage($.variables.testVar);

Beispielhafte Implementierung einer JavaScript-Datei für die Kommunikation mit der Page. Die page.js-Datei wird automatisch generiert und sorgt dafür, dass die Nachricht an das entsprechende Element in der Page gesendet wird.

JSX

import { page } from "./page.js";

window.addEventListener("message", (event) => {
  var messageContent = event.data;
});

page.sendMessage("Nachricht vom CustomControl an die Page");

TreeView

Element zur Darstellung von hierarchischen Daten in einer Baumstruktur im Grid.

data	Datenquelle für die Tabelle. Die Datenquelle muss per `$bind` an eine `entitySet` Variable gebunden werden.
parentKeyExpression	Ausdruck, der den Schlüsselwert des Elternelements eines Elements in der Datenquelle zurückgibt
displayExpression?	(optional) Names des Feldes das zur Anzeige verwendet wird. Default ist die `keyEpxpression`

Beispiel:

YAML

- controlType: treeView
  data:
    $bind: hierachischeDaten
  keyExpression: recordId
  parentKeyExpression: parentRecordId

TreeList

Das TreeView stellt eine flache Liste hierachische in einem Grid dar.

Die TreeList unterstützt die gleichen Eigenschaften wie auch das entityGrid.

Des weiteren können folgende Eigenschaften definiert werden:

keyExpression	Ausdruck, der den Schlüsselwert eines Elements in der Datenquelle zurückgibt
parentKeyExpression	Ausdruck, der den Schlüsselwert des Elternelements eines Elements in der Datenquelle zurückgibt
autoExpandAll?	(optional) Alle Reihen laden und geöffnet darstellen

Beispiel:

YAML

- controlType: treeList
  data:
    $bind: hierachischeDaten
  keyExpression: recordId
  parentKeyExpression: parentRecordId
  autoExpandAll: true
  columnDefinition:
    - recordId:
        label: Datensatz ID
    - parentRecordId:
        label: ID des Vorfahren
    - anotherField
        visible: false

Sonstige Controls

Button

Komponente zum Auslösen von commands bzw. events. Ist bei einem Button entweder in command oder unter events → click → $command ein nicht berechtigter Command hinterlegt, wird der Button nicht dargestellt.

Name des ControlType: button

Eigenschaften von button

label	Anzeigetext des Buttons. Wenn anstelle eines Texts nur ein Icon benötigt wird, kann alternativ nur die `icon` Eigenschaft angegeben werden.
color?	(optional) - Wert der im Input hinterlegt ist. Kann sowohl ein Konstanter Wert sein, als auch eine Bindung an eine Variable, wobei sich der Input Wert aktualisiert, wenn die Variable geändert wird. danger normal primary success
icon?	(optional) - Name des Icons, welches im Button angezeigt wird. Entweder existierendes Custom-Icon oder DevExtreme-Icon
disabled?	(optional) - Gibt an ob der Button nicht klickbar sein soll. Standardwert: `false`
size?	(optional) - Angabe der Größe des Controls (z.B. 'px', '%', 'em', ...). Bei Verwendung in einem `inputContainer` kann auch `fit` angegeben werden, damit nur der tatsächlich benötigte Platz eingenommen wird.
disableOnAction?	(optional) - Angabe, ob der Button während der Ausführung des Klick-Events deaktiviert werden soll. Standardwert: `true`
events?	(optional) - Definition der Events des Buttons
command?	(optional) - Schnellschreibweise für ein `click`-Event, bei dem ein Command ausgeführt wird. Hierbei wird das `label` des Command im Button dargestellt, sofern kein `label` für den Button definiert wurde.
align?	(optional) - Ausrichtung innerhalb einer `toolbar` before center after
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling
hint?	(optional) - Möglichkeit dem Button einen Tooltip zu verpassen. mögliche Parameter: text: Anzeigetext des Tooltips, auch mehrzeilig align: Ausrichtung des Textes im Tooltip (left, center, right) - optional position: Position des Tooltips (left, right, top, bottom) - optional fontSize: Größe des Anzeigetexts, Angabe CSS-typisch - optional

Eigenschaften von events

click

Aktion, die beim Klick auf den Button ausgeführt wird

$script: JavaScript ausführen
$backend: Codeblock ausführen
$page: Auf eine Page navigieren
$navigation: Auf ein Standardmodul des Portals navigieren
$command: Command ausführen

Beispiel:

YAML

controlType: button
label: be Portal Button
disabled:
  $expr: |
    $.variables.button_disabled || false;
color: success
icon: be-blue

ButtonGroup

Komponente zum visuellen Zusammenfassen von Buttons.

Name des ControlType: buttonGroup

Eigenschaften von buttonGroup

buttons	Liste von Button-Definitionen
align?	(optional) - Ausrichtung innerhalb einer `toolbar` before center after
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling
value?	(optional) Gibt den ausgewählten Wert der ButtonGroup an
selectionMode	(optional) Legt den selectionMode fest Mögliche Werte: `none`: Keine Selection der Button. `single`: Selection eines Buttons der Gruppe deselektiert andere Button der Gruppe `multiple`: Mehrfachauswahl Im Falle von `single` sollte der value ein Scalar sein; im Falle von `multiple` ein Array.

Beispiel:

YAML

- controlType: toolbar
  controls:
  - controlType: buttonGroup
    align: before
    buttons:
      - label: ToolbarButton1
      - label: ToolbarButton2
- controlType: buttonGroup
  buttons:
    - label: Button1
    - label: Button2

Eigenschaften von buttons

value?	(optional) Gibt den Wert des Buttons an
label?	(optional) Anzeigetext des Buttons. Wenn anstelle eines Texts nur ein Icon benötigt wird, kann alternativ nur die `icon` Eigenschaft angegeben werden.
color?	(optional) - Wert der im Input hinterlegt ist. Kann sowohl ein Konstanter Wert sein, als auch eine Bindung an eine Variable, wobei sich der Input Wert aktualisiert, wenn die Variable geändert wird. danger normal primary success
icon?	(optional) - Name des Icons, welches im Button angezeigt wird. Entweder existierendes Custom-Icon oder DevExtreme-Icon
disabled?	(optional) - Gibt an ob der Button nicht klickbar sein soll. Standardwert: `false`
disableOnAction?	(optional) - Angabe, ob der Button während der Ausführung des Klick-Events deaktiviert werden soll. Standardwert: `true`
events?	(optional) - Definition der Events des Buttons
command?	(optional) - Schnellschreibweise für ein `click`-Event, bei dem ein Command ausgeführt wird. Hierbei wird das `label` des Command im Button dargestellt, sofern kein `label` für den Button definiert wurde.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling
hint?	(optional) Gibt über die Eigenschaft `text` den Text an, der beim halten der Maus über den Button, angezeigt wird

Label

Textelement zur Beschreibung eines Eingabefeldes.

Name des ControlType: label

Eigenschaften von label

value	Anzuzeigender Text
labelSize?	(optional) - Angabe zur Größe des Labels small normal large
highlight?	(optional) - Komplexes Objekt zur Definition des Highlighting.
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

controlType: label
value: be Portal Label

Text

Einfaches Textelement zur Darstellung von stylebaren Texten.

Name des ControlType: text

Eigenschaften von text

value	Anzuzeigender Text
textAlignment?	(optional) - Ausrichtung des Texts left center right
fontWeight?	(optional) - Stärke der Schrift lighter normal bolder
fontSize?	(optional) - Größe der Schrift (Angabe in rem)
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

controlType: text
value: be Portal Text
textAlignment: center
fontWeight: bolder
fontSize: 1.2

Alert

Alert-Box mit Text und/oder Icon, um den Benutzer auf eine Statusmeldung aufmerksam zu machen.

Name des ControlType: alert

Eigenschaften von alert

text?	(optional) - Anzeigetext des Alerts
color?	(optional) - Farbe des Alerts success info warning danger
showIcon?	(optional) - Gibt an, ob im Alert ein der Farbe entsprechendes Icon angezeigt wird. Standardwert: `false`
isVisible?	(optional) - Gibt an, ob der Alert sichtbar ist. Standardwert: `true`
isClosable?	(optional) - Gibt an, ob der Alert einen X-Button besitzt, über welchen der Alert geschlossen werden kann. Standardwert: `false`
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

controlType: alert
color: success
showIcon: true
isVisible: true
isClosable: false
text: Dies ist ein Success-Alert

Element, welches Buttons zum Ausführen von Aktionen enthält.

Name des ControlType: toolbar

Eigenschaften von toolbar

controls?	(optional) - Liste von Buttons in der Toolbar
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling
isFilterControls?	(optional) Setzt isFilterControls für enthaltene Input Controls. Default: true

Beispiel:

YAML

- controlType: toolbar
  controls:
  - controlType: button
    label: Button 1 
    align: before

Separator

Element, welches Bedienungselemente innerhalb einer Toolbar visuell voneinander abgrenzt.

Name des ControlType: separator

Eigenschaften von separator

align?	(optional) - Ausrichtung innerhalb einer `toolbar` before center after
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Beispiel:

YAML

- controlType: toolbar
  controls:
  - controlType: button
    label: Button 1
    align: center
  - controlType: separator
    align: center
  - controlType: button
    label: Button 2
    align: center

FileUpload

Verfügbar ab be Portal Version 6.1.0

Eingabeelement zum Hochladen von Dateien.

Name des ControlType: fileUpload

Eigenschaften von fileUpload

storageUuid	UUID des zu verknüpfenden DMS-Speichers
size?	(optional) - Angabe der Größe des Controls z.B. 100px
selectFileLabel?	(optional) - Anzuzeigender Text für den Datei-Upload-Button Standardwert: “Datei auswählen”
accept?	(optional) - Voreingestellte Dateitypen im MIME-Format, z.B.: `image/` für Bilder `application/pdf` für PDF-Dateien `application/pdf, image/` für PDF-Dateien und Bilder
instantUpload?	(optional) - Angabe, ob die Datei sofort nach der Auswahl hochgeladen wird. Standardwert: `false`
dropZoneEnabled?	(optional) - Gibt an, ob das Einfügen einer Datei per Drag & Drop möglich ist. Standardwert: `true`
dropZoneText?	(optional) - Text, der beim Drag & Drop in der Drop-Zone angezeigt wird. Standardwert: `Datei hier ablegen`
disabled?	(optional) - Angabe, ob das Upload-Control deaktiviert ist. Standardwert: `false`
events?	(optional) - Definition der Events des Buttons
visible?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es dennoch aufgebaut.
exists?	(optional) - Gibt an, ob das Element angezeigt wird. Technisch wird es nicht aufgebaut.
style?	(optional) - Angabe von individuellem Styling

Eigenschaften von events

upload

Aktion, die nach dem Hochladen einer Datei ausgeführt wird. Folgende Aktionen können ausgeführt:

$script: JavaScript ausführen
$command: Command ausführen

Im Objekt $.event.data stehen folgende Informationen bereit:

successful: (boolean) Gibt an, ob das Hochladen erfolgreich
uuid: (string) UUID der hochgeladenen Datei (sofern erfolgreich)
errorCode: (number) Fehlercode (sofern fehlerhaft)
errorMessage: (string) Fehlermeldung (sofern fehlerhaft)

Beispiel:

YAML

controlType: fileUpload
selectFileLabel: Auswählen
accept: application/pdf, image/png
storageUuid: <uuid>
instantUpload: false
disabled: false
dropZoneText: Datei ablegen
events:
  upload:
    $script: |
      if ($.event.data.successful) {
        notify.success('File uploaded: ' + $.event.data.uuid);
      } else {
        notify.error('Upload failed: ' + $.event.data.errorCode + ' - ' + $.event.data.errorMessage);
      }

Chart

Element, welches eine oder mehrere Datenmengen in einer gewählten Diagrammart visuell darstellt.

Name des ControlType: chart

Eigenschaften von chart

type

Gibt an, in welcher Diagrammart die Daten dargestellt werden sollen. Folgende Diagramm-Typen von DevExpress werden aktuell unterstützt:

pie (nur eine Datenmenge)
bar*
area*
steparea
scatter
line*
stepline
spline*
splinearea*

* Können mit der Vorsilbe stacked/fullstacked Datenmengen übereinander gestapelt / gestapelt als Verteilung von 100% darstellen.

Bsp: fullstackedarea

data

Definiert die Datenmenge(n) welche im Diagramm dargestellt werden. Kann entweder direkt als Array angegeben werden oder es werden die Items einer Variablen mit$bind/$expr daran gebunden.

height?

(optional) - Setzt eine feste Größe des Diagramms als CSS-String.

Eigenschaften von data

label	Definiert die Bezeichnung, welcher der Datensatz zugeordnet wird (X-Achse).
value	Gibt den Wert des Datensatzes an (Y-Achse).
series?	(optional) - Ordnet den Datensatz einer Datenmenge zu. Wird dieses Property einmal gesetzt, müssen alle Datensätze im Diagramm dieses Property enthalten, damit sie dargestellt werden.

Beispiel mit statischen Daten:

YAML

- controlType: chart
  type: stackedbar
  height: 280px
  data:
    - label: ort1
      value: 10
      series: datenmenge1
    - label: ort2
      value: 20
      series: datenmenge1
    - label: ort1
      value: 5
      series: datenmenge2
    - label: ort2
      value: 5
      series: datenmenge2

Beispiel mit $bind:

YAML

...
data:
  variables:
    chartData_Set:
      type: entitySet
      source: odata
      entity: DEMO_ChartData_Entity
      events:
        onLoaded:
          $script: |
            let items = $.variables.chartData_Set.$.items();
            let transformedItems = items.map(item => ({
                label: item.label_column,
                value: item.value_column,
                series: item.group_column
              }));
            $.variables.chartData_Set_Items = transformedItems;
    chartData_Set_Items:
      type: string
controls:
- controlType: entityGrid
  visible: false
  data:
    $bind: chartData_Set
- controlType: chart
  type: stackedbar
  height: 280px
  data:
    $bind: chartData_Set_Items

Zu beachten:

Die Items des EntitySet müssen an das Diagramm gebunden werden (s. Zeile 11, 29)
Das EntitySet muss zusätzlich immer an ein entityGrid gebunden werden, damit es geladen wird
(das Grid kann unsichtbar sein) (s. Zeile 21-24)
Die Attribute der Daten müssen immer entsprechend label, value und series heißen. Dies kann beispielsweise über eine Mapping-Funktion im JavaScript passieren (s. Zeile 12-16)

RadioGroup

Komponente zur Auswahl eines Radio Buttons in einer Gruppe

Name des ControlType: radioGroup

Eigenschaften von radioGroup

selectOptions	Liste von `value` und `label` Objekten, welche als Radio-Buttons zur Auswahl stehen
value	Definiert den Wert des ausgewählten Radio-Buttons. Variablen können mit`$bind`/`$expr` daran gebunden.
flow?	(optional) - Ausrichtung der Controls im Container vertical horizontal
hint?	(optional) - Gibt den Text an, der beim halten der Maus über die `radioGroup` , angezeigt wird
disabled?	(optional) - Gibt an ob die Komponente deaktiviert ist Standardwert: `false`
readonly?	(optional) - Gibt an ob die Auswahl geändert werden kann. Die Komponente selber ist aktiv. Standardwert: `false`

Beispiel:

YAML

data:
  variables:
    radioGroupValue:
      type: string
      value: a
controls:
  - controlType: radioGroup
    value: 
      $bind: radioGroupValue
    selectOptions:
      - label: A
        value: a
      - label: B
        value: b
      - label: C
        value: c
  - controlType: text
    value:
      $bind: radioGroupValue

htmlEditor

Element zum Anzeigen von HTML snippets. Im Editierbaren Modus mit zusätzlicher Toolbar

Name des ControlType: htmlEditor

Eigenschaften von htmlEditor

content?	(optional) - Definiert die zur Anzeige kommenden Daten. Dies kann entweder HTML Quelltext als `string` sein, oder ein Variable mithilfe von `$bind`.
readonly?	(optional) - Definiert ob der Editor editierbaren Inhalt darstellen soll, oder nur darstellbar fungieren soll. Ein aktivieren von readonly entfernt hierbei außerdem die Toolbar des Editors. Default: `true`
toolbar?	(optional) - Erweitere Einstellungen für die Toolbar. Für die Details siehe unten.
style?	(optional) - Festlegungsmöglichkeiten von `style.height` und `style.width` des Editors. Default: `style.heigth = 725px`, `style.width = "no limit"` (durch verfügbarem Platz beschränkt)

Beispiel (ohne Toolbar Advanced Settings):

CODE

data:
  variables:
    htmlContent:
      type: string
      value: <h1>Super Lifehack</h1> <br> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Go here</a>
      
controls:
  - controlType: htmlEditor
    readonly: false
    style:
      height: 200px
      width: 200px
    content:
      $bind: htmlContent

Erweitere Toolbareinstellungen

Die Toolbar kann weiterangepasst werden. Ist der Editor auf readonly wird die Toolbar nicht angezeigt und hier gemachte Einstellungen haben keinen Effekt.

multiline?	(optional) - Darstellung von mehrzeiliger Buttonbar bei unzureichender Breite durch Setzen auf `true`. Ist dieser Modus nicht aktiv werden Toolbarelemente, die nicht in die Toolbar passen durch ein Kontextmenü erreichbar sein. Default: `false`
removeDefaultGroups?	(optional) - standardmäßig gibt es eine Standardanordnung innerhalb der Toolbar, die durch `groups`(s.u.) angepasst werden. Durch setzen auf `true`werden alle Button entfernt und können dort komplett gesetzt werden.
groups?	(optional) - Einstellung von Toolbargruppen `name`: Name einer Gruppe `index?: number`: index an die die Gruppe verschoben wird `serparator?: bool`: Entfernt separator strich nach der Gruppe `include?: array(elemente)`: verschiebt ein element aus einer anderen Gruppe in diese Gruppe
disabled?	(optional) - Liste von Gruppen / Elementen, die aus der Toolbar entfernt sollen.
header? font? fontSize?	(optional) - Abweichungen der Standardauswahlmöglichkeiten: `add?`: Liste von Werten, die der Standardauswahl zugefügt werden `remove?`: Liste von Werten, die der Standardauswahl entfernt werden `values?`: Liste von Werten die ausgewählt werden können. (Ignoriert `add` & `remove`) `options?`: Key-Value pairs als Optionen des jeweiligen SelectItems. z.B. `placeholder` & `width`
imageUpload?	(optional) - Legt bei vorhandensein des `image` Elements fest von wo Bilder eingefügt werden können. Mögliche Werte sind: file url both Standardwert: `both`

Standardelemente und ihre technischen Bezeichner und Sortierung

historyControl
- undo
- redo
alignment
- alignLeft
- alignRight
- alignJustify
textStyle
- bold
- italic
- strike
- underline
fontSettings
- font
  - values: [Arial, Courier New, Georgia, Impact, Lucida Console, Tahoma, Times New Roman, Verdana
- size
  - values: ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']
- color
- background
lists
- orderedList
- bulletList
external
- link
- image
table
- insertTable
- deleteTable
- insertRowAbove
- insertRowBelow
- deleteRow
- insertColumnLeft
- insertColumnRight
- deleteColumn
misc
- clear
- header
  - values: [false, 1, 2, 3, 4, 5,]
- subscript
- superscript
- increaseIndent
- decreaseIndent

Beispiel:

CODE

controls:
  - controlType: htmlEditor
    content: 
     $bind: someVariable
    readonly: true
    toolbar:
      multiline: true
      removeDefaultGroups: false
      groups:
       - name: fontSettings
         # move fontSetting to the end of toolbar
         index: 8
         # move some elemets from textStyle and table into fontSettings
         include:
           - insertColumnLeft
           - underline
           - bold
           - strike
       - name: misc
         # remove separator at end of misc
         separator: false 
      
      # disable rest of textStyle and table group and superscript/subscript elements
      disabled:
        - textStyle
        - table
        - superscript
        - subscript
      
      # overwrite default selectable fonts
      font:
        values: [Arial, Courier New]
      
      # modify selectable fontSizes 
      fontSize:
        remove: [12pt, 14pt]
        add: [3pt]
        options:
          placeholder: Make ur font great again
          width: 200px
      
      # do not allow image insertion from external links
      imageUpload: file

Das obige Beispiel würde folgendes Ergebnis liefern

ausgeführte Besipielkonfiguration der HTML Editor Toolbar

Anmerkung zur Sortierung von Toolbargruppen

Ausgehend von der Standardordnung (bei removeDefaultGroups = false ) oder der Sortierung durch Reihenfolge, wie sie unter groups angegeben sind (bei removeDefaultGroups = true ) werden die Gruppen sequentiell angewendet und an den angegebenen Index verschoben. Dies kann daher die Position der bereits abgearbeiteten Gruppen wieder ändern. Dies sollte bei Erstellung der Konifuration berücksichtigt werden.
Ist der angegebene Index größer als die Anzahl der verfügbaren Gruppen wird die Gruppe ans Ende angehängt.
Der Separator der letzten Gruppe wird stets entfernt.

richEditor

Element zum Anzeigen von RTF Dateien.

Name des ControlType: richEditor

Eigenschaften von richEditor

content?	(optional) - Definiert die zur Anzeige kommenden Daten. Dies kann entweder der Inhalt einer RTF Datei als `string` sein oder eine Variable mithilfe von `$bind`.
readonly?	(optional) - Definiert, ob der Inhalt des Editors nur lesbar ist. Default: `false`
hideRibbon?	(optional) - Erweitere Einstellungen für die Toolbar. Für die Details siehe unten. Default: `false`
style?	(optional) - Festlegungsmöglichkeiten von `style.height` und `style.width` des Editors.
viewType?	(optional) - Festlegungsmöglichkeit des ViewTypes. Möglich sind die Werte `PrintLayout` (ähnlich Wordpad) und `Simple` (ähnlich Notepad; weißes Feld) Default: `Simple`

Beispiel:

CODE

controls:
  - controlType: richEditor
    readonly: true
    hideRibbon: true
    viewType: PrintLayout
    style:
      width: 400px
      height: 350px
    content: '{\rtf1\ansi\ansicpg1252\deff0\nouicompat\deflang1031{\fonttbl{\f0\fnil\fcharset0 Calibri;}} {\*\generator Riched20 10.0.22621}\viewkind4\uc1 \pard\sa200\sl276\slmult1\f0\fs22\lang7 Dies ist ein formatierter Text\par}'

Progressbar

Element zur visuellen Anzeige eines Fortschritts.

Name des ControlType: progressbar

Eigenschaften von progressbar

min?	(optional) - Definiert den Minimalwert der Progressbar. Default: `0`
max?	(optional) - Definiert den Maximalwert der Progressbar Default: `100`
value	Definiert den aktuellen Wert der Progressbar
events?	(optional) - Definition der Events des Buttons
label?	Anzeigetext unter der Progressbar. Default: `Fortschritt: xx%` Der aktuelle Wert kann über die `progress`- Variable aus dem `value` ausgegeben werden.
color?	Definiert die Färbung einer Progressbar. Es sind sowohl die Default-Farben `success, info, primary, default, danger, warning`, als auch eine Vielzahl an neuen Farben möglich.

Eigenschaften von events

complete

Aktion, die beim Abschließen der Progressbar ausgeführt wird.

Beispiel:

YAML

data:
  variables:
    progress:
      type: number
      value: 0
controls:
  - controlType: progressbar
    value: 
      $bind: progress
    events:
      complete:
        $script: |
          $.notify.info('Fertig')
    color:
      $statement: |
        if ($.variables.progress > 50) {
          return 'warning'; 
        }
        else {
          return 'purple-accent0';
        }
    label:
      $statement: |
        return "Der aktuelle Fortschritt beträgt: " + $.variables.progress + " %"

Highlighting

Eigenschaften von highlight

color	Farbkonstante der Hervorhebung. Mögliche Farben sind: info success warning danger inverse neutral primary
condition?	(optional) - Boolscher Wert oder Expression. Wenn `false` wird das Highlighting nicht angezeigt.
text?	(optional) - Hinweistext, der beim Hovern über das Control angezeigt wird.
showHintIcon?	(optional) - Definiert, ob das Info-Symbol bei vorhandenem Hinweistext angezeigt wird.
target?	(optional) - Angabe, welches Element hervorgehoben wird: Input: Nur das Eingabefeld wird hervorgehoben Label: Nur das Label wird hervorgehoben Control: Das ganze Element, bestehend aus Input und Label, wird hervorgehoben
style?	(optional) - Angabe des Hervorhebungsstils. Bottom: Element wird unterstrichen Box: Element wird eingerahmt Fill: Der Hintergrund des Elements wird gesetzt

Scripting

Viele der Eigenschaften, die durch primitive Typen definiert werden, können sowohl durch einen konstanten Wert als auch über eine Variable oder auch über dynamischen JavaScript-Code gesetzt werden.

Beispiel:

Ein Button zum Ein- und Ausbuchen soll je nach aktuellem Anwesenheitsstatus grün oder blau sein und ein entsprechendes Label haben.

YAML

controlType: button
label:
  $expr: |
    $.variables.benutzer_ist_eingebucht ? 'Gehen' : 'Kommen'
color:
  $statement: |
      const istEingebucht = $.variables.benutzer_ist_eingebucht;
      if (istEingebucht) {
        return 'primary'; // blau
      } else {
        return 'success'; // grün
      }

Wenn $statement angegeben ist, kann ein mehrzeiliges JavaScript definiert werden, das am Ende mit return einen Wert zurückgibt.

Wenn $expr angegeben ist, wird der Wert automatisch per return zurückgegeben.

Eine detaillierte Beschreibung der Javascript Einbindung finden Sie hier: Javascript im Frontend

Individuelles Styling

Auf einer Page und den meisten Controls kann die Eigenschaft style definiert werden, um individuelles Styling für diese (und ggf. untergeordnete Elemente) zu definieren.

Eigenschaften von style:

backgroundImage?	(optional) - Setzt ein Hintergrundbild. Diese Eigenschaft ist nur eingeschränkt verfügbar (Page, `container`, `tabs` in einem `tabContainer`, `entityContainer`, `pageContainer`).
backgroundColor?	(optional) - Setzt die Hintergrundfarbe des Elements.
width?	(optional) - Setzt die Breite des Elements.
height?	(optional) - Setzt die Höhe des Elements.
fontSize?	(optional) - Setzt die Schriftgröße des Elements. Wird bei `$bind` und `string` an Unterelemente vererbt. Dynamische Ausdrücke werden aus Performancegründen nur an gesetzter Stelle berücksichtigt und in der Vererbungslogik ausgelassen.
color?	(optional) - Setzt die Schriftfarbe des Elements. Wird bei `$bind` und `string` an Unterelemente vererbt. Dynamische Ausdrücke werden aus Performancegründen nur an gesetzter Stelle berücksichtigt und in der Vererbungslogik ausgelassen.

Eigenschaften von backgroundImage:

dmsUuid	Angabe einer UUID einer Datei im DMS, die als Hintergrundbild geladen werden soll. Alternativ kann die Eigenschaft `url` gesetzt werden.
url	Angabe einer URL zu einem Bild, das als Hintergrundbild geladen werden soll. Alternativ kann die Eigenschaft `dmsUuid` gesetzt werden.
size?	(optional) - CSS-Angabe der Größe (entspricht `background-size`).
repeat?	(optional) - CSS-Angabe der Wiederholung (entspricht `background-repeat`).
position?	(optional) - CSS-Angabe der Position (entspricht `background-position`).
attachment?	(optional) - CSS-Angabe der Befestigung (entspricht `background-attachment`).