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.

Hinweis

Bei allen Datum- und Zeit-Inputfeldern muss der value von fieldContent zwingend in der Form raw('Ninox-Feld') übergeben werden.

Flexible Formatierung

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

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.
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.
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 CodeMinimaler CodeVollständiger Code mit Master

json

GIP_input({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   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: "",
})

json

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

json

html( raw(GIP_master({})) + 
raw(GIP_input({
   uniqueId: "",
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   	presets: "",
   },
   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_rightpresets

string

Default: -

Mit diesem Key können Voreingestellte, besondere Stylings übergeben werden. Die aktuell verfügbaren sind: - borderless: Entfernt Paddings des Ninox-Formelfeldes. - fullscreen: Entfernt die Ninox-Kopfleiste des Records (enthält Tabs, Schließen-Button, Anhänge, Kommentare und Änderungsverlauf). Für eine vollständige Vollbild-Ansicht muss der Record entweder mit der Ninox Funktion "openFullscreen()" oder dem GIP-Action-Type "openFullscreen" geöffnet werden.

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 oder Elements.

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 oder Elements.

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 oder Elements.

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 oder Elements.

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: -

arrow_rightstyle

string

Default: Siehe Globaler CSS-Code

Inline CSS-Styling des Moduls oder Elements.

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 Feld angewendet werden sollen. Zulässig sind prinzipiell alle HTML-Attribute, die auf ein HTML-Div-Element angewendet werden können (z.B. "spellcheck='false' tabindex='5' ").

Beispiele

Input: Einzeiliger Text

Beschreibung

Wir möchten ein einzeiliges Textfeld erstellen, das den eingegebenen Text in ein normales Ninox-Textfeld schreibt.

Wir geben dem Input-Element zunächst die folgenden Werte:

json

GIP_input({
    uniqueId: "Einzeiliger Text" + Nr,
    embedded: false,
    inputType: "text",   //Eingabetyp für eine einzeilige Texteingabe
    contentEditable: true,   //true: Der Nutzer kann den Wert im Input-Element bearbeiten. false: Eine Eingabe ins Input-Element ist nicht möglich.
    recordId: Nr,   //Record-ID der Ninox-Tabelle, in der das Ninox-Textfeld liegt.
    fieldId: fieldId(this, "Text")   //Field-ID des Ninox-Textfeldes. Die hier genutzte Ninox-Funktion "fieldId" kann auch durch die Field-ID als String ersetzt werden, z.B. "N".
})

Als nächstes definieren wir unseren Field Content. Wir möchten hierfür immer denselben Wert anzeigen, der im Textfeld steht, und referenzieren daher im Value das Ninox-Textfeld. Als Style vergeben wir eine orange Schriftfarbe.

Unserem Title geben wir als Style eine blaue Schriftfarbe, aber sparen uns die Definition des Values. Wenn kein Value für den Title angeben ist, wird als Default des Titles der Field Content gewählt.

Der Placeholder erhält einen statischen Text, der immer bei fehlendem Input angezeigt werden soll, und den Style Italic. Die Standard-Schriftfarbe für den Placeholder ist Grau.

Zuletzt geben wir auch dem Label eine Schriftfarbe, in diesem Fall Rot, und ebenfalls einen statischen Text als Wert. Zusätzlich geben wir außerdem noch an, wo das Label im Verhältnis zum Eingabefeld angezeigt werden soll.

json

GIP_input({
    uniqueId: "Einzeiliger Text" + Nr,
    embedded: false,
    inputType: "text",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Text"),
    title: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt.
        style: "color: orange;"
    },
    fieldContent: { //Wird angezeigt, sobald der Nutzer ins Eingabefeld klickt und wird durch seine Eingabe verändert.
        style: "color: blue;",
        value: Text
    },
    placeholder: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt und wenn der Field Content leer ist.
        style: "font-style: italic;",
        value: "Text eingeben"
    },
    label: { //Das Label wird über, unter oder neben (links/rechts) dem Eingabefeld angezeigt.
        style: "color: red;",
        value: "Inputfeld Text",
        orientation: "top"
    }
})

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Einzeiliger Text" + Nr,
		embedded: false,
		inputType: "text",
		contentEditable: true,
		recordId: Nr,
		fieldId: fieldId(this, "Text"),
		title: {
			style: "color: orange;"
		},
		fieldContent: {
			style: "color: blue;",
			value: Text
		},
		placeholder: {
			style: "font-style: italic;",
			value: "Text eingeben"
		},
		label: {
			style: "color: red;",
			value: "Inputfeld Text",
			orientation: "top"
		}
	})
))

json

GIP_input({
	uniqueId: "Einzeiliger Text" + Nr,
	embedded: true,
	inputType: "text",
	contentEditable: true,
	recordId: Nr,
	fieldId: fieldId(this, "Text"),
	title: {
		style: "color: orange;"
	},
	fieldContent: {
		style: "color: blue;",
		value: Text
	},
	placeholder: {
		style: "font-style: italic;",
		value: "Text eingeben"
	},
	label: {
		style: "color: red;",
		value: "Inputfeld Text",
		orientation: "top"
	}
})

Input: Mehrzeiliger Text

Beschreibung

Wir möchten ein mehrzeiliges Textfeld erstellen, das den eingegebenen Text in ein mehrzeiliges Ninox-Textfeld schreibt.

Wir geben dem Input-Element zunächst die folgenden Werte:

json

GIP_input({
    uniqueId: "Mehrzeiliger Text" + Nr,
    embedded: false,
    inputType: "textarea",   //Eingabetyp für eine mehrzeilige Texteingabe
    contentEditable: true,   //true: Der Nutzer kann den Wert im Input-Element bearbeiten. false: Eine Eingabe ins Input-Element ist nicht möglich.
    recordId: Nr,   //Record-ID der Ninox-Tabelle, in der das Ninox-Textfeld liegt.
    fieldId: fieldId(this, "Text (mehrzeilig)")   //Field-ID des Ninox-Textfeldes. Die hier genutzte Ninox-Funktion "fieldId" kann auch durch die Field-ID als String ersetzt werden, z.B. "N".
})

Die Höhe der Textarea skaliert automatisch mit der Menge des eingegebenen Textes. Wenn wir eine feste Höhe haben möchten, sodass das Textfeld bei überlaufendem Inhalt scrollbar wird, können wir z.B. style: "height: 150px;" definieren.

Nun ist noch der tatsächliche Inhalt des Input-Elementes festzulegen. Als erstes definieren wir unseren Field Content. Wir möchten hierfür immer denselben Wert anzeigen, der im mehrzeiligen Textfeld steht, und referenzieren daher im Value das Ninox-Textfeld. Als Style vergeben wir eine orange Schriftfarbe.

Der Placeholder erhält einen statischen Text, der immer bei fehlendem Input angezeigt werden soll, und den Style Italic. Die Standard-Schriftfarbe für den Placeholder ist Grau.

json

GIP_input({
    uniqueId: "Mehrzeiliger Text" + Nr,
    embedded: false,
    inputType: "textarea",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Text (mehrzeilig)"),
    title: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt.
        style: "color: orange;"
    },
    fieldContent: { //Wird angezeigt, sobald der Nutzer ins Eingabefeld klickt und wird durch seine Eingabe verändert.
        style: "color: blue;",
        value: 'Text (mehrzeilig)'
    },
    placeholder: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt und wenn der Field Content leer ist.
        style: "font-style: italic;",
        value: "Mehrzeiligen Text eingeben"
    },
    label: { //Das Label wird über, unter oder neben (links/rechts) dem Eingabefeld angezeigt.
        style: "color: red;",
        value: "Inputfeld Textarea",
        orientation: "top"
    }
})

Standardmäßig ist in Textfeldern ein Spellcheck aktiviert, der auf den Browser-Einstellungen für die Sprache basiert. Möchte man diesen Spellcheck in Input-Elementen deaktivieren, fügt man folgende Code-Zeile ein:

json

GIP_input({
    uniqueId: "Mehrzeiliger Text" + Nr,
    embedded: false,
    inputType: "textarea",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Text (mehrzeilig)"),
    htmlAttribute: "spellcheck='false'"
})

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Mehrzeiliger Text" + Nr,
		embedded: false,
		inputType: "textarea",
		contentEditable: true,
		recordId: Nr,
		fieldId: fieldId(this, "Text (mehrzeilig)"),
		title: {
			style: "color: orange;"
		},
		fieldContent: {
			style: "color: blue;",
			value: 'Text (mehrzeilig)'
		},
		placeholder: {
			style: "font-style: italic;",
			value: "Mehrzeiligen Text eingeben"
		},
		label: {
			class: "",
			style: "color: red;",
			value: "Inputfeld Textarea",
			orientation: "top"
		}
	})
))

json

GIP_input({
	uniqueId: "Mehrzeiliger Text" + Nr,
	embedded: true,
	inputType: "textarea",
	contentEditable: true,
	recordId: Nr,
	fieldId: fieldId(this, "Text (mehrzeilig)"),
	title: {
		style: "color: orange;"
	},
	fieldContent: {
		style: "color: blue;",
		value: 'Text (mehrzeilig)'
	},
	placeholder: {
		style: "font-style: italic;",
		value: "Mehrzeiligen Text eingeben"
	},
	label: {
		class: "",
		style: "color: red;",
		value: "Inputfeld Textarea",
		orientation: "top"
	}
})

Input: Zahl

Beschreibung

Wir möchten ein Zahlfeld erstellen, das die eingegebene Zahl in ein Ninox-Zahlfeld schreibt.

Wir geben dem Input-Element zunächst die folgenden Werte:

json

GIP_input({
    uniqueId: "Zahl" + Nr,
    embedded: false,
    inputType: "number",   //Eingabetyp für eine Zahleingabe
    contentEditable: true,   //true: Der Nutzer kann den Wert im Input-Element bearbeiten. false: Eine Eingabe ins Input-Element ist nicht möglich.
    recordId: Nr,   //Record-ID der Ninox-Tabelle, in der das Ninox-Zahlfeld liegt.
    fieldId: fieldId(this, "Zahl")   //Field-ID des Ninox-Zahlfeldes. Die hier genutzte Ninox-Funktion "fieldId" kann auch durch die Field-ID als String ersetzt werden, z.B. "N".
})

Wir möchten den Text, bzw. die Zahl im Eingabefeld rechtsbündig darstellen. Daher legen wir den Style des kompletten Input-Elementes in folgender Form fest: style: "justify-content: flex-end;".

Nun ist noch der tatsächliche Inhalt des Input-Elementes festzulegen. Als erstes definieren wir unseren Field Content. Wir möchten hierfür immer den reinen Zahlwert anzeigen, der im Zahlfeld steht, und referenzieren daher im Value das Ninox-Zahlfeld. Als Style vergeben wir eine orange Schriftfarbe.

Der Placeholder erhält einen statischen Text, der immer bei fehlendem Input angezeigt werden soll, und den Style Italic. Die Standard-Schriftfarbe für den Placeholder ist Grau.

json

GIP_input({
    uniqueId: "Zahl" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl"),
    title: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt.
        style: "color: orange;",
        value: text(Zahl)
    },
    fieldContent: { //Wird angezeigt, sobald der Nutzer ins Eingabefeld klickt und wird durch seine Eingabe verändert.
        style: "color: blue;",
        value: Zahl
    },
    placeholder: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt und wenn der Field Content leer ist.
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: { //Das Label wird über, unter oder neben (links/rechts) dem Eingabefeld angezeigt.
        style: "color: red; width: 30px;",
        value: "Inputfeld Zahl",
        orientation: "left"
    }
})

Zusätzlich möchten wir auf Mobilgeräten bei der Eingabe im Zahlfeld automatisch den Nummernblock statt der normalen Tastatur angezeigt bekommen. Dafür fügen wir folgende Code-Zeile ein:

json

GIP_input({
    uniqueId: "Zahl" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl"),
    htmlAttribute: "inputmode='numeric'",
    title: {
        style: "color: orange;",
        value: text(Zahl)
    },
    fieldContent: {
        style: "color: blue;",
        value: Zahl
    },
    placeholder: {
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: {
        style: "color: red; width: 30px;",
        value: "Inputfeld Zahl",
        orientation: "left"
    }
})

Ansicht mit Field Content und Nummernblock auf Mobilgerät

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Zahl" + Nr,
		embedded: false,
		style: "justify-content: flex-end;",
		inputType: "number",
		contentEditable: true,
		recordId: Nr,
		fieldId: fieldId(this, "Zahl"),
		htmlAttribute: "inputmode='numeric'",
		title: {
			style: "color: orange;",
			value: text(Zahl)
		},
		fieldContent: {
			style: "color: blue;",
			value: Zahl
		},
		placeholder: {
			style: "font-style: italic;",
			value: "Zahl eingeben"
		},
		label: {
			style: "color: red; width: 90px;",
			value: "Inputfeld Zahl",
			orientation: "left"
		}
	})
))

json

GIP_input({
	uniqueId: "Zahl" + Nr,
	embedded: true,
	style: "justify-content: flex-end;",
	inputType: "number",
	contentEditable: true,
	recordId: Nr,
	fieldId: fieldId(this, "Zahl"),
	htmlAttribute: "inputmode='numeric'",
	title: {
		style: "color: orange;",
		value: text(Zahl)
	},
	fieldContent: {
		style: "color: blue;",
		value: Zahl
	},
	placeholder: {
		style: "font-style: italic;",
		value: "Zahl eingeben"
	},
	label: {
		style: "color: red; width: 90px;",
		value: "Inputfeld Zahl",
		orientation: "left"
	}
})

Input: Zahl mit Präfix

Beschreibung

Wir möchten ein Zahlfeld erstellen, das die eingegebene Zahl in ein Ninox-Zahlfeld schreibt.

Wir geben dem Input-Element zunächst die folgenden Werte:

json

GIP_input({
    uniqueId: "Zahl mit Präfix" + Nr,
    embedded: false,
    inputType: "number",   //Eingabetyp für eine Zahleingabe
    contentEditable: true,   //true: Der Nutzer kann den Wert im Input-Element bearbeiten. false: Eine Eingabe ins Input-Element ist nicht möglich.
    recordId: Nr,   //Record-ID der Ninox-Tabelle, in der das Ninox-Zahlfeld liegt.
    fieldId: fieldId(this, "Zahl mit Präfix")   //Field-ID des Ninox-Zahlfeldes. Die hier genutzte Ninox-Funktion "fieldId" kann auch durch die Field-ID als String ersetzt werden, z.B. "N".
})

