Input

Das Input-Modul ist deine Allzweckwaffe für sämtliche Eingabefelder. Es kombiniert maximale Flexibilität im Design mit einer breiten Palette an spezialisierten Eingabetypen, um die Datenerfassung so einfach und intuitiv wie möglich zu gestalten. Zu den Highlights gehören:

• Vielfältige Typen: Von einfachem Text über Zahlen bis hin zu Datum, Zeit, Dauer und Termin-Intervallen.
• Integrierte Picker: Benutzerfreundliche Kalender- und Zeitauswahl-Dialoge, die die Eingabe beschleunigen und Fehler reduzieren.
• Anzeige- vs. Bearbeitungsansicht: Klare Trennung zwischen einem formatierten Anzeigewert (title) und dem rohen Eingabewert (fieldContent).
• Leistungsstarke Formatierung: Formatiere Zahlen, Währungen und Daten nach deinen Wünschen, auch unter Verwendung internationaler Standards.
• Form-ID Kompatibilität: Speichere Eingaben temporär zwischen und übertrage sie gesammelt an Ninox.

Funktion und Aussehen

Ein Input-Element unterscheidet grundlegend zwischen zwei Zuständen: der Anzeige und der Bearbeitung.

• Anzeige (Title): Wenn das Feld nicht aktiv ist, zeigt es den Wert in einer formatierten, gut lesbaren Weise an (z.B. "1.234,56 €"). Dies ist der title. Ist das Feld leer, wird stattdessen ein placeholder angezeigt.
• Bearbeitung (Field Content): Klickt der Nutzer in das Feld, wechselt es in den Bearbeitungsmodus. Hier wird der unformatierte fieldContent angezeigt (z.B. "1234.56"), damit der Benutzer den Wert direkt bearbeiten kann.

Vielfältige Eingabetypen

Das Modul passt sein Verhalten und Aussehen an den gewählten inputType an. Für die Typen date, time, datetime, duration und appointment wird automatisch ein Picker-Icon neben dem Feld angezeigt, das bei Klick einen passenden Auswahldialog öffnet.

• text & textarea: Für ein- oder mehrzeilige Texteingaben.
• number: Für numerische Werte.
• date, time, datetime: Öffnet einen Kalender bzw. eine Zeitauswahl.
• duration: Erlaubt die Eingabe von Zeitdauern (z.B. "1d 8h 30m") über einen speziellen Dialog.
• appointment: Zur Auswahl eines vollständigen Zeitraums mit Start- und End-Datum/-Zeit.

Flexible Formatierung

Du hast drei primäre Möglichkeiten, den Anzeigewert (title) deiner Felder zu formatieren:

1. Ninox-Formatierung übernehmen: Übergebe im title-Key den value als text('Dein-Ninox-Feld'). So wird das in Ninox definierte Zahlen- oder Datumsformat direkt übernommen. Achtung: Dies funktioniert nicht bei Verwendung einer formId.

2. Prefix & Suffix: Füge mit den Keys prefix und suffix einfach beliebigen Text vor oder nach dem Wert hinzu (z.B. "€" oder "Stk."). Dies ist mit allen anderen Formatierungsoptionen und auch mit formId kombinierbar.

3. Erweiterte GIP-Formatierung: Für die volle Kontrolle, insbesondere bei Nutzung einer formId, stehen dir die Keys numberFormat und dateTimeFormat zur Verfügung.

   • Für Zahlen (numberFormat): Lege im basic-Modus Dezimal- und Tausendertrennzeichen manuell fest oder nutze den intl-Modus für länderspezifische Formate via JavaScripts Intl.NumberFormat-Objekt.
   • Für Daten/Zeiten (dateTimeFormat): Formatiere Werte präzise über die options des Intl.DateTimeFormat-Objekts und lege mit locale die Sprache fest.

Weitere Infos zum Intl.NumberFormat-Objekt findest du hier.

Design und Layout

Passe das Erscheinungsbild deines Input-Moduls detailliert an.

• Styling: Nutze den class-Key, um CSS-Klassen zuzuweisen, die von dir oder uns im Globalen CSS-Code definiert wurden. Für spezifische Anpassungen kannst du den style-Key für Inline-CSS verwenden. Beachte, dass Inline-Styles immer Vorrang vor den Klassen-Styles haben. Zusätzlich verfügen auch das label sowie placeholder, fieldContent und title über eigene Style-Keys für noch mehr Kontrolle.
• HTML-Attribute: Mit dem htmlAttribute-Key kannst du dem Eingabefeld beliebige HTML-Attribute hinzufügen, z.B. spellcheck='false' oder tabindex='5'.

