code samples

api/collections/democol.yml

@@ -21,15 +21,26 @@ fields:
     - !include fields/date.yml
     - !include fields/content.yml
     - !include fields/info.yml
+    - !include fields/isEmployed.yml
+    - !include fields/profilePic.yml
+    - !include fields/skills.yml
+    - !include fields/supervisor.yml
+    - !include fields/tags.yml
+    - !include fields/gender.yml
+    - !include fields/emplymentDetails.yml
+    - !include fields/description.yml
+    - !include fields/age.yml
+    - !include fields/additionalData.yml
 
 # Neben der Definition der Indexe innerhalbd des Feld-Objektes selbst,
+
 # ist die Index-Definition global für die Kollektion auch hier möglich.
 # Diese Definition ist z.B. für zusammengesetzte Index-Typen notwendig.
 # Außerdem sind hier feinere Einstellungen für den Index möglich.
 
 # Mehr dazu im "indexes" Kapitel
-# indexes: 
-    # - !include democol/textindex.yml
+# indexes:
+# - !include democol/textindex.yml
 
 # Standardsprache für Text-Index in der Datenbank
 defaultLanguage: de
@@ -212,4 +223,4 @@ imageFilter: !include democol/imageFilter.yml
 # "meta" Objekt möglich und nötig für die Konfiguration des
 # tibi-admin.
 # Mögliche Angaben werden im seperaten Kapitel behandelt.
-meta: !include democol/meta.yml
+meta: !include democol/meta.yml

api/collections/democol/tablist.yml

@@ -17,6 +17,16 @@ tabs:
           - source: type
           - source: title
           - source: date
+          - source: additionalData
+          - source: age
+          - source: description
+          - source: paymentValues
+          - source: gender
+          - source: isEmployed
+          - source: profilePic
+          - source: skills
+          - source: supervisor
+          - source: tags
     - name: content
       label:
           de: Inhalt

api/collections/fields/additionalData.yml

@@ -0,0 +1,5 @@
+name: additionalData # Name des Eingabefelds.
+type: object # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Zusätzliche Daten", en: "Additional Data" } # Feldlabel.
+    widget: jsonField # Verwendetes Widget.

api/collections/fields/age.yml

@@ -0,0 +1,5 @@
+name: age # Name des Eingabefelds.
+type: int # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Alter", en: "Age" } # Feldlabel.
+    widget: number # Verwendetes Widget.

api/collections/fields/description.yml

@@ -0,0 +1,5 @@
+name: description # Name des Eingabefelds.
+type: string # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Beschreibung", en: "Description" } # Feldlabel.
+    widget: richtext # Verwendetes Widget.

api/collections/fields/emplymentDetails.yml

@@ -0,0 +1,32 @@
+name: paymentValues # Name des Eingabefelds.
+type: object # Datentyp des Eingabefelds, in diesem Fall ein Objekt.
+meta:
+    label: "Überweisungswerte" # Feldlabel.
+    widget: tabs # Verwendetes Widget. Die tabs Widget wird zur Organisation von komplexen Eingaben in Tab-Form verwendet.
+subFields: # Liste der Unterfelder für jedes Tab.
+    - name: paymentValueObj # Name des Eingabefelds für das erste Tab.
+      type: object[] # Datentyp des Eingabefelds, in diesem Fall ein Array von Objekten.
+      meta:
+          label: Überweisungswerte1 # Tab-Label.
+      subFields: # Liste der Unterfelder für das Tab.
+          - name: paymentValue # Name des ersten Eingabefelds in diesem Tab.
+            type: number # Datentyp des Eingabefelds.
+            meta:
+                label: Überweisungswert1 # Feldlabel.
+          - name: paymentValuee # Name des zweiten Eingabefelds in diesem Tab.
+            type: number # Datentyp des Eingabefelds.
+            meta:
+                label: Überweisungswert2 # Feldlabel.
+    - name: paymentValueObj2 # Name des Eingabefelds für das zweite Tab.
+      type: object[] # Datentyp des Eingabefelds, in diesem Fall ein Array von Objekten.
+      meta:
+          label: Überweisungswerte2 # Tab-Label.
+      subFields: # Liste der Unterfelder für das Tab.
+          - name: paymentValue # Name des ersten Eingabefelds in diesem Tab.
+            type: number # Datentyp des Eingabefelds.
+            meta:
+                label: Überweisungswert1 # Feldlabel.
+          - name: paymentValuee # Name des zweiten Eingabefelds in diesem Tab.
+            type: number # Datentyp des Eingabefelds.
+            meta:
+                label: Überweisungswert2 # Feldlabel.

