¿Cómo customizar la apariencia de la página de solicitud de documentos?

Puedes adaptar la manera en la que se muestra la página de solicitud de documentos generada por la operación Send Document Request.

Sigue estos pasos para hacerlo.

1. Crear un document request page template

Ve a Page_Template » Documents request page templates en el backend de Athento y crea un nuevo Document request page templates.

En template type, selecciona Document request. En template HTML copia el código HTML de la página que quieres usar.

La plantilla deberá incluir ciertos elementos para poder renderizar los elementos dinámicos y la funcionalidad.

% extends "athentose_public_base.html" %}
{% load i18n %}
{% load humanize %}
{% load coretags %}
{% load page_template_tags %}

La plantilla se encuentra dividida en bloques dentro de los cuales podrás poner tu contenido personalizado. Los bloques se encuentran delimitados por las etiquetas:

{% block %}{% endblock %}

Dentro de dichas etiquetas podrás incluir código HTML, así como estilos css, aunque estos últimos recomendamos que los pongas en un archivo separado cargado en el campo CSS binary. En todo caso, para que se muestren los estilos, deberás poner la siguiente información.

{% block head_css %}
    {%  static_resource_link page_template 'css' %}
{% endblock head_css %}

Bloques existentes

{# Allows you to modify the page title #}
{% block title %}{% endblock title %}


{# Allows you to include metatags #}
{% block head_meta %}{% endblock head_meta %}

{# Allows you to add a custom css class to the main div #}
{% block app_body_class %}{% endblock app_body_class %}


{# Allows you to add a custom css styles #}
{% block head_css %}{% endblock head_css %}


{# Allows you to add a custom css class to body #}
{% block body_class %}body{% endblock body_class %}

{# Allows you to modify the header #}
{% block header %}{% endblock header %}

{# Allows you to modify the sidebar #}
{% block sidebar %}{% endblock sidebar %}

{# Allows you to modify the main #}
{% block main %}{% endblock main %}

{# Allows you to modify the footer #}
{% block footer %}{% endblock footer %}

Otros tags disponibles

Este bucle permite recorrer y pintar los documentos requeridos. 

{% for document_type in doctypes %}
      {{ document_type.label }} {{ document_type.description }}                  
 {% endfor %}

Este bucle permite recorrer y pintar la lista de extensiones permitidas.

{% for extension in serie.get_allowed_extensions %}
                                        {{ extension }}
                                    {% endfor %}

Esta etiqueta permite pintar el tamaño máximo permitido del espacio.

{{{ serie.maxsize|filesizeformat }}

El siguiente código permite pintar el componente de subida de documentos por cada documento aún pendiente de subir.

{% with pending_document_type_list=dr.get_pending_document_types %}
         {% for document_type in doctypes %}
                {{ document_type.label }}
                {{ document_type.description }}
                                
                {% if document_type in pending_document_type_list %}
                      {% include "filepond/base_filepond.html" with url="/uploader/upload/request/"|addstr:dr.uuid|addstr:"/"|addstr:document_type.uuid name="files" max_height="100" events="athento-reload" %}
                {% else %}
                       Document was already loaded
                {% endif %}
           {% endfor %}
 {% endwith %}

El siguiente bucle permite pintar los documentos que ya han sido aportados.

{% with srelations=dr.document.get_srelations %}
          {% for relation in srelations %}
                  {{ relation.target.doctype.label }}
                  {{ relation.target.creation_date }}
           {% endfor %}               
{% endwith %}

Es posible también incluir una opción para eliminar documentos cargados desde la solicitud.

El endpoint que se debe llamar para realizar esta acción es el siguiente:

/uploader/api/document-request/${dr_uuid}/remove-document/ 

y en el cuerpo de la llamada esperará un JSON con las siguientes claves:

• document: listado de uuids de los documentos a eliminar
• password: la clave de la solicitud de documentos (utilizado para validar el llamado)

Normalmente gestionar la llamada desde JavaScript será conveniente para actualizar la solicitud en forma dinámica. Un ejemplo sencillo:

{% with srelations=dr.document.get_srelations %}
          {% for relation in srelations %}
                  {{ relation.target.doctype.label }}
                  {{ relation.target.creation_date }}
                  <button 
                      onclick="removeDocuments(['{{ relation.target.uuid }}'])" 
                      style="border:none; background:none; cursor:pointer;">
                      <i class="fa fa-trash" style="color: red;"></i>
                  </button>
           {% endfor %}
{% endwith %}

function removeDocuments(uuids=[]) {
    if (!confirm("¿Are you sure to remove this document?")) {
        return;
    }

    const dr_uuid = "{{ dr.uuid }}";
    const dr_password = "{{ dr.password }}";

    fetch(`/uploader/api/document-request/${dr_uuid}/remove-document/`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRFToken": "{{ csrf_token }}",
        },
        body: JSON.stringify({
            document: uuids,
            password: dr_password
        })
    })
    .then(response => {
        if (response.ok) {
            alert("Document was removed.");
            location.reload();
        } else {
            alert("Error when removing document.");
        }
    })
    .catch(error => {
        console.error("Error when removing document:", error);
        alert("Error when removing document.");
    });
}

Imágenes

Las imágenes deben ser incluidas en base64.

Responsividad

La responsividad de esta funcionalidad dependerá de que los estilos y el HTML maquetados sean estándares, sigan los lineamientos de la W3C y sean responsivos.

2. Crear un document request config

Ve a Uploader » Documents request configs en el backend de Athento. Crea un nuevo Documents request configs

• Modified by: se completa automáticamente
• Notification template requester: notification template a usar para requerir los documentos
• Notification template receiver: notification template a usar para confirmar recepción de los documentos
• Document request page template: Es la template creada en el paso anterior.
• Document type: es el formulario para el que se van a solicitar los documentos relacionados.

3. Indica el template en la operación

En la configuración de la operación, en el parámetro document_request_template , indica el uuid de la template.

Puedes encontrar este dato en: