Mini Widgets

Input

1.3.0

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: "",
		fontColor: "",
		fontSize: "",
		fontWeight: "",
		backgroundColor: "",
		borderWidth: "",
		borderColor: "",
		borderRadius: "",
		placeholderSettings: {
			value: "Placeholder",
			fontColor: "",
			backgroundColor: ""
		},
		focusAction: {
			width: "",
			showFocusOutline: "",
			outlineWidth: "",
			outlineColor: ""
		},
		alignX: "left",
		paddingX: "",
		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

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.

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 date hat zusätzliche Features:

Das Feld verfügt über schnellere Eingabe von Tagen, Monaten und Jahre, Wechsel zwischen den Trennzeichen mit TAB, Pfeil Rechts/Links und Pfeile Oben/Unten. Zudem verfügt das Datumsfeld nun über einen Datepicker.


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 (px) 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
	})