Widgets

Custom Grid

1.1.1

Order widget

Custom Grid

The Custom Grid allows for the creation of flexible and powerful layouts by defining a two-dimensional grid. By specifying columns and rows, you have precise control over the arrangement of content, which is especially useful for creating complex layout structures and designing responsive designs.

The fundamental difference between the Grid and Layout is that the Layout is conceived in one dimension – either a row or a column. The Grid is designed for a two-dimensional layout – rows and columns simultaneously.

Example image of a grid integrating Cards and Layouts:

Application Code Manual

In a manual grid, you can define the blocks individually and determine the number of blocks & their contents at will.

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: ""
       }]
     })

Application Code Dynamic

In a dynamic grid, you feed the individual block elements from a dynamic list into the grid. In the application code, you can reference your list before your block elements. Here in the example from a task table.

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: ""
       }]
     })

General Settings

The parameters above specify the general settings of your grid.

uniqueId

uniqueId is the unique designation of your grid. Make sure to assign a unique title here. This is important if you want to display multiple grids on a page / in a table and prevent them from overwriting each other.

uniqueId: "Grid Aufgaben"+Nr,

width

width specifies the width of your grid.

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

height

height specifies the height of the grid.

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

columns

columns defines how many columns (i.e., how many blocks per row) should be displayed in your grid.

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

columnWidth

columnWidth defines how wide the individual columns specified under columns should be.

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

gap

gap specifies the distance between the individual blocks (not just columns!).

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

paddingX

paddingX specifies the distance between the content (here: blocks) and the edge on the left and right sides.

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

paddingY

paddingY specifies the distance between the content (here: blocks) and the edge on the top and bottom.

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

Block Settings

In the block settings, you specify what should be displayed in each of your blocks in the grid. As shown above, you can define the blocks either manually or dynamically.

blockId

You can use the blockId to distinguish your blocks better. This is especially sensible for the manual grid. The blockId does not affect any other parameters.

blockId: "",

width

width specifies the width of your grid block.

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 specifies the height of the grid block.

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 specifies how your contents are arranged on the X-axis.

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 specifies how your contents are arranged on the Y-axis.

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 specifies the distance between the content of your individual block and the edge on the left and right sides.

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

paddingX

paddingX specifies the distance between the content of your individual block and the edge on the left and right sides.

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

backgroundColor

backgroundColor specifies the background color of your individual block.

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

lineHeight

lineHeight specifies the line spacing in the texts of your block.

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

styles

In styles, you can add your own CSS styles to the grid block.

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

value

In your value , you now define what is displayed in the individual blocks. For example, you can insert other widgets, such as the Custom Card.

value: ""

Actions

clickAction describes your actions in the respective blocks.

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

Different Types of Actions

type refers to the respective functions of the action.

// 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"