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

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 auf deiner Oberfläche 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: "400", // Zahl in ""

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) 

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