Mini Widgets

Check Box

2.3.0

Check Box

Die Check Box kannst du für die optische Darstellung von deinen Ja/Nein Ninox-Feldern nutzen.

Um die Check Box darstellen zu können, fügst du den Anwendungscode in ein Ninox Formel-Feld ein und passt die Parameter nach deinen Wünschen an. Du kannst dieses Mini-Widget auch in andere Widgets, wie die Custom Table integrieren.

Dies ist der gesamte Anwendungscode mit allen Parametern, die aktuell für die Check Box zur Verfügung stehen:

arcCheckBox({
		uniqueId: "uniqueName",
		value: 'Ja / Nein',
		embedded: true,
		width: "",
		height: "",
		boxSize: "",
		borderRadius: "",
		strokeWidth: "",
		activeSettings: {
			backgroundColor: "",
			borderColor: "",
			color: ""
		},
		inactiveSettings: {
			backgroundColor: "",
			borderColor: "",
			color: ""
		},
		labelSettings: {
			title: "Erledigt",
			position: "",
			fontSize: "",
			fontColor: ""
		},
		clickAction: {
			recordId: Nr,
			fieldId: "",
			value: if 'Ja / Nein' = true then null else true end
		}
	})

Erklärung einzelner Parameter

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

uniqueId

Die uniqueId vergibst du individuell, sie sollte einzigartig sein. Sinn dahinter ist: Wenn du mehrere Check Boxen mit unterschiedlichen Settings auf deiner Oberfläche erstellst, überschreiben sich die Styles nicht.

uniqueId: Nr, // Ninox-Feld 
uniqueId: "Checkbox 1", // Text in ""

value

Bei dem value gibst du den Namen deines Ninox-Ja/Nein-Feldes an.

value: 'Ja / Nein', // Ninox-Ja/Nein-Feld
value: Erledigt, // Ninox-Ja/Nein-Feld, welches du Erledigt genannt hast

embedded

embedded benutzt du, wenn du die Check Box 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,  // wenn das CheckBox Widget in einem anderen Widget eingesetzt wird
embedded: "", // default: false

width

Mit width bestimmst du die Breite des gesamten Check Box Elements.

width: "100%", // Prozent-Werte in "" 
width: "100px", // Pixel-Werte in "" 
width: "", // default: auto

height

Mit height bestimmst du die Höhe des gesamten Check Box Elements.

height: "100%", // Prozent-Werte in "" 
height: "100px", // Pixel-Werte in "" 
height: "", // default: auto

boxSize

Mit boxSize bestimmst du, wie groß die Check Box sein soll.

boxSize: "40px", // Pixel-Werte in "" 
boxSize: "", // default: 20px

borderRadius

Mit borderRadius bestimmst du die Abrundung deiner Check Box. Du kannst px Werte und % Werte eintragen.

borderRadius: "50px", // runde Check Box
borderRadius: "3%", // eckige Check Box
borderRadius: "", // default: 4px

strokeWidth

Mit strokeWidth bestimmst du die Linienstärke für die Umrandung der Checkbox sowie für die Check-Linie des Icons.

strokeWidth: "0.5px", // Pixel-Werte in "" 
strokeWidth: "2px",  // Pixel-Werte in "" 
strokeWidth: "", // default: 1px

activeSettings Block

Mit dem activeSettings Block kannst du die backgroundColor, borderColor der Check Box und color der Check-Linie bei der aktiven Checkbox einstellen.

activeSettings: {
			backgroundColor: "",
			borderColor: "",
			color: ""
		},

activeSettings: {
			backgroundColor: "", // default: #0066FF
			borderColor: "", // default: #0066FF
			color: "" // default: #FFF
		},

inactiveSettings Block

Mit dem inactiveSettings Block kannst du die backgroundColor, borderColor der Check Box und color der Check-Linie bei der inaktiven Checkbox einstellen.

inactiveSettings: {
			backgroundColor: "",
			borderColor: "",
			color: ""
		},

inactiveSettings: {
			backgroundColor: "", // default: #C8CCD4
            borderColor: "",  // default: #C8CCD4
            color: "" // default: none
		},

labelSettings Block

Mit dem labelSettings Block kannst du deiner Check Box ein Label geben. Du kannst bei title den Text eingeben, der beim Label ausgegeben werden soll. Du kannst auch Ninox-Felder angeben oder Variablen definieren. Wichtig ist hier, dass Text ausgegeben wird.

Du kannst außerdem mit position bestimmen, ob das Label "left" oder "right" sein soll, mit fontSize die Schriftgröße und mit color die Schriftfarbe des Labels einstellen.

labelSettings: {
			title: "Erledigt", // "text" oder Ninox-Feld (wichtig ist dass hier Text ausgegeben wird)
			position: "right",
			fontSize: "17px",
			fontColor: "#0066FF"
		},

labelSettings: {
			title: "", // default: Gebt ihr keinen Titel ein, wird kein Label angezeigt.
			position: "", // default: right
			fontSize: "", // default: 13px
			fontColor: "" // default: #262f4d
		},

clickAction Block

Bei dem clickAction Block trägst du relevante Infos für die Click Aktion ein. Bei recordId gibst du die record ID des Ninox Records an. Bei der fieldId gibst du die Field ID des Ninox-Feldes an, auf das die Action angewendet wird. Im value definierst du, was mit dem Ninox-Feld passieren soll, wenn man die Check Box anklickt.

clickAction: {
			recordId: Nr,
			fieldId: "G",
			value: if 'Ja / Nein' = true then null else true end 
		}

💡 Hinweis: Um die Ninox Feld-ID bestimmter Felder herauszufinden verwendest am besten die nützliche Funktion arcFieldFinder().

Beispiel und Vorlage

Beispiel: Check Box in einer Spalte der Custom Table.

Vorlage: Anwendungs-Code mit dynamischem Label

Du kannst dir folgenden Code kopieren und mit kleinen Anpassungen, hast du dieses fertige Design mit dynamischem Label:

Die Stellen, wo du Werte ändern oder anpassen musst sind mit // markiert. Denk daran, diese Passagen aus deinem fertigen Code zu entfernen.

💡 Tipp: Wenn du z.B. kein Label bei deiner Check Box brauchst, kannst du den gesamten labelSettings Block aus deinem Anwendungs-Code löschen.

arcCheckBox({
		uniqueId: "styled_CheckBox",
		value: 'Ja / Nein Feld', // mit deinem Wert ersetzen
		width: "",
		height: "",
		boxSize: "",
		embedded: false, // true eingeben, wenn die Checkbox in einem anderen Widget liegt
		borderRadius: "",
		activeSettings: {
			backgroundColor: "#99CCA5",
			borderColor: "#239B56",
			color: "#239B56"
		},
		inactiveSettings: {
			backgroundColor: "#FFBFBE",
			borderColor: "#FF7977",
			color: ""
		},
		labelSettings: {
			title: if 'Ja / Nein Feld' = true then
				"erledigt"
			else
				"offen"
			end, // 'Ja / Nein Feld' mit deinem Wert ersetzen und ggf. den Text anpassen
			position: "right",
			fontSize: "",
			fontColor: ""
		},
		clickAction: {
			recordId: Nr,
			fieldId: "J", // mit deinem Wert ersetzen
			value: if 'Ja / Nein Feld' = true then
				null
			else
				true
			end // 'Ja / Nein Feld' mit deinem Wert ersetzen oder ggf. alles mit deiner Variable austauschen
		}
	})

Zurück

Sorting

Zurück

Sorting

Weiter

Buttons

Weiter

Buttons