Como el corazón de tu aplicación, la página del tablero debe ser lo suficientemente flexible para adaptarse a las diversas necesidades de contenido. Los widgets que muestran todo tipo de datos siempre serán la base de cualquier aplicación de Ubidots, pero muchas veces otros tipos de contenido son críticos para la operación y necesitan un lugar de fácil acceso, como es el caso de la página del tablero.
Ahí es donde entran las Páginas de Tablero: te brindan una forma de adaptar aún más tu experiencia en Ubidots al expandir el tipo de contenido que se muestra en un lugar tan destacado como el tablero.
Requisitos
Una cuenta de Ubidots con un plan Enterprise.
1. Qué son las Páginas de Tablero
Las Páginas de Tablero son una forma de personalizar aún más tus aplicaciones de Ubidots definiendo el tipo de contenido que se muestra en cualquier tablero de manera granular. Mientras que un tablero predeterminado de Ubidots solo se puede usar para mostrar widgets y sus datos correspondientes, una Página de Tablero mostrará cualquier contenido que tú y tu operación necesiten.
Al usar una página de tablero personalizada, puede mostrar dos tipos de contenido:
Páginas personalizadas. De manera similar a un widget Canvas HTML, esta función le permite exponer interfaces de usuario livianas, personalizadas y diseñadas específicamente en los paneles de Ubidots o incluso de manera pública. La diferencia clave con respecto a un Canvas HTML es que una página carga el código personalizado tomando todo el ancho y alto del tablero desde donde se carga, en lugar de limitarse al contenedor de un widget.
Páginas existentes embebidas. Esto podría ser cualquier cosa, desde un video que explica cómo usar la plataforma hasta una aplicación de terceros que sea importante para su operación.
2. Creando una Página de Tablero
La creación de páginas de tablero, ya sea embebiendo URL ya existentes o páginas personalizadas, requiere solo unos pocos pasos:
Mientras estés en un tablero, haz clic en el botón de menú ubicado en la esquina superior izquierda de la pantalla. En el panel que se abre, crea un nuevo tablero o edita uno existente.
Desplázate hacia abajo en el menú de configuración hasta encontrar la opción "tipo de tablero". Selecciona la opción "personalizado" en el menú desplegable que está junto a esta opción.
Justo debajo de la opción "tipo de tablero", verás la opción "URL de página personalizada", pega la URL de la página que deseas embeber allí.
Configura otras opciones del tablero para satisfacer tus requisitos (como su nombre) y cuando hayas terminado, haz clic en el botón "guardar".
Notas importantes:
Algunas páginas no se pueden embeber. Esto no tiene nada que ver con Ubidots ni con la función de tipo de tablero, sino con una restricción configurada en esas páginas específicas, como es el caso de Google, por ejemplo.
Se puede interactuar con las páginas embebidas. Puedes usar los botones disponibles y navegar libremente a través de ellas.
Ciertas páginas son embebidas e interactivas, excepto por sus portales de inicio de sesión. Esto significa que no podrás iniciar sesión en esa página específica a través de un tablero de Ubidots.
3. Desarrollando Páginas de Tablero
Puedes programar tus propias páginas utilizando HTML, JavaScript y React para crear visualizaciones completamente personalizadas que cubran requisitos que de otro modo no serían abordados de forma nativa por la plataforma.
Las páginas personalizadas están estructuradas en torno a un conjunto específico de archivos. Estos archivos no solo determinan la configuración de la página (por ejemplo, referencias a bibliotecas CSS y JavaScript locales o expuestas a través de CDN externas), sino que también definen su lógica y funcionalidad general. Consulta nuestra documentación técnica para conocer más sobre cada tipo de archivo. La estructura de archivos de una página es la siguiente:
├── manifest.toml
├── script.js
├── body.html
├── style.css
├── static
│ ├── some_files_or_folders
Para crear una página:
Ve a “dev center” ⟶ “pages”.
Haz clic en el botón “+”.
Nombra tu página.
Escribe tu código directamente en el editor o copia y pega tu código en cada archivo. Por defecto, cada nueva página se crea con una versión de ejemplo de todos los archivos esenciales; puedes agregar más archivos con el botón “+”.
Usa el botón “preview” para ver cómo se visualizará tu página.
Una vez que estés satisfecho con el resultado, haz clic en “save”.
La URL de tu página se generará y se mostrará en el editor.
Copia la URL y pégala en el campo "custom page URL" de un dashboard. Una vez guardados los cambios, tu página se mostrará en el dashboard.
