crear-html-twig

Skill: Crear Vistas HTML Twig en FacturaScripts

Las vistas Twig son archivos .html.twig ubicados en la carpeta View/ del plugin. Permiten construir interfaces completamente personalizadas usando el motor de plantillas Twig 3.

Atajo con fsmaker

Para generar una vista Twig con la estructura base ya preparada:

fsmaker view

fsmaker solicita el nombre de la vista y genera el archivo .html.twig en View/ con la herencia de plantilla correcta. Los apartados siguientes documentan la estructura completa y las funciones disponibles.

---

1. Crear una vista básica

Ubicación

Plugins/MiPlugin/View/MiVista.html.twig

Estructura mínima con menú

{% extends "Master/MenuTemplate.html.twig" %}

{% block body %}
    {{ parent() }}
    <div class="container-fluid">
        <h1>{{ trans('my-title') }}</h1>
    </div>
{% endblock %}

{% block css %}
    {{ parent() }}
    {# CSS adicional aquí #}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {# JS adicional aquí #}
{% endblock %}

Sin menú (interfaz mínima)

{% extends "Master/MicroTemplate.html.twig" %}

{% block body %}
    <h1>Vista mínima</h1>
{% endblock %}

---

2. Usar la vista desde el controlador

Como vista principal del controlador

// En el método exec() o privateCore() del controlador:
$this->setTemplate('MiVista'); // carga View/MiVista.html.twig

Para desactivar la salida HTML (respuestas JSON, descargas, etc.):

$this->setTemplate(false);

Como pestaña dentro de un PanelController o EditController

protected function createViews(): void
{
    // addHtmlView(viewName, templateName, modelName, title, icon)
    $this->addHtmlView('tab-producto', 'Tab/MiTab', 'Producto', 'producto', 'fas fa-box');
}

• El archivo debe estar en View/Tab/MiTab.html.twig
• El modelo puede ser cualquier string si no se necesita modelo específico

---

3. Variables disponibles en la vista

Variable	Descripción
fsc	Referencia al controlador (acceso a propiedades/métodos públicos)
controllerName	Nombre del controlador activo
template	Nombre de la plantilla cargada
assetManager	Assets CSS/JS cargados desde el controlador
log	Instancia de MiniLog