Mini Widgets

Check Box

Check Box

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 <a href="/custom-table">Custom Table</a> 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: &quot;&quot;, // default: #0066FF             borderColor: &quot;&quot;, // default: #0066FF             color: &quot;&quot; // default: #FFF         },</code></pre>
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: &quot;&quot;, // default: #C8CCD4             borderColor: &quot;&quot;,  // default: #C8CCD4             color: &quot;&quot; // default: none         },</code></pre>
labelSettings Block
Mit dem labelSettings Block kannst du deiner Check Box ein Label geben. Du kannst bei titleden 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 positionbestimmen, 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: &quot;&quot;, // default: Gebt ihr keinen Titel ein, wird kein Label angezeigt.             position: &quot;&quot;, // default: right             fontSize: &quot;&quot;, // default: 13px             fontColor: &quot;&quot; // default: #262f4d         },</code></pre>
clickAction Block
Bei dem clickAction Block trägst du relevante Infos für die Click Aktion ein. Bei recordIdgibst du die record ID des Ninox Records an. Bei der fieldIdgibst 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 <a href="https://www.arc-rider.de/documentation/field-finder">Funktion arcFieldFinder().</a>
Beispiel und Vorlage
Beispiel: Check Box in einer Spalte der <a href="/custom-table"><strong>Custom Table</strong></a>.

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