--- title: "Custom Grid" slug: "custom-grid" category: "Widgets" hosts: "vue" --- # Custom Grid ## AI Defaults (read first) - **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 [Cards ](/documentation/cards)und [Layouts](/documentation/custom-layout): ![](https://framerusercontent.com/images/2YBdVENarVNdTsZmsI9uEVrHA.png) ## Anwendungscode manuell Bei einem manuellen Grid kannst du die Blöcke einzeln definieren und die Anzahl der Blöcke & deren Inhalte beliebig selbst bestimmen. ```javascript 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. ```javascript 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. ```javascript uniqueId: "Grid Aufgaben"+Nr, ``` ### width *width* gibt die Breite deines Grids an. ```javascript width: "100%", // Prozent-Werte. Hier: volle Breite. width: "100px", // Pixel-Werte width: "" // default: 100% ``` ### height *height* gibt die Höhe des Grids an. ```javascript 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. ```javascript columns: "2", // Zahlen-Wert columns: "", // default: auto-fill ``` ### columnWidth *columnWidth* definiert wie breit deine einzelnen Spalten, die du unter columns angibst, sein sollen. ```javascript columnWidth: "400px", // Pixel-Wert columnWidth: "", // default: 200px ``` ### gap *gap* gibt den Abstand zwischen den einzelnen Blöcken (nicht nur Spalten!) an. ```javascript 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. * ```javascript 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. * ```javascript 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. ```javascript blockId: "", ``` ### width *width* gibt die Breite deines Grid-Blocks an. ```javascript 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. ```javascript 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. ```javascript 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. ```javascript 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. * ```javascript 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. * ```javascript paddingX: "20px", // Pixel-Werte paddingX: "", // default: 0px ``` ### backgroundColor *backgroundColor gibt die Hintergrundfarbe deines einzelnen Blocks an. * ```javascript backgroundColor: "#000", // HEX-Wert backgroundColor: "", // default: Keine ``` ### lineHeight *lineHeight* gibt den Zeilenabstand in den Texten deines Blocks an. ```javascript 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. ```javascript 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 [Custom Card](/documentation/cards) einfügen. * * ```javascript value: "" ``` ## Aktionen ***clickAction*** beschreibt deine Aktionen in den jeweiligen Blocks. ```javascript clickAction: { recordId: Nr, type: "update", field: "", value: "", } ``` ### Unterschiedliche Typen der Aktionen ***type*** sind die jeweiligen Funktionen der Aktion. ```javascript // Folgende Actions benötigen die zwei Paramter: "recordId" und "type" "popup" "delete" "openRecord" "fullscreen" // Folgender Actions benötigt die 4 Parmater: "recordId", "type", "field", "value" "update" // Folgende Actions benötigen nur den Parameter "type" in der clickAction. "closeFullScreen" "closeRecord" "closeAllRecords" ```