Beispiele
Datenaufnahme in Schritten
Datenaufnahme in Schritten
Wenn du im Außendienst tätig bist und schnell sowie unkompliziert Daten erfassen musst, ist eine klare und gut strukturierte Eingabemaske unerlässlich. Besonders bei einer großen Anzahl an zu erfassenden Feldern ist es sinnvoll, die Dateneingabe in mehrere Schritte zu unterteilen. Auf diese Weise wird der Benutzer nicht überfordert und kann schneller sowie geordneter die notwendigen Informationen eingeben.
In diesem Beitrag zeigen wir dir, wie du mit einfachen Tricks und nützlichen Widgets eine benutzerfreundliche Oberfläche gestalten kannst, die dir die Datenerfassung erheblich erleichtert. Erfahre, wie du die Effizienz deines Arbeitsalltags steigerst und dabei stets den Überblick behältst.
Widget: Custom Layout mit integrierten Mini Widgets: Input, Button, Text und Icon.
Anwendungscode Teil 1 Layouts & Überschriften
let current := this;
let namenLayout := arcCustomLayout({
uniqueId: "namenLayout " + Nr,
embedded: true,
fullscreen: false,
direction: "vertical",
alignX: "center",
alignY: "center",
width: "490px",
height: "100%",
gap: "10px",
backgroundColor: "",
paddingY: "",
paddingX: "",
blocks: [{
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
styles: "",
value: arcCustomInput({
uniqueId: "vorname" + Nr,
recordId: Nr,
fieldId: "G",
title: text(Vorname),
value: text(Vorname),
type: "text",
embedded: true,
disabled: false,
width: "100%",
height: "40px",
alignX: "left",
paddingY: "",
paddingX: "",
fontColor: "",
fontSize: "",
fontWeight: "",
backgroundColor: "#F0F0F0",
borderWidth: "",
borderColor: "",
borderRadius: "",
focusAction: {
width: "",
showFocusOutline: "",
outlineWidth: "",
outlineColor: ""
},
labelSettings: {
title: "Vorname",
fontSize: "",
alignX: "",
gap: "10px"
}
})
}, {
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
value: arcCustomInput({
uniqueId: "Nachname" + Nr,
recordId: Nr,
fieldId: "H",
title: text(Nachname),
value: text(Nachname),
type: "text",
embedded: true,
disabled: false,
width: "100%",
height: "40px",
alignX: "left",
paddingY: "",
paddingX: "",
fontColor: "",
fontSize: "",
fontWeight: "",
backgroundColor: "#F0F0F0",
borderWidth: "",
borderColor: "",
borderRadius: "",
focusAction: {
width: "",
showFocusOutline: "",
outlineWidth: "",
outlineColor: ""
},
labelSettings: {
title: "Nachname",
fontSize: "",
alignX: "",
gap: "10px"
}
})
}]
});
let adressLayout := arcCustomLayout({
uniqueId: "adressLayout " + Nr,
embedded: true,
fullscreen: false,
direction: "vertical",
alignX: "center",
alignY: "center",
width: "490px",
height: "100%",
gap: "10px",
backgroundColor: "",
paddingY: "",
paddingX: "",
blocks: [{
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
styles: "",
value: arcCustomInput({
uniqueId: "Straße u Hausnr" + Nr,
recordId: Nr,
fieldId: "I",
title: text('Straße + Hausnr'),
value: text('Straße + Hausnr'),
type: "text",
embedded: true,
disabled: false,
width: "100%",
height: "40px",
alignX: "left",
paddingY: "",
paddingX: "",
fontColor: "",
fontSize: "",
fontWeight: "",
backgroundColor: "#F0F0F0",
borderWidth: "",
borderColor: "",
borderRadius: "",
focusAction: {
width: "",
showFocusOutline: "",
outlineWidth: "",
outlineColor: ""
},
labelSettings: {
title: "Straße & Hausnummer",
fontSize: "",
alignX: "",
gap: "10px"
}
})
}, {
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
value: arcCustomLayout({
uniqueId: "adressZeile PLZ und Ort " + Nr,
embedded: true,
fullscreen: false,
direction: "horizontal",
alignX: "left",
alignY: "center",
width: "",
height: "",
gap: "10px",
backgroundColor: "",
paddingY: "",
paddingX: "",
blocks: [{
width: "200px",
height: "auto",
lineHeight: "",
alignX: "left",
color: "",
styles: "",
value: arcCustomInput({
uniqueId: "PLZ" + Nr,
recordId: Nr,
fieldId: "J",
title: text(PLZ),
value: text(PLZ),
type: "text",
embedded: true,
disabled: false,
width: "100%",
height: "40px",
alignX: "left",
paddingY: "",
paddingX: "",
fontColor: "",
fontSize: "",
fontWeight: "",
backgroundColor: "#F0F0F0",
borderWidth: "",
borderColor: "",
borderRadius: "",
focusAction: {
width: "",
showFocusOutline: "",
outlineWidth: "",
outlineColor: ""
},
labelSettings: {
title: "PLZ",
fontSize: "",
alignX: "",
gap: "10px"
}
})
}, {
width: "",
height: "auto",
lineHeight: "",
alignX: "left",
color: "",
value: arcCustomInput({
uniqueId: "Ort" + Nr,
recordId: Nr,
fieldId: "K",
title: text(Ort),
value: text(Ort),
type: "text",
embedded: true,
disabled: false,
width: "100%",
height: "40px",
alignX: "left",
paddingY: "",
paddingX: "",
fontColor: "",
fontSize: "",
fontWeight: "",
backgroundColor: "#F0F0F0",
borderWidth: "",
borderColor: "",
borderRadius: "",
focusAction: {
width: "",
showFocusOutline: "",
outlineWidth: "",
outlineColor: ""
},
labelSettings: {
title: "Ort",
fontSize: "",
alignX: "",
gap: "10px"
}
})
}]
})
}]
});
let kontaktLayout := arcCustomLayout({
uniqueId: "kontaktLayout " + Nr,
embedded: true,
fullscreen: false,
direction: "vertical",
alignX: "center",
alignY: "center",
width: "490px",
height: "100%",
gap: "10px",
backgroundColor: "",
paddingY: "",
paddingX: "",
blocks: [{
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
styles: "",
value: arcCustomInput({
uniqueId: "kontakt" + Nr,
recordId: Nr,
fieldId: "N",
title: text(Telefon),
value: text(Telefon),
type: "text",
embedded: true,
disabled: false,
width: "100%",
height: "40px",
alignX: "left",
paddingY: "",
paddingX: "",
fontColor: "",
fontSize: "",
fontWeight: "",
backgroundColor: "#F0F0F0",
borderWidth: "",
borderColor: "",
borderRadius: "",
focusAction: {
width: "",
showFocusOutline: "",
outlineWidth: "",
outlineColor: ""
},
labelSettings: {
title: "Telefon",
fontSize: "",
alignX: "",
gap: "10px"
}
})
}, {
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
value: arcCustomInput({
uniqueId: "Ansprechpartner" + Nr,
recordId: Nr,
fieldId: "O",
title: text('E-Mail'),
value: text('E-Mail'),
type: "text",
embedded: true,
disabled: false,
width: "100%",
height: "40px",
alignX: "left",
paddingY: "",
paddingX: "",
fontColor: "",
fontSize: "",
fontWeight: "",
backgroundColor: "#F0F0F0",
borderWidth: "",
borderColor: "",
borderRadius: "",
focusAction: {
width: "",
showFocusOutline: "",
outlineWidth: "",
outlineColor: ""
},
labelSettings: {
title: "E-Mail",
fontSize: "",
alignX: "",
gap: "10px"
}
})
}]
});
arcCustomLayout({
uniqueId: "Content Aufnahme " + Nr,
embedded: false,
fullscreen: false,
direction: "vertical",
alignX: "center",
alignY: "top",
width: "",
height: "450px",
gap: "",
backgroundColor: "",
paddingY: "",
paddingX: "",
blocks: [{
width: "",
height: "100px",
lineHeight: "",
alignX: "center",
color: "",
value: arcCustomText({
uniqueId: "headline" + Nr,
embedded: true,
width: "",
height: "",
alignY: "",
alignX: "center",
fontSize: "27px",
fontWeight: "700",
fontColor: "",
lineHeight: "",
textWrap: "",
textScroll: "",
textAlign: "",
textDirection: "horizontal",
textDecoration: {
type: "",
style: "",
color: "",
thickness: ""
},
value: if Menu = "1" then
"Name"
else
if Menu = "2" then
"Adresse"
else
if Menu = "3" then "Kontakt" end
end
end
})
}, {
width: "",
height: "fraction",
lineHeight: "",
alignX: "center",
color: "",
value: if Menu = "1" then
namenLayout
else
if Menu = "2" then
adressLayout
else
if Menu = "3" then kontaktLayout end
end
end
}, {
width: "",
height: "100px",
lineHeight: "",
alignX: "center",
color: "",
styles: "",
value: menuSteps
}]
})Anwendungscode Teil 2 Menü Buttons
let current := this;
function buttonSubmenu(data : any) do
arcCustomButton({
uniqueId: "Button submenu " + data.uniqueId,
title: data.title,
width: "",
height: "",
alignY: "",
alignX: "",
icon: arcCustomIcon({
name: "check-circle-fill",
color: if data.completed = true then
"#b5db3b"
else
"#ddd"
end,
iconSize: "19px",
containerSize: "21px",
backgroundColor: "#fff",
borderSize: "",
borderColor: "#fff",
borderRadius: "50%"
}),
fontSize: "",
fontColor: if data.active = true then "#fff" else "#777" end,
backgroundColor: if data.active = true then
"#4970FF"
else
if data.completed = true then
"#f4fcd9"
else
"#fff"
end
end,
borderColor: if data.active = true then "#4970FF" else "#777" end,
borderRadius: "18px"
})
end;
let menuList := [{
title: "Name",
value: "1",
showLine: true,
completed: Vorname != null and Nachname != null
}, {
title: "Adresse",
value: "2",
showLine: true,
completed: 'Straße + Hausnr' != null and PLZ != null and Ort != null
}, {
title: "Kontakt",
value: "3",
showLine: true,
completed: Telefon != null and 'E-Mail' != null
}];
arcCustomLayout({
uniqueId: "menuSteps " + Nr,
embedded: true,
fullscreen: false,
direction: "horizontal",
alignX: "center",
alignY: "center",
width: "",
height: "",
gap: "5px",
backgroundColor: "",
paddingY: "",
paddingX: "",
blocks: menuList.[{
width: "auto",
height: "auto",
lineHeight: "",
alignX: "left",
color: "",
styles: "",
clickAction: {
type: "update",
recordId: current.Nr,
field: "M",
value: value
},
value: buttonSubmenu({
uniqueId: "buttonSubmenu " + value + " " + Nr,
title: title,
value: value,
active: current.Menu = value,
completed: completed
})
}]
})