Icono en Field Selection 🪁 | Font Awesome Odoo | class d-inline-flex en campo Selection con ícono

Icono en Field Selection 🪁 | Font Awesome Odoo | class d-inline-flex en campo Selection con ícono

¿Cómo mostrar iconos junto a un campo Select en Odoo?

Introducción al proyecto

  • Josué presenta el video y explica que mostrará cómo implementar iconos al lado de un campo Select en Odoo, donde el icono y su color cambian según la selección del usuario.

Creación del modelo

  • Se menciona que se ha agregado un nuevo campo llamado "prioridad" al modelo "task", utilizando herencia. También se creó otro campo llamado "complejidad".
  • El campo "prioridad" es de tipo selección con valores: lower (muy baja), low (baja), medium (media), high (alta) y higher (muy alta). Por defecto, se selecciona "lower".

Configuración de la vista

  • Se crea una vista heredada para mostrar el nuevo campo. La etiqueta para el campo prioridad se agrega en la línea 12.
  • En la línea 13, se abre un <div> que contendrá tanto el valor del campo como los iconos correspondientes.

Lógica de visualización de iconos

  • Dentro del <div>, se muestra el valor seleccionado y los iconos asociados. La lógica para cambiar los iconos depende del valor seleccionado en el campo prioridad.
  • Se utiliza un <span> con clases específicas para mostrar diferentes colores e iconos según la opción seleccionada: gris para "lower", azul para "low", etc.

Ejemplificación de los iconos

  • Para cada nivel de prioridad, hay un ícono específico:
  • Flecha hacia abajo en gris para "very low".
  • Flecha hacia abajo en azul para "low".
  • Flecha apuntando a la derecha en color estándar para "medium".
  • Flecha hacia arriba anaranjada para "high".
  • Mismo ícono rojo para "very high".

Conclusión sobre la implementación

  • Josué concluye mostrando cómo se ve todo esto en pantalla y menciona que aunque podría haberse hecho usando widgets, optó por esta solución más directa.
Video description

En este video enseño cómo agregar íconos de Font Awesome en campos Selection utilizando la clase d-inline-flex. Se muestran íconos en colores diversos al seleccionar un valor diferente dentro del selection. 🎓 Curso gratuito para aprender a programar en Odoo: https://www.youtube.com/playlist?list=PLXwzJRuH--eYHB3OD2wATjzJ83UAp2WQs 🎨 ¿Quieres algo más personalizado? ¿Quieres capacitar a tu equipo de trabajo? Contáctame y platicamos... https://ko-fi.com/josuheuh/commissions 🎓 Curso gratuito API externa Odoo: https://www.youtube.com/playlist?list=PLXwzJRuH--eZn0SMw79wDSVlFT0Qtcn9j 🌐 Conéctate fácilmente a través de la API de Odoo usando este Script 👇: https://ko-fi.com/s/0466aa2700 ☕️ Apoya a este canal con un Café: https://ko-fi.com/josuheuh 00:00 Introducción 00:24 Crear el Field Selection 01:32 Mostrar campo en la vista formulario 02:08 XML con Selection + icono 02:54 Lógica para mostrar ícono