Wir möchten den Text, bzw. die Zahl im Eingabefeld rechtsbündig darstellen. Daher legen wir den Style des kompletten Input-Elementes in folgender Form fest: style: "justify-content: flex-end;".

Unserem Title geben wir als Style eine blaue Schriftfarbe. Den Wert des Titles beziehen wir ebenfalls auf das Ninox-Zahlfeld, aber wir wollen hier nicht nur den Zahlwert, sondern die Zahl mit der im Ninox-Zahlfeld festgelegten Formatierung anzeigen. Daher legen wir für den Title value: text('Zahl mit Präfix') fest. Wenn kein Value für den Title angeben ist, wird als Default des Titles der Field Content gewählt. Zusätzlich möchten wir vor dem formatierten Zahlwert den Text "Summe (netto): " anzeigen und geben daher dem Title einen Präfix in folgender Form: prefix: "Summe (netto): ".

Der Placeholder erhält einen statischen Text, der immer bei fehlendem Input angezeigt werden soll, und den Style Italic. Die Standard-Schriftfarbe für den Placeholder ist Grau.

json

GIP_input({
    uniqueId: "Zahl mit Präfix" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl mit Präfix"),
    title: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt.
        style: "color: orange;",
        value: text('Zahl mit Präfix'),
		prefix: "Summe (netto): "
    },
    fieldContent: { //Wird angezeigt, sobald der Nutzer ins Eingabefeld klickt und wird durch seine Eingabe verändert.
        style: "color: blue;",
        value: 'Zahl mit Präfix'
    },
    placeholder: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt und wenn der Field Content leer ist.
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: { //Das Label wird über, unter oder neben (links/rechts) dem Eingabefeld angezeigt.
        style: "color: red; width: 30px;",
        value: "Inputfeld Zahl mit Präfix",
        orientation: "top"
    }
})

Zusätzlich möchten wir auf Mobilgeräten bei der Eingabe im Zahlfeld automatisch den Nummernblock statt der normalen Tastatur angezeigt bekommen. Dafür fügen wir folgende Code-Zeile ein:

json

GIP_input({
    uniqueId: "Zahl mit Präfix" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl mit Präfix"),
    htmlAttribute: "inputmode='numeric'",
    title: {
        style: "color: orange;",
        value: text('Zahl mit Präfix'),
		prefix: "Summe (netto): "
    },
    fieldContent: {
        style: "color: blue;",
        value: 'Zahl mit Präfix'
    },
    placeholder: {
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: {
        style: "color: red; width: 30px;",
        value: "Inputfeld Zahl mit Präfix",
        orientation: "left"
    }
})

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Zahl mit Präfix" + Nr,
		embedded: false,
		style: "justify-content: flex-end;",
		inputType: "number",
		contentEditable: true,
		recordId: Nr,
		fieldId: fieldId(this, "Zahl mit Präfix"),
		htmlAttribute: "inputmode='numeric'",
		title: {
			style: "color: orange;",
			value: text('Zahl mit Präfix'),
			prefix: "Summe (netto): "
		},
		fieldContent: {
			style: "color: blue;",
			value: 'Zahl mit Präfix'
		},
		placeholder: {
			style: "font-style: italic;",
			value: "Zahl eingeben"
		},
		label: {
			style: "color: red;",
			value: "Inputfeld Zahl mit Präfix",
			orientation: "top"
		}
	})
))

json

GIP_input({
	uniqueId: "Zahl mit Präfix" + Nr,
	embedded: true,
	style: "justify-content: flex-end;",
	inputType: "number",
	contentEditable: true,
	recordId: Nr,
	fieldId: fieldId(this, "Zahl mit Präfix"),
	htmlAttribute: "inputmode='numeric'",
	title: {
		style: "color: orange;",
		value: text('Zahl mit Präfix'),
		prefix: "Summe (netto): "
	},
	fieldContent: {
		style: "color: blue;",
		value: 'Zahl mit Präfix'
	},
	placeholder: {
		style: "font-style: italic;",
		value: "Zahl eingeben"
	},
	label: {
		style: "color: red;",
		value: "Inputfeld Zahl mit Präfix",
		orientation: "top"
	}
})

Input: Zahl mit "basic"-Format

Beschreibung

Wir möchten ein Zahlfeld erstellen, das die eingegebene Zahl in ein Ninox-Zahlfeld schreibt.

Wir geben dem Input-Element zunächst die folgenden Werte:

json

GIP_input({
    uniqueId: "Zahl basic formatiert" + Nr,
    embedded: false,
    inputType: "number",   //Eingabetyp für eine Zahleingabe
    contentEditable: true,   //true: Der Nutzer kann den Wert im Input-Element bearbeiten. false: Eine Eingabe ins Input-Element ist nicht möglich.
    recordId: Nr,   //Record-ID der Ninox-Tabelle, in der das Ninox-Zahlfeld liegt.
    fieldId: fieldId(this, "Zahl 'Basic' formatiert")   //Field-ID des Ninox-Zahlfeldes. Die hier genutzte Ninox-Funktion "fieldId" kann auch durch die Field-ID als String ersetzt werden, z.B. "N".
})

Wir möchten den Text, bzw. die Zahl im Eingabefeld rechtsbündig darstellen. Daher legen wir den Style des kompletten Input-Elementes in folgender Form fest: style: "justify-content: flex-end;".

Unserem Title geben wir als Style eine blaue Schriftfarbe. Als Title wollen wir den Zahlwert des Ninox-Zahlfeldes mit einer von uns festgelegten Formatierung anzeigen. Da wir den Zahlwert bereits an den Field Content übergeben, müssen wir keinen Value für den Title angeben, sondern nur die Formatierung. Wir wählen in diesem Fall den Formattyp "basic" mit den folgenden Optionen:

Wir möchten 3 Dezimalstellen ("Nachkommastellen") haben
Statt einem Komma soll unser Dezimaltrenner ein Punkt sein
Die Separatorstellen ("Tausenderstellen") wollen wir nicht in drei Ziffern, sondern 2 Ziffern zwischen jedem Trennzeichen aufteilen
Statt einem Punkt soll unser Separator ("Tausendertrenner") das Rauten-Symbol sein

json

GIP_input({
    uniqueId: "Zahl basic formatiert" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl 'Basic' formatiert"),
    htmlAttribute: "inputmode='numeric'",
    title: {
        style: "color: orange;",
        numberFormat: {
            formatType: "basic",
            decimalDigits: "3",
            decimalSign: ".",
            separatorDigits: "2",
            separatorSign: "#"
        }
    },
    fieldContent: {
        style: "color: blue;",
        value: 'Zahl ''Basic'' formatiert'
    }
})
))

Der Placeholder erhält einen statischen Text, der immer bei fehlendem Input angezeigt werden soll, und den Style Italic. Die Standard-Schriftfarbe für den Placeholder ist Grau.

json

GIP_input({
    uniqueId: "Zahl basic formatiert" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl 'Basic' formatiert"),
    title: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt.
        style: "color: orange;",
        numberFormat: {
            formatType: "basic",
            decimalDigits: "3",
            decimalSign: ".",
            separatorDigits: "2",
            separatorSign: "#"
        }
    },
    fieldContent: { //Wird angezeigt, sobald der Nutzer ins Eingabefeld klickt und wird durch seine Eingabe verändert.
        style: "color: blue;",
        value: 'Zahl ''Basic'' formatiert'
    },
    placeholder: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt und wenn der Field Content leer ist.
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: { //Das Label wird über, unter oder neben (links/rechts) dem Eingabefeld angezeigt.
        style: "color: red;",
        value: "Inputfeld Zahl 'Basic' formatiert",
        orientation: "top"
    }
})

Zusätzlich möchten wir auf Mobilgeräten bei der Eingabe im Zahlfeld automatisch den Nummernblock statt der normalen Tastatur angezeigt bekommen. Dafür fügen wir folgende Code-Zeile ein:

json

GIP_input({
    uniqueId: "Zahl basic formatiert" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl 'Basic' formatiert"),
    htmlAttribute: "inputmode='numeric'",
    title: {
        style: "color: orange;",
        numberFormat: {
            formatType: "basic",
            decimalDigits: "3",
            decimalSign: ".",
            separatorDigits: "2",
            separatorSign: "#"
        }
    },
    fieldContent: {
        style: "color: blue;",
        value: 'Zahl ''Basic'' formatiert'
    },
    placeholder: {
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: {
        style: "color: red;",
        value: "Inputfeld Zahl 'Basic' formatiert",
        orientation: "top"
    }
})

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Zahl basic formatiert" + Nr,
		embedded: false,
		style: "justify-content: flex-end;",
		inputType: "number",
		contentEditable: true,
		recordId: Nr,
		fieldId: fieldId(this, "Zahl 'Basic' formatiert"),
		htmlAttribute: "inputmode='numeric'",
		title: {
			style: "color: orange;",
			numberFormat: {
				formatType: "basic",
				decimalDigits: "3",
				decimalSign: ".",
				separatorDigits: "2",
				separatorSign: "#"
			}
		},
		fieldContent: {
			style: "color: blue;",
			value: 'Zahl ''Basic'' formatiert'
		},
		placeholder: {
			style: "font-style: italic;",
			value: "Zahl eingeben"
		},
		label: {
			style: "color: red;",
			value: "Inputfeld Zahl 'Basic' formatiert",
			orientation: "top"
		}
	})
))

json

GIP_input({
	uniqueId: "Zahl basic formatiert" + Nr,
	embedded: true,
	style: "justify-content: flex-end;",
	inputType: "number",
	contentEditable: true,
	recordId: Nr,
	fieldId: fieldId(this, "Zahl 'Basic' formatiert"),
	htmlAttribute: "inputmode='numeric'",
	title: {
		style: "color: orange;",
		numberFormat: {
			formatType: "basic",
			decimalDigits: "3",
			decimalSign: ".",
			separatorDigits: "2",
			separatorSign: "#"
		}
	},
	fieldContent: {
		style: "color: blue;",
		value: 'Zahl ''Basic'' formatiert'
	},
	placeholder: {
		style: "font-style: italic;",
		value: "Zahl eingeben"
	},
	label: {
		style: "color: red;",
		value: "Inputfeld Zahl 'Basic' formatiert",
		orientation: "top"
	}
})

Input: Zahl mit "intl"-Format

Beschreibung

Wir möchten ein Zahlfeld erstellen, das die eingegebene Zahl in ein Ninox-Zahlfeld schreibt.

Wir geben dem Input-Element zunächst die folgenden Werte:

json

GIP_input({
    uniqueId: "Zahl intl formatiert" + Nr,
    embedded: false,
    inputType: "number",   //Eingabetyp für eine Zahleingabe
    contentEditable: true,   //true: Der Nutzer kann den Wert im Input-Element bearbeiten. false: Eine Eingabe ins Input-Element ist nicht möglich.
    recordId: Nr,   //Record-ID der Ninox-Tabelle, in der das Ninox-Zahlfeld liegt.
    fieldId: fieldId(this, "Zahl 'Intl' formatiert")   //Field-ID des Ninox-Zahlfeldes. Die hier genutzte Ninox-Funktion "fieldId" kann auch durch die Field-ID als String ersetzt werden, z.B. "N".
})

Wir möchten den Text, bzw. die Zahl im Eingabefeld rechtsbündig darstellen. Daher legen wir den Style des kompletten Input-Elementes in folgender Form fest: style: "justify-content: flex-end;".

Durch die Angabe locale: "en-IN" erhalten wir die für Indien ländertypische Zahlenformatierung bezüglich Dezimalstellen und -trenner sowie Separatorstellen und -trenner
Der Zahlwert soll in der Währung Euro dargestellt werden

json

GIP_input({
    uniqueId: "Zahl intl formatiert" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl 'Intl' formatiert"),
    htmlAttribute: "inputmode='numeric'",
    title: {
        style: "color: orange;",
        numberFormat: {
            formatType: "intl",
            locale: "en-IN",
            options: {
                style: "currency",
                currency: "EUR"
            }
        }
    },
    fieldContent: {
        style: "color: blue;",
        value: 'Zahl ''Intl'' formatiert'
    }
})
))

Der Placeholder erhält einen statischen Text, der immer bei fehlendem Input angezeigt werden soll, und den Style Italic. Die Standard-Schriftfarbe für den Placeholder ist Grau.

json

GIP_input({
    uniqueId: "Zahl intl formatiert" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl 'Intl' formatiert"),
    title: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt.
        style: "color: orange;",
        numberFormat: {
            formatType: "intl",
            locale: "en-IN",
            options: {
                style: "currency",
                currency: "EUR"
            }
        }
    },
    fieldContent: { //Wird angezeigt, sobald der Nutzer ins Eingabefeld klickt und wird durch seine Eingabe verändert.
        style: "color: blue;",
        value: 'Zahl ''Intl'' formatiert'
    },
    placeholder: { //Wird angezeigt, bevor der Nutzer ins Eingabefeld klickt und wenn der Field Content leer ist.
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: { //Das Label wird über, unter oder neben (links/rechts) dem Eingabefeld angezeigt.
        style: "color: red;",
        value: "Inputfeld Zahl 'Intl' formatiert",
        orientation: "top"
    }
})

Zusätzlich möchten wir auf Mobilgeräten bei der Eingabe im Zahlfeld automatisch den Nummernblock statt der normalen Tastatur angezeigt bekommen. Dafür fügen wir folgende Code-Zeile ein:

json

