Exploración

Por favor, ten en cuenta: el diseño "Editar registro – nueva sugerencia de patrón" presentado en esta página está todavía siendo explorado.

El diseño en está página está siendo actualmente explorado por la comunidad FOLIO UX. Esto significa que estamos considerando potencialmente convertirlo en una recomendación oficial de UX/UI pero necesitamos debatir y pensar más sobre ello antes de hacerlo. Si quieres saber más o involucrarte en el debate sobre este diseño, visita el post FOLIO Discuss para este diseño:

Este panel de editar permite a los usuarios seleccionar, editar, añadir y borrar campos.

App Vendors con panel de Editar

Estructura

Editar panel: header

El header del panel de editar debe tener un icono de cierre a la izquierda, un botón de «Update {app name}» a la derecha y un título centrado con el siguiente formato: Edit {record name}.

Editar panel: contenido

El layout del contenido tiene que ser similar al registro seleccionado con campos de texto editables.

Comportamiento

Cuando los usuarios hacen click en un icono «Edit» en el panel, el panel de editar debe aparecer.

Antes de clicar en el icono "Edit"
Después de clicar en el icono "Edit"

Los usuarios serían capaces de añadir campos de texto clicando en el botón «+ Add {category name}» en el estilo por defecto.

También tendrían la posibilidad de borrar un campo de texto clicando en el botón rojo «Remove» a su lado.

Cuando los usuarios clican en el botón «Update {app name}», los cambios se guardan y el panel vuelve a su estado original no editable.

Si los usuarios intentan dejar el panel sin guardar los cambios, un modal de aviso aparece para prevenir a los usuarios de cometer un error. Este modal debe tener un icono de cierre arriba a la derecha, un título, un botón «Close without saving» en el estilo por defecto y un botón «Keep editing» en el estilo primario. El título debería siempre mostrar «There are unsaved changes».

Exploración

Por favor, ten en cuenta: el diseño "Editar registro – nueva sugerencia de patrón" presentado en esta página está todavía siendo explorado.

El diseño en está página está siendo actualmente explorado por la comunidad FOLIO UX. Esto significa que estamos considerando potencialmente convertirlo en una recomendación oficial de UX/UI pero necesitamos debatir y pensar más sobre ello antes de hacerlo. Si quieres saber más o involucrarte en el debate sobre este diseño, visita el post FOLIO Discuss para este diseño: