How to customize the look&feel of the page that requests documents to external users?

You can change the design of the page where external users can upload documents when requested through the Send Document Request automation task.

Follow the steps below to do so.

1. Create a document request page template

Go to Page_Template » Documents request page templates in Athento's backend and create a new Document request page template.

In template type, select Document request. In the template HTML field, paste the HTML you want to use.

The template must include some tags to be able to render dynamic information and features.

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

The template is made of blocks, within blocks you will be able to customize content. Blocks are indicated by the tags:

{% block %}{% endblock %}

Within these tags, you can include HTML code, as well as CSS styles, although we recommend that you put the latter in a separate file uploaded in the CSS binary field. In any case, in order for the styles to be displayed, you must enter the following information.

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

Existing blocks

{# 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 %}

Other available tags

This iteration allows you to print all the required documents.

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

This iteration allows you to print all the supported file extensions.

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

This tag prints the max file size allowed in the space. 

{{{ serie.maxsize|filesizeformat }}

The following piece of code renders the uploader component for each required document.

{% 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 %}

The following iteration prints the documents that have been already uploaded.

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

Images

Images must be encoded in base64.

Responsiviness

The responsiveness of this page will depend on the styles and HTML layout, which needs to be standard, follow the W3C guidelines, and needs to be responsive.

2. Create a document request config

Go to Uploader » Documents request configs on Athento's backend. Create a new Documents request config

• Modified by: will be populated automatically.
• Notification template requester:
• Notification template receiver:
• Document request page template: template created in the previous step.
• Document type: form from where we are requiring documents.

3. Indicate the template in the automation task setup

In the automation task configuration, in the document_request_template parameter, indicate the UUID of the template.

You can find this piece of information in: