Mini Widgets

Cards

AI Defaults

Function name: `arcCustomCard`.
uniqueId: Required when using actions, e.g. `"card-" + Nr`.
title: , **subtitle**, **value**: Main content properties.
Use inside arcCustomLayout blocks: Set `clickAction` on the block, not the card, for navigation.
No `else "" end`: Omit else branches for optional content.

Custom Cards

Die Custom Cards kannst du entweder einzeln in Formel-Felder verwenden oder in komplexere Oberflächen mit<a href="/documentation/custom-layout"> Custom Layout </a>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 <a href="/documentation/custom-icon">Mini-Widget customIcon</a> 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 <a href="/documentation/progress-bar">eine Progress Bar</a>.

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)