Support

Planado permite personalizar el diseño de impresión del trabajo según tus necesidades. Puedes cambiar la forma en que se muestran los campos, resaltar la información importante, añadir o quitar campos. También puedes cambiar el formato del diseño de impresión de PDF a HTML.

El diseño del trabajo se edita mediante un archivo HTML. Como lenguaje de marcado se utiliza Liquid. Puedes consultar su documentación en el sitio web oficial.

Diseño predeterminado del trabajo

Antes de añadir tus propios diseños de impresión personalizados, tendrás disponible un diseño de impresión predeterminado. Para ver cómo se muestra el trabajo con este diseño, abre cualquier trabajo y pulsa el botón Imprimir.

Imprimir trabajo

Planado imprimirá tu trabajo en un archivo PDF.

Diseño de impresión predeterminado del trabajo

Para crear tus propios diseños de impresión en el futuro, descarga el diseño de impresión predeterminado.
Puedes encontrarlo en Ajustes → Impresión. Para descargar el archivo del diseño predeterminado, pulsa en "Diseño predeterminado" y selecciona "Descargar".

Descargar el diseño de impresión predeterminado

Después de esto, se descargará un archivo HTML con el diseño de impresión. Puedes abrir este archivo en cualquier editor de HTML que prefieras. En este ejemplo se utilizará Notepad++.

Actualmente, el diseño de impresión predeterminado no está disponible para edición.

Diseño de impresión predeterminado

Variables (placeholders)

Para representar los campos de Planado en el archivo del diseño, se utilizan variables (placeholders). Los campos se encierran entre dobles llaves. Por ejemplo: {{ job.template.name }} — es el placeholder para la plantilla del trabajo. Si deseas obtener el nombre del campo traducido al ruso, debes colocar la variable entre comillas y agregar el filtro | translate.
Por ejemplo: {{ 'scheduled_at' | translate }} mostrará el texto «Programado». Para mostrar los campos del trabajo en el diseño de impresión, utiliza estas variables:

• job  — "Trabajo" 

• job.serial_no — número del trabajo

• job.status  — estado del trabajo

• job.template — plantilla del trabajo

• template — "Plantilla"

• type— "Tipo"

• job.type.code — tipo del trabajo

• scheduled_at — "Programado"

• job.scheduled_at — fecha y hora programada del trabajo

• duration — "Duración"

• job.scheduled_duration — duración programada del trabajo

• en_route_at — "De camino"

• job.en_route_at  — fecha y hora de salida hacia el trabajo

• started_at  — "Comenzado"

• job.started_at  — fecha y hora de inicio del trabajo

• finished_at  — "Finalizado"

• job.finished_at  — fecha y hora de finalización del trabajo

• created_at — "Creado"

• job.created_at  — fecha y hora de creación del trabajo

• job.creator.name  — nombre del usuario que creó el trabajo

• assignee — "Asignado"

• job.assignee — persona asignada al trabajo (si es un solo usuario)

• job.team — equipo asignado al trabajo (si es una brigada)

• description — "Descripción"

• job.description — descripción del trabajo

• address — "Dirección"

• job.address.full — dirección del trabajo

• client — "Cliente"

• job.client.name — nombre del cliente o de la empresa

• site — "Sitio"

• job.site.name — nombre del sitio

• resolution — "Resolución"

• job.resolution.name — tipo de resolución del trabajo

• job.resolution.comment — comentarios de la resolución

• external_id — "ID externa"

• job.external_id — ID externa del trabajo

• contacts — "Contactos"

• contact.name — nombre del contacto

• contact.value — número de teléfono del contacto

• field.name — nombre del campo (campo adicional o de informe)

Todas estas variables y sus usos se encuentran en el diseño de impresión predeterminado.

A continuación, veremos las herramientas básicas del lenguaje Shopify Liquid.

Operadores de Shopify Liquid

Shopify Liquid es un lenguaje de marcado. Permite cambiar dinámicamente el contenido del formulario según tu trabajo.

Operadores de salida:

• {{ }}: Muestra el valor de una variable o el resultado de una expresión, como se explicó anteriormente. 

  {{ job.serial_no }}  {{ job.scheduled_at | datetime }} 
  

  En este caso, se mostrarán en el formulario el número del trabajo y su fecha programada.

  
  

  
  

• {% %}:  Se usa para controlar la lógica y los bucles. Por ejemplo, con el operador if. 

  {% if job.type %}   <div class="field"> ... </div> {% endif %} 

  En este ejemplo, el contenido del <div> solo se muestra si existe un tipo de trabajo.

  
  

