Developer Kit · Examples
Vista de dashboard con Grid
Vista de dashboard con Grid
Dashboards repensados: layout Grid en Ninox
Con el widget arcCustomGrid puedes diseñar dashboards y páginas de resumen personalizados en un layout <a href="/documentation/custom-grid">Grid</a> flexible.
Combina cualquier widget, texto o bloque de <a href="/documentation/custom-layout">Layout</a> y posiciónalos con precisión de píxel, tanto para el cockpit interno como para vistas de cliente externas.
El siguiente ejemplo muestra una configuración de dashboard sencilla con tres columnas y varias <a href="/documentation/cards">Cards</a>, textos e <a href="/documentation/custom-icon">Icons</a>:
## Código de aplicación del ejemplolet 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."
})
}]
})
}]
})