Mini Widgets

Cards

1.2.1

Order widget

Custom Cards

You can use the Custom Cards either individually in formula fields or integrate them into more complex interfaces with Custom Layout. The advantage of the layout is that you can make the card clickable within the blocks, allowing you to link to other tables or records.

Application Code

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)

Explanation of Individual Parameters

width specifies the width of your card.

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

height defines the height of the card.

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

borderRadius defines the rounding of the corners.

borderRadius: "15px",

icon is displayed in the upper left corner of the card. You can output this, but you don't have to. An icon can be defined using the Mini-Widget customIcon. Here you can either just display the icon or also work with background colors.

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

title defines the title of your card.

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

value defines the body of your card. Here you can either work with text or use other mini-widgets, such as a 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 Values as 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)