Input

0_25 pre0_24 pre0_23 pre0_22 pre0_21 pre0_20 pre0_19 pre0_18 pre0_17 pre0_16 pre0_15 pre0_14 pre0_13 pre0_12 pre0_11 pre

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:

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

Basis

GIP_input({
   uniqueId: "myUniqueName" + Nr
   embedded: true
   inputType: ""
   recordId: raw(Nr)
   fieldId: ""
   fieldContent: {
   	value: *any*
   },
})

Medium

GIP_input({
   uniqueId: "myUniqueName" + Nr
   embedded: true
   inputType: ""
   recordId: raw(Nr)
   fieldId: ""
   style: ""
   title: {
   	style: ""
   	value: *any*
   },
   fieldContent: {
   	style: ""
   	value: *any*
   },
   contentEditable: true
})

Fortgeschritten

GIP_input({
   uniqueId: "myUniqueName" + Nr
   embedded: true
   inputType: ""
   recordId: raw(Nr)
   fieldId: ""
   formId: "myForm" + Nr
   class: ""
   style: ""
   title: {
   	style: ""
   	prefix: ""
   	suffix: ""
   	value: *any*
   },
   fieldContent: {
   	style: ""
   	value: *any*
   	markOnFocus: true
   },
   placeholder: {
   	style: ""
   	value: *any*
   },
   actions: [{
   	trigger: "click"
   	scripts: [{
   		type: ""
   	}],
   }],
   contentEditable: true
})

Vollständig

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*,
   	markOnFocus: true,
   },
   placeholder: {
   	style: "",
   	value: *any*,
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   contentEditable: true,
   htmlAttribute: "",
})

Vollständig mit Master

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*,
   	markOnFocus: true,
   },
   placeholder: {
   	style: "",
   	value: *any*,
   },
   label: {
   	class: "",
   	style: "",
   	value: *any*,
   	orientation: "",
   },
   actions: [{
   	trigger: "",
   	scripts: [{
   		type: "",
   	}],
   }],
   contentEditable: true,
   htmlAttribute: "",
})
))

Key-Table

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:

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.

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 Master

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"
		}
	})
))

Embedded Code

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:

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.

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.

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:

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 Master

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"
		}
	})
))

Embedded Code

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:

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.

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) fest. 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, in diesem Fall links.

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:

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 Master

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"
		}
	})
))

Embedded Code

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:

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;".

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.

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.

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.

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:

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 Master

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"
		}
	})
))

Embedded Code

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:

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;".

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.

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

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.

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.

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:

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 Master

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"
		}
	})
))

Embedded Code

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:

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;".

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.

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 "intl" mit den folgenden Optionen:

• 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

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.

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.

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:

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 Master

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"
		}
	})
))

Embedded Code

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 Master

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"
		}
	})
))

Embedded Code

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 Master

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"
		}
	})
))

Embedded Code

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 Master

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"
		}
	})))

Embedded Code

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 Master

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"
		}
	})))

Embedded Code

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 Master

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"
		}
	})))

Embedded Code

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"
	}
})