Developer Kit · Examples
Captura de datos en pasos
Captura de datos en pasos
Captura de datos en pasos
Si trabajas en campo y necesitas capturar datos de forma rápida y sencilla, una pantalla de entrada clara y bien estructurada es imprescindible. Especialmente cuando hay muchos campos que capturar, tiene sentido dividir la entrada de datos en varios pasos. De esta forma no se sobrecarga al usuario, que puede introducir la información necesaria más rápido y de forma más ordenada.En este artículo te mostramos cómo, con trucos sencillos y widgets útiles, puedes diseñar una interfaz fácil de usar que te facilite considerablemente la captura de datos. Descubre cómo aumentar la eficiencia de tu día a día laboral manteniendo siempre la visión de conjunto.
Widget: <a href="/documentation/custom-layout"> Custom Layout </a> con Mini Widgets integrados: <a href="/documentation/input">Input</a>, <a href="/documentation/buttons">Button</a>, <a href="/documentation/text">Text</a> e <a href="/documentation/custom-icon">Icon</a>.
Código de aplicación parte 1: layouts y títulos
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
}]
})Código de aplicación parte 2: botones de menú
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
})
}]
})