api/collections/fields/gender.yml

@@ -0,0 +1,23 @@
+name: gender # Name des Eingabefelds.
+type: string # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Geschlecht", en: "Gender" } # Feldlabel.
+    widget: select # Verwendetes Widget.
+    choices: # Auswahlmöglichkeiten.
+        - name: "männlich" # Anzeigename der Auswahl.
+          id: "male" # Wert der Auswahl.
+        - name: "weiblich" # Anzeigename der Auswahl.
+          id: "female" # Wert der Auswahl.
+    chipStyle:
+        backgroundImage: "linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);"
+        color: white
+        textShadow: 0px 0px 4px black
+    #alternative:
+    #choices:
+    #DEPRECATED - FOREIGNKEY STATTDESSEN!
+    #endpoint: content
+    #params:
+    #sort:
+    #mapping:
+    #id: id
+    #name: path

api/collections/fields/isEmployed.yml

@@ -0,0 +1,5 @@
+name: isEmployed # Name des Eingabefelds.
+type: boolean # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Angestellt?", en: "Employed?" } # Feldlabel.
+    widget: checkbox # Verwendetes Widget.

api/collections/fields/profilePic.yml

@@ -0,0 +1,5 @@
+name: profilePic # Name des Eingabefelds.
+type: file # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Profilbild", en: "Profile Picture" } # Feldlabel.
+    widget: file # Verwendetes Widget.

api/collections/fields/skills.yml

@@ -0,0 +1,10 @@
+name: skills # Name des Eingabefelds.
+type: string[] # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Fähigkeiten", en: "Skills" } # Feldlabel.
+    widget: checkboxArray # Verwendetes Widget.
+    choices: # Auswahlmöglichkeiten.
+        - name: "Kochen" # Anzeigename der Auswahl.
+          id: "cooking" # Wert der Auswahl.
+        - name: "Backen" # Anzeigename der Auswahl.
+          id: "baking" # Wert der Auswahl.

api/collections/fields/supervisor.yml

@@ -0,0 +1,19 @@
+name: supervisor # Name des Eingabefelds.
+type: string # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Vorgesetzter", en: "Supervisor" } # Feldlabel.
+    widget: foreignKey # Verwendetes Widget.
+    foreign:
+        collection: medialib # Name der Sammlung, in der die ausgewählten Daten gespeichert sind.
+        id: id # Feldname, das als eindeutige Kennung für die ausgewählten Daten verwendet wird.
+        subNavigation: 1 # Bestimmt, welche Navigation für die Auswahl der ausgewählten Daten angezeigt wird.
+        #projection: xyz
+        #sort: "title"
+        render:
+            raw: true
+            eval: |
+                (function() {
+                    var out = "";
+                    out += "<div style=\"color: #999;\">" + $foreignEntry.title + "</div>";
+                    return out;
+                })()

api/collections/fields/tags.yml

@@ -0,0 +1,11 @@
+name: tags # Name des Eingabefelds.
+type: string[] # Datentyp des Eingabefelds.
+meta:
+    label: { de: "Tags", en: "Tags" } # Feldlabel.
+    widget: chipArray # Verwendetes Widget.
+    choices: # Auswahlmöglichkeiten.
+        - name: "Tech" # Anzeigename der Auswahl.
+          id: "tech" # Wert der Auswahl.
+        - name: "Wissenschaft" # Anzeigename der Auswahl.
+          id: "science" # Wert der Auswahl.
+    autocomplete: true # Option für Autovervollständigung.

api/collections/fields/title.yml

@@ -4,5 +4,8 @@ meta:
     label:
         de: Titel
         en: Title
+    inputProps:
+        multiline: true
+        placeholder: Ihr Titel
     openapi:
         example: Demo Titel

