Buscando ser lo más flexible posible, Ubidots ofrece la opción de cambiar la posición del menú de navegación a la parte superior de la pantalla (su posición predeterminada) o al lado izquierdo, convirtiéndolo así en una barra de navegación colapsable. Además, la versión lateral del menú se puede personalizar para que se vea y funcione como desees cambiando colores, textos, botones, íconos y más.
Los cambios de posición, apariencia y funcionalidad pueden afectar por separado a los usuarios finales de la aplicación, por un lado, y a los usuarios administradores y al propietario de la cuenta, por el otro. Esto significa que tus usuarios finales pueden tener un menú de navegación personalizado que se vea completamente diferente al que personalices para ti mismo como propietario de la cuenta.
Requisitos
Una cuenta activa de Ubidots para cambios de posición del menú de navegación.
Una licencia Enterprise para la personalización del menú de navegación.
1. Cambiando la posición del menú de navegación
1.1. Cambiar la posición del menú para propietarios y usuarios administradores
Haz clic en el menú desplegable de tu foto de perfil y luego en “mi cuenta”.
Desplázate hacia abajo hasta la sección “preferencias” y usa el menú desplegable al lado de “estilo del menú de navegación” para cambiar la posición de tu menú de navegación.
Por último, haz clic en el botón “guardar” para consolidar el cambio.
1.2. Cambiar la posición del menú para usuarios finales
Haz clic en “apps”.
Ve a la configuración de la aplicación que deseas editar.
En el menú de la izquierda, haz clic en “creador de aplicaciones”.
Usa el menú desplegable junto a “estilo del menú de navegación” para cambiar la posición de tu menú de navegación a “barra de navegación izquierda”.
Haz clic en el botón “guardar”.
2. Personalización del menú de navegación
Actualmente, la barra de navegación se puede personalizar cuando cambias su posición al lado izquierdo de la pantalla. Hay dos opciones de personalización, para propietarios y administradores, por un lado, y para usuarios finales, por el otro.
Nota: Estas dos opciones de personalización no están sincronizadas. Cambiar el menú de navegación del “propietario” no tendrá impacto en el que ven tus usuarios finales y viceversa.
2.1. Personalización del menú de navegación para propietarios y usuarios administradores
Haz clic en el menú desplegable de tu foto de perfil y luego en “mi cuenta”.
Desplázate hacia abajo hasta la sección “preferencias” y usa el menú desplegable al lado de “estilo del menú de navegación” para cambiar la posición de tu menú de navegación a “barra de navegación izquierda”.
Usa el menú desplegable junto a la opción “menú” de “predeterminado” a “personalizado”.
Haz clic en el botón “guardar”.
Ahora que el menú ha cambiado su posición, haz clic en el ícono del lápiz ubicado en la esquina inferior izquierda del menú.
Edita el código XML para que tu menú termine viéndose como desees.
Haz clic en el botón "guardar" para consolidar los cambios.
Nota: Lee nuestra documentación del Centro de Desarrollo para conocer la sintaxis XML en detalle. |
2.2. Personalización del menú de navegación para usuarios finales
Haz clic en “apps”.
Ve a la configuración de la aplicación que deseas editar.
En el menú de la izquierda, haz clic en “creador de aplicaciones”.
Usa el menú desplegable junto a “estilo del menú de navegación” para cambiar la posición de tu menú de navegación a “barra de navegación izquierda”.
Haz clic en el menú desplegable de “elementos del menú” y selecciona la opción “personalizado”.
Haz clic en el botón “editar menú” y cambia el XML para que tu menú termine viéndose como desees.
Una vez que termines de editar, haz clic en el botón “guardar” del editor XML y luego, nuevamente, en el botón “guardar” en la página del “creador de aplicaciones” para guardar los cambios.
Notas importantes:
|
2.3. ¿Qué se puede cambiar en el menú lateral?
Texto de los botones.
Agregar/eliminar botones.
Íconos de los botones. Usa los nombres de íconos de Fontawesome para esto.
Ruta/enlace de los botones. Actualmente, los enlaces externos abren una ventana de navegador diferente. En el futuro, las páginas externas se incrustarán dentro de Ubidots para que permanezcas en la misma pestaña al hacer clic en cualquier botón.
2.4. Crear diferentes menús de usuario final usando etiquetas
Al combinar la maleabilidad del menú de navegación y el poder de las etiquetas, puedes crear efectivamente múltiples versiones del menú lateral que se mostrarán solo al conjunto correcto de usuarios finales según sus etiquetas asignadas.
Esto se logra editando el XML del menú de la aplicación de usuario final y agregando una propiedad "etiquetas" a los elementos "enlace" y/o "menulink" de los que deseas crear múltiples versiones. Veamos esto con un ejemplo:
El siguiente código XML tiene dos conjuntos diferentes de botones que se distinguen por el uso de valores "etiqueta1" y "etiqueta2", respectivamente.
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
<menu defaultShow="true">
<toggle>
<icon name="gear"/>
<label>Settings</label>
<chevron/>
</toggle>
<collapsable>
<menulink
open="tab"
exact="false"
path="/app/devices"
tags="tag1"
permissions="ubi_datasource.view_device"
>Data sources
</menulink>
<menulink
open="tab"
exact="false"
path="/app/devices"
tags="tag2"
permissions="ubi_datasource.view_device"
>Process
</menulink>
<menulink path="/app/dashboards/" tags="tag1" permissions="ubi_dashboards.view_dashboardpg">Custom dashboards</menulink>
<menulink path="/app/dashboards/" tags="tag2" permissions="ubi_dashboards.view_dashboardpg">Alerts</menulink>
</collapsable>
</menu>
</tree>
Por lo tanto, los usuarios finales a quienes se les ha asignado la "etiqueta1" verán esta versión del menú cuando inicien sesión en la aplicación:
Por otro lado, los usuarios con la "etiqueta2" verán esta otra versión:
Para una explicación más detallada de la propiedad "etiquetas", dirígete a nuestra documentación del Centro de Desarrollo.
Notas:
Los colores y el logotipo del menú de navegación (independientemente de su posición) se definen en la sección "marca" de la configuración de tu aplicación.
Cualquier cambio realizado en el menú, ya sea para propietarios/administradores o para usuarios finales, afecta solo a la versión lateral; el menú “barra de navegación superior” no se puede cambiar.
La apariencia y funcionalidad del menú de navegación se pueden restaurar a su versión predeterminada ingresando al editor XML y haciendo clic en el botón "restaurar predeterminado".