Introducción
En este artículo vamos a combinar todos nuestros Formularios en un solo lugar. Querremos que nuestros usuarios finales puedan cambiar entre ellos, cambiar selecciones de filtros e introducir datos. Luego queremos que vean los cambios hechos a los Formularios reflejados en tiempo real. En Kepion, podemos hacer esto con un Tablero.
Agregar un Tablero
Paso 1. Para configurar un nuevo Tablero, navegue al nodo Todos los Tableros del panel de navegación de la derecha y seleccione Agregar.
Paso 2. Nombre el Tablero Planificación de Ingresos.
Paso 3. En el interior, el Editor de Tablero se verá similar al ejemplo que se muestra a continuación. Vamos a desglosar las diferentes secciones:
- Una lista de páginas en el Tablero. Cada Página del Tablero puede contener múltiples Formularios, filtros, componentes de texto, botones y más.
- Los diferentes elementos de estilo disponibles en una Página de Tablero.
- La Página de Tablero que estamos editando actualmente.
Configuración de una Página de Tablero
Paso 1. Agreguemos un Formulario a la Página del Tablero. Haga clic derecho en el editor y seleccione Agregar Formulario.
Elija qué Formulario queremos mostrar en el menú desplegable Formulario. Seleccione Supuestos.
Paso 2. Agreguemos también algo de texto a la página para que los usuarios finales sepan de qué Formulario se trata. Haga clic fuera del cuadro del formulario. Ahora haga clic derecho en la página y seleccione Agregar Texto.
Se agregará un Componente de Texto a la página. Podemos hacer clic en el cuadro para añadir texto, y darle el estilo que queramos. Escribamos simplemente el nombre del Formulario.
Paso 3. Ahora agreguemos nuestros Filtros al Tablero. Haga clic derecho nuevamente en la ventana del editor y seleccione Agregar Filtro.
Seleccione Supuestos para el Formulario y Escenario para el Filtro.
Puede copiar y pegar para agregar rápidamente los otros dos filtros.
Luego podemos aplicar estilo a los filtros para crear un tema más cohesivo.
Configuración de botones
Paso 1. Para enviar datos del Tablero al servidor, necesitamos usar una Acción de Flujo de Trabajo llamada Publicar. Comencemos creando un nuevo componente de texto. Cambie el texto a Actualizar.
Paso 2. Luego aplíquele formato para que se vea como un botón.
Nota: En una Aplicación publicada, las Acciones de Flujo de Trabajo también están disponibles en el Menú Desplegable de Acciones a la derecha del encabezado. Sin embargo, los botones bien diseñados tienden a mejorar la experiencia del usuario.
Paso 3. Haga clic en el icono de configuración . Aquí podemos modificar el componente de texto para que sea algo con lo que podamos interactuar.
Cambie el Tipo a Acción y luego seleccione Publicar. Ahora, cuando alguien haga clic en este componente de texto, se activará la Acción de Publicar y enviará los datos que hemos introducido a la base de datos.
Configuración de páginas adicionales
Paso 1. No queremos sobrecargar una página con demasiada información o demasiados Formularios, así que vamos a crear una nueva página. Copiaremos esta de la página de Supuestos.
Consejo: El icono de la estrella junto al nombre de la página indica qué página se abrirá primero en el Tablero. Puede cambiar esto haciendo clic derecho y seleccionando Configurar página de inicio.
Paso 2. Ahora hagamos algunos cambios en esta página. Primero seleccione el Formulario de Supuestos y cambie la selección de Formulario a Gastos Operativos. Actualice el texto arriba del Formulario para reflejar el cambio.
Paso 3. Quite el Filtro de Métrica y cambie el nombre de las páginas Supuestos y Gastos Operativos en el panel de la izquierda y debería obtener algo similar al ejemplo de abajo.
Paso 4. Añada una tercera página. Incluya el Informe de Ingresos Netos, algo de texto y cambie el nombre de la página según corresponda.
Configuración del Encabezado
Paso 1. Naveguemos a la solapa Encabezado. El Encabezado es una sección estática en la parte superior de nuestro Tablero, que los usuarios utilizarán para navegar de una página a otra.
Nuestro encabezado se ve un poco abarrotado, así que cambiemos la altura en la parte inferior izquierda y arrastremos la altura del componente de menú hacia abajo para que coincida. También puede utilizar las opciones Borde superior, Borde izquierdo y Tamaño en la parte inferior derecha para definir las dimensiones del componente con mayor precisión.
Paso 2. Para dar estilo al menú de navegación, primero cambie el Modo de Publicado a Seleccionado. Utilizando las opciones de formato de la parte superior, haga clic en cada elemento del menú para darle el estilo que desee que aparezca cuando se seleccione.
Consejo: Puede mantener presionada la tecla Mayúsculas o la tecla Ctrl para seleccionar varios elementos al mismo tiempo.
Paso 3. Del mismo modo, cuando el Modo está configurado como No seleccionado, puede darle estilo al aspecto de los nodos del menú mientras no están seleccionados.
Paso 4. Ahora terminemos añadiendo algo de texto al encabezado. Aquí está mi diseño de encabezado completo:
Paso 5. Por último, en la solapa Configuración, podemos agregar una imagen que se mostrará como el icono de nuestra Aplicación en el Módulo APPS.
En la solapa VISTA PREVIA podemos ver el resultado final:
Próximos pasos
Ahora que nuestro Tablero está terminado, necesitaremos configurar algunos permisos y ajustes administrativos adicionales antes de que podamos empezar a usarlo.