GIP_input({
    uniqueId: "Zahl intl formatiert" + Nr,
    embedded: false,
    style: "justify-content: flex-end;",
    inputType: "number",
    contentEditable: true,
    recordId: Nr,
    fieldId: fieldId(this, "Zahl 'Intl' formatiert"),
    htmlAttribute: "inputmode='numeric'",
    title: {
        style: "color: orange;",
        numberFormat: {
            formatType: "intl",
            locale: "en-IN",
            options: {
                style: "currency",
                currency: "EUR"
            }
        }
    },
    fieldContent: {
        style: "color: blue;",
        value: 'Zahl ''Intl'' formatiert'
    },
    placeholder: {
        style: "font-style: italic;",
        value: "Zahl eingeben"
    },
    label: {
        style: "color: red;",
        value: "Inputfeld Zahl 'Intl' formatiert",
        orientation: "top"
    }
})

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Zahl intl formatiert" + Nr,
		embedded: false,
		style: "justify-content: flex-end;",
		inputType: "number",
		contentEditable: true,
		recordId: Nr,
		fieldId: fieldId(this, "Zahl 'Intl' formatiert"),
		htmlAttribute: "inputmode='numeric'",
		title: {
			style: "color: orange;",
			numberFormat: {
				formatType: "intl",
				locale: "en-IN",
				options: {
					style: "currency",
					currency: "EUR"
				}
			}
		},
		fieldContent: {
			style: "color: blue;",
			value: 'Zahl ''Intl'' formatiert'
		},
		placeholder: {
			style: "font-style: italic;",
			value: "Zahl eingeben"
		},
		label: {
			style: "color: red;",
			value: "Inputfeld Zahl 'Intl' formatiert",
			orientation: "top"
		}
	})
))

json

GIP_input({
	uniqueId: "Zahl intl formatiert" + Nr,
	embedded: true,
	style: "justify-content: flex-end;",
	inputType: "number",
	contentEditable: true,
	recordId: Nr,
	fieldId: fieldId(this, "Zahl 'Intl' formatiert"),
	htmlAttribute: "inputmode='numeric'",
	title: {
		style: "color: orange;",
		numberFormat: {
			formatType: "intl",
			locale: "en-IN",
			options: {
				style: "currency",
				currency: "EUR"
			}
		}
	},
	fieldContent: {
		style: "color: blue;",
		value: 'Zahl ''Intl'' formatiert'
	},
	placeholder: {
		style: "font-style: italic;",
		value: "Zahl eingeben"
	},
	label: {
		style: "color: red;",
		value: "Inputfeld Zahl 'Intl' formatiert",
		orientation: "top"
	}
})

Input: Datum

Beschreibung

Wir möchten ein Input-Feld erstellen, mit dem wir ein Ninox-Datum-Feld beschreiben können.

Dafür legen wir als inputType den Wert "date" fest und stellen unsere restlichen Konfigurationen wie gewohnt ein. Den value von fieldContent müssen wir dabei als raw(Datum) übergeben.

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Date" + Nr,
		embedded: false,
		contentEditable: true,
		inputType: "date",
		formId: "",
		recordId: raw(Nr),
		fieldId: fieldId(this, "Datum"),
		label: {
			style: "color: orange",
			value: "Datum",
			orientation: "top"
		},
		fieldContent: {
			value: raw(Datum)
		},
		placeholder: {
			value: "Datum eingeben"
		}
	})
))

json

GIP_input({
	uniqueId: "Date" + Nr,
	embedded: true,
	contentEditable: true,
	inputType: "date",
	formId: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Datum"),
	label: {
		style: "color: orange",
		value: "Datum",
		orientation: "top"
	},
	fieldContent: {
		value: raw(Datum)
	},
	placeholder: {
		value: "Datum eingeben"
	}
})

Input: Uhrzeit

Beschreibung

Wir möchten ein Input-Feld erstellen, mit dem wir ein Ninox-Uhrzeit-Feld beschreiben können.

Dafür legen wir als inputType den Wert "time" fest und stellen unsere restlichen Konfigurationen wie gewohnt ein. Den value von fieldContent müssen wir dabei als raw(Uhrzeit) übergeben.

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Time" + Nr,
		embedded: false,
		contentEditable: true,
		inputType: "time",
		style: "",
		formId: "",
		recordId: raw(Nr),
		fieldId: fieldId(this, "Uhrzeit"),
		label: {
			style: "color: orange",
			value: "Uhrzeit",
			orientation: "top"
		},
		fieldContent: {
			value: raw(Uhrzeit)
		},
		placeholder: {
			value: "Uhrzeit eingeben"
		}
	})
))

json

GIP_input({
	uniqueId: "Time" + Nr,
	embedded: true,
	contentEditable: true,
	inputType: "time",
	style: "",
	formId: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Uhrzeit"),
	label: {
		style: "color: orange",
		value: "Uhrzeit",
		orientation: "top"
	},
	fieldContent: {
		value: raw(Uhrzeit)
	},
	placeholder: {
		value: "Uhrzeit eingeben"
	}
})

Input: Datum + Uhrzeit

Beschreibung

Wir möchten ein Input-Feld erstellen, mit dem wir ein Ninox-Feld für Datum + Uhrzeit beschreiben können.

