Interaction

Mit dem Interaction-Modul hast du Button und Badge in einem. Denn während der Entwicklung dachten wir uns: Ist ein Button nicht einfach ein Badge mit Click-Action und anderem Styling? Um diese Styling-Unterschiede einfacher zu gestalten, haben wir die Nutzung von CSS-Klassen eingeführt.

Funktion und Aussehen

Das Interaction-Modul ist auf den ersten Blick dem Layout-Modul ziemlich ähnlich, hat aber einen entscheidenden Unterschied: Den Class-Key. Hierüber kannst du deinem Interaction-Element CSS-Klassen zuweisen, die von dir oder uns im Globalen Code definiert wurden. So kannst du beispielsweise ein einheitliches Erscheinungsbild für alle Buttons in deiner Anwendung erzielen.

Natürlich kannst du im Interaction-Modul nicht nur die Class, sondern auch den Style-Key für Inline-CSS nutzen. Beachte dabei, dass Inline-Styles immer Vorrang haben und die Class-Styles überschreiben, sofern sie dieselbe Property (z.B. background-color) betreffen.

Den Aufbau deines Interaction-Elements kannst du mithilfe von Blocks entweder horizontal (von links nach rechts) oder vertikal (von oben nach unten) anordnen. Der Inhalt der Blocks ist frei gestaltbar und kann beispielsweise Text, andere GIP- oder arcRider-Module sowie HTML-Elemente enthalten.

Nutzer-Interaktion

Der wichtigste Teil des Interaction-Moduls ist natürlich die Gestaltung der Nutzer-Interaktion. Auch hier lassen wir dir alle Freiheiten. Sowohl dem Interaction-Modul 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.

Warum gibt es ein Interaction-Modul, wenn es dem Layout so ähnlich ist?

Wir haben uns aus zwei Hauptgründen zur Unterscheidung zwischen Layout und Interaction entschieden:

1. Übersichtlichere Ninox-Code-Strukturierung durch die unterschiedlichen Namen. Layout ist der Container, Interaction ein interaktives Element.
2. Schlanker und performanter Layout-Code. Unser Layout Code besteht nur aus dem Nötigsten und ist sehr performant. Wenn du viele Layouts gleichzeitig nutzt, würde jede berechnete Class die Geschwindigkeit der Layouts etwas verlangsamen.

Modulcode

Vollständiger Code

GIP_interaction({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   direction: "",
   class: "",
   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,
   	}],
   }],
})

Minimaler Code

GIP_interaction({
   uniqueId: "",
   embedded: {
   },
   blocks: [{
   	value: *any*,
   }],
})

Vollständiger Code mit Master

html( raw(GIP_master({})) + 
raw(GIP_interaction({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   direction: "",
   class: "",
   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,
   	}],
   }],
})
))

Key-Table

arrow_rightuniqueIdRequired string Default: - Eindeutige Kennung des eingesetzten Moduls. Ideal ist eine Kombination aus Text und der Record-ID, also z.B.: uniqueId: "LayoutÜberschrift" + Nr Ist die ID nicht einzigartig, kann es zu Fehlern bei Anzeige und Funktion der eingesetzten Module in der Tabelle kommen.

arrow_rightembeddedRequired boolean, object Default: 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.

arrow_rightheight string Default: "auto" Höhe des Moduls in Pixeln (px).

arrow_rightstyleHtml string Default: - Inline CSS-Styling des Html-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightstyleStri string Default: - Inline CSS-Styling des Stringeditor-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightdirection string Default: "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).

arrow_rightclass string Default: - Styling des Moduls mithilfe der in GIP_globalCSS vordefinierten CSS-Stylings (siehe globaler GIP-Modul-Code). Um mehrere CSS-Stylings zu referenzieren, werden sie einfach als String mit Leerzeichen zwischen den Class-names aneinandergereiht.

arrow_rightstyle string Default: Siehe Globaler CSS-Code Inline CSS-Styling des Moduls.

arrow_rightblocksRequired array of objects Default: - 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.

arrow_rightstyle string Default: Siehe Globaler CSS-Code Inline CSS-Styling des Moduls.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightactions array of objects Default: - 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.

arrow_righttriggerRequired string Default: - Legt fest, durch welche User-Eingaben die Funktionen der Action ausgelöst werden. Als Trigger können alle HTML Mouse Events gewählt werden.

arrow_rightscriptsRequired array of objects Default: - Enthält ein Array der Funktionen, die durch den Trigger der Aktion ausgeführt werden.

arrow_righttypeRequired string Default: - Der Typ der Funktion wird aus der Liste der verfügbaren Funktionen gewählt.

arrow_righttableIdRequired string Default: - ID der Ziel-Tabelle.

arrow_rightviewId string Default: - ID des Ziel-Views. ::: warning 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".

arrow_rightrecordIdRequired string Default: - ID des Ziel-Records.

arrow_righttab string Default: - Name des Ziel-Tabs.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightdialogIdRequired string Default: - Hier ist die uniqueId des Ziel-Dialogs anzugeben.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightchangeFieldValues array of objects Default: - Schreibt Werte in Ziel-Felder eines neu erstellten Records.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightdisplayAfterCreate string Default: - Öffnet einen neu erstellten Record wahlweise direkt, als Popup oder als Vollbildansicht.

arrow_rightsetNewRecordId array of objects Default: - Schreibt die ID eines neu erstellten Records in Ziel-Felder von Ziel-Records.

arrow_rightrecordIdRequired string Default: - ID des Ziel-Records.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightshowCloseButton boolean Default: - 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.

arrow_rightshowAsModal boolean Default: - 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.

arrow_rightactions array of objects Default: - 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.

arrow_righttriggerRequired string Default: - Legt fest, durch welche User-Eingaben die Funktionen der Action ausgelöst werden. Als Trigger können alle HTML Mouse Events gewählt werden.

arrow_rightscriptsRequired array of objects Default: - Enthält ein Array der Funktionen, die durch den Trigger der Aktion ausgeführt werden.

arrow_righttypeRequired string Default: - Der Typ der Funktion wird aus der Liste der verfügbaren Funktionen gewählt.

arrow_righttableIdRequired string Default: - ID der Ziel-Tabelle.

arrow_rightviewId string Default: - ID des Ziel-Views. ::: warning 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".

arrow_rightrecordIdRequired string Default: - ID des Ziel-Records.

arrow_righttab string Default: - Name des Ziel-Tabs.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightdialogIdRequired string Default: - Hier ist die uniqueId des Ziel-Dialogs anzugeben.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightchangeFieldValues array of objects Default: - Schreibt Werte in Ziel-Felder eines neu erstellten Records.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightdisplayAfterCreate string Default: - Öffnet einen neu erstellten Record wahlweise direkt, als Popup oder als Vollbildansicht.

arrow_rightsetNewRecordId array of objects Default: - Schreibt die ID eines neu erstellten Records in Ziel-Felder von Ziel-Records.

arrow_rightrecordIdRequired string Default: - ID des Ziel-Records.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightshowCloseButton boolean Default: - 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.

arrow_rightshowAsModal boolean Default: - 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.