El editor de plantillas de documentos de Rentman te permite personalizar fácilmente tus plantillas a tu gusto y según las necesidades de tu empresa. Nuestro editor te ofrece una serie de opciones para personalizar tu plantilla con un sistema WYSIWYG (what you see is what you get), sin necesidad de conocer o tocar ningún código.

Dicho esto, hemos querido dar a nuestros usuarios más avanzados la posibilidad de realizar cambios más profundos en sus plantillas, cambios que no se limitan a lo que es posible a través de las opciones WYSIWYG. Por ello, les damos la posibilidad de editar el CSS de sus documentos, manipular variables e implementar lógica en ellas, así como aplicar estilos condicionales.

Nota: Para hacer uso de estas opciones necesitas conocimientos técnicos. Si no tienes estos conocimientos, te recomendamos que te pongas en contacto con un tercero para que realice estos cambios por ti, o que utilices nuestro Servicio de personalización de plantillas de documentos. No ofrecemos soporte en la implementación o depuración de CSS, variables o estilos condicionales, como puedes leer en nuestro Alcance del soporte.

CSS

Si deseas cambiar manualmente el CSS de tu documento para que tenga el aspecto que deseas, puedes hacerlo desde el menú Estilo del editor de plantillas de documentos:

Antes de empezar a cambiar tu CSS, te recomendamos que primero apliques un tema. Esto te dará una estructura de la que partir, y luego podrás retocarla a tu gusto.

Clases de CSS

Cada elemento de la plantilla de documento de Rentman tiene una clase CSS, que puedes utilizar en tu CSS para dirigirte al elemento específico para estilizarlo individualmente. Aunque no tenemos una lista completa de clases que podamos compartir, puedes ver fácilmente cuál es la clase CSS a la que debes dirigirte utilizando el elemento Inspeccionar de tu navegador sobre la vista previa del documento:

En el ejemplo anterior, puedes ver que las filas que contienen artículos de alquiler en el módulo de equipo tienen la claseitem rental.

Consejo: Las filas pueden ser generadas dinámicamente, y pueden tener la misma clase. Todos los artículos de alquiler tendrán la clase anterior, por ejemplo. Para dirigirse a otros específicos, podrías usar pseudo-selectores como :nth-child(i)

PHP

Si editas el bloque de texto en cualquier plantilla del sistema, verás que la presentación de la información cambia. Mientras que antes de editar el campo quizá veía el nombre de tu cliente como "Rentman", ahora lo ves como {$f.customer.displayname}. Esta es una variable. Lo que hace esa variable es que recupera el nombre para mostrar del cliente para el proyecto del que está generando el documento, y lo inserta en el documento generado en lugar de la variable.

Modificadores de variables

En la mayoría de los casos, todo lo que tienes que hacer para mostrar una variable específica es simplemente añadirla a tu documento. Sin embargo, hay algunos escenarios en los que puedes querer o necesitas manipular una determinada variable. Por ejemplo, antes de poder comparar un precio con un número (para una sentencia if, consulta la sección siguiente), tendrás que convertir el precio en un número. 

Esto puede hacerse añadiendo un cambio de variable a la propia variable. Siguiendo con el ejemplo anterior, y utilizando el regex_replace modificador, este es el aspecto de la variable del precio total del proyecto, {$f.project_total_price}, cuando se convierte en un número:

{$f.project_total_price|regex_replace:'/[^0-9]/':''|intval}

Consulte la documentación sobre modificadores de variables para ver qué tipo de manipulación de variables se puede realizar.

Nota: No todos los modificadores de variables están permitidos en el editor de plantillas. Cuando un modificador no está permitido, el editor te informará de ello. Por favor, consulta también la sección siguiente para conocer algunos modificadores y funciones personalizadas que puedes utilizar en nuestro editor de plantillas

"lcfirstLocal",
"lcfirstlocal",
"ucfirstLocal",
"ucfirstlocal",
"formatTime",
"formatBytes",
"formatDateTime",
"formatDiscount",
"formatDistance",
"formatDuration",
"formatMonth",
"formatDay",
"formatDate",
"formatBoolean",
"formatNumber",
"formatPrice",
"formatPercentage",
"formatSpellout",
"formatPriceCustom",

public const F_TYPE = [
       'is_array',
       'is_bool',
       'is_countable',
       'is_int',
       'is_integer',
       'is_object',
       'is_null',
       'is_string',
       'is_float',
       'is_double',
       'isset',
   ];

   public const F_CAST = [
       'intval',
       'boolval',
       'doubleval',
       'floatval',
   ];

   public const F_DATETIME = [
       'time',
       'date',
   ];

   public const F_ARRAY = [
       'empty',
       'count',
       'sizeof',
       'current',
       'explode',
       'array_key_exists',
       'array_keys',
       'array_values',

   ];

   public const F_REGEX = [
       'regex_replace',
   ];

   public const F_STRING = [
        'nl2br',
        "ucfirst",
        "lcfirst",
        "ucwords",
        "htmlentities",
        "htmlspecialchars",
        "trim",
        "ltrim",
        "rtrim",
        "strtolower",
        "strtoupper",
        "mb_strtoupper",
        "count",
        "escape",
        "strlen",
        "mb_strlen",
        "substr",
        "mb_substr",
        "str_replace",
        'str_pad',
        'wordwrap',
        'sprintf',
        'strip_tags',
        'urlencode',
   ];

   public const F_MISC = [
        'min',
        'max',
        'abs',
        'rand',
        'number_format',
        'round',
        'ceil',
        'floor',
   ];

   public const F_RENTMAN = [
        "Rentman\\getTemplateVal",
        "sumprice",
        "substr",
        "multiplyprice",
        "removePrice",
        "toDate",
        'buildrow',
        'roundcents',
   ];

Declaraciones condicionales IF

Las declaraciones"If", como su nombre indica, son una forma de hacer que tus documentos hagan algo si se cumple una determinada condición y, en caso contrario, hagan otra cosa. Puedes encontrar una de estas declaraciones en el primer bloque de texto de todas nuestras plantillas de sistema para presupuestos, contratos y facturas. Si editas ese bloque de texto, veras el siguiente código:

{$f.customer.displayname}
{iff $f.contact > 0}attn. {$f.contact.firstname} {$f.contact.surfix} {$f.contact.lastname}
{/iff}{$f.customer.post_street} {$f.customer.post_number}
{$f.customer.post_postalcode} {$f.customer.post_city} {iff $f.customer.country != $company.country}{$f.customer.country}{/iff}

La condición en este caso es la siguiente, y siempre se define al principio de la declaración if:

{iff $f.contact > 0}

Si el valor devuelto por la variable {$f.contact} (el número de personas de contacto que tiene el cliente) es mayor que 0, el documento imprimirá lo que se inserte antes de la etiqueta de cierre {/iff}. En este caso, es el texto "attn." y el nombre, sufijo y apellido de la persona de contacto. Si esta condición no se cumple (el cliente no tiene persona de contacto), todo lo que hay dentro de la sentencia if se ignora y no se imprime dicha información. 

Otro ejemplo de campo de entrada extra con entrada Sí/No

{iff $f.project.custom_1 == 'Yes'}
    La respuesta fue afirmativa
{else}
    La respuesta fue negativa
{/iff}

Esto puede hacerse también con más de una condición, utilizando {elseif}. Por ejemplo:

{iff $name ='Fred'}
    Bienvenido, señor.
{elseif $name = 'Wilma'}
    Bienvenida, señora.
{else}
    Bienvenido, seas lo que seas.
{/iff}

Estilos condicionales

El estilo condicional te permite aplicar una clase CSS que defines si la columna que eliges tiene un determinado valor. Por ejemplo, digamos que tienes un campo de entrada extra para tu equipo que puede tener dos valores: azul y naranja. A través del estilo condicional, puede decir que las filas de equipos que tengan el color azul tendrán la clase CSS .blue, mientras que las filas de equipos que tengan el color naranja tendrán la clase CSS .orange.

Hecho esto, ahora puedes estilizar las filas de equipos por separado en función de la clase que tengan: por ejemplo, puedes hacer que los equipos "naranja" tengan un fondo naranja en tu tabla, mientras que los "azul" tendrán un fondo azul.

Una vez que hayas utilizado con éxito el estilo condicional, el número de cambios visuales que puedes hacer a tu documento son casi infinitos. Cualquier estilo que pueda aplicar a sus documentos, puede aplicarlo a las clases que defina a través del estilo condicional.

El estilo condicional puede definirse en las opciones de cortar/pegar de un módulo seleccionado:

Estructura

Al abrir las opciones de cortar/pegar, se te presentará una ventana de este tipo:

Para aplicar el estilo condicional, puedes añadir el siguiente código justo antes del corchete de cierre de la opción cortar/pegar:

,
  "conditionalstyling": [
    {
      "condition": {
        "field": "templVarName",
        "comparator": "comparatorValue",
        "value": {
          "value": "valueValue"
        }
      },
      "class": "cssClass"
    }
  ]

A continuación, debes editar el fragmento anterior para especificar tus condiciones, donde:

• templVarName = el valor que veras para el campo templVar para la columna en la que deseas comprobar la condición. Usando la captura de pantalla anterior como ejemplo, si quieres definir una condición basada en el valor del factor (staffel), escribirías “staffel”
• comparatorValue = el tipo de comparación que deseas realizar entre el valor del campo que has definido anteriormente y el valor que defines como comparación. Puedes utilizar varios comparadores, como: = (igual a), != (no es igual), > (mayor que), < (menor que), *= (contiene), *!= (no contiene). Si se quisiera comprobar si el factor es mayor que 3, se utilizaría > aquí.
• valueValue = el valor con el que deseas comparar. Si quieres comprobar si el factor es mayor que 3, escribirías 3 aquí. También es posible comparar con el valor de otro campo, así: "value":{"value":"templVarName", "type: "templVar"}}
• cssClass = la clase CSS que deseas dar a las filas que satisfacen la condición definida. Por ejemplo, factorMayorQueTres