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,
        tempStorage: false,
        suffix: "€",
		width: "",
		height: "",
        alignX: "left",
        paddingY: "",
        paddingX: "",
		fontColor: "",
		fontSize: "",
		fontWeight: "",
		backgroundColor: "",
		borderWidth: "",
		borderColor: "",
		borderRadius: "",
		placeholderSettings: {
			value: "Placeholder",
			fontColor: "",
			backgroundColor: ""
		},
		focusAction: {
			width: "100%",
			showFocusOutline: true,
			outlineWidth: "4px",
			outlineColor: "#04CD10",
		},
		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

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

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

recordId: Nr,

fieldId

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

fieldId: "",

value

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

type

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: "textarea" // Mehrzeiliges Input-Feld
type: "" // default: text

embedded

embedded benutzt du, wenn du den Button nicht innerhalb eines anderen Widgets einsetzt. Standardmäßig ist dies aber auf true gesetzt.

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true,  // Fallback

tempStorage

Mit tempStorage: true/false kann der eingegebene Wert übernommen werden, ohne dass ein Ninox Feld dahinter steht. Dieser Anwendungsfall macht nur Sinn, wenn Daten nur temporär eingegeben werden sollen und nicht in Ninox direkt gespeichert werden sollen (z.B. zur Weiterverarbeitung über einen Button mit der action customJS).

tempStorage: "true", // der eingegebene Wert wird nur temporär gespeichert
tempStorage: "false", // default

width

width gibt die Breite deines Inputfeldes an.

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

height

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

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

color

color gibt die Schriftfarbe des Eingabetextes an.

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

background

background gibt die Hintergundfarbe deines Inputfeldes an.

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

fontSize

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

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

fontWeight

fontWeight gibt die Dicke deiner Schrift an.

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

alignX

alignX gibt die Ausrichtung deines Textes an.

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

paddingY

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

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

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 € 

Placeholder Settings Block

placeholderSettings erlauben es Einstellungen für den placeholder des Input-Felds zu setzen. Es gibt dabei folgende Optionen unter anderem: value: gibt an, was als Platzhalter vor dem Reinschreiben anzeigt werden soll. Zum Beispiel: "0" oder "Suche" oder auch Ninox Formeln & Konditionen (wie z.B. if cnt(Ergebnisse)!= null then "Suche" else "" end).:

placeholderSettings: {
			value: "Suche", // Wert der ausgegeben werden soll
			fontColor: "#000", // Schriftfarbe
			backgroundColor: "" // Hintergrundfarbe
		},

Focus Action Block

In der focusAction definierst du, wie dein Inputfeld im aktiven Zustand aussieht. Also bei Klick in das Inputfeld. Hier kann die Breite des Inputfeldes während des Reinklickens angepasst werden. Außerdem kann man Einstellungen für die Outline vornehmen.

    focusAction: {
			width: "100%",
			showFocusOutline: true,
			outlineWidth: "4px",
			outlineColor: "#04CD10",
		},

    Einzelerklärungen:

      width: "200px" // bestimmt die Breite des Inputs, wenn man reinklickt (also on focus)
      width: "" // default: Input bleibt so breit wie die normale width eingestellt ist

      showFocusOutline: "true" // blendet on focus Rand ein
      showFocusOutline: "false" // blendet on focus Rand aus
      showFocusOutline: "" // default: false

      outlineWidth: "4px" // bestimmt die Randbreite beim reinklicken
      outlineWidth: "" // default: wie die normale borderWidth eingestellt ist
   
      outlineColor: "#04CD10" // bestimmt die Farbe des Randes beim reinklicken
      outlineColor: "" // default: wie die normale borderColor eingestellt ist

Label Settings Block

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