Beispiele
Dashboardansicht mit Grid
Dashboardansicht mit Grid
In dem folgenden Beispiel siehst du eine Dashboardansicht die mit dem Hauptwidgets Layout & Grid aufgebaut wurde. In dem Grid werden die Blöcke mit den Widgets Cards & Icon gefüllt.
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."
})
}]
})
}]
})