Tutorial: Control Adjuntar

El control de adjuntar utiliza los componentes ol y li para llevar la información de los archivos adjuntos, pero la subida del archivo utiliza principalmente un componente genérico del BPMs ubicado en solicitudes/plantillas/upload.aspx, este componente se encarga de subir los archivos al servidor en una carpeta temporal y devolver la ruta en que quedaron almacenados.

GenAdjunto

Estructura HTML del control adjuntar

El control adjuntar tiene varios elementos importantes para su correcto funcionamiento, un botón para abrir el modal para adjuntar, un elemento ol que guardará la información y un campo oculto que se usa para la validación. La configuración del adjunto se basa en los data atributos del botón, para la grid se tienen unos datos adicionales.

<!-- Estructura para un adjuntar en el formulario principal -->
<div class="large-50 medium-50 col-100 list ">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label lbFile">Adjunto</div>
            <button class="button btnAdjuntar" type="button" id="btnf1" data-idf="f1"
                data-tipo-f="jpg,jpeg,png,bmp" data-num-files="3" data-kb="4000" data-fn-remove="confirmRemove">
                <i class="material-icons">attach_file</i>
                Adjuntar documento
            </button>
            <ol id="f1" class="view-file"></ol>
            <input type="hidden" id="_tf1" />
        </div>
    </div>
</div>

<!-- Estructura para un adjuntar en un modal de grid -->
<div class="large-100 medium-100 col-100 list ">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label lbFile">Adjunto Grid</div>
            <button class="button btnAdjuntar" type="button" id="btnf2" data-idf="f2"
                data-tipo-f="" data-num-files="3" data-kb="4000" data-grid="gTest" data-grid-col="5">
                <i class="material-icons">attach_file</i>
                Adjuntar documento
            </button>
            <ol id="f2" class="view-file ufiles"></ol>
            <input type="hidden" id="_tf2" />
        </div>
    </div>
</div>

Configuración del control adjuntar

Todo se basa en los data atributos en el botón para adjuntar, a continuación se describen incluídos los de la grid:

Tipos de archivos comunes

Usualmente lo que se suben son imágenes, documentos de PDF y archivos de word y excel, el control de adjuntar tiene una función para previsualizar, esta solo aplica para las imágenes y los documentos pdf, estas extensiones se ponen en el atributo data-tipo-f, se pueden mezclar varias extensiones, o si no se quiere tener esta restricción, el campo se deja vacío.

Previsualización

La previsualización en este momento es general para los formularios de framework7, se tiene una plantilla genérica para que funcione en cualquier proceso. También existe la posibilidad de sobre escribir esta funcionalidad y hacer una previsualización personalizada.

Para que funcione la previsualización se debe incluir en los formularios esta plantilla ##SubTemplate--generales\adjuntar\viewAdjuntar.htm##

Eventos del control adjuntar

El control dispara varios eventos, para que se puedan extender las funcionalidades generales desde el script específico de cada formulario, estos son los eventos que genera el control, los dispara directamente el control ol, por lo que la suscripción al evento se hace contra ese control:

_$('.ufiles').on('existFile', function(e) {
   var data = e.originalEvent.detail;
   console.log('El archivo {0} ya ha sido adjuntado'.format(data[0]));
});

_$('.ufiles').on('addFile', function(e) {
   var dataFile = e.originalEvent.detail;
   console.log(dataFile);
});

_$('.ufiles').on('removeFile', function(e) {
   var fileData = e.originalEvent.detail;
   console.log(fileData);
});

_$('.ufiles').on('previewFile', function(e) {
   var idModal = e.originalEvent.detail.idModal;
   //Abrir el modal personalizado
});

Inicialización

Para que los controles de adjuntar funcionen con el script, simplemente se debe llamar al inicio de la carga del formulario la función initFiles

function inicio() {
    if (isResponse()) {
        //Código para la respuesta
        initEventListeners();
        return;
    }
    callEventForm('beforeInit');

    //Inicialización Grids
    callEventForm('beforeInitGrids');
    callEventForm('afterInitGrids');

    callEventForm('beforeInitListeners');
    initEventListeners();
    callEventForm('afterInitListeners');

    f7SmartSelectFix();
    initFiles();
    callEventForm('afterInit');
}

Formularios de respuesta

Para que la visualización de los archivos sea la misma que se tiene en edición, es necesario cargar los tags en un contenedor con algunos atributos, se debe invocar la función convertResponseAllFiles

##If--5219F1!##
<div class="large-50 medium-50 col-100 list">
    <div class="item-content item-input">
        <div class="item-inner">
            <div class="item-title item-label">Adjuntar foto</div>
            <div class="fw7Link fileResp" data-idf="f1">##5219F1:HTMLLINK##</div>
        </div>
    </div>
</div>
##EndIf--5219F1!##

La clase fw7Link es necesaria para que los enlaces funcionen, ya que fw7 atrapa todos los enlaces y no los abre, y la clase fileResp se usa para convertir el contenido HTML necesario para su visualización, el data atributo data-idf se usa para crear el nodo ol con el id especificado allí.

function inicio() {
    if (isResponse()) {
        //Código para la respuesta
        convertResponseAllFiles(true);
        initEventListeners();
        return;
    }
    
    //....
}

En la función convertResponseAllFiles, el parámetro booleano indica si es se va a usar para formularios de respuesta.

Formulario reabierto

Cuando un formulario que tiene adjuntos se reabre para hacer correcciones, es necesario cargar los archivos adjuntos, para eso se usa la función loadFileInEdition, teniendo la misma estructura HTML que se indicó para los formularios de respuesta.

Adicional, si no se agrega ningún archivo nuevo, el método de grabar debe saberlo, para eso y antes de enviar a grabar, se debe usar la función cleanFileInEdition

function inicio() {
    if (isResponse()) {
        //Código para la respuesta
        convertResponseAllFiles(true);
        initEventListeners();
        return;
    }
    
    convertResponseAllFiles(false);
    //....
}

function preSave() {
    cleanFileInEdition();
}