Layout
Mit dem Layout-Modul designst du Layouts ganz nach deinen Vorstellungen, z.B. ausklappbare Menüs, interaktive Formulare oder einladende Dashboards. Bei der Programmierung unseres Layouts hatten wir zwei Hauptziele: hohe Flexibilität und optimierter Basiscode. Dadurch sind unsere Layouts wesentlich schneller als andere Lösungen und erzeugen keine Performance-Probleme.
Funktion und Aussehen
Das Layout basiert auf dem Konzept von Blocks, also Blöcken, die du entweder horizontal (von links nach rechts) oder vertikal (von oben nach unten) anordnen kannst. Der Inhalt der Blocks ist frei gestaltbar und kann beispielsweise Text, andere GIP- oder arcRider-Module sowie HTML-Elemente enthalten. Lasse deiner Kreativität freien Lauf. Außerdem kannst du dank des Style-Keys deinen Layouts und Blocks mit Inline-CSS eine individuelle Optik geben.
Nutzer-Interaktion
Auch bei der Gestaltung der Nutzer-Interaktion mit dem Modul lassen wir dir alle Freiheiten. Sowohl dem Layout selbst, als auch den Blocks kannst du eine beliebige Anzahl an Actions zuweisen. Jede Action besteht aus einem auslösenden Trigger und einem Array von Scripts, die bei Auslösen des Triggers ausgeführt werden. Als Trigger können Klick, Mausbewegung und alle weiteren HTML Mouse Events eingesetzt werden. Je nach Anwendung können auch andere HTML Events funktionieren. Eine Liste solcher Events findest du beispielsweise hier. Weitere Infos zu Actions findest du in diesem Teil unserer Doku.
Modulcode
GIP_layout({
uniqueId: "",
blocks: [{
value: *any*,
}],
})html( raw(GIP_master({})) +
raw(GIP_layout({
uniqueId: "",
embedded: {
height: "",
styleHtml: "",
styleStri: "",
},
direction: "",
style: "",
blocks: [{
style: "",
value: *any*,
actions: [{
trigger: "",
scripts: [{
type: "",
tableId: "",
viewId: "",
recordId: "",
tab: "",
fieldId: "",
dialogId: "",
value: *any*,
changeFieldValues: [{
fieldId: "",
value: *any*,
}],
displayAfterCreate: "",
setNewRecordId: [{
recordId: "",
fieldId: "",
}],
showCloseButton: true,
showAsModal: true,
}],
}],
}],
actions: [{
trigger: "",
scripts: [{
type: "",
tableId: "",
viewId: "",
recordId: "",
tab: "",
fieldId: "",
dialogId: "",
value: *any*,
changeFieldValues: [{
fieldId: "",
value: *any*,
}],
displayAfterCreate: "",
setNewRecordId: [{
recordId: "",
fieldId: "",
}],
showCloseButton: true,
showAsModal: true,
}],
}],
})
))Modulkeys
uniqueId
| Datentyp | Ist Pflichtkey? | Default |
|---|---|---|
| string | true | - |
Eindeutige Kennung des eingesetzten Moduls. Ideal ist eine Kombination aus Text und der Record-ID, also z.B.:
uniqueId: "LayoutÜberschrift" + NrIst die ID nicht einzigartig, kann es zu Fehlern bei Anzeige und Funktion der eingesetzten Module in der Tabelle kommen.
embedded
| Datentyp | Ist Pflichtkey? | Default |
|---|---|---|
| boolean, object | false | false |
Wenn des Modul in einem anderen Modul eingebettet ist, wird der boolesche Wert true eingetragen. Liegt das Modul alleine, bzw. als äußerster Container in einem Formelfeld, kann entweder false oder ein Object mit Angaben zur Höhe und Styling des Formelfeldes angegeben werden.
height
Datentyp Ist Pflichtkey? Default string false "auto" Höhe des Moduls in Pixeln (px).
styleHtml
Datentyp Ist Pflichtkey? Default string false - Inline CSS-Styling des Html-Containers des Formel-Feldes, in dem die GIP-Module liegen.
styleStri
Datentyp Ist Pflichtkey? Default string false - Inline CSS-Styling des Stringeditor-Containers des Formel-Feldes, in dem die GIP-Module liegen.
direction
| Datentyp | Ist Pflichtkey? | Default |
|---|---|---|
| string | false | "horizontal" |
Für die Ausrichtung der Blöcke des Moduls gibt es die Befehle "horizontal" (von links nach rechts nebeneinander) und "vertical" (von oben nach unten untereinander).
style
| Datentyp | Ist Pflichtkey? | Default |
|---|---|---|
| string | false | Siehe (Globaler CSS-Code)[/GlobalerCSS-Code] |
Inline CSS-Styling des Moduls.
blocks
| Datentyp | Ist Pflichtkey? | Default |
|---|---|---|
| array of objects | true | - |
Enthält ein Array der Inhaltsblocks des Moduls. Für jeden Block können Wert, Styling und Aktionen bei Interaktion mit dem Block angegeben werden.
style
Datentyp Ist Pflichtkey? Default string false Siehe (Globaler CSS-Code)[/GlobalerCSS-Code] Inline CSS-Styling des Moduls.
value
Datentyp Ist Pflichtkey? Default any true - Eingabe des gewünschten Wertes.
actions
Datentyp Ist Pflichtkey? Default array of objects false - Enthält ein Array mehrerer Actions. Jede Action ist aus einem Trigger, der die Action auslöst, und einem Array der auszuführenden Funktionen nach Auslösen des Triggers (Script) aufgebaut.
trigger
Datentyp Ist Pflichtkey? Default string true - Legt fest, durch welche User-Eingaben die Funktionen der Action ausgelöst werden. Als Trigger können alle HTML Mouse Events gewählt werden.
scripts
Datentyp Ist Pflichtkey? Default array of objects true - Enthält ein Array der Funktionen, die durch den Trigger der Aktion ausgeführt werden.
type
Datentyp Ist Pflichtkey? Default string true - Der Typ der Funktion wird aus der Liste der verfügbaren Funktionen gewählt (hier zu finden).
tableId
Datentyp Ist Pflichtkey? Default string true - ID der Ziel-Tabelle.
viewId
Datentyp Ist Pflichtkey? Default string false - ID des Ziel-Views.
Achtung
Für viewId muss die View-ID und nicht der View-Name angegeben werden. Um die View-ID zu erhalten, öffnet man den View der Tabelle (ohne einen Record zu öffnen), klickt in die URL und kopiert den String hinter dem letzten Slash (/). Die View-ID der URL "..../module/T/view/AbyXqEZayZPQgjFm" ist demnach "AbyXqEZayZPQgjFm".
recordId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Records.
tab
Datentyp Ist Pflichtkey? Default string false - Name des Ziel-Tabs.
fieldId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Feldes.
dialogId
Datentyp Ist Pflichtkey? Default string true - Hier ist die uniqueId des Ziel-Dialogs anzugeben.
value
Datentyp Ist Pflichtkey? Default any true - Eingabe des gewünschten Wertes.
changeFieldValues
Datentyp Ist Pflichtkey? Default array of objects false - Schreibt Werte in Ziel-Felder eines neu erstellten Records.
fieldId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Feldes.
value
Datentyp Ist Pflichtkey? Default any true - Eingabe des gewünschten Wertes.
displayAfterCreate
Datentyp Ist Pflichtkey? Default string false - Öffnet einen neu erstellten Record wahlweise direkt, als Popup oder als Vollbildansicht.
setNewRecordId
Datentyp Ist Pflichtkey? Default array of objects false - Schreibt die ID eines neu erstellten Records in Ziel-Felder von Ziel-Records.
recordId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Records.
fieldId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Feldes.
showCloseButton
Datentyp Ist Pflichtkey? Default boolean false - Gibt an, ob ein Schließen-Button in der oberen rechten Ecke des Dialogs angezeigt werden soll. Achtung: Wenn showCloseButton = false ist, sollte der Programmierer die Funktion "closeGIPdialog" in ein Feld einbauen, damit der Nutzer den Dialog wieder schließen kann. Überschreibt den showCloseButton-Status, der im Dialog selbst angegeben ist.
showAsModal
Datentyp Ist Pflichtkey? Default boolean false - Gibt an, ob das Dialog-Element als Modal-Element angezeigt werden soll. Modal-Element: Der Nutzer kann nur mit dem Dialog-Element, aber nicht mit den Ninox-Feldern im Hintergrund interagieren, wenn der Dialog geöffnet ist. Nicht-Modal-Element: Die Interaktion mit den Ninox-Feldern im Hintergrund ist weiterhin möglich, wenn der Dialog geöffnet ist. . Überschreibt den showAsModal-Status, der im Dialog selbst angegeben ist.
actions
| Datentyp | Ist Pflichtkey? | Default |
|---|---|---|
| array of objects | false | - |
Enthält ein Array mehrerer Actions. Jede Action ist aus einem Trigger, der die Action auslöst, und einem Array der auszuführenden Funktionen nach Auslösen des Triggers (Script) aufgebaut.
trigger
Datentyp Ist Pflichtkey? Default string true - Legt fest, durch welche User-Eingaben die Funktionen der Action ausgelöst werden. Als Trigger können alle HTML Mouse Events gewählt werden.
scripts
Datentyp Ist Pflichtkey? Default array of objects true - Enthält ein Array der Funktionen, die durch den Trigger der Aktion ausgeführt werden.
type
Datentyp Ist Pflichtkey? Default string true - Der Typ der Funktion wird aus der Liste der verfügbaren Funktionen gewählt (hier zu finden).
tableId
Datentyp Ist Pflichtkey? Default string true - ID der Ziel-Tabelle.
viewId
Datentyp Ist Pflichtkey? Default string false - ID des Ziel-Views.
Achtung
Für viewId muss die View-ID und nicht der View-Name angegeben werden. Um die View-ID zu erhalten, öffnet man den View der Tabelle (ohne einen Record zu öffnen), klickt in die URL und kopiert den String hinter dem letzten Slash (/). Die View-ID der URL "..../module/T/view/AbyXqEZayZPQgjFm" ist demnach "AbyXqEZayZPQgjFm".
recordId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Records.
tab
Datentyp Ist Pflichtkey? Default string false - Name des Ziel-Tabs.
fieldId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Feldes.
dialogId
Datentyp Ist Pflichtkey? Default string true - Hier ist die uniqueId des Ziel-Dialogs anzugeben.
value
Datentyp Ist Pflichtkey? Default any true - Eingabe des gewünschten Wertes.
changeFieldValues
Datentyp Ist Pflichtkey? Default array of objects false - Schreibt Werte in Ziel-Felder eines neu erstellten Records.
fieldId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Feldes.
value
Datentyp Ist Pflichtkey? Default any true - Eingabe des gewünschten Wertes.
displayAfterCreate
Datentyp Ist Pflichtkey? Default string false - Öffnet einen neu erstellten Record wahlweise direkt, als Popup oder als Vollbildansicht.
setNewRecordId
Datentyp Ist Pflichtkey? Default array of objects false - Schreibt die ID eines neu erstellten Records in Ziel-Felder von Ziel-Records.
recordId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Records.
fieldId
Datentyp Ist Pflichtkey? Default string true - ID des Ziel-Feldes.
showCloseButton
Datentyp Ist Pflichtkey? Default boolean false - Gibt an, ob ein Schließen-Button in der oberen rechten Ecke des Dialogs angezeigt werden soll. Achtung: Wenn showCloseButton = false ist, sollte der Programmierer die Funktion "closeGIPdialog" in ein Feld einbauen, damit der Nutzer den Dialog wieder schließen kann. Überschreibt den showCloseButton-Status, der im Dialog selbst angegeben ist.
showAsModal
Datentyp Ist Pflichtkey? Default boolean false - Gibt an, ob das Dialog-Element als Modal-Element angezeigt werden soll. Modal-Element: Der Nutzer kann nur mit dem Dialog-Element, aber nicht mit den Ninox-Feldern im Hintergrund interagieren, wenn der Dialog geöffnet ist. Nicht-Modal-Element: Die Interaktion mit den Ninox-Feldern im Hintergrund ist weiterhin möglich, wenn der Dialog geöffnet ist. . Überschreibt den showAsModal-Status, der im Dialog selbst angegeben ist.
Beispiele
Text mit Layout anordnen
Wir möchten Inhalt mit dem Layout-Modul anordnen, in diesem Beispiel den Text für ein Brot-Rezept. Das Ergebnis soll wie folgt aussehen: 
Um die Überschrift "Rezept für Dinkel-Mischbrot" oberhalb des eigentlichen Rezepts anzulegen, benötigen wir zuerst ein vertikales Layout mit zwei Blöcken.Der erste Block enthält die Überschrift, der zweite Block ist für das Rezept.
GIP_layout({
uniqueId: "Outer Layout" + Nr,
embedded: false,
direction: "vertical",
blocks: [{
style: "",
value: "Rezept für Dinkel-Mischbrot"
},
{
style: "",
value: "" //Hier kommt gleich der Inhalt für das Rezept rein.
}]
})Dem Block der Überschrift geben wir einen Inline-Style, um die Aspekte wie Schriftart, Farbe, Größe, etc.einzustellen und den Text mittig im Block darzustellen.
color: #7F0000; font: small-caps bold 25px/2 times-new-roman; text-align: center;Das Rezept selbst ordnen wir mit einem weiteren Layout in zwei Spalten an, um links unsere Mengenangaben und rechts die Anweisungen anzuzeigen.Das Layout hat in diesem Fall die Ausrichtung "horizontal" und istembedded: true.
Für dieses zweite Layout verändern wir nun insgesamt Schriftart, Größe, Zeilenabstand und Farbe:
color: #1F305E; font: 14px/2 arial;Zusätzlich zu diesem Styling erhalten die beiden Layout-Blöcke noch eine Breite, Padding und im Fall des linken Blocks eine Border.Die Texte schreiben wir jeweils als HTML-Listen.