Widgets

Custom Grid

1.1.1

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 und Layouts:

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 Custom Card 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: "recordId", "type", "field", "value" 
"update" 

// Folgende Actions benötigen nur den Parameter "type" in der clickAction.
"closeFullScreen"
"closeRecord"
"closeAllRecords"

Zurück

Custom Steps

Zurück

Custom Steps

Weiter

Custom Upload

Weiter

Custom Upload