api/collections/medialib.yml

@@ -96,8 +96,24 @@ meta:
                   (entry) => {
                       parent.selectAsset("medialib/" + entry.id + "/" + entry.file?.src + "?filter=l")
                       parent.focus()
+                  }s
+                  //!js
+
+        - name: modalForeign # Name des Eingabefelds oder der Ansicht.
+          defaultSort: # Standard-Sortierkriterien, die angewendet werden, wenn keine anderen Sortierkriterien spezifiziert sind.
+              field: "path" # Standardmäßig wird nach dem "path"-Feld sortiert.
+              order: "ASC" # Standardmäßig wird in aufsteigender Reihenfolge (ASC) sortiert.
+          views: # Liste der Ansichten, die in diesem Feld angezeigt werden können.
+              - type: table # Es wird eine Tabellenansicht verwendet.
+                columns: # Liste der Spalten, die in der Tabelle angezeigt werden.
+                    - path # Es wird nur die Spalte "path" angezeigt.
+          defaultCallback: # Standard-Callback-Funktion, die ausgeführt wird, wenn keine andere spezifiziert ist.
+              eval: | # Der Code wird als JavaScript evaluiert.
+                  //js
+                  (entry) => {  // Diese Funktion nimmt den Eintrag (entry) als Argument.
+                      parent.selectEntry(entry)  // Die Funktion selectEntry auf dem übergeordneten Objekt wird mit dem Eintrag als Argument aufgerufen.
                   }
                   //!js
 
     openapi:
-        disabled: true
+        disabled: true

docs/md/projektkonfig/collections/fields/widgets.md

@@ -7,171 +7,72 @@ Es ist zu beachten, dass nicht jedes Widget für jeden Datentyp geeignet ist. Im
 ## Texteingabefeld-Widgets: string / text / input
 
 Diese Bezeichnungen stehen alle für dasselbe Widget. Es handelt sich hierbei um ein Texteingabefeld. Dieses Widget wird für den Datentyp String verwendet. Sollte ein größeres Textfeld (Textarea) anstatt eines einfachen Eingabefeldes (Input) gewünscht sein, so kann dies erreicht werden, indem das Attribut multiline im inputProps Objekt auf true gesetzt wird.
-
-```yaml
-- name: firstname
-  type: string
-  meta:
-      label: { de: "Vorname", en: "firstname" }
-      inputProps:
-          multiline: true
-```
+!!!include(../api/collections/fields/title.yml)!!!
 
 ## Numerische Eingabefeld-Widgets: number / int / integer / float / double
 
 Diese unterschiedlichen Bezeichnungen stehen alle für dasselbe Widget. Hierbei handelt es sich um ein Eingabefeld für Zahlen. Es wird für den Datentyp Number verwendet.
+!!!include(../api/collections/fields/age.yml)!!!
 
 ## Auswahl-Widgets: boolean / bool / check / switch / checkbox
 
 Diese verschiedenen Bezeichnungen repräsentieren dasselbe Widget. Dieses Widget wird in Form einer Auswahlbox (Checkbox) dargestellt und wird für den Datentyp Boolean verwendet.
+!!!include(../api/collections/fields/isEmployed.yml)!!!
 
 ## Auswahl-Widgets für mehrere Optionen: select / selectArray
 
 Diese beiden Widgets sind im Prinzip das Gleiche, nur mit unterschiedlichen Namen. Intern wird die Unterscheidung zwischen Mehrfachauswahl (<select multiple>) und einfacher Auswahl (<select>) anhand des Datentyps getroffen. Bei Datentypen mit einem "[]" am Ende wird die Mehrfachauswahl verwendet. Der Einsatz von selectArray ist für String-Arrays vorgesehen, select für einzelne Strings. Aktuell sind nur Strings möglich, da das <option>-Element alle Werte zu Strings konvertiert. Anpassungen sind jedoch bei Bedarf möglich. Es ist wichtig zu beachten, dass das name-Attribut den visuell dargestellten Wert darstellt, während die id den gespeicherten Wert repräsentiert. Wenn choices als Objekt angegeben wird, wird eine Anfrage an den spezifizierten Endpunkt mit den angegebenen Parametern gesendet und das gemappte name-Attribut davon angezeigt. Die id der ausgewählten Elemente wird intern als String gespeichert. Weiterhin ist die Angabe von chipStyle: (style) möglich. Dieser wird als Stil in das Element gerendert und ermöglicht zum Beispiel die visuelle Darstellung von Flaggen.
-
-```yaml
-- name: filesss
-  type: string
-  meta:
-      label: { de: "Dateien", en: "files" }
-      widget: select
-      choices:
-          - name: "name"
-            id: "id"
-          - name: "namee"
-            id: "idd"
-
-- name: ref
-  type: string
-  meta:
-      label: Reference
-      widget: select
-      choices:
-          #DEPRECATED - FOREIGNKEY STATTDESSEN!
-          endpoint: content
-          params:
-              sort: path
-          mapping:
-              id: id
-              name: path
-          chipStyle:
-              backgroundImage: "linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);"
-              color: white
-              textShadow: 0px 0px 4px black
-```
+!!!include(../api/collections/fields/isEmployed.yml)!!!
 
 ## Bezug zu anderen Datenbankeinträgen: foreignKey
 
 Dieses Widget wird verwendet, um eine Referenz zu einem anderen Datenbankeintrag herzustellen. Neben der Angabe von widget: foreignKey gibt es das foreign Attribut, welches die referenzierte Sammlung (collection) angibt. Zudem gibt es ein id Feld, welches die spezifische id für die Sicherheitsüberprüfung angibt. Wird hier "id" angegeben, wird es automatisch auf \_id gemappt, da dies der Name des ID-Feldes in MongoDB ist. Des Weiteren gibt es eine subNavigation, die die Struktur des Modals spezifiziert und neben dem Üblichen a) modal heißen sollte (Konvention) und b) einen defaultCallback haben sollte, der ausgelöst wird, wenn auf den Eintrag geklickt wird. Für die Auswahl gibt es auf dem Fensterobjekt (window Objekt) eine selectEntry Methode, die den ForeignEntry auswählt. Es gibt auch ein sort Attribut, falls die Auswahlmöglichkeiten sortiert werden sollen. Dieses wird einfach an die Anfrage angehängt. Wenn die zurückgegebenen Felder eingeschränkt werden sollen, kann eine Projektion (projection) für die Sammlung spezifiziert werden. Schließlich gibt es das render Attribut, welches ein Objekt ist und ein eval Feld enthält. Hier kann man unter anderem auf $foreignEntry und somit auf alle Werte der ausgewählten Projektion zugreifen. Der zurückgegebene Wert wird schließlich gerendert. Wenn das HTML roh gerendert werden soll, kann das raw Attribut auf true gesetzt werden.
-
-```yaml
-name: page
-type: string
-meta:
-    label:
-        de: Seite
-        en: page
-    widget: foreignKey
-    foreign:
-        collection: content
-        id: id
-        subNavigation: 0
-        projection: dashboard
-        sort: "path"
-        render:
-            raw: true
-            eval: |
-                (function() {
-                    var out = "";
-                    out += "<div style=\"color: #999;\">" + $foreignEntry.path + "</div>";
-                    return out;
-                })()
-```
+!!!include(../api/collections/fields/supervisor.yml)!!!
 
 ## Datums-Widgets: date / dateTime
 
 Diese beiden Widgets können für den Typ "date" verwendet werden. date erzeugt ein <input type="date"> Widget (nur das Datum), während dateTime ein <input type="datetime-local"> Widget erzeugt (Datum und Uhrzeit).
+!!!include(../api/collections/fields/date.yml)!!!
 
 ## Textbearbeitungs-Widgets: richtext / html
 
 Diese beiden Bezeichnungen stehen für dasselbe Widget. Es handelt sich um ein Textfeld (Textarea) mit erweiterten Bearbeitungsmöglichkeiten (ähnlich wie in Word), wobei die Eingabe als HTML in einen String geladen wird. Das HTML kann auch manuell angepasst werden, indem die "source" Checkbox aktiviert wird.
+!!!include(../api/collections/fields/description.yml)!!!
 
 ## Datei-Upload-Widgets: file / image / mediaLibraryFile
 
 Diese verschiedenen Bezeichnungen stehen alle für das gleiche Widget, nämlich <input type=file>. Es wird für den Datentyp File verwendet.
+!!!include(../api/collections/fields/profilePic.yml)!!!
 
 ## Mehrfachauswahl-Widgets: checkboxArray
 
 Hierbei handelt es sich um eine Reihe von Auswahlboxen (Checkboxen). Jede einzelne Auswahlbox spiegelt das Array choices wider. Dies entspricht genau dem, was auch im selectArray geschieht, nur dass es hier anders dargestellt wird.
+!!!include(../api/collections/fields/skills.yml)!!!
 
 ## Eingabe mit Vorschlägen: chipArray
 
 Dieses Widget hat eine ähnliche Funktion wie select, wird jedoch visuell anders dargestellt. Es bietet ein Eingabefeld, in dem nur Elemente akzeptiert werden, wenn ein Objekt im choices Array den gleichen name Wert wie das Eingabeelement hat. Darüber hinaus kann man im meta Objekt autocomplete auf true setzen, um die Autovervollständigung zu aktivieren. Dadurch werden dem Benutzer die möglichen Einträge angezeigt und können direkt ausgewählt werden, was die Benutzerfreundlichkeit erhöht.
-
-```yaml
-name: chipArray
-type: string
-meta:
-    label: "chipArray"
-    widget: chipArray
-    choices:
-        - name: "name"
-          id: "id"
-        - name: "namee"
-          id: "idd"
-    autocomplete: true
-```
+!!!include(../api/collections/fields/tags.yml)!!!
 
 ## object
 
 Dieses Widget erfordert die weitere Angabe von subFields, die außerhalb des meta Objekts spezifiziert werden müssen. Hier werden die Felder angegeben, die in diesem Objekt enthalten sein sollen.
+!!!include(../api/collections/fields/info.yml)!!!
 
 ## objectArray / object[]
 
 Genau das gleiche wie object, nur das hier mehrere Objekte erstellt werden können.
 
+## jsonField
+
+Wird für Daten genutzt, wo man die Struktur nicht absehen kann.
+!!!include(../api/collections/fields/additionalData.yml)!!!
+
 ## tabs
 
 Dieses Widget hat im Prinzip die gleiche Funktion wie dasjenige in der Collection Meta-Konfiguration, ist jedoch etwas anders strukturiert. Ähnlich wie beim object Widget werden subFields verwendet, wobei das label von jedem subField der jeweilige Tab-Name ist. Würde man type auf number setzen, so hätte man in diesem Fall einfach einen Tab mit dem Namen "xyz" und ein number Feld im Tab mit dem gleichen Namen. Sinnvoller ist es natürlich, type auf object zu setzen, um mehrere Felder in einen Tab zu packen.
 
-```yaml
-name: paymentValues
-type: object[]
-meta:
-    label: "Überweisungswerte"
-    widget: tabs
-subFields:
-    - name: paymentValueObj
-      type: object[]
-      meta:
-          label: Überweisungswerte1
-      subFields:
-          - name: paymentValue
-            type: number
-            meta:
-                label: Überweisungswert1
-
-          - name: paymentValuee
-            type: number
-            meta:
-                label: Überweisungswert2
-    - name: paymentValueObj2
-      type: object[]
-      meta:
-          label: Überweisungswerte2
-      subFields:
-          - name: paymentValue
-            type: number
-            meta:
-                label: Überweisungswert1
-
-          - name: paymentValuee
-            type: number
-            meta:
-                label: Überweisungswert2
-```
-
-In diesem Beispiel wird ein object[] Typ mit dem tabs Widget erstellt. Jeder Tab repräsentiert ein Objekt im Array. Innerhalb jedes Tabs können weitere Felder durch SubFields definiert werden. Hier wird beispielhaft ein paymentValueObj mit zwei number Feldern erstellt. Die Benutzer können Werte für diese Felder eingeben und so mehrere paymentValueObj erstellen, die in paymentValues gespeichert werden.
+!!!include(../api/collections/fields/emplymentDetails.yml)!!!
 
 ## contentbuilder - DEPRECATED