Input

Das Input Field besteht aus einem Anwendungscode, den du in einem Ninox Formel-Feld auf deiner Wunschoberfläche in der Datenbank einfügst. Außerdem kannst du dieses Mini-Widget in andere Widgets, wie die Custom Table einfügen.

Gesamter Anwendungscode

Folgend siehst du einen beispielhaften Anwendungscode für ein Input Field

arcCustomInput({
		uniqueId: "Mein-Input-" + Nr,
		recordId: Nr,
		fieldId: "N",
		title: text(Zahl),
		value: number(Zahl),
		type: "number",
		embedded: false,
		disabled: false,
		width: "",
		height: "",
        alignX: "left",
        paddingY: "",
        paddingX: "",
		fontColor: "",
		fontSize: "",
		fontWeight: "",
		backgroundColor: "",
		borderWidth: "",
		borderColor: "",
		borderRadius: "",
		placeholderSettings: {
			value: "Placeholder",
			fontColor: "",
			backgroundColor: ""
		},
		focusAction: {
			width: "",
			showFocusOutline: "",
			outlineWidth: "",
			outlineColor: ""
		},
		labelSettings: {
			title: "Mein Label",
			fontSize: "",
			alignX: "",
            gap: ""
		}
	})

Erklärung einzelner Parameter

Folgend wird dir aufgeschlüsselt, welche Parameter du verwenden kannst und was du jeweils eintragen musst.

uniqueId vergibst du individuell und sollte einzigartig sein. Sinn dahinter ist: Wenn du mehrere Inputfelder mit unterschiedlichen Settings auf deiner Seite erstellst, überschrieben sich die Styles nicht.

uniqueId: Nr,

recordId gibt an in welchem Record die Änderung vorgenommen werden soll.

recordId: Nr,

fieldId gibt an, welches Feld beschrieben werden soll. Die Field ID findest du mit dem Mini Widget Field Finder heraus.

fieldId: "",

value gibt an, welcher Wert in der Oberfläche angezeigt werden soll. Das ist das Feld, dessen Field ID du ausgibst. Zum Beispiel Menge.

value: "",

placeholder gibt an, was als Platzhalter vor dem Reinschreiben anzeigt werden soll. Zum Beispiel: "0" oder "Suche".

placeholder: "Suche", // Text Feld mit statischem Text 
placeholder: if cnt(Ergebnisse)!= null then "Suche" else "" end // Ninox Formeln & Konditionen

width gibt die Breite deines Inputfeldes an.

width: "50px", // Pixel Werte in ""
width: "100%", // Prozent Werte in ""

height gibt die Höhe deines Input-Feldes an.

height: "50px", // Pixel-Werte in ""

color gibt die Schriftfarbe des Eingabetextes an.

color: "#000000", // HEX Wert in "" 

background gibt die Hintergundfarbe deines Inputfeldes an.

background: "#EEEEEE", // HEX Wert in "" 

fontSize gibt die Schriftgröße deiner Input-Texte an.

fontSize: "12px" // Pixel Werte in ""

fontWeight gibt die Dicke deiner Schrift an.

fontWeight: "800", // Zahl in "" Default sind 400

align gibt die Ausrichtung deines Textes an.

align: "left", // left orientiert deinen Text linksbündig innerhalb des Input-Feldes
align: "center", // center orientiert deinen Text zentriert innerhalb des Input-Feldes
align: "right", // right orientiert deinen Text rechtsbündig innerhalb des Input-Feldes

paddingY gibt den Abstand zwischen dem Inhalt (hier: Inhalt des Inputs) und dem Rand jeweils oben und unten an. Dieser Parameter ist hauptsächlich beim type= "textarea" sinnvoll.

paddingY: "20px", // Pixel-Werte
paddingY: "", // default: 2px

paddingX gibt den Abstand zwischen dem Inhalt (hier: Inhalt des Inputs) und dem Rand jeweils links und rechts an.

paddingX: "20px", // Pixel-Werte
paddingX: "", // default: 8px 

suffix definiert eine Nachsilbe in deinem Werte-Feld ohne dabei die Funktion einer Zahl zu irritieren.

suffix: "€", // Gibt nach deinem Input immer den gewählten suffix aus. Z.B.: 10 € 

type definiert den Feldtypen deines Inputs. Den type number nutzt du, wenn du ein Ninox Zahlenfeld wiedergeben möchtest und text, wenn du ein Ninox Textfeld wiedergeben möchtest. Indem du textarea beim type eingibst, wird das Input als mehrzeiliges Feld angezeigt.

Die types date und time haben zusätzliche Features:
Das Input Feld kann in ein HTML Natives Datums-/Zeitfeld eingestellt werden. Das Feld verfügt dann über schnellere Eingabe von Stunden und Minuten bzw. von Tagen, Monaten und Jahren. Ausserdem den Wechsel zwischen den Trennzeichen mit TAB, Pfeil Rechts/Links und eine Änderung der Werte mit Pfeil Oben/Unten. Zudem verfügt das Datums-/Zeitfeld nun über einen Standard Date-/Timepicker.

type: "number" // Zahlen-Feld (Z. B. für Rabatt-Felder)
type: "text" // Text-Feld (Z. B. für Volltextsuchen) 
type: "date" // Datums-Feld mit Datepicker
type: "time" // Zeit-Feld mit Timepicker
type: "" // default: text

labelSettings erlauben es ein Label über dem Input-Feld zu setzen. Es gibt dabei folgende Optionen:

labelSettings: {
	title: "Mein Label", // Die Beschriftung des Labels
	fontSize: "", // Die Größe des Labels (Default ist 11px)
	alignX: "",  // Die horizontale Anordnung ist über left oder right steuerbar
    gap: "" // Wert in Pixel (3px) bestimmt den Abstand zum Input-Feld
}

Standard-Werte als Fallback

💡 Hinweis: Trägst du keine Werte hinter die Parameter ein, so ist in den meisten Fällen ein Fallback-Wert im System hinterlegt. An manchen Stellen, wie Werte-Felder (Tatsächliche Zahlenwerte zum Beispiel) macht das keinen Sinn. In Style-Parametern, wie Farben oder Größen hingegen schon. Hier siehst du den Code ohne eingetragene Werte und in den Kommentaren dahinter die Standard-Werte:

arcCustomInput({
		uniqueId: Nr, // Kein Fallback
		recordId: Nr, // Kein Fallback
		fieldId: "", // Kein Fallback
		value: "", // Kein Fallback
		placeholder: "", // Kein Fallback
		width: "", // Fallback: 100%
		color: "", // Fallback: #000000
		background: "", // Fallback: #FFFFFF
		fontSize: "" // Fallback: 13px
	})