Examples
Data acquisition in steps
Data Entry in Steps
When you are working in the field and need to quickly and easily capture data, a clear and well-structured input mask is essential. Especially with a large number of fields to be entered, it makes sense to divide the data entry into multiple steps. This way, the user is not overwhelmed and can enter the necessary information more quickly and in an organized manner.
In this article, we will show you how to create a user-friendly interface with simple tricks and useful widgets that significantly ease your data collection. Find out how to increase the efficiency of your workday while always keeping an overview.
Widget: Custom Layout with integrated Mini Widgets: Input, Button, Text and Icon.
Application Code Part 1 Layouts & Headings
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
}]
})Application Code Part 2 Menu 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
})
}]
})