Input

arcCustomInput is a versatile and customizable mini-widget for displaying and editing input fields in your Ninox database. It replaces the standard input field with a flexible, visually adaptable interface that you can use directly in form fields or more complex widget codes – for example, on detail views, dashboards, or in combination with other widgets like arcCustomTable.

With arcCustomInput, text input, numbers, date, or time values can be specifically controlled, visually highlighted, or provided with custom placeholders, labels, and focus behavior. Multiline inputs (textarea) are also supported.

🚀 Main Features

• Completely visually configurable (colors, font sizes, borders, alignment, etc.)

• Single-Line or Multiline (Text vs. Textarea) – automatically based on type

• Tab control between fields (also between arcCustomInput and arcCustomSelect)

• Live focus & loop logic: Automatically jump into fields (type directly without clicking the input)

• Autofocus on start or click

• Read-only view when disabled: true

• Placeholder designs for visual feedback on empty fields

Total Application Code

The following shows an example application code for an Input Field

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

Explanation of Individual Parameters

This section explains which parameters you can use and what you need to enter for each.

uniqueId

uniqueId is assigned individually and should be unique. The idea behind this is: If you create multiple input fields with different settings on your page, the styles do not override each other.

uniqueId: Nr,

recordId

recordId specifies in which record the change should be made.

recordId: Nr,

fieldId

fieldId specifies which field should be described. You can find the Field ID using the mini widget Field Finder.

fieldId: "",

value

value specifies which value should be displayed on the interface. This is the field whose Field ID you output. For example, quantity.

value: "",

type

type defines the field type of your input. Use the type number to represent a Ninox numeric field, and text to represent a Ninox text field. By entering textarea as the type, the input will be displayed as a multiline field.

The types date and time have additional features:
The input field can be set to an HTML native date/time field. The field then enables faster input of hours and minutes or days, months, and years. Moreover, switching between delimiters using TAB, arrow right/left, and changing the values with arrow up/down is possible. Additionally, the date/time field now features a standard date/time picker.

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 is used when you do not use the button within another widget. By default, this is set to true.

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

tempStorage

With tempStorage: true/false the entered value can be taken over without standing behind a Ninox field. This application case only makes sense if data is only to be entered temporarily and not directly stored in Ninox (e.g. for further processing via a button with action customJS).

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

width

width specifies the width of your input field.

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

height

height specifies the height of your input field.

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

color

color specifies the font color of the input text.

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

background

background specifies the background color of your input field.

💡 Tip: If you insert the input into another widget, like Layout, Table, Card, etc., you can set the background color to background: "transparent". This way, the input appears seamless and blends perfectly with the background.

background: "#EEEEEE", // HEX Wert in "" 
backgrond: "transparent" // keine Hintergrundfarbe

fontSize

fontSize specifies the font size of your input text.

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

fontWeight

fontWeight specifies the thickness of your font.

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

alignX

alignX specifies the alignment of your text.

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 specifies the space between the content (here: content of the input) and the edge at the top and bottom. This parameter is particularly useful for type="textarea".

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

paddingX

paddingX specifies the space between the content (here: content of the input) and the edge on the left and right.

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

suffix

suffix defines a suffix in your value field without interfering with the function of a number.

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

Placeholder Settings Block

placeholderSettings allow settings for the placeholder of the input field to be set. Options include: value: specifies what should be displayed as a placeholder before writing. For example: "0" or "Search" or even Ninox formulas & conditions (like e.g. if cnt(results)!= null then "Search" else "" end).

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

Focus Action Block

In the focusAction you define how your input field looks in the active state. When clicked into the input field, for example. Here, the width of the input field during focus can be adjusted. Additionally, you can set the outline.

    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

loop in the Focus Action Block

The loop function ensures that the cursor automatically jumps to the next or even the same input field.

Use Case: Search Field with Automatic Focus

A practical example is a search field where the cursor automatically returns after an action.

For example:

• A user enters a search term.

• They select a product from the result list and add it to the cart.

• Instead of needing to click the search field again, the cursor jumps directly back in.

Ideal for Barcode Workflows

This function is particularly useful for barcode workflows, where the input field must remain writable after each confirmation. If multiple fields are equipped with the loop option, the focus jumps automatically to the last field.

This function saves clicks and makes repeated inputs more efficient.

loop:"", // default: kein Loop 
loop: "infinite" // Muss gesetzt werden, damit die Loop FUnktion aktiviert ist.

Label Settings Block

labelSettings allow a label to be set above the input field. Options include:

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
}

Default Values as Fallback

💡 Note: If you do not enter any values behind the parameters, a fallback value is usually stored in the system. In some places, such as value fields (actual numerical values, for example), this does not make sense. In style parameters, such as colors or sizes, however, it does. Here, you see the code without entered values and the default values in the comments behind:

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