Premium Widgets

Custom Grid

AI Defaults

uniqueId: Required, `"grid-" + Nr`.
columns: String value (e.g. `"3"`), NOT a number. Default: auto-fill.
columnWidth: Default `"200px"`, controls minimum column width in auto-fill mode.
gap: Default `"2px"`, typically set to `"10px"` or `"16px"`.
height: Use `"auto"` or `"100%"` depending on context.
blocks: Each block can have `width`, `height`, `alignX`, `alignY`.
embedded: Set `true` when inside another widget.

Custom Grid

Das Custom Grid ermöglicht die Erstellung von flexiblen und leistungsstarken Layouts durch die Definition eines zweidimensionalen Rasters. Durch die Festlegung von Spalten und Zeilen hast du eine präzise Kontrolle über die Anordnung von Inhalten, was besonders nützlich für die Schaffung komplexer Layoutstrukturen und die Gestaltung responsiver Designs ist.

Der grundlegende Unterschied zwischen dem Grid und Layout besteht darin, dass das Layout in einer Dimension konzipiert wurde – entweder einer Zeile *oder* einer Spalte. Grid wurde für ein zweidimensionales Layout konzipiert – Zeilen und Spalten gleichzeitig.

Beispiel-Bild eines Rasters mit der Integration von <a href="/documentation/cards">Cards </a>und <a href="/documentation/custom-layout">Layouts</a>:

## Anwendungscode manuell

Bei einem manuellen Grid kannst du die Blöcke einzeln definieren und die Anzahl der Blöcke & deren Inhalte beliebig selbst bestimmen.

arcCustomGrid({
      uniqueId: "",
      width: "100%",
      height: "100%",
      columns: "2",
      columnWidth: "400px",
      gap: "10px",
      paddingY: "20px",
      paddingX: "20px",
      blocks: [{
        blockId: "",
        width: "",
        height: "",
        alignX: "center",
        alignY: "center",
        paddingY: "",
        paddingX: "",
        backgroundColor: "",
        lineHeight: "",
        styles: "",
        value: ""
       },{
        blockId: "",
        width: "",
        height: "",
        alignX: "center",
        alignY: "center",
        paddingY: "",
        paddingX: "",
        backgroundColor: "",
        lineHeight: "",
        styles: "",
        value: ""
       }]
     })

Anwendungscode dynamisch

Bei einem dynamischen Grid, speist du die einzelnen Block-Elemente aus einer dynamischen Liste in das Grid ein. Im Anwendungscode kannst du vor deinen block-Elementen deine Liste referenzieren. Hier im Beispiel aus einer Aufgaben-Tabelle.

let aufgabe := (select Aufgaben);
arcCustomGrid({
      uniqueId: "",
      width: "100%",
      height: "100%",
      columns: "2",
      columnWidth: "400px",
      gap: "10px",
      paddingY: "20px",
      paddingX: "20px",
      blocks: aufgabe.[{
        blockId: "",
        width: "",
        height: "",
        alignX: "center",
        alignY: "center",
        paddingY: "",
        paddingX: "",
        backgroundColor: "",
        lineHeight: "",
        styles: "",
        value: ""
       }]
     })

Allgemeine Settings

Die oberen Parameter geben die allgemeinen Settings deines Grids an.

uniqueId

*uniqueId* ist die individuelle Bezeichnung deines Grids. Achte darauf, dass du hier einen einzigartigen Titel vergibst. Das ist wichtig, falls du mehrere Grids auf einer Seite / in einer Tabelle darstellen möchtest und diese sich nicht gegenseitig überschreiben.

uniqueId: "Grid Aufgaben"+Nr,

width

*width* gibt die Breite deines Grids an.

width: "100%", // Prozent-Werte. Hier: volle Breite.
width: "100px", // Pixel-Werte
width: "" // default: 100%

height

*height* gibt die Höhe des Grids an.

height: "auto", // Automatisch an den Inhalt angepasste Höhe.
height: "300px", // Pixel-Werte
height: "", // default: auto

columns

*columns* definiert wie viele Spalten (also wie viele Blöcke je Zeile) in deinem Grid angezeigt werden.

columns: "2", // Zahlen-Wert
columns: "", // default: auto-fill

columnWidth

*columnWidth* definiert wie breit deine einzelnen Spalten, die du unter columns angibst, sein sollen.

columnWidth: "400px", // Pixel-Wert
columnWidth: "", // default: 200px

gap

*gap* gibt den Abstand zwischen den einzelnen Blöcken (nicht nur Spalten!) an.

gap: "10px", // Pixel-Werte
gap: "", // dafault: 2px

paddingX

*paddingX gibt den Abstand zwischen dem Inhalt (hier: Blöcke) und dem Rand jeweils links und rechts an. *

paddingX: "20px", // Pixel-Werte
paddingX: "", // default: 0px

paddingY

*paddingY gibt den Abstand zwischen dem Inhalt (hier: Blöcke) und dem Rand jeweils oben und unten an. *

paddingY: "20px", // Pixel-Werte
paddingY: "", // default: 0px

Block Settings

In den Block Settings gibst du an, was in deinen einzelnen Blöcken des Grids angezeigt werden soll. Wie oben aufgezeigt, kannst du die Blöcke entweder manuell oder dynamisch definieren.

blockId

Die blockId kannst du nutzen, um deine Blöcke besser unterscheiden zu können. Das macht vor allem bei dem manuellen Grid Sinn. Die blockId wirkt sich aber auf keine anderen Parameter aus.

blockId: "",

width

*width* gibt die Breite deines Grid-Blocks an.

width: "100%", // Prozent-Werte. Hier: volle Breite.
width: "fraction", // Mit Fraction ordnet sich das Element unter und nimmt nur der übrig gebliebenen Platz ein.
width: "100px", // Pixel-Werte
width: "" // default: 100%

height

*height* gibt die Höhe des Grid-Blocks an.

height: "auto", // Automatisch an den Inhalt angepasste Höhe.
height: "fraction", // Mit Fraction ordnet sich das Element unter und nimmt nur der übrig gebliebenen Platz ein.
height: "300px", // Pixel-Werte
height: "", // default: auto

alignX

*alignX* gibt an, wie deine Inhalte auf der X-Achse angeordnet werden.

alignX: "center", // zentriert // default: center
alignX: "left", // linksbündig
alignX: "right", // rechtsbündig
alignX: "between", // teilt blocks auf gesamtbreite auf
alignX: "", // default: left

alignY

*alignY* gibt an, wie deine Inhalte auf der Y-Achse angeordnet werden.

alignY: "center", // zentriert // default: center
alignY: "top", // oben angeordnet
alignY: "bottom", // unten angeordnet
alignY: "between", // teilt blocks auf gesamtbreite auf
alignY: "", // default: center

paddingY

*paddingY gibt den Abstand zwischen dem Inhalt deines einzelnenBlocks und dem Rand jeweils links und rechts an. *

paddingY: "20px", // Pixel-Werte
paddingY: "", // default: 0px

paddingX

*paddingX gibt den Abstand zwischen dem Inhalt deines einzelnenBlocks und dem Rand jeweils links und rechts an. *

paddingX: "20px", // Pixel-Werte
paddingX: "", // default: 0px

backgroundColor

*backgroundColor gibt die Hintergrundfarbe deines einzelnen Blocks an. *

backgroundColor: "#000", // HEX-Wert
backgroundColor: "", // default: Keine

lineHeight

*lineHeight* gibt den Zeilenabstand in den Texten deines Blocks an.

lineHeight: "normal", // Standardhöhe je nach Schriftgröße
lineHeight: "1.6", // Zahlenwerte getrennt durch Punkte
lineHeight: "10px", // Pixel-Werte
lineHeight: "", // default: normal

styles

Bei styles kannst du dem Grid-Block eigene CSS styles hinzufügen.

styles: "", // z.B. font-weight: 700;

value

In deinem *value *definierst du nun, was in den einzelnen Blöcken angezeigt wird. Beispielsweise kannst du hier nun andere Widgets, wie die <a href="/documentation/cards">Custom Card</a> einfügen. * *

value: ""

Aktionen

clickAction beschreibt deine Aktionen in den jeweiligen Blocks.

clickAction: {
    recordId: Nr,
    type: "update",
    field: "",
    value: "",
        }

Unterschiedliche Typen der Aktionen

type sind die jeweiligen Funktionen der Aktion.

// Folgende Actions benötigen die zwei Paramter: "recordId" und "type"
"popup"
"delete"
"openRecord"
"fullscreen"
// Folgender Actions benötigt die 4 Parmater: &quot;recordId&quot;, &quot;type&quot;, &quot;field&quot;, &quot;value&quot; &quot;update&quot;
// Folgende Actions benötigen nur den Parameter &quot;type&quot; in der clickAction. &quot;closeFullScreen&quot; &quot;closeRecord&quot; &quot;closeAllRecords&quot;</code></pre>