1. if - Expresiones condicionales:

Con el operador if, puedes establecer condiciones para mostrar información en el diseño de impresión. La información aparecerá solo si se cumple la condición especificada.

• Sintaxis:

  {% if condition %}    // Código que se ejecuta si la condición es verdadera
      ...
  {% elsif condition2 %}// Código que se ejecuta si la primera condición es falsa y la segunda es verdadera
      ...
  {% else %}    // Código que se ejecuta si todas las condiciones anteriores son falsas
      ...
  {% endif %}    

• Ejemplo: Verificar si está completada la dirección del cliente: 

  {% assign address_present = job.address.formatted | filled? %} 
  {% if address_present %}
      <div class="field">
          <label>{{ 'address' | translate }}</label>
          <span class="value">
              <span class="multiline-text">{{ job.address.full }}</span>
          </span>
      </div>
  {% endif %}    

• Uso de elsif: Verificar si hay un asignado o un equipo: 

        <div class="field">
          <label>{{ 'assignee' | translate }}</label>
          {% if job.assignee %}
              <span class="value">{{ job.assignee }}</span>
          {% elsif job.team %}
              <span class="value">{{ job.team }}</span>
          {% else %}
              <span class="value empty-value">{{ 'empty' | translate }}</span>
          {% endif %}
  </div>    

2. for - Bucles: 

Se utiliza para recorrer listas o arreglos de datos. Por ejemplo, para mostrar todos los campos del informe del trabajo.

• Sintaxis:

  {% for item in items %} // El código se ejecuta para cada elemento del arreglo "items"
  ...
  {% endfor %}    

• Ejemplo:  Mostrar contactos:

    {% for contact in job.filled_contacts %}
      <div class="field contact">
          <label>
              {% if forloop.first %}
                  {{ 'contacts' | translate }}
              {% endif %}
          </label>
          <span class="value">
          {{ contact.value }}{% if contact.name and contact.value %}, {% endif %}
              {{ contact.name }}
          </span>
      </div>
  {% endfor %}    

3. case – Selección condicional:
Al igual que if, se utiliza para establecer condiciones.

• Sintaxis:

  {% case variable %}
    {% when value1 %} // Código que se ejecuta si la variable es igual a "value1
    {% when value2 %}// Código que se ejecuta si la variable es igual a "value2" 
     {% else %} // Código que se ejecuta si la variable no coincide con ningún valor
  {% endcase %}    

• Ejemplo: Manejo de diferentes tipos de campos:

        {% for field in job.report_fields %}
      <div class="field">
          <label>{{ field.name }}</label>
          {% case field.field_type %}
              {% when 'input' %}
                  ...
               {% when 'action' %}
                  ...
              {% when 'checkbox' %}
                  ...
              {% else %}
                  ...
          {% endcase %}
      </div> {% endfor %}    

Operadores de comparación: 

• ==:  Verifica si dos valores son iguales. 

    {% if job.description == "" %}
     <span class="value empty-value">{{ 'empty'| translate }}</span>
   {% endif %}    

  En el ejemplo, el valor vacío se mostrará solo cuando la descripción esté vacía.
  
  

• !=:  Verifica si dos valores no son iguales. 

   {% if job.resolution.comment != "" %}
     <span class="value"> ... </span> 
  {% endif %}    

• >:  Mayor que. 

• <:  Menor que. 

• >=:  Mayor o igual que. 

• <=:  Menor o igual que. 

Operadores lógicos: 