Dafür legen wir als inputType den Wert "datetime" fest und stellen unsere restlichen Konfigurationen wie gewohnt ein. Den value von fieldContent müssen wir dabei als raw('Datum + Uhrzeit') übergeben.

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "DateTime" + Nr,
		embedded: false,
		contentEditable: true,
		inputType: "datetime",
		formId: "",
		recordId: raw(Nr),
		fieldId: fieldId(this, "Datum + Uhrzeit"),
		label: {
			style: "color: orange",
			value: "Datum und Uhrzeit",
			orientation: "top"
		},
		fieldContent: {
			value: raw('Datum + Uhrzeit')
		},
		placeholder: {
			value: "Datum + Uhrzeit eingeben"
		}
	})))

json

GIP_input({
	uniqueId: "DateTime" + Nr,
	embedded: true,
	contentEditable: true,
	inputType: "datetime",
	formId: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Datum + Uhrzeit"),
	label: {
		style: "color: orange",
		value: "Datum und Uhrzeit",
		orientation: "top"
	},
	fieldContent: {
		value: raw('Datum + Uhrzeit')
	},
	placeholder: {
		value: "Datum + Uhrzeit eingeben"
	}
})

Input: Zeitdauer

Beschreibung

Wir möchten ein Input-Feld erstellen, mit dem wir ein Ninox-Zeitdauer-Feld beschreiben können.

Dafür legen wir als inputType den Wert "duration" fest und stellen unsere restlichen Konfigurationen wie gewohnt ein. Den value von fieldContent müssen wir dabei als raw(Zeitdauer) übergeben.

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Duration" + Nr,
		embedded: false,
		contentEditable: true,
		inputType: "duration",
		style: "",
		formId: "",
		recordId: raw(Nr),
		fieldId: fieldId(this, "Zeitdauer"),
		label: {
			style: "color: orange",
			value: "Zeitdauer",
			orientation: "top"
		},
		fieldContent: {
			value: raw(Zeitdauer)
		},
		placeholder: {
			value: "Zeitdauer eingeben"
		}
	})))

json

GIP_input({
	uniqueId: "Duration" + Nr,
	embedded: true,
	contentEditable: true,
	inputType: "duration",
	style: "",
	formId: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Zeitdauer"),
	label: {
		style: "color: orange",
		value: "Zeitdauer",
		orientation: "top"
	},
	fieldContent: {
		value: raw(Zeitdauer)
	},
	placeholder: {
		value: "Zeitdauer eingeben"
	}
})

Input: Termin

Beschreibung

Wir möchten ein Input-Feld erstellen, mit dem wir ein Ninox-Termin-Feld beschreiben können.

Dafür legen wir als inputType den Wert "appointment" fest und stellen unsere restlichen Konfigurationen wie gewohnt ein. Den value von fieldContent müssen wir dabei als raw(Termin) übergeben.

Code des Beispiels

Standalone Code mit MasterEmbedded Code

json

html(raw(GIP_master({})) +
raw(GIP_input({
		uniqueId: "Termin" + Nr,
		embedded: false,
		contentEditable: true,
		inputType: "appointment",
		formId: "",
		recordId: raw(Nr),
		fieldId: fieldId(this, "Termin"),
		label: {
			style: "color: orange",
			value: "Termin",
			orientation: "top"
		},
		fieldContent: {
			value: raw(Termin)
		},
		placeholder: {
			value: "Termin eingeben"
		}
	})))

json

GIP_input({
	uniqueId: "Termin" + Nr,
	embedded: true,
	contentEditable: true,
	inputType: "appointment",
	formId: "",
	recordId: raw(Nr),
	fieldId: fieldId(this, "Termin"),
	label: {
		style: "color: orange",
		value: "Termin",
		orientation: "top"
	},
	fieldContent: {
		value: raw(Termin)
	},
	placeholder: {
		value: "Termin eingeben"
	}
})

Input ​

Funktion und Aussehen ​

Vielfältige Eingabetypen ​

Flexible Formatierung ​

Design und Layout ​

Werte zwischenspeichern mit einer Form-ID ​

Nutzer-Interaktion ​

Modulcode ​

Key-Table ​

Beispiele ​

Input: Einzeiliger Text ​

Input: Mehrzeiliger Text ​

Input: Zahl ​

Input: Zahl mit Präfix ​

Input: Zahl mit "basic"-Format ​

Input: Zahl mit "intl"-Format ​

Input: Datum ​

Input: Uhrzeit ​

Input: Datum + Uhrzeit ​

Input: Zeitdauer ​

Input: Termin ​

Input

Funktion und Aussehen

Vielfältige Eingabetypen

Flexible Formatierung

Design und Layout

Werte zwischenspeichern mit einer Form-ID

Nutzer-Interaktion

Modulcode

Key-Table

Beispiele

Input: Einzeiliger Text

Input: Mehrzeiliger Text

Input: Zahl

Input: Zahl mit Präfix

Input: Zahl mit "basic"-Format

Input: Zahl mit "intl"-Format

Input: Datum

Input: Uhrzeit

Input: Datum + Uhrzeit

Input: Zeitdauer

Input: Termin