¿Cómo puedo añadir a la interfaz de usuario un botón con una preconfiguración para la creación de documentos? – Athento

Supongamos que necesitas un botón de creación de documentos que ya lleve una preconfiguración, por ejemplo:

que el documento se cree con un formulario y en un espacio determinado
que antes de crear el documento le pidamos al usuario que rellene algunos campos obligatorios

Quieres añadir este botón a tu Team o Equipo para hacer más fácil la creación de documentos para los usuarios y también porque necesitas que los documentos siempre se creen con unos datos mínimos. Quieres además que el botón esté fácilmente accesible desde cualquier lugar de la aplicación.

¿Qué opciones tienes para crear este tipo de botones?

A continuación, te explicamos qué opciones puedes usar para crear botones de creación de documentos:

Botón de creación rápida: sencillo de activar desde la administración avanzada, accesible globalmente, pero menos configurable. Con esta opción SOLO puedes preconfigurar el formulario y NO será útil si utilizas el formulario en varios espacios. Tampoco puedes pedir información antes de crear el documento. Úsalo si necesitas un botón para crear documentos de forma rápida con un formulario específico en un único espacio. ¿Cómo añadir un formulario o tipo documental al botón de acceso rápido a la creación de documentos?
Plantillas HTML customizadas en las que puedes insertar modales de creación de documentos proporcionados como una utilidad del producto. Esta opción es muy flexible porque puedes incluir lo que quieras, pero requiere código personalizado en el servidor, que debe subirse mediante un repositorio de código personalizado. La configuración del repositorio en instalaciones cloud requiere de la intervención del equipo de soporte de Athento. Puedes utilizar esta opción si necesitas mucha personalización, más allá de las opciones ofrecidas por el producto. ¿Cómo crear un botón personalizado para crear documentos y que se requiera información obligatoria antes de la creación?
Action buttons: Los action buttons permiten la inserción de botones en diferentes puntos de la interfaz de usuario. La configuración de estas opciones se guarda en base de datos y no en archivos, por lo que puedes crearlas desde la administración avanzada y sin ayuda de soporte. Los action buttons permiten insertar botones que abren ventanas modales o pop-ups para la creación de documentos. Estos modales o pop-ups pueden traer una preconfiguración para la creación del documento. Te recomendamos usar esta opción si no cuentas con un repositorio de código personalizado en tu instalación de Athento. ¿Cómo añadir un botón personalizado a nivel equipo?

Ejemplo de Creación de un Botón "Nueva Solicitud" con un Action Button

Crearemos un botón que permita crear un documento de tipo Solicitud en un espacio determinado. La ventana de creación requerirá 3 campos.

Accede a la administración avanzada. Home > Actions > Action buttons

Usa el botón Añadir para crear un nuevo action button.

A continuación, configura las siguientes opciones:

Target content type: selecciona Teams.
Target object id: aquí va el ID del Team en el que se mostrará el botón. Este ID lo puedes ver accediendo a la administración avanzada del team. Es el número que se muestra en la URL.
Place: selecciona Team Right Header
Type: selecciona Custom

A continuación, tendremos que configurar el HTML.

<div class="button-container" style="margin-right:5px;">
  <button data-toggle="react-modal" data-target="#sol-hipotecas-sidebar-button"
    class="btn btn-info" type="button">
    <i class="fa-regular fa-house" title="Nueva Solicitud"></i>
    <span class="masked">Nueva Solicitud</span>
  </button>
</div>
{% include "base_customizable_add_document_modal.html" with openOnSamePage="true" requiredMetadataList="metadataexpediente_hipotecario_correo_contacto_solicitante,metadata_nombre_titular,metadata_dni_titular" modalID="sol-hipotecas-sidebar-button"  serieUUID="9ad1c848-7e33-4c6a-afa8-57a61f0eae06" documentTypeUUID="36eb72a0-3c5e-4b2f-84c1-79d1f1b6a023" %}

Veamos este código en detalle:

<div class="button-container" style="margin-right:5px;"></div>

Contiene el botón, y le hemos añadido un margen para separarlo de la búsqueda rápida.

<button data-toggle="react-modal" data-target="#sol-hipotecas-sidebar-button"
    class="btn btn-info" type="button">
    <i class="fa-regular fa-house" title="Nueva Solicitud"></i>
    <span class="masked">Nueva Solicitud</span>
</button>

data-toggle="react-modal": Indica que al pulsar el botón, se abrirá un modal React. (la ventana de creación de documentos)
data-target="#sol-hipotecas-sidebar-button": Especifica el identificador del modal que se abrirá (debe coincidir con el modalID del modal que se incluye después). Este nombre puede ser el que escojas.
class="btn btn-info": Aplica estilos de Bootstrap para que el botón se vea destacado.
type="button": Especifica el tipo de botón.
Dentro del botón, hay un icono (<i class="fa-regular fa-house">) y un texto ("Nueva Solicitud").

{% include "base_customizable_add_document_modal.html" with ... %}:

Esta línea incluye una plantilla de modal personalizada de Athento que permite crear documentos y lleva configuradas las siguientes propiedades:

openOnSamePage="true": Tras crear el documento, se abre en la misma pestaña.
requiredMetadataList="metadataexpediente_hipotecario_correo_contacto_solicitante,metadata_nombre_titular,metadata_dni_titular": Lista de campos que serán obligatorios en el formulario de creación. Aquí se usan los slug de los campos y van separados por comas.
modalID="sol-hipotecas-sidebar-button": Identificador único del modal (debe coincidir con el data-target del botón).
serieUUID="9ad1c848-7e33-4c6a-afa8-57a61f0eae06": UUID del espacio donde se creará el nuevo documento.
documentTypeUUID="36eb72a0-3c5e-4b2f-84c1-79d1f1b6a023": UUID del formulario (tipo documental) con el que se creará el documento.

Este código que configuramos en el campo HTML, añade un botón visible y accesible (en este caso en la cabecera de un equipo, etc.). Al pulsar el botón, se abre un modal para crear un documento en un espacio y con un formulario concretos. Antes de crear el documento, el usuario debe rellenar los campos obligatorios especificados. Tras la creación, el usuario es redirigido al nuevo documento en la misma pestaña.

En la configuración de estos botones puedes usar todas las propiedades que se explican en el artículo ¿Cómo crear un botón personalizado para crear documentos y que se requiera información obligatoria antes de la creación?

Relacionada con