Mini Widgets

Badges

2.4.1

Order widget

Badge

The badge is suitable for visually highlighting special features of records. It can be used independently in the database or employed in other widgets, such as the Custom Table.

Application Code

The following application code includes all possible parameters for this mini-widget badge.

arcCustomBadge({
		uniqueId: "customBadge",
        embedded: true,
		width: "220px",
		icon: "",
		iconPosition: "left",
		fontSize: "",
		fontWeight: "",
		borderRadius: "",
		singleColor: "",
		fontColor: "",
		backgroundColor: "",
		borderColor: "",
		paddingY: "",
		paddingX: "",
		value: "Löschen"
	})

Detailed Description of the Parameters

uniqueId should be assigned individually and should be unique on your surface. The rationale behind this is: If you create multiple badges with different settings on your page, the styles do not overwrite each other.

uniqueId: "",

value outputs the text value in the badge.

value: "Badge-Text" // Fixer Text-Wert in ""
value: Projekt.Status // Ninox-Felder / -Berechnungen

width specifies the width of your badge.

width: "500px", // Pixel-Werte für festgelegte Breiten.
width: "fit-content", // Passt sich dem Inhalt automatisch an.

iconPosition is the position of the icon within the badge.

iconPosition: "left", // Icon erscheint links vom Text.
iconPosition: "right", // Icon erscheint rechts vom Text.

fontSize specifies the font size of the text in the badge.

fontSize: "14px", //Pixel-Wert

fontWeight determines the thickness of your text.

fontWeight: "400", // Zahlen-Wert | 400 entspricht regular
fontWeight: "700", // Zahlen-Wert | 700 entspricht bold

borderRadius determines the rounding of the corners of the badge.

borderRadius: "0.3em", // Die Ecken passen sich proportional zur Größe des Badges an. 
borderRadius: "4px", // Pixel-Werte für fixe Abrundung.

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

A Color with Gradations

If you specify a singleColor, then all other colors (all values with Color) will automatically adjust to this value. This means you do not need to fill in the following color values.

 singleColor: "#1D8C96", // HEX-Code für Farben.

Custom Color Design

fontColor specifies the color of the text.

 fontColor: "#1D8C96", // HEX-Code für Farben.

backgroundColor specifies the color of the background.

 backgroundColor: "#1D8C96", // HEX-Code für Farben.

borderColor specifies the color of the border.

  borderColor: "#1D8C96", // HEX-Code für Farben.

Default Values as Fallback

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

arcCustomBadge({
    uniqueId: "",
    width: "", // Fallback: "fit-content"
    icon: "", // Fallback: kein Icon wird angezeigt
    iconPosition: "",// Fallback: kein Icon wird angezeigt
    fontSize: "", // Fallback: "12px"
    fontWeight: "", // Fallback: "400"
    borderRadius: "", // Fallback: "0.3em"
    singleColor: "", // Fallback: "#3E6FFF"
    iconColor: "", // Fallback ist die singleColor
    fontColor: "", // Fallback ist die singleColor
    backgroundColor: "", // Fallback ist die singleColor
    borderColor: "", // Fallback ist die singleColor
    value: "", // Kein Fallback
})