Examples
Dashboard view with Grid
Reinventing Dashboards: Grid Layout in Ninox
With the arcCustomGrid widget, you can create individual dashboards and overview pages in a flexible grid layout.
Combine any widgets, texts, or layout blocks and position them with pixel precision – whether in the internal cockpit or for external customer views.
The following example shows a simple dashboard setup with three columns and several cards, texts, and icons:
Application Code of the Example
let current := this;
arcCustomLayout({
uniqueId: Nr,
embedded: false,
fullscreen: true,
direction: "horizontal",
alignX: "center",
alignY: "center",
width: "",
height: "700px",
gap: "50px",
backgroundColor: "#000000",
paddingY: "30px",
paddingX: "30px",
blocks: [{
width: "",
height: "100%",
lineHeight: "",
alignX: "left",
color: "",
styles: " overflow-y: scroll;",
value: arcCustomGrid({
uniqueId: "",
width: "100%",
height: "100%",
columns: "auto-fit",
columnWidth: "250px",
gap: "10px",
paddingY: "20px",
paddingX: "20px",
styles: "/*grid-template-columns: repeat(auto-fit, 1fr);*/",
blocks: [{
blockId: "",
width: "",
height: "100%",
alignX: "center",
alignY: "center",
paddingY: "",
paddingX: "",
backgroundColor: "",
lineHeight: "",
styles: "overflow-y: scroll;",
value: arcCustomGrid({
uniqueId: "Dashboard Grid",
styles: "",
width: "100%",
height: "100%",
columns: "auto-fill",
columnWidth: "200px",
gap: "10px",
paddingY: "",
paddingX: "",
blocks: [{
blockId: "--------- GRID BLOCK 1 ----------",
alignX: "center",
alignY: "right",
height: "100%",
width: "100%",
clickAction: {
type: "fullscreen",
recordId: current.Nr
},
value: arcCustomCard({
uniqueId: "Card 1",
backgroundColor: "#fff",
width: "100%",
height: "100%",
borderRadius: "10px",
icon: arcCustomIcon({
name: "clipboard-text",
containerSize: "50px",
borderSize: "1px",
borderColor: "",
iconSize: "25px",
borderRadius: "50px",
color: "#FF7403",
backgroundColor: "#FEEFC4"
}),
title: "Aufgaben",
value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
})
}, {
blockId: "--------- GRID BLOCK 2 ----------",
alignX: "center",
alignY: "right",
height: "100%",
width: "100%",
value: arcCustomCard({
uniqueId: "Card 2",
backgroundColor: "#fff",
width: "100%",
height: "100%",
borderRadius: "10px",
icon: arcCustomIcon({
name: "users",
containerSize: "50px",
borderSize: "1px",
borderColor: "",
iconSize: "25px",
borderRadius: "50px",
color: "#C637E4",
backgroundColor: "#FAE6FF"
}),
title: "Mitarbeiter",
value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
})
}, {
blockId: "--------- GRID BLOCK 3 ----------",
alignX: "center",
alignY: "right",
height: "100%",
width: "100%",
value: arcCustomCard({
uniqueId: "Card 3",
backgroundColor: "#fff",
width: "100%",
height: "100%",
borderRadius: "10px",
icon: arcCustomIcon({
name: "folder",
containerSize: "50px",
borderSize: "1px",
borderColor: "",
iconSize: "25px",
borderRadius: "50px",
color: "#42B000",
backgroundColor: "#DEFCCB"
}),
title: "Buchhaltung",
value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
})
}, {
blockId: "--------- GRID BLOCK 4 ----------",
alignX: "center",
alignY: "right",
height: "100%",
width: "100%",
value: arcCustomCard({
uniqueId: "Card 4",
backgroundColor: "#fff",
width: "100%",
height: "100%",
borderRadius: "10px",
icon: arcCustomIcon({
name: "clock",
containerSize: "50px",
borderSize: "1px",
borderColor: "",
iconSize: "25px",
borderRadius: "50px",
color: "#944810",
backgroundColor: "#ECD8C8"
}),
title: "Zeiterfassung",
value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
})
}, {
blockId: "--------- GRID BLOCK 5 ----------",
alignX: "center",
alignY: "right",
height: "100%",
width: "100%",
value: arcCustomCard({
uniqueId: "Card 5",
backgroundColor: "#fff",
width: "100%",
height: "100%",
borderRadius: "10px",
icon: arcCustomIcon({
name: "buildings",
containerSize: "50px",
borderSize: "1px",
borderColor: "",
iconSize: "25px",
borderRadius: "50px",
color: "#E80102",
backgroundColor: "#FFEDEC"
}),
title: "Kunden",
value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
})
}, {
blockId: "--------- GRID BLOCK 6 ----------",
alignX: "center",
alignY: "right",
height: "100%",
width: "100%",
value: arcCustomCard({
uniqueId: "Card 6",
backgroundColor: "#fff",
width: "100%",
height: "100%",
borderRadius: "10px",
icon: arcCustomIcon({
name: "file",
containerSize: "50px",
borderSize: "1px",
borderColor: "",
iconSize: "25px",
borderRadius: "50px",
color: "#028BFF",
backgroundColor: "#E1F1FF"
}),
title: "Dokumente",
value: "Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text"
})
}]
})
}, {
blockId: "",
width: "",
height: "100%",
alignX: "center",
alignY: "center",
paddingY: "",
paddingX: "",
backgroundColor: "",
lineHeight: "",
styles: "",
value: arcCustomCard({
uniqueId: "Card 6",
backgroundColor: "#fff",
width: "100%",
height: "100%",
borderRadius: "10px",
icon: arcCustomIcon({
name: "kanban",
containerSize: "50px",
borderSize: "1px",
borderColor: "",
iconSize: "25px",
borderRadius: "50px",
color: "#028BFF",
backgroundColor: "#E1F1FF"
}),
title: "Projekte",
value: "I'm baby pitchfork williamsburg twee asymmetrical direct trade, fam blue bottle kombucha slow-carb franzen. Poke gochujang pop-up meditation. Waistcoat vinyl vice small batch photo booth migas iPhone pug kale chips jean shorts poutine. Intelligentsia dreamcatcher plaid, prism fashion axe kale chips typewriter marxism wayfarers enamel pin readymade chia. Pok pok mixtape everyday carry cupping, poke slow-carb skateboard."
})
}]
})
}]
})