---
title: "Captura de datos en pasos"
slug: "datenaufnahme-in-schritten"
category: "Ejemplos"
hosts: "ninox"
locale: "es"
reactExampleKind: "recipe"
reactExample: "recipe-steps.tsx"
---

# Captura de datos en pasos

# Captura de datos en pasos

<iframe src="https://www.youtube.com/embed/SXJU6ZosPhA?iv_load_policy=3&rel=0&modestbranding=1&playsinline=1&autoplay=1&mute=1" data-thumbnail="Medium Quality" frameborder="0" allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>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: [ Custom Layout ](/documentation/custom-layout) con Mini Widgets integrados: [Input](/documentation/input), [Button](/documentation/buttons), [Text](/documentation/text) e [Icon](/documentation/custom-icon).

## Código de aplicación parte 1: layouts y títulos


```javascript
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ú


```javascript
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
                    })
            }]
    })
```