Werte zwischenspeichern mit einer Form-ID

Das Input-Modul ist vollständig kompatibel mit unserem Form-System. Das bedeutet, du kannst eine formId angeben, um die Eingabe eines Benutzers temporär im Browser zwischenzuspeichern, anstatt sie sofort in ein Ninox-Feld zu schreiben. Das ist besonders nützlich bei komplexen Formularen, bei denen der Benutzer erst am Ende alle Eingaben mit einem einzigen Klick speichern soll.

Um die zwischengespeicherten Werte aller Felder eines Formulars in die entsprechenden Ninox-Felder zu schreiben, nutzt du ein GIP-Element mit dem actions-Key (z.B. einen Button) und dem Script-Type submitGIPform.

Nutzer-Interaktion

Zusätzlich zur eigentlichen Eingabefunktion kannst du deinem Input-Element 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

Vollständiger Code

GIP_input({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   inputType: "",
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   title: {
   	style: "",
   	prefix: "",
   	suffix: "",
   	value: *any*,
   	numberFormat: {
   		formatType: "",
   		decimalDigits: 0,
   		decimalSign: "",
   		separatorDigits: 0,
   		separatorSign: "",
   		locale: "",
   		options: {
   		},
   	},
   	dateTimeFormat: {
   		locale: "",
   		options: {
   		},
   	},
   },
   fieldContent: {
   	style: "",
   	value: *any*,
   },
   placeholder: {
   	style: "",
   	value: *any*,
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   contentEditable: true,
   htmlAttribute: "",
})

Minimaler Code

GIP_input({
   uniqueId: "",
   embedded: {
   },
   inputType: "",
   recordId: "",
   fieldId: "",
   formId: "",
   fieldContent: {
   	value: *any*,
   },
})

Vollständiger Code mit Master

html( raw(GIP_master({})) + 
raw(GIP_input({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   inputType: "",
   recordId: "",
   fieldId: "",
   formId: "",
   class: "",
   style: "",
   title: {
   	style: "",
   	prefix: "",
   	suffix: "",
   	value: *any*,
   	numberFormat: {
   		formatType: "",
   		decimalDigits: 0,
   		decimalSign: "",
   		separatorDigits: 0,
   		separatorSign: "",
   		locale: "",
   		options: {
   		},
   	},
   	dateTimeFormat: {
   		locale: "",
   		options: {
   		},
   	},
   },
   fieldContent: {
   	style: "",
   	value: *any*,
   },
   placeholder: {
   	style: "",
   	value: *any*,
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   contentEditable: true,
   htmlAttribute: "",
})
))

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_rightinputTypeRequired string Default: - Der Typ des Eingabeformates wird aus folgenden Schlüsselwörtern gewählt. appointment: Eingabe eines Termins mit Start- und Endzeitpunkt. date: Eingabe eines Datums. datetime: Eingabe von Datum und Uhrzeit. duration: Eingabe einer Zeit-Dauer. number: Eingabe von Zahlen. Formatierungen von Ninox-Zahlfeldern (Prefix, Suffix, Trennzeichen,...) können wie folgt übernommen werden: title: {style:"", value: text('Ninox-Zahlfeld')}, fieldContent: {style:"", value: number('Ninox-Zahlfeld')} text: Einzeilige Eingabe von Text. Für mehrzeilige Eingabe siehe "textarea". textarea: Mehrzeilige Eingabe von Text. Für einzeilige Eingabe siehe "text". time: Eingabe einer Uhrzeit.

arrow_rightrecordIdRequired string Default: - ID des Ziel-Records.

arrow_rightfieldIdRequired string Default: - ID des Ziel-Feldes.

arrow_rightformIdRequired string Default: - Wenn eine Form-ID angegeben wird, wird der in ein GIP-Feld eingegebene Wert nicht direkt in das verknüpfte Ninox-Feld, sondern in den Session Storage des Browsers geschrieben. Der Wert wird also zwischengespeichert, bis er tatsächlich in Ninox eingetragen werden soll. Es können mehrere GIP-Felder gleichzeitig Daten unter derselben Form-ID speichern. Mit der Funktion submitGIPform (siehe actions-Key) können alle Werte, die unter der Form-ID gespeichert wurden, wieder aus dem Session Storage gelesen und in die entsprechenden Ninox-Felder geschrieben werden.

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_righttitle object Default: - Im title-Objekt werden für ein Input-Feld Wert und Styling des Titels angegeben.

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

arrow_rightprefix string Default: - Präfix vor dem Titel-Wert des Input-Moduls.

arrow_rightsuffix string Default: - Suffix hinter dem Titel-Wert des Input-Moduls.

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

arrow_rightnumberFormat object Default: - Im numberFormat-Object werden Formatierungsangaben für den Title-Wert eines GIP-Inputs vom Typ "number" gemacht, z.B. Anzahl der Nachkommastellen.

arrow_rightformatTypeRequired string Default: - Der Typ der Formatierung wird aus folgenden Schlüsselwörtern gewählt. In Klammern sind die Keys aus numberFormat angegeben, die dieser Formatierung zugeordnet sind. basic [decimalDigits, decimalSign, separatorDigits, separatorSign] Bei der Basis-Variante können manuell Dezimalstellen, Dezimalzeichen, Separatorstellen sowie Separatorzeichen festgelegt werden. intl [locale, options] Das Intl-Objekt (Intl = "Internationalization") ist eine Formatierungsoption aus JavaScript, die länderspezifische Zahlen- und Währungsformate zurückgeben kann und einen großen Umfang an sonstigen Formatierungsmöglichkeiten hat (weitere Infos gibt es hier).

arrow_rightdecimalDigits number Default: - Die Anzahl der maximal anzuzeigenden Dezimalstellen (Nachkommastellen).

arrow_rightdecimalSign string Default: "," Angabe, welches Dezimaltrennzeichen verwendet werden soll.

arrow_rightseparatorDigits number Default: - Teilt den gangzahligen Bereich (also nicht die Nachkommastellen) in Abschnitte mit der angegebenen Anzahl Ziffern ein ("1000er Trennung").

arrow_rightseparatorSign string Default: "." Trennzeichen für den ganzzahligen Bereich ("1000er Trennzeichen").

arrow_rightlocale string Default: Browser-Einstellung Ländercoder, der vom Intl-Objekt verwendet werden soll (z.B. "de-DE").

arrow_rightoptions object Default: - Ein Objekt, das die Optionen enthält, die vom Intl-Objekt verwendet werden soll (z.B. {style: 'currency', currency: 'EUR'}).

arrow_rightdateTimeFormat object Default: - Im dateTimeFormat-Object werden Formatierungsangaben für den Title-Wert eines GIP-Inputs vom Typ "date", "time", "datetime", "duration" oder "appointment" gemacht, z.B. ob ein Datum im amerikanischen (June 22,2025) oder deutschen (22. Juni 2025) Langformat dargestellt werden soll.

arrow_rightlocale string Default: Browser-Einstellung Ländercoder, der vom Intl-Objekt verwendet werden soll (z.B. "de-DE").

arrow_rightoptions object Default: - Ein Objekt, das die Optionen enthält, die vom Intl-Objekt verwendet werden soll (z.B. {style: 'currency', currency: 'EUR'}).

arrow_rightfieldContentRequired object Default: - Im fieldContent-Objekt werden für ein Input-Feld Wert und Styling des Feldinhalts angegeben.

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

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

arrow_rightplaceholder object Default: - Im placeholder-Objekt werden für ein Input-Feld Wert und Styling des Platzhalters angegeben.

arrow_rightstyle string Default: "color: #ABABAB;" Inline CSS-Styling des Moduls.

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

arrow_rightlabel object Default: - Die Label der Tabs werden nebeneinander (Modul direction: "horizontal"), bzw. untereinander (Modul direction: "vertical") angezeigt. Im label-Objekt werden für jeden Tab Wert, Styling und Aktionen bei Interaktion mit dem Label angegeben.

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_rightvalueRequired any Default: - Eingabe des gewünschten Wertes.

arrow_rightorientation string Default: "top" Gibt die Anordnung an. Zur Auswahl stehen die Schlüsselwörter "left", "right", "bottom" und "top".

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_rightcontentEditable boolean Default: true Bestimmt, ob der Inhalt eines Input-Feldes bearbeitet werden darf (true) oder nicht (false).

arrow_righthtmlAttribute string Default: - Auflistung der HTML-Attribute, die zusätzlich auf das Input-Feld angewendet werden sollen (z.B. "spellcheck='false' tabindex='5' "). Zulässig sind prinzipiell alle HTML-Attribute, die auf ein HTML-Div-Element angewendet werden können.