Beispiele
Dashboardansicht mit Grid
Dashboards neu gedacht: Grid-Layout in Ninox
Mit dem arcCustomGrid-Widget lassen sich individuelle Dashboards und Übersichtsseiten in einem flexiblen Grid-Layout gestalten.
Kombiniere beliebige Widgets, Texte oder Layout-Blöcke und positioniere sie pixelgenau – ob im internen Cockpit oder für externe Kundenansichten.
Das folgende Beispiel zeigt ein einfaches Dashboard-Setup mit drei Spalten und mehreren Cards, Texten und Icons:
Anwendungscode des Beispiels
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."
})
}]
})
}]
})