GeneXus - Organigrama HTML5 + CSS3 - User Control

Es un user control que permite a partir de un SDT graficar su contenido en forma de Organigrama.

Instalación

1.  Descargue el archivo Organigrama.zip desde la marketplace y copielo en la ruta de instalación de GeneXus <PathGeneXus>\UserControls y después ejecuté desde la línea de comandos el comando <PathGeneXus>\GeneXus.exe /install
2.  Instalelo directamente desde GeneXus usando la herramienta Add-in Manager.

Uso

Arrastre el user control a un Web Panel, automáticamente se importará un SDT bajo el nombre UC_OrganigramaItems el cual se debe llenar con N niveles según el tamaño del organigrama.

Ejemplo

Una vez arrastre el user control al web panel configure la propiedad DataCollection con la variable basada en el SDT importado y agregue el siguiente código en el evento start.

Event Start
    //Iniciar Collection
    &UC_OrganigramaItems.Clear()
  
    //Nodo Padre Principal
    &UC_OrganigramaItem = New()
    &UC_OrganigramaItem.ItemDescription = "Papá"
    &UC_OrganigramaItem.ItemLink = "#"
    &UC_OrganigramaItem.ItemBackgroundHex = "#CCC"
    &UC_OrganigramaItem.ItemTextColor = "#000"
  
    //Hijos del Padre
    &UC_OrganigramaItems1.Clear()
  
    //Nodo Hijo Único
    &UC_OrganigramaItem1 = New()
    &UC_OrganigramaItem1.ItemDescription = "Hijo 1"
    &UC_OrganigramaItem1.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem1.ItemBackgroundHex = "#FFF"
    &UC_OrganigramaItem1.ItemTextColor = "#000"
  
    &UC_OrganigramaItems1.Add(&UC_OrganigramaItem1)
  
    //Nodo Hijo con Hijos
    &UC_OrganigramaItem1 = New()
    &UC_OrganigramaItem1.ItemDescription = "Hijo 2"
    &UC_OrganigramaItem1.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem1.ItemBackgroundHex = "#E5FECA"
    &UC_OrganigramaItem1.ItemTextColor = "#000"
  
    //Iniciar Collection de Hijo con Hijos
    &UC_OrganigramaItems2.Clear()
  
    //Nodo Primer Hijo del Hijo 2
    &UC_OrganigramaItem2 = New()
    &UC_OrganigramaItem2.ItemDescription = "Hijo 2.1"
    &UC_OrganigramaItem2.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem2.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem2.ItemTextColor = "#FFF"
    &UC_OrganigramaItems2.Add(&UC_OrganigramaItem2)
  
    //Nodo Segundo Hijo del Hijo 2
    &UC_OrganigramaItem2 = New()
    &UC_OrganigramaItem2.ItemDescription = "Hijo 2.2"
    &UC_OrganigramaItem2.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem2.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem2.ItemTextColor = "#FFF"
    &UC_OrganigramaItems2.Add(&UC_OrganigramaItem2)
  
    //Nodo Tercer Hijo del Hijo 2
    &UC_OrganigramaItem2 = New()
    &UC_OrganigramaItem2.ItemDescription = "Hijo 2.3"
    &UC_OrganigramaItem2.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem2.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem2.ItemTextColor = "#FFF"
      
    //
    &UC_OrganigramaItems3.Clear()
  
    //
    &UC_OrganigramaItem3 = New()
    &UC_OrganigramaItem3.ItemDescription = "Hijo 2.3.1"
    &UC_OrganigramaItem3.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem3.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem3.ItemTextColor = "#FFF"
    &UC_OrganigramaItems3.Add(&UC_OrganigramaItem3)
  
    //
    &UC_OrganigramaItem3 = New()
    &UC_OrganigramaItem3.ItemDescription = "Hijo 2.3.2"
    &UC_OrganigramaItem3.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem3.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem3.ItemTextColor = "#FFF"
    &UC_OrganigramaItems3.Add(&UC_OrganigramaItem3)
  
    //
    &UC_OrganigramaItem3 = New()
    &UC_OrganigramaItem3.ItemDescription = "Hijo 2.3.3"
    &UC_OrganigramaItem3.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem3.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem3.ItemTextColor = "#FFF"
    &UC_OrganigramaItems3.Add(&UC_OrganigramaItem3)
  
    //
    &UC_OrganigramaItem3 = New()
    &UC_OrganigramaItem3.ItemDescription = "Hijo 2.3.4"
    &UC_OrganigramaItem3.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem3.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem3.ItemTextColor = "#FFF"
    &UC_OrganigramaItems3.Add(&UC_OrganigramaItem3)
  
    //
    &UC_OrganigramaItem3 = New()
    &UC_OrganigramaItem3.ItemDescription = "Hijo 2.3.5"
    &UC_OrganigramaItem3.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem3.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem3.ItemTextColor = "#FFF"
    &UC_OrganigramaItems3.Add(&UC_OrganigramaItem3)
  
    &UC_OrganigramaItem2.ItemChildren = &UC_OrganigramaItems3
    &UC_OrganigramaItems2.Add(&UC_OrganigramaItem2)
  
    //Nodo Cuarto Hijo del Hijo 2
    &UC_OrganigramaItem2 = New()
    &UC_OrganigramaItem2.ItemDescription = "Hijo 2.4"
    &UC_OrganigramaItem2.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem2.ItemBackgroundHex = "#000"
    &UC_OrganigramaItem2.ItemTextColor = "#FFF"
    &UC_OrganigramaItems2.Add(&UC_OrganigramaItem2)
  
    //Agregar Hijos al Hijo 2
    &UC_OrganigramaItem1.ItemChildren = &UC_OrganigramaItems2
  
    &UC_OrganigramaItems1.Add(&UC_OrganigramaItem1)
  
    &UC_OrganigramaItem1 = New()
    &UC_OrganigramaItem1.ItemDescription = "Hijo 3"
    &UC_OrganigramaItem1.ItemLink = "http://www.google.com"
    &UC_OrganigramaItem1.ItemBackgroundHex = "#FFF"
    &UC_OrganigramaItem1.ItemTextColor = "#000"
  
    &UC_OrganigramaItems1.Add(&UC_OrganigramaItem1)
  
  
    &UC_OrganigramaItem.ItemChildren = &UC_OrganigramaItems1
    &UC_OrganigramaItems.Add(&UC_OrganigramaItem)
Endevent

Debería al especificar, ver un organigrama como el siguiente

Ejemplo completo -> https://drive.google.com/open?id=0Bx88diHIY1rtcEtOMTR1blBVS28

Base de Diseño
https://codepen.io/rctorr/pen/MyXyGw
Icono del Producto
Icon made by Appzgear from www.flaticon.com


Si te ha gustado este post, y quisieras colaborar con la causa para que todo el contenido sea gratuito y los UC o EO igualmente, puedes donar lo que consideres, usando el botón de la izquierda.