• and:  Lógico “Y” — el valor se muestra solo cuando ambas condiciones se cumplen. 

  {% if job.template == "Entrega" and job.assignee.name == "Iván
   Rodrigez" %} Entrega de Rodrigez {% endif %}    

• or:  Lógico “O” — el valor se muestra si al menos una de las condiciones se cumple. 

  {% if job.assignee or job.team %} ... {% endif %}    

• not:  Negación lógica. 

  {% if not job.description %} ... {% endif %}    

Дополнительные операторы:

• empty:  Проверяет, является ли переменная пустой.

  {% if job.resolution.comment | empty %} ... {% endif %}    

• filled:  Проверяет, является ли переменная непустой.

  {% if job.description | filled %} ... {% endif %}    

Filtros: 

• datetime:  Convierte una fecha a un formato legible que incluye la hora. 

• truncate:  Corta una cadena de texto a una longitud determinada. 

• translate:  Traduce una cadena al idioma configurado en tu Portal del cliente Planado. 

A continuación, analizaremos algunas opciones para editar este archivo y así obtener el diseño de impresión deseado. 

Puedes encontrar el diseño de impresión mostrado en el ejemplo en el archivo adjunto a esta instrucción.

 Sustitución del logotipo de la empresa

Editar el diseño del trabajo permite reemplazar el logotipo de Planado en el diseño de impresión por el logotipo de su empresa. 

Para ello se utiliza el campo custom-logo.  

El logotipo en el diseño de impresión del trabajo debe estar en formato base64. Para convertir su logotipo a este formato, utilice un conversor en línea. El código resultante se podrá utilizar para insertarlo en el diseño de impresión.

A la izquierda: el logotipo de la empresa en formato PNG, a la derecha: en formato base64.

En el cuerpo del diseño de impresión, reemplace el campo existente logo por custom-logo.

Logo antes y después de la conversión 

Después de esto, se pueden establecer las dimensiones del logotipo para que se vea mejor en el diseño de impresión. El logotipo tendrá mejor apariencia si su tamaño está entre 100 y 200 píxeles de ancho y alto. Es recomendable establecer dimensiones proporcionales a las originales. Por ejemplo, si el archivo original tenía un tamaño de 1920×1080, en el archivo se deben indicar dimensiones de 192×108. El ancho se define con el parámetro width y la altura con height. En nuestro ejemplo, el tamaño original del logotipo era 1200×1200, así que lo reduciremos a 120×120. 

Imagen del logotipo agregado 

Para cargar el archivo de diseño de impresión resultante, ve a la página Ajustes → Impresión en Planado y haz clic en "Agregar diseño".

Agregar diseño de impresión 

En la ventana que se abre, introduce el nombre del diseño de impresión y carga el archivo HTML del diseño que contiene el nuevo logotipo. Según tus necesidades, elige el formato del archivo de salida. En este ejemplo, utilizamos PDF. 

Cargar nuevo diseño de impresión

Para comprobar cómo se ve el diseño de impresión del trabajo, abre el trabajo, haz clic en el botón de impresión y selecciona el diseño que has añadido.  

Después de esto, comenzará la descarga del diseño de impresión del trabajo.

Diseño de impresión del trabajo con el logotipo modificado

En el diseño generado, en lugar del logotipo de Planado se usará el logotipo que hayas cargado.
Si necesitas ajustar el tamaño del logotipo, puedes hacer cambios directamente en el archivo HTML del diseño del trabajo y volver a subir el archivo.

Reemplazar archivo del diseño de impresión 

Agregar fotografías al diseño de impresión 

De forma predeterminada, los valores de los campos de foto se muestran como nombres de archivo.
Si necesitas que se muestren como imágenes, deberás hacer modificaciones en el diseño de impresión. 

Nombres de archivos en los campos con fotos

Las reglas para mostrar fotografías se encuentran en la parte de los campos del informe: 

{% when 'image' %}              {% if field.value == empty_list %}                <span class="value empty-value">{{ 'empty' | translate }}</span>              {% else %}                <span class="value image-value">                  {% for image in field.value %}                    {{ image.name }}{% unless forloop.last %}, {% endunless %}                  {% endfor %}                </span>              {% endif %}

 {% when 'image' %}                          {% if field.size > 0 and field.filled %}              {% for image in field.value %}         {{image}}                    {% endfor %}              {% endif %}

 {% when 'image' %}                          {% if field.size > 0 and field.filled %}              {% for image in field.value %}                                       {{image | resize: 108, 192}}                                            {% endfor %}              {% endif %}

  .image-row {  display: flex;  flex-wrap: wrap;  margin-bottom: 5px; }

.image-wrapper {  flex: 1 1 calc(33.33% - 5px);  margin-right: 5px;  margin-bottom: 5px; }

.image-wrapper:nth-child(3n) {  margin-right: 0;
}

{% when 'image' %}            {% if field.size > 0 and field.filled %}              {% assign image_count = 0 %}              {% for image in field.value %}                {% if image_count == 0 %}                  <div class="image-row">                {% endif %}                <div class="image-wrapper">                  {{ image | resize: 108, 192 }}                </div>                {% assign image_count = image_count | plus: 1 %}                {% if image_count == 3 %}                  </div>                  {% assign image_count = 0 %}                {% endif %}              {% endfor %}              {% if image_count != 0 %}                </div>              {% endif %}            {% endif %}

Puedes encontrar la plantilla obtenida en el archivo adjunto a esta instrucción.