--- title: "Check Box" slug: "check-box" category: "Mini Widgets" hosts: "ninox" --- # Check Box ## AI Defaults (read first) - **Function name**: `arcCustomCheckBox`. - **uniqueId**: Required, e.g. `"checkbox-" + Nr`. - **recordId**: Required, use raw `Nr`. - **field**: Required, use `fieldId(Nr, "Feldname")` – must be a boolean/yes-no field. - **value**: Current boolean state from the field. # Check Box Die Check Box kannst du für die optische Darstellung von deinen Ja/Nein Ninox-Feldern nutzen. ![](https://framerusercontent.com/images/XLOC8UfDRKQjhqx744eb1JzUyzE.png) 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](/custom-table) integrieren. Dies ist der gesamte Anwendungscode mit allen Parametern, die aktuell für die Check Box zur Verfügung stehen: ```javascript 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. ```javascript uniqueId: Nr, // Ninox-Feld uniqueId: "Checkbox 1", // Text in " ``` ### value Bei dem ***value*** gibst du den Namen deines Ninox-Ja/Nein-Feldes an. ```javascript 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. ```javascript 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. ```javascript 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. ```javascript 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. ![](https://framerusercontent.com/images/jAD8j5G4Qgu7GtaCjoiDP1bY9M.png) ```javascript 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. ![](https://framerusercontent.com/images/wfBxaQXtgMGbuMqspjDQqv7ctyY.png) ```javascript 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. ![](https://framerusercontent.com/images/rj8oX1OsPhULE3w0y0g1IWQc0N4.png) ```javascript 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. ![](https://framerusercontent.com/images/K8ruoQIAIdeaw7M5uBdQO25vPI.png) ```javascript 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. ![](https://framerusercontent.com/images/523K0a0Mt7UdM3HrTWvPKC9qRA.png) ```javascript 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. ![](https://framerusercontent.com/images/glD2dnfE8bprWD18aeK5wPt5nfw.png) ```javascript 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. ```javascript 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().](https://www.arc-rider.de/documentation/field-finder) ## Beispiel und Vorlage **Beispiel: Check Box in einer Spalte der **[**Custom Table**](/custom-table)**.** ![](https://framerusercontent.com/images/z36FQ2pPqaAf2qyFUZpe2sv44cc.png) **Vorlage: Anwendungs-Code mit dynamischem Label** Du kannst dir folgenden Code kopieren und mit kleinen Anpassungen, hast du dieses fertige Design mit dynamischem Label: ![](https://framerusercontent.com/images/A5ZtSy9EUovXWfWuVKvxO68oU.png) 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.** ** ```javascript 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 } }) ```