---
title: "Mostrar el estado como botones"
slug: "status-als-buttons-ausgeben"
category: "Ejemplos"
hosts: "ninox"
locale: "es"
reactExampleKind: "recipe"
reactExample: "recipe-status.tsx"
---

# Mostrar el estado como botones

# Mostrar el estado como botones

![](https://framerusercontent.com/images/Q7g9aCNTJpdFui2qnCsHayINscg.png)

¿Quieres mostrar un estado, por ejemplo el estado de una tarea, en una interfaz como una [Custom Table](/documentation/custom-table) o directamente en tu registro? Hay varias formas de conseguirlo. Puedes usar un [campo Select](/documentation/select) para que el estado sea seleccionable, o bien usar un método más eficiente: [Buttons](/documentation/buttons) en los que se puede hacer clic directamente. Estos botones se pueden organizar en un [layout claro](/documentation/custom-layout). Este es el procedimiento:

- **Crear el estado en una tabla auxiliar separada**</p><p>Crea primero una tabla auxiliar en la que se definan los distintos valores de estado en un campo de texto.


- **Mostrar el estado en la tabla de destino como campo dinámico (Ninox)**</p><p>Muestra los valores de estado en la tabla de destino como campo dinámico, de modo que se puedan usar con flexibilidad.


- **Insertar el código de aplicación en tu interfaz**</p><p>Inserta el código de aplicación necesario en tu interfaz. Esto puede ser, por ejemplo, en una columna de una Custom Table o directamente en tu registro de Ninox.


- **Adaptar el código de aplicación a tu caso de uso: elegir tu propia lista de estados**</p><p>Elige la tabla auxiliar correspondiente que creaste en el paso 1, en Blocks bajo "select …", para asegurarte de que se usan los valores de estado correctos.


- **Adaptar el código de aplicación a tu caso de uso: sustituir el campo en Actions por la fieldID de tu campo de estado**</p><p>Sustituye en Actions el campo por la fieldID de tu campo de estado que creaste en el paso 2, para que los cambios se aplican correctamente.

Con estos pasos puedes diseñar una interfaz intuitiva y fácil de usar en la que el estado se pueda ajustar de forma rápida y sencilla.

## Código de aplicación


```javascript
arcCustomLayout({
                                uniqueId: "statusTermin " + Nr,
                                direction: "horizontal",
                                alignX: "center",
                                alignY: "center",
                                width: "100%",
                                height: "100%",
                                gap: "10px",
                                backgroundColor: "",
                                paddingY: "10px",
                                paddingX: "10px",
                                blocks: let id := Nr;
                                (select 'Status Termin').[{
                                        align: "center",
                                        styles: "",
                                        width: "fraction",
                                        clickAction: "",
                                        value: arcCustomButton({
                                                uniqueId: "Termin_Status_" + id + Nr,
                                                title: Bezeichung,
                                                width: "100%",
                                                icon: "",
                                                fontSize: "",
                                                fontColor: if id.Status = number(Nr) then
                                                    "#fff"
                                                else
                                                    "#9ba3af"
                                                end,
                                                iconColor: "",
                                                backgroundColor: if id.Status = number(Nr) then
                                                    Farbe
                                                else
                                                    "#9ba3af33"
                                                end,
                                                borderColor: if id.Status = number(Nr) then
                                                    Farbe
                                                else
                                                    "#9ba3af33"
                                                end,
                                                borderRadius: "5px",
                                                actions: [{
                                                        recordId: id,
                                                        type: "update",
                                                        field: "Q1",
                                                        value: if id.Status = number(Nr) then
                                                            null
                                                        else
                                                            number(Nr)
                                                        end
                                                    }]
                                            })
                                    }]
                            })

```