AdminLTE

¿Comenzando un nuevo sistema de gestión?
¿Quieres darle un nuevo look a tu viejo sistema?
AdminLTE es tu Design System.

 

 

AdminLTE es el Design System para Web más utilizado en Ignia Framework.
El sitio para desarrolladores Ignia Framework (este mismo) está desarrollado utilizando AdminLTE.

Es un excelente marco para el desarrollo de aplicaciones de gestión, 100% responsive y compatible con los patterns WW existentes.
 

 

 

Configuraciones Generales

Para modificar las funcionalidades fundamentales del Design System AdminLTE se debe ir a la carpeta Config que se encuentra dentro del módulo AdminLTE

Las configuraciones Generales del Design System se encuentran en el procedimiento GeneralConfig.

 

En este procedimiento se puede configurar: 

  • Nombre de la aplicación (applicationName): texto que se mostrará en el top bar sobre el menú. 
  • Nombre abreviado de la aplicación (applicationShortName): texto que se mostrará en el top bar sobre el menú cuando el menú se encuentra colapsado. 
  • Enlace del nombre de aplicación (applicationDashboardUrl): enlace al cual se quiere redirigir la aplicación si el usuario da click sobre el nombre de la aplicación.
  • Texto del footer(applicationFooterText): texto que se  muestra en el footer.
  • Enlace del footer(applicationFooterUrl): enlace al cual se quiere redirigir la aplicación si el usuario da click sobre el texto del footer.
  • Versión (version): Versión de la aplicación para mostrar en el footer. 
  • Otras configuraciones relacionadas con el Menú, Datos del Usuario Autenticado, Configuración de los Dropdowns y la Barra de Notificaciones que se explican por separadas a continuación. 

Configuración Datos del Usuario Autenticado

En AdminLTE se incluye dos secciones donde se pueden mostrar los datos principales del usuario que se encuentra autenticado en la aplicación. 
La primera se muestra en la parte superior del menú: 

 

La segunda se muestra a la derecha de la barra superior: 

 

Desde el procedimiento GeneralConfig se puede configurar: 

  • Nombre del Usuario (userName): el nombre del usuario autenticado. 
  • Imagen (userImageLink): la url donde se encuentra la imagen del usuario. 
  • Rol (userRole): Rol del usuario. 
  • Perfil (userProfile): la url del perfil del usuario. 
  • Url de Logout (applicationLogout): la url a llamar cuando se desea salir de la aplicación. 

 


Menú de AdminLTE

En el procedimiento General Config se puede configurar la carga de los datos del menú de AdminLTE. Por defecto se asigna al SDTMenu un Data Provider (DP) con los elementos del menú. El usuario si desea puede actualizar el DP con sus elementos o en llenar el SDTMenu de forma directa con sus propios elementos.  El DP por defecto que contiene los elementos del menú es DPMenu
El menú puede contener n-elementos y n-niveles siempre respetando la estructura del SDTMenu. Un elemento del menú puede tener los siguientes campos:  

  • text: texto a mostrar para ese elemento del menú. 
  • url: link al cual se redirecciona el sitio al dar click en el elemento. 
  • icon: icono que se visualiza al lado izquierdo del texto. Se puede utilizar como icono todas las fuentes disponibles en Font Awesome, para ello el usuario solo debe adicionar al elemento el nombre de icono que desea utilizar. (http://fontawesome.io/icons/)
  • target: permite especificar donde se abre el link del elemento, los posibles valores se encuentran en el dominio  TargetLink.
  • typeItem: especifica el tipo del elemento, los valores posibles se encuentran en el dominio AdminLTETypeItemMenu.  

 

 


Configuración de Dropdowns

En AdminLTE se incorporan dropdowns en la barra superior, cuenta con tres estilos de dropdowns: 

 

 

 

Los dropdowns se pueden configurar desde el procedimiento DropdownConfig que se encuentra en la carpeta Config del módulo AdminLTE

 


Por cada dropdown se puede configurar: 

  • Estado (enableDropdownMessage, enableDropdownNotifications,  enableDropdownTask): si se desea que se muestre o no. 
  • Icono (icon): el icono del dropdown, se puede utilizar cualquier de los iconos disponibles  en Font Awesome (http://fontawesome.io/icons/). 
  • Color del Badge (topNotiColor):  color del badge de la notificación, los colores disponibles se encuentran en el dominio TopNotiColor.
  •  Total de elementos (total): el valor de la cantidad de notificaciones. 
  • Texto de Cabecera (header): el texto de cabecera del componente de notificaciones. 
  • Texto Footer (footer): el texto del footer del componente de notificaciones. 
  • Url Footer (footerUrl): la url a la que se redirecciona al dar click en el texto del footer. 
  • Mensajes a mostrar (Adminltesdtmessa, Adminltesdtnoti, Adminltesdttasks): los mensajes y la estructura de los elementos a mostrar dependen de cada tipo de dropdown, cada uno tiene un std específico, en el procedimiento se asigna un Data Provider para cada SDT con los mensajes, si el usuario desea puede llenar los datos del SDT de la base de datos de su aplicación respetando la estructura de los SDT. 

Barra de Notificaciones

La Barra de Notificaciones permite mostrar una columna vertical con varios tabs y varios tipos de notificaciones en el lado derecho. 

 

La Barra de Notificaciones que se puede configurar desde el procedimiento GeneralConfig, en este procedimiento se puede habilitar o deshabilitar y asignarle el Data Provider con los datos de los tabs.  
Para los tabs se pueden configurar dos estilos de notificaciones actualmente.

  • Notificaciones de actividades reciente
     
  • Notificaciones progreso de tareas
     

En el procedimiento TabHomeConfig el se pueden configurar las notificaciones del Tab Home. 

Seguridad con GAM

GAM es el módulo de seguridad que potencia GeneXus para el desarrollo aplicaciones Web.

Requerimientos Previos:

  • Activación de la propiedad Enable Integrate Security, para poder importar los objetos de administración del GAM con el estilio de Ignia.

Aplicar GAM + IGNIA:

  • Seleccionar en el menú de Ignia la opción Security.
  • En la ventana para Tipo de Seguridad (Security Type), seleccionar la Seguridad con GAM (GAM Security) y el Design System AdminLTE. Click en la opción Confirmar.
  • Finalmente en Folder View de GeneXus, bajo el módulo Ignia se pueden ver los módulos Security y GAM.

Más informacón acerca de Seguridad con Ignia haciendo click en: Link.

 

Páginas relacionadas: