Skip to main content

Widgets

En Crono, los widgets se llaman micro-aplicaciones. Son fragmentos de contenido HTML que se inyectan en zonas predefinidas de una página. Poder inyectar contenido externo en páginas existentes es esencial para una aplicación modular.

Casos de uso típicos: agregar scripts al HEAD, extender la navegación, añadir barras laterales, o enriquecer grillas, listados y formularios.

Zonas​

Las zonas marcan ubicaciones en las vistas donde las micro-aplicaciones inyectan su marcado. Se representan con IMicroAplicacionZona y se declaran en las vistas con el tag helper de zona. Una micro-aplicación se ancla a una zona por su nombre.

Inyectar micro-aplicaciones desde una vista​

El tag helper microaplicacion compone HTML en la plantilla y lo inyecta en una zona destino:

<microaplicacion zona-destino="admin_boton_barraherramienta_antes">
    <button id="btnGuardar" type="submit" class="btn btn-warning btn-sm">
        <i class="fa fa-check"></i>
        <span>@T("Admin.Comun.Guardar")</span>
    </button>
</microaplicacion>

Inyectar micro-aplicaciones por código​

Usa IMicroAplicacionProveedor para registrar micro-aplicaciones en una o más zonas (por nombre, por expresión regular o por predicado):

internal class ConsentimientoCookiesFiltro : IResultFilter
{
    private readonly IMicroAplicacionProveedor _proveedor;

    public ConsentimientoCookiesFiltro(IMicroAplicacionProveedor proveedor)
    {
        _proveedor = proveedor;
    }

    public void OnResultExecuting(ResultExecutingContext context)
    {
        _proveedor.RegistrarMicroAplicacion("final", new MicroAplicacion(/* componente o vista parcial */));
    }

    public void OnResultExecuted(ResultExecutedContext context)
    {
        // Demasiado tarde: la página ya está renderizada.
    }
}

El proveedor también ofrece TieneMicroAplicaciones(zona) para comprobar si una zona tiene contenido inyectado y ObtenerMicroAplicaciones(zona) para enumerarlo. Una MicroAplicacion puede envolver un componente de vista, una vista parcial o contenido HTML.

Micro-aplicaciones activables (proveedores)​

Al implementar IMicroAplicacionActivable, una funcionalidad se convierte en un widget que el usuario puede activar o desactivar desde el backend. El proveedor define dónde se muestra y qué renderiza:

public class MiAnaliticaProveedor : IMicroAplicacionActivable
{
    public string[] ObtenerZonasMicroAplicacion()
        => new[] { "head" };

    public MicroAplicacion ObtenerMicroAplicacionMostrar(string zonaMicroAplicacion, object modelo, int organizacionId)
        => new MicroAplicacion(/* componente que renderiza el script */);
}

Como IMicroAplicacionActivable deriva de IProveedor, hereda todo el sistema de metadatos y activación descrito en Modularidad y Proveedores. Las micro-aplicaciones activables requieren que el usuario las habilite explícitamente en el backend.

info

La configuración del sistema incluye MostrarZonasMicroAplicacion, una ayuda de diagnóstico que resalta visualmente las zonas disponibles en las páginas (ver Perfilado).