Mini Widgets

Cards

1.2.1

Custom Cards

Die Custom Cards kannst du entweder einzeln in Formel-Felder verwenden oder in komplexere Oberflächen mit Custom Layout integrieren. Der Vorteil bei dem Layout ist der, dass du die Card innerhalb der Blocks klickbar machen kannst und so auf andere Tabellen, bzw. Datensätze verlinken kannst.

Anwendungscode

let data := {
		uniqueId: "",
		width: "",
		height: "",
		borderRadius: "",
		icon: arcCustomIcon({
				name: "",
				containerSize: "",
				borderSize: "",
				borderColor: "",
				iconSize: "",
				borderRadius: "",
				color: "",
				backgroundColor: "",
			}),
        borderColor: "",
        borderWidth: "", 
        backgroundColor:"", 
        paddingY: "", 
        paddingX: "", 
		title: "",
		value: ""
	};
arcCustomCard(data)

Erklärung einzelner Parameter

width gibt die Breite deiner Card an.

width: "100%", // 100% füllt die gesamte Breite des Formelfeldes aus.
width: "200px", // Pixel-Wert definiert fixe Breite

height definiert die Höhe der Karte.

height: "100%", // 100% füllt die gesamte Höhe des Formelfeldes aus.
height: "200px", // Pixel-Wert definiert fixe Höhe

borderRadius definiert die Abrundungen der Ecken.

borderRadius: "15px",

icon wird in der Karte oben links dargestellt. Dieses kannst du ausgeben, musst du aber nicht. Ein Icon kannst du mit dem Mini-Widget customIcon definieren. Hier kannst du nur das Icon ausgeben lassen oder auch mit Hintergrundfarben arbeiten.

icon: arcCustomIcon({
				name: "",
				containerSize: "",
				borderSize: "",
				borderColor: "",
				iconSize: "",
				borderRadius: "",
				color: "",
				backgroundColor: ""
			})

title definiert den Titel und deiner Karte.

title: "Mitarbeiter", // Text in ""
title: Mitarbeiter.Name, // Ninox-Refrenz-Feld in Text Form

value definiert den Body deiner Karte. Hier kannst du entweder mit text arbeiten oder aber andere Mini-Widgets verwenden, wie etwa eine Progress Bar.

value: "Subtitel", // Text in ""
value: Mitarbeiter.Info // Ninox-Refrenz-Feld in Text Form
value: arcCustomProgressBar({
        uniqueId: "",
        width: "",
        fontSize: "",
        fontColor: "",
        backgroundColor: "",
        progressColor: "",
        valueTotal: "",
        valueProgress: "",
        valueText: ""
    }), // Andere Widgets oder Mini-Widgets einsetzen

Standard Werte als Fallback

let data := {
		uniqueId: "",
		width: "", // Fallback: 100% 
		height: "", // Fallback: auto
		borderRadius: "", // Fallback: 15px 
		icon: "",
		title: "Titel",
		value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
	};
arcCustomCard(data)

Zurück

Pagination

Zurück

Pagination

Weiter

Clock

Weiter

Clock