Navegación de la app

Las pantallas son las páginas; la navegación es lo que lleva a las personas hasta ellas. En Keplin no vive dentro de ninguna pantalla: es un documento propio de la app, diseñado en un editor visual y servido alrededor de cualquier pantalla que esté abierta.

Y se diseña por dispositivo: la barra superior del ordenador, el cajón del móvil y la barra de acciones de la tablet son tres diseños independientes, cada uno con sus menús.

#Abrir el editor

En la barra lateral de la app, pestaña UI, el primer elemento se llama Navegación. Haz clic y se abre en una pestaña del espacio de trabajo.

Lo que se ve en el centro no es un formulario: es la página de la app, dibujada como va a quedar. La barra arriba, el contenido de la pantalla abajo (Contenido de la pantalla), la marca a la izquierda. Editas tocándola.

Bajo el título están los controles que mandan en lo que estás viendo:

Control	Qué hace
Web (1280px) / Tablet (768px) / Mobile (390px)	Elige el dispositivo que estás diseñando.
Modo (solo tablet y móvil)	La forma de la navegación en ese dispositivo.
Menú inicial	Cuál de los menús se abre cuando alguien entra en la app.

#Los gestos

Gesto	Qué pasa
Clic en un menú	Lo selecciona (y, en un contexto, muestra su barra lateral).
Doble clic en un menú	Abre el modal Elemento seleccionado, donde se edita todo.
Arrastrar un menú	Lo mueve de zona o lo reordena. Solo suelta donde es válido.
+	Añade un menú en ese sitio.
× en la esquina de un menú	Lo quita.
Clic en la marca	Abre el modal Logo de la app.

#Los tipos de menú

El botón + de cada zona muestra los tipos que ese sitio acepta:

Tipo	Qué es
Menú	Lleva a una pantalla de la app. Es el elemento normal.
Submenú	Agrupa otros menús — en el cajón y en las barras laterales.
Contexto (sidebar)	Un menú que, cuando se elige, activa una barra lateral propia con sus hijos. Es como si dividiera la app en áreas.
Separador	Una línea divisoria.
Menú del usuario	El avatar de quien está usando, con sus entradas y el Salir.
Notificaciones	La campana, con el recuento automático de no leídas.
Idioma	El selector de idioma: los idiomas de la app, cada uno en su propio nombre.
Área de widgets	Una pantalla de barra dibujada dentro de la barra: una lista para elegir la empresa, un resumen, una búsqueda.

No todos los tipos sirven en todos los sitios, y el editor solo ofrece los válidos: un contexto no puede contener otro contexto, un submenú solo lleva elementos, el menú del usuario solo lleva elementos, separadores y el idioma, y el cajón del móvil no tiene contextos (usa submenús).

#Las zonas de la barra

En la barra superior, los menús se ordenan en tres zonas, y la pista del editor dice lo esencial: Arrastra los menús entre las zonas de la barra (izquierda / centro / derecha) para crear grupos.

Zona	Uso habitual
Grupo a la izquierda	La navegación principal, después de la marca.
Grupo al centro	Un grupo destacado. Si queda vacía, no ocupa espacio.
Grupo a la derecha	El menú del usuario, la campana, atajos.

Dentro de la barra lateral de un contexto — y en el cajón — las zonas son dos: Grupo de arriba y Fondo (esta se pega al fondo, para que «Ajustes» y «Ayuda» queden donde se espera).

#Crear un menú

1. Elige el dispositivo en la barra de contexto.
2. Haz clic en el + de la zona donde lo quieres.
3. Elige el tipo.
4. El menú nace con un nombre genérico y queda seleccionado — hazle doble clic para abrir el modal Elemento seleccionado.
5. Rellena:

Campo	Qué es
Icono	Un icono de la biblioteca o un SVG de los assets de la app.
Nombre del menú	El texto que aparece. Es una frase de la app — entra en las traducciones.
Pantalla…	La pantalla de destino (solo en Menú).
(parámetros)	Si la pantalla de destino tiene parámetros de ruta, aparece un campo por parámetro para darle un valor fijo.
Solo icono (el nombre queda en tooltip)	Deja solo el icono en la barra.

6. Cierra con Hecho y guarda con Guardar.

El botón Eliminar elemento, en el mismo modal, borra el menú.

#Contextos y barras laterales

Un Contexto (sidebar) es la forma de darle a un área de la app un menú propio: eliges «Ventas» en la barra superior y aparece a la izquierda la barra lateral con las pantallas de ventas. Los hijos del contexto son los elementos de esa barra.

En el modal del contexto, la sección Sidebar de este contexto la afina:

Campo	Opciones
Comportamiento	Fija (siempre abierta) · Retráctil (botón colapsa a iconos) · Mini (iconos; se expande al pasar el ratón) · Mini con panel (hover abre el árbol del menú)
Ancho	Entre 180 y 400 píxeles.
Al expandir (solo en modo mini)	Superpone el contenido o Empuja el contenido.
Empieza colapsada (solo en modo retráctil)	Cómo se abre la primera vez.

La barra lateral se queda abierta mientras se navega por el área, incluidas las páginas que no están en ningún menú (un detalle abierto desde una lista), y también después de recargar la página. Una pantalla de otro contexto la cambia, y un elemento de la barra superior sin contexto la cierra. Para que una página de detalle resalte el menú correcto incluso en un enlace directo, elige la Pantalla padre en las propiedades de la pantalla, en la categoría Navegación.

#El menú del usuario

El Menú del usuario es un elemento como los demás: puede estar en la barra superior, dentro de un contexto, en el cajón o en la barra compacta. Seleccionarlo abre su popup, y ahí es donde se añaden entradas con el + (Menú, Separador o Idioma).

En el modal quedan las opciones que no son visuales:

Opción	Qué hace
Mostrar el nombre	El nombre de quien está usando aparece en la cabecera del menú.
Mostrar el usuario (login)	También el nombre de usuario.
Opción «Salir»	Incluye la salida al final del menú.
Texto del «Salir»	Un texto propio; vacío usa El del sistema (traducido).

Sin icono, el avatar muestra las iniciales del nombre — y eso es lo que el selector de icono llama Sin icono (iniciales).

#Notificaciones

El elemento Notificaciones es la campana: solo icono, con la pill de las no leídas actualizándose sola. El clic abre las últimas notificaciones y el Ver más abre el panel con todas. En el modal, Notificaciones en el dropdown decide cuántas aparecen cada vez (entre 1 y 20).

#Idioma

El elemento Idioma es el selector de idioma. Muestra los idiomas de la app, definidos en la sección Traducciones de la configuración, cada uno en su propio nombre («Português», «English»), para que quien no entiende el idioma actual encuentre el suyo. Elegir un idioma cambia los textos de la app sin recargar la página, y la elección queda guardada en el dispositivo.

Puede estar en la barra superior, en una barra lateral, en el cajón, en la barra compacta y en la barra de acciones. Dentro del Menú del usuario, aparece como la entrada «Idioma · Español», que abre la lista ahí mismo. En el modal, Mostrar el idioma en uso decide qué muestra el botón: Nombre (Español) o Código (ES).

En una app con un solo idioma, el selector no aparece.

En la primera visita, antes de que alguien elija, la app se abre en el idioma del navegador o del teléfono si la app lo tiene; si no, en el idioma base. Una pantalla sin menús, como la de inicio de sesión, puede ofrecer la elección con un botón que llame a keplin.i18n.setLocale.

#Áreas de widgets

Un Área de widgets pone widgets en una barra: una lista para elegir la empresa en la barra superior, o un resumen al fondo de la barra lateral de un contexto. El contenido del área es una pantalla de la app, dibujada en el diseñador como cualquier otra, con la presentación Barra (área de widgets).

Para crear un área de widgets:

1. En la sección Pantallas, crea una pantalla.
2. En las propiedades de la pantalla, en la categoría Presentación, elige Barra (área de widgets) en Modo.
3. En Ancho (px) y Alto (px), define el tamaño del área. Por defecto, mide 320 por 48 píxeles.
4. Dibuja los widgets.
5. En Navegación, haz clic en el + de la zona donde quieres el área y elige Área de widgets.
6. Haz doble clic en el elemento y, en Pantalla del área, elige la pantalla de barra.
7. Haz clic en Guardar.

La zona del elemento decide dónde aparece el área y con qué tamaño:

Dónde está el elemento	Dónde aparece el área
Grupo a la izquierda, Grupo al centro o Grupo a la derecha de la barra superior	En la barra superior, con el ancho y el alto de la pantalla.
Grupo superior o Fondo de la barra lateral de un contexto	En la barra lateral, con el ancho de la barra y el alto de la pantalla.
Cajón	En el cajón, con el ancho del cajón y el alto de la pantalla.
Header	Junto a la marca, con el ancho y el alto de la pantalla.

El área no entra en la barra de acciones ni en el menú del usuario. En una barra lateral contraída en iconos, no aparece.

El área queda abierta mientras se navega: los datos se cargan una vez y la elección hecha no se pierde al cambiar de página. En KeplinGo, el área funciona de la misma forma en el header y en el cajón.

#Conectar el área con las páginas

El área y las páginas se comunican por el estado de la app: valores con nombre, los mismos en todas las pantallas. Por ejemplo, para que una lista en la barra superior filtre las páginas por la empresa elegida:

1. En la lista del área, en Vínculo de datos, elige Estado y escribe la Clave empresa.
2. En las páginas, en un filtro del datastore, elige el origen Estado y escribe la misma clave. La lista vuelve a leer los datos cuando cambia la elección.
3. Para mostrar el valor, vincula una Etiqueta a la misma clave.

El código de los eventos lee y escribe los mismos valores con keplin.state.

#Altura de la barra

La barra superior mide 48 píxeles de alto por defecto. Para que quepa un área más alta, cambia Altura de la barra, en los controles bajo el título del editor, a un valor entre 40 y 96 píxeles. Cada dispositivo tiene su propia altura, y en los modos compactos se aplica al header.

#Pills de valor

Cualquier menú (excepto separadores y la campana) puede mostrar una pill con un número vivo — los pedidos por procesar junto a «Pedidos», las solicitudes pendientes junto a «Aprobaciones».

1. En el modal del elemento, activa Mostrar pill con valor.
2. Elige la API que trae los datos (Elegir API…).
3. En Valor, elige Recuento (n.º de registros) o Campo del 1.er registro — en este caso, indica también el Campo.
4. Ocultar con valor vacío o cero evita la pill diciendo «0».

La pill se actualiza en tiempo real: cuando los datos cambian, el número cambia — sin que nadie recargue la página.

#El logo de la app

Haz clic en la marca, a la izquierda de la barra, para abrir el modal Logo de la app:

Campo	Qué hace
Icono o imagen	Elige un icono de la biblioteca o un archivo de los assets de la app.
Mostrar el nombre de la app	El nombre junto a la marca.
Encuadre en la barra	Para imágenes de los assets (SVG, PNG, JPG, GIF o WebP): Escala, Ancho de la caja, Altura de la caja y el posicionamiento arrastrando la imagen.
Ajustar a la caja	Restaura escala y posición.
Sin encuadre	Desactiva el encuadre.

El encuadre es la respuesta al logo que "no cabe": arrastras y escalas hasta que queda bien en la barra, y el propio modal garantiza que el archivo queda intacto — el recorte es solo visual y reversible. La caja tiene 32 píxeles de alto por defecto, en una barra de 48: un logotipo horizontal solo crece si subes la Altura de la caja (hasta 44); el Ancho de la caja solo deja espacio vacío alrededor de un logo pequeño. Sin encuadre, la imagen queda en una caja de 24 píxeles.

La franja de previsualización del modal usa los colores reales de la barra de la app. Si la barra es oscura, el archivo del logo tiene que ser la versión clara (blanca) de la marca — el logo a color de la versión sobre fondo blanco desaparece sobre la barra.

La zona del logo puede tener un color de fondo distinto del resto de la barra superior: es el color Fondo de la zona del logo, en el grupo Navegación del Tema de la configuración de la app. Entre la zona del logo y los menús no hay separador; cuando los dos colores son distintos, el cambio de color es la frontera. Vale para la barra superior en web y tablet; en la barra compacta y en el cajón el logo sigue el color de la barra.

La zona del logo nunca queda más estrecha que la marca: con una barra lateral mini o recogida, los menús superiores empiezan después de la marca, y no encima de ella.

La pestaña del navegador muestra «Nombre de la pantalla · Nombre de la app», y solo «Nombre de la app» en una pantalla sin nombre; en la página de entrada muestra «Entrar · Nombre de la app».

#Menú inicial

Menú inicial, en la esquina superior derecha, decide por dónde se abre la app. Se elige uno de los menús (no una pantalla suelta), y se elige por dispositivo — el móvil puede abrirse en un panel distinto del ordenador.

Si un dispositivo no tiene elección propia, hereda la del siguiente (móvil → tablet → web); y si no hay ninguna, la app se abre en el primer menú que lleve a una pantalla.

#Un diseño por dispositivo

El Web es siempre una barra superior. La tablet y el móvil tienen un selector Modo:

Modo	Cómo queda
Barra superior (solo tablet)	Igual que el ordenador: marca, menús y contextos en una barra.
Menú hamburguesa	Una barra compacta con el botón ☰, que abre el cajón con el árbol de menús.
Barra de acciones	Una barra al fondo, estilo aplicación móvil, con hasta 5 entradas — y sin cajón.

En los modos compactos hay además dos filas propias:

• El Header — hasta 4 acciones junto a la marca (el menú del usuario y la campana viven bien aquí).
• La Barra de acciones — hasta 5 entradas al fondo, cada una un Botón o un Menú de acciones.

Cuando se alcanza el límite, la plataforma dice por qué: La barra de acciones ya tiene 5 elementos (máximo). / El header lleva como máximo 4 acciones.

#Quién ve qué

El editor diseña; quien decide quién ve cada menú es Ajustes de la app ▸ Permisos, en la pestaña Menús — por papel y por dispositivo.

La regla merece saberse: al contrario que las pantallas, un menú es visible por defecto. La puerta es la pantalla, y esa ya está cerrada; ocultar el menú sirve para quitar un grupo entero de la vista, o quitarle la campana a quien no recibe nada. Ocultar un grupo se lleva a los hijos con él, y un elemento que apunte a una pantalla inaccesible desaparece solo.

#¿Por qué no…?

• ¿Por qué desaparecieron mis cambios? No se guardaron. La navegación tiene botón Guardar — y avisa antes de que cierres una pestaña con cambios por guardar.
• ¿Por qué no puedo soltar el menú donde quiero? Ese sitio no acepta ese tipo. Los destinos inválidos ni se encienden: un contexto dentro de un contexto, un submenú dentro de un menú de usuario, un separador en la barra superior.
• ¿Por qué no veo los menús en el móvil? El móvil tiene árbol propio y puede estar vacío. Elige Mobile (390px) y dibújalo.
• ¿Por qué desapareció un menú en la app publicada? O fue ocultado en Ajustes ▸ Permisos ▸ Menús para ese papel, o apunta a una pantalla a la que esa persona no tiene acceso.
• ¿Por qué el logo aparece cortado? Tiene encuadre. Abre el modal y usa Ajustar a la caja, o Sin encuadre.
• ¿Por qué no puedo cambiar el tipo de un menú? No se cambia. Borra y crea con el tipo correcto — es la única operación que la plataforma no te deja hacer a medias.
• ¿Por qué la pill muestra siempre 0? Activa Ocultar con valor vacío o cero, o confirma que la API elegida devuelve registros de verdad.
• ¿Por qué el logo aparece pequeño, con espacio alrededor? La caja tiene 32 píxeles de alto por defecto y un logo horizontal cabe en ella con poco ancho. Sube la Altura de la caja (hasta 44) en vez del ancho.
• ¿Por qué no veo el logo en la barra? Si la barra es oscura y el archivo es la versión a color para fondo blanco, carga en Assets la versión blanca de la marca y elígela en el modal.
• ¿Por qué mi pantalla no aparece en Pantalla del área? Solo aparecen las pantallas con la presentación Barra (área de widgets). Cambia el Modo en la categoría Presentación de las propiedades de la pantalla.
• ¿Por qué el área de widgets no aparece en la barra lateral? La barra está contraída en iconos, y ahí el área no cabe. Expande la barra.