Para compatibilidad con mobile

Introducción

Una situación particular que se puede presentar es la de redirgir a nuestros usuarios a algún documento como a un PDF donde el usuario presiona un enlace y es redirigido en otra pestaña o ventana al documento; lo cual funciona muy bien siempre y cuando un usuario utilice un computador porque en caso de que utilice algún dispositivo móvil como un smartphone o tablet este es descargado en vez de visualizar el contenido del PDF. A continuación veremos que es lo que pasa con cada tecnología, como afrontarlo a nivel general y una solución que tenemos en nuestras manos en Salesforce y específicamente utilizando Lightning Web Componts (LWC).

Detalle del Problema

Los navegadores web modernos de los computadores tienen integrado un visualizador de contenido preinstalado, por lo que en muchos casos cuando un enlace redirige a un archivo como un PDF, este tiene la capacidad de interpretarlo y mostrarlo en el propio navegador, sin embargo se tienen ciertas restricciones, los formatos que usualmente se soportan son formatos de uso libre como PDF, y en caso de formatos propietarios como docx, pptx o cualquier otro formato que aunque sea de uso libre no sea común, se tiene la posibilidad de instalar un plugin en nuestro navegador para que tenga la capacidad de interpretarlo. Veamos el comportamiento de un PDF en el navegador Chrome:

Ahora cuando hablamos de dispositivos móviles como smartphone o tablets las cosas no son tan simples, resulta que usualmente los navegadores de dispositivos móviles no traen integrado un interprete de formatos, ni tampoco la posibilidad de instalar plugins para dar esta posibilidad, por lo que si seguimos un enlace de un documento en PDF en el navegador web de un dispositivo móvil este nos descargará el documento en vez de visualizarlo en una pestaña del navegador web. El siguiente video ilustra este comportamiento en un android utilizando chrome

Soluciones

Generales

La solución a nivel general consiste en crear o utilizar un interprete con la capacidad de leer el documento fuente y transformarlo a HTML.

Colocando el ejemplo del PDF (el cual es un formato muy común) podemos utilizar herramientas como PDF.js, propler, consumir servicios web e inclusive he visto algunas soluciones en las que utilizan el previsualizador de Google.

Cada una de estas soluciones tienen sus pros y contras, ya sea que tengamos que utilizar tiempo desarrollando código o exponer nuestros documentos tal vez privados a servicios públicos.

Salesforce LWC

La buena noticia es que Salesforce tiene su propio interprete para documentos y este interprete va mas alla del PDF, este incluye muchos otros formatos conocidos como doc, docx, ppt, pptx, text, xls, and xlsx.

Las ventajas de este enfoque es que podemos tener nuestros documentos en nuestra propia org, y que adicionalmente no tenemos que desarrollar código del interprete en si mismo. La unica desventaja es que el interprete no es accesible para ser modificado.

El siguiente video ilustra el previsualizador en un computador utilizando google chrome:

El siguiente video ilustra el previsualizador en un dispositivo android utilizando salesforce mobile.

Desarrollo

El siguiente es el componente utilizado en los dos ultimos videos. El código fuente puede ser encontrado aqui.

<template>
    <div class="slds-theme_default slds-box">
        <lightning-button 
          variant="base" 
          label="A PDF file" 
          onclick={navigateToFiles} 
          class="slds-m-left_x-small"></lightning-button>
    </div>
</template>

Explicación HTML

• Linea 2: se define el estilo por defecto y se enmarca en una caja de texto con border redondeados.
• Lineas 3-7: Botón con apariencia de enlance que cuando se presiona ejecuta el previsualizador de documentos.

import { LightningElement } from 'lwc';
import { NavigationMixin } from "lightning/navigation";

export default class PreviewPDF extends NavigationMixin(LightningElement) { 

    navigateToFiles() {
        this[NavigationMixin.Navigate]({
          type: "standard__namedPage",
          attributes: {
            pageName: "filePreview",
          },
          state: {
            recordIds: "069aj000005t0cPAAQ",
            selectedRecordId: "069aj000005t0cPAAQ",
          },
        });
      }

}

Explicación Javascript

• Linea 2: importa lightning/navigation el cual nos va a permitir ejecutar el previsualizador de documentos.
• Linea 3: el componente debe extender NavigationMixin para poder ejecutar el previsualizador de documentos.
• Lineas 6-17: función navigateToFiles() la cual contiene el código para ejecutar el previsualizador.
• Linea 13: recordIds es el atributo que define los ContentDocument o ContentHubItem Ids de los documentos que queremos previsualizar. En caso de mas de uno, se incluyen los ids separados por coma.
• Linea 14: selectedRecordId es el atributo que define cual es documento que se va a previsualizar cuando el código se ejecute.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Preview PDF Document</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Explicación XML

• Linea 7: permite que el componente este disponible en record pages.
• Linea 12: permite que el componente se muestre en dispositivos pequeños como móviles o tablets.
• Linea 13: permite que el componente se muestre en dispositivos grandes como computadores.

Conclusiones

• Mostrar PDF u otros documentos es un escenario bastante común que nos encontramos practicamente en cualquier proyecto, por lo que conocer el previsualizador nos permitira desarrollar soluciones limpias, rápidas y con un buen soporte.
• Adicionalmente a PDFs, tambien es posible previsualizar otros tipos de documentos.
• Al utilizar el previsualizador automáticamente tenemos un comportamiento homogeneo tanto en computadores como en dispositivos móviles.

Muchas gracias por leer.