Mini Widgets

Badges

2.4.1

Badge

Das Badge eignet sich, um besondere Merkmale von Datensätzen optisch hervorzuheben. Es kann losgelöst in der Datenbank verwendet oder in anderen Widgets, wie die Custom Table, eingesetzt werden.

Anwendungscode

Der folgende Anwendungscode enthält alle möglichen Parameter für dieses 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"
	})

Detaillierte Beschreibung der Parameter

uniqueId vergibst du individuell und sollte einzigartig auf deiner Oberfläche sein. Sinn dahinter ist: Wenn du mehrere Badges mit unterschiedlichen Settings auf deiner Seite erstellst, überschrieben sich die Styles nicht.

uniqueId: "",

value gibt den Text-Wert in dem Badge aus.

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

width gibt die Breite deines Badges an.

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

iconPosition ist die Position des Icons innerhalb des Badges.

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

fontSize gibt die Schriftgröße des Textes im Badge an.

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

fontWeight bestimmt die Dicke deines Textes.

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

borderRadius bestimmt die Abrundung der Ecken vom Badge.

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

embedded benutzt du, wenn du den Button 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,  // Fallback

Eine Farbe mit Abstufungen

Gibst du eine singleColor an, so passen sich alle weiteren Farben (alle Werte mit Color) automatisch an diesem Wert an. Das heißt du brauchst die folgenden Color-Werte dann nicht mehr ausfüllen.

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

Individuelle Farbgestaltung

fontColor gibt die Farbe der Schrift an

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

backgroundColor gibt die Farbe des Hintergrundes an.

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

borderColor gibt die Farbe der Umrandung an.

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

Standard-Werte als Fallback

💡 Hinweis: Trägst du keine Werte hinter die Parameter ein, so ist in den meisten Fällen ein Fallback-Wert im System hinterlegt. An manchen Stellen, wie Berechnungsfelder (Tatsächliche Zahlenwerte zum Beispiel) macht das keinen Sinn. In Style-Parametern, wie Farben oder Größen hingegen schon. Hier siehst du den Code ohne eingetragene Werte und in den Kommentaren dahinter die Standard-Werte:

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

Zurück

Field Finder

Zurück

Field Finder

Weiter

Progress Bar

Weiter

Progress Bar