generated from cms/tibi-docs
backend & types
This commit is contained in:
@@ -1,43 +0,0 @@
|
||||
# Datentypen
|
||||
|
||||
Via `type` wird der Datentyp des Feldes definiert. Diese Angaben sind für den Tibi Server relevant. Folgende Datentypen sind möglich:
|
||||
|
||||
## string
|
||||
|
||||
String wird für Zeichenketten verwendet. Das Standardwidget ohne weitere Angabe ist bei der Ausgabe die direkte Textausgabe und bei der Eingabe ein HTML `<input ...>` Element mit dem Attribut `type="text"`.
|
||||
|
||||
## number
|
||||
|
||||
Number wird sowohl für ganze Zahlen, wie auch für Gleitkommawerte definiert. Auch hier ist das Standard-Widget für die Eingabe ein HTML `<input ...>` Element, allerdings mit dem Attribut `type="number"`.
|
||||
|
||||
## boolean
|
||||
|
||||
Ein boolcher Wert, also `true` oder `false`, wird über den Typ `"boolean"` definiert und standardmäßig als Checkbox dargestellt.
|
||||
|
||||
## date
|
||||
|
||||
`"date"` als Datentyp kann sowohl Datumsangabe mit, als auch ohne Uhrzeit aufnehmen. Das Standardwidget ist die einfache Datumseingabe ohne Uhrzeit.
|
||||
|
||||
## file
|
||||
|
||||
Der Datentyp `"file"` ist für Dateiuploads vorgesehen. Es daher standardmäßig ein Datei-Auswahl-Dialog als Widget für die Eingabe angeboten.
|
||||
|
||||
## string[]
|
||||
|
||||
Für `"string[]` Arrays ist die Angabe des Widgets zwingend notwendig.
|
||||
|
||||
## number[]
|
||||
|
||||
Auch für `"number[]"` Arrays wird die Widget-Angabe erwartet.
|
||||
|
||||
## object
|
||||
|
||||
`"object"` ist ein spezieller Datentyp der zur Strukturierung der API und der Eingabe dient. Dieser Datentyp fasst `subFields` zusammen.
|
||||
|
||||
## object[]
|
||||
|
||||
Wie `"object"` fasst auch das `"object[]"` Array `subFields` zusammen. Diese allerdings als Liste von Objekten, anstatt als Einzelobjekt.
|
||||
|
||||
## any
|
||||
|
||||
Felder vom Typ `"any"` können beliebige Daten aufnehmen. Die Validierung schlägt auf Basis der Typ-Validierung hier nie fehl.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
@@ -1,97 +0,0 @@
|
||||
# Widgets
|
||||
|
||||
Die Verwendung von Widgets innerhalb der Anwendung tibi-admin dient zur Handhabung von Dateninputs und -outputs. Das genutzte Widget wird über das meta.widget Feld in der Konfiguration spezifiziert. Dabei wird der Name des Widgets als Textzeichenkette (String) angegeben.
|
||||
|
||||
Es ist zu beachten, dass nicht jedes Widget für jeden Datentyp geeignet ist. Im Weiteren werden die kompatiblen Datentypen für jedes Widget aufgeführt. Zusätzlich werden spezielle Konfigurationsmöglichkeiten für jedes Widget erläutert.
|
||||
|
||||
## 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.
|
||||
!!!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 und einfacher Auswahl 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 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.
|
||||
!!!include(../api/collections/fields/gender.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.
|
||||
|
||||
!!!include(../api/collections/fields/image.yml)!!!
|
||||
!!!include(../api/collections/medialib.yml)!!!
|
||||
|
||||
Setzt man defaultCollectionViews auf true, so könnte das ergebnis wie folgt aussehen:
|
||||
|
||||
|
||||
## Datums-Widgets: date / dateTime
|
||||
|
||||
Diese beiden Widgets können für den Typ "date" verwendet werden. date erzeugt ein Widget (nur das Datum), während dateTime ein 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. 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.
|
||||
!!!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.
|
||||
|
||||
## grid
|
||||
|
||||
Für Datentyp object[], dient als übersichtliche object[] alternative, speziell für pagebuilder entwickelt.
|
||||
!!!include(../api/collections/fields/employmentDetails.yml)!!!
|
||||
|
||||
## 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.
|
||||
|
||||
!!!include(../api/collections/fields/emplymentDetails.yml)!!!
|
||||
|
||||
# useDefaultArray
|
||||
|
||||
Wenn ein belibiger Datentyp in einem Array gefordert ist, so kann man jedes beliebige Widget dafür nutzten, indem man useDefaultArray: true benutzt. Damit kann jedes widget in das defaultArray widget gepackt werden. Wird Object[] in kombination mit useDefaultArray verwendet, so wird die einfache Objektdarstellung in diese darstellung implementiert.
|
||||
|
||||
|
||||
|
||||
!!!include(../api/collections/fieldLists/useDefaultArray.yml)!!!
|
||||
|
||||
## contentbuilder - DEPRECATED
|
||||
|
||||
siehe: [ContentBuilder](./widgets/contentbuilder.md)
|
||||
Binary file not shown.
Binary file not shown.
@@ -1,35 +0,0 @@
|
||||
# contentbuilder
|
||||
|
||||
> Der ContentBuilder ist ein Drittanbieter-Produkt und steht nicht in jeder Lizenz zur Verfügung. Bitte kontaktieren Sie uns, wenn Sie Interesse an diesem Widget haben.
|
||||
|
||||
Für die Gestaltung von HTML-Inhalten ist der ContentBuilder eine einfache und intuitive Lösung. Es sind Layout-Hilfmittel wie Spalten und Zeilen ebenso verfügbar, wie die Möglichkeit Dateien (Bilder, Video, Downloads) direkt in den HTML-Code einzubinden.
|
||||
|
||||
Wie der ContentBuilder an einem Feld konfiguriert wird verdeutlicht folgendes Beispiel:
|
||||
|
||||
!!!include(../api/collections/fields/content.yml)!!!
|
||||
|
||||
## Mediathek Kollektion
|
||||
|
||||
<video width="100%" controls autoplay muted loop>
|
||||
<source src="contentbuilder-medialib.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
Wie aus der obigen Definition unterhalb von z.B. "imageSelect" zu lesen, bedarf es einer eigenen Kollektion für Bilder und andere Dateien. Diese Kollektion könnte wie folgt aussehen:
|
||||
|
||||
> Die Bedeutung der hier nicht beschriebenen Eigenschaften ist unter [collections](./../../../collections.md) zu finden.
|
||||
|
||||
!!!include(../api/collections/medialib.yml)!!!
|
||||
|
||||
## Module (customTags)
|
||||
|
||||
Die Einbindung des konfigurierten Beispiel-Moduls aus obiger Definition erfolgt im ContentBuilder wie im folgenden Video zu sehen ist:
|
||||
|
||||
<video width="100%" controls autoplay muted loop>
|
||||
<source src="contentbuilder-module.webm" type="video/webm">
|
||||
</video>
|
||||
|
||||
Wie oben schon erwähnt, sind die `placeholder` frei wählbar. Eine HTML5-Schreibweise bietet sich aber sowohl für das Styling, als auch für die spätere Einbindung in ein Frontend an.
|
||||
|
||||
In unserem Beispiel hier wurden zusättzlich zum eigentlichen Modul-Tag noch Attribute (`title` und `description`) definiert. Diese können dann im Frontend das eigentliche Modul beeinflussen.
|
||||
|
||||
Im Frontend könnte ein Modul dann später als "Custom Element" implementiert werden oder es wird ein HTML-Parser verwendet, der die Tags durch eigene Komponenten ersetzt, wie er im Anhang [TODO] zu finden ist.
|
||||
Reference in New Issue
Block a user