Uso avanzado de TEMPLATES (agrupaciones, tooltip, js:getTemplate)

En este post veremos cómo emplear cierta complejidad a la hora de añadir más información en los templates.

A menudo necesitamos ampliar la información de una plantilla cuando el usuario la solicita.

Este tema se puede abordar de distintas formas que explicaremos a continuación.

        1. Uso de agrupación de plantillas.

En el apartado de plantillas podemos realizar una agrupación con una cabecera y un pie.

Esto implica que el campo por el que agrupar y toda la información contenido en toda la plantilla esté presente en la vista que sirve como origen de datos.

• Implica que la vista deba nutrirse con muchos datos pudiendo enlentecer la consulta y el despliegue de la información.
• Muy útil para uso de informes HTML (encabezado y líneas)

        2. Popups de tipo Popover o Tooltip

Con esta funcionalidad podemos hacer que al pasar el mouse por un elemento, se abra una plantilla a modo de tooltip o popover.

• Para ello nos valdremos del web comnponent <flx-tooltip>
• Más info en la ayuda de flexygo

        3. Añadir la información de un template dentro de un contenedor HTML

Para esto es necesario el uso de la función javascript estándar llamada flexygo.environment.getTemplate 

Echa un vistazo al ejemplo del template, para ver cómo mediante el código javascritp del evento onclick, incrustamos un template en un contenedor <div class="childNodes"></div>

<div class="col-12 nodes">
<div class="col-6 col-m-12 mod-expand">
  <div class="row">
    <div class="col-10 col-m-10 col-s-8">
      <h4><small>
        <a  class="collapsed" data-toggle="collapse" data-target="#Grupo{{Grupo}}" onclick="if ($(this).is('.collapsed')) $(this).closest('.nodes').find('.childNodes').html(
                                                                                            
                                                                                            flexygo.environment.getTemplate('GruposPaises_Relacion', 'Grupo=\'{{Grupo}}\'', 'GruposPaisesRelacion','Grupo={{Grupo}}')
                                                                                            
                                                                                            );" title="{{Grupo}}"><i class="flx-icon tree-icon-toggle" title="Child Nodes"></i></a>
      </small>
      <span class="txt-primary"><span class="flag-icon flag-icon-{{Grupo}} icon-margin-right"></span><i class="flx-icon icon-internet-1" /> {{DescripGrupoES}} - </span><span class="txt-outstanding">({{DescripGrupoEN}}) </span>
      </h4>
    </div>
    <div class="col-2 col-m-2 col-s-4" >
       <div class="btn-group">
                 {{editbutton}}{{deletebutton}}
       </div>
    </div>
  </div>
</div>
<div class="row collapse box-primary" id="Grupo{{Grupo}}">
  <div class="childNodes"></div>
</div>
</div>

0 Votos