Mini Widgets

Check Box

2.3.0

Order widget

Check Box

You can use the Check Box for the visual representation of your Yes/No Ninox fields.

To display the Check Box, insert the application code into a Ninox formula field and adjust the parameters to your liking. You can also integrate this mini-widget into other widgets, like the Custom Table.

This is the entire application code with all the parameters currently available for the Check Box:

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

Explanation of Individual Parameters

Below, it will be broken down for you which parameters you can use and what you need to enter respectively.

uniqueId

You assign the uniqueId individually; it should be unique. The reasoning behind this is: If you create multiple Check Boxes with different settings on your surface, the styles do not override each other.

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

value

For the value, you specify the name of your Ninox Yes/No field.

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

embedded

You use embedded if you do not want to place the Check Box 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,  // wenn das CheckBox Widget in einem anderen Widget eingesetzt wird
embedded: "", // default: false

width

With width, you determine the width of the entire Check Box element.

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

height

With height, you determine the height of the entire Check Box element.

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

boxSize

With boxSize, you determine how large the Check Box should be.

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

borderRadius

With borderRadius, you determine the rounding of your Check Box. You can enter px values and % values.

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

strokeWidth

With strokeWidth, you determine the line thickness for the border of the checkbox as well as for the check line of the icon.

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

activeSettings Block

With the activeSettings Block, you can set the backgroundColor, borderColor of the Check Box and color of the check line for the active checkbox.

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

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

inactiveSettings Block

With the inactiveSettings Block, you can set the backgroundColor, borderColor of the Check Box and color of the check line for the inactive checkbox.

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

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

labelSettings Block

With the labelSettings Block, you can give your Check Box a label. You can enter the text to be displayed as the label under title. You can also specify Ninox fields or define variables. It is important that text is outputted here.

You can also determine with position whether the label should be "left" or "right", with fontSize the font size, and with color the font color of the label.

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

In the clickAction Block, you enter relevant information for the click action. In recordId, you specify the record ID of the Ninox record. In fieldId, you specify the field ID of the Ninox field to which the action will be applied. In value, you define what should happen to the Ninox field when the Check Box is clicked.

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

💡 Note: To find out the Ninox field ID of certain fields, it is best to use the useful function arcFieldFinder().

Example and Template

Example: Check Box in a column of the Custom Table.

Template: Application code with dynamic label

You can copy the following code and with small adjustments, you will have this finished design with dynamic label:

The places where you need to change or adjust values are marked with //. Remember to remove these passages from your finished code.

💡 Tip: If you, for example, do not need a label for your Check Box, you can delete the entire labelSettings Block from your application code.

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