Generar contenido para páginas modernas con JSON

Hola a tod@s, en la siguiente entrada vengo a presentaros como implementar una solución sencilla a nuestro cliente sin tener que implementar una solución con 'SharePoint FrameWork', a través de la customización de las vistas en las listas.

A la hora de hacer ofertas y propuestas a nuestros clientes, no se dispone de un presupuesto holgado y/o el cliente desea implementar soluciones con los componentes que ofrece el producto, para no depender de la implementación de soluciones a medida, en un futuro.

Teniendo en cuenta este tipo de limitaciones, en las ofertas que se realizan a nuestros clientes, la mayoría de los requisitos se pueden resolver, con los componentes que ofrece 'SharePoint Online', ofreciendo ejemplos y diseños, de la página oficial 'SharePoint look book' de Microsoft.

Desafortunadamente, pude surgir, que algún componente del producto no se adapte a las necesidades del cliente y no se quiera implementar la solución a través de 'SharePoint Framework'.

La solución que se aporta en esta entrada, es tener una visión más amplia de lo que se puede realizar en SharePoint Online, a través del formato de las listas. Más concretamente para este ejemplo, con la modificación del formato vista del tipo galería, a través del JSON de la vista en la lista.

El objetivo de esta entrada es explicar cómo transformar el diseño que te proporciona el producto por un diseño más acorde al diseño del cliente, explicando que limitaciones os podéis a encontrar y como superar esas carencias en el nuevo diseño.

Propuesta de diseño de SharePoint Online, por defecto

Propuesta de diseño desde 'Brinconsejos SharePoint'

Documentación oficial

Para poder entender y realizar esta transformación del contenido de las listas, se dispone de toda la información en la página 'Use column formatting to customize SharePoint' de Microsoft.

Hacer inca pie, que es muy importante mirar la página ' Formatting syntax reference' de Microsoft, para saber la sintaxis que se maneja en el JSON y sus posibilidades para generar el contenido deseado.

A parte de la documentación oficial de Microsoft, existe también una herramienta 'HTML to Formatter' que permite transforma el HTML con CSS a un esquema JSON, para utilizarlo en la vista de la lista.

Prerrequisitos del cliente

A continuación, se van a exponer unos requisitos del cliente ficticio, para poder entender mejor el potencial que se dispone al formatear las vistas de las listas.

Nuestro cliente tiene las siguientes necesidades:

• En la página de la intranet, por cada uno de los eventos que se visualice, se muestra la siguiente información:

  • Imagen del evento.

  • Título del evento. El hacer 'Click' en su texto, se abre en una nueva ventana del navegador el detalle del evento.

  • Breve descripción del evento. Si el contenido es extenso, solamente se muestra dos líneas de su contenido.

  • Enlace a Google Maps, para ver la geolocalización del evento.

  • Enlace a Outlook, para agregar el evento a la agenda del usuario.

• Se mostrarán los próximos 4 eventos.

• Se muestra los eventos que tengan la fecha igual o superior a la fecha de hoy.

• Se muestran los eventos que no estén desactivados.

• Los eventos se muestran ordenados por los más recientes.

Para garantizar que en un principio se muestran todas las columnas implicadas en el diseño de la galería, es conveniente revisar la opción 'Contenido seleccionado' en la ventana emergente para establecer las columnas de la tarjeta de la galería.

Dar formato a la galería de lista

En este apartado se van a ir explicando todos los cambios realizados para formatear la galería que requiere nuestro cliente para su negocio.

Los pasos para transformar el diseño original por el diseño de nuestro cliente, son los siguientes:

1. Ocultar el nombre de las columnas de la tarjeta. Tan solo hay que desmarcar la opción 'Mostrar nombres de columna como etiquetas' de la sección donde se diseña la tarjeta.

   

   NOTA: A partir de aquí todas las demás acciones del diseño de la galería, se van a realizar desde el enlace 'Modo avanzado' del diseñador de la vista de la lista.

   

2. Desactivar la opción 'Seleccionar la tarjeta', ya que el destino de esta galería, no se requiere de acciones del elemento seleccionado sobre su lista.

   

   Para desactivar esta funcionalidad, hay que buscar la propiedad 'HideSelection' en el JSON del diseño de la galería, y establecer el valor 'True'.

   

3. Por defecto, al hacer 'Click' sobre un elemento de la lista, se muestra el detalle del elemento en una ventana emergente, para su edición si fuera requerido.

   

   Para eliminar esta funcionalidad, que no es requería por parte del cliente, hay que hacer una limpieza en el JSON que nos proporciona por defecto la vista.

   

4. En la sección de la imagen del evento, se pretendía originalmente, establecer la imagen como imagen de fondo del contenedor 'DIV' que lo contenía inicialmente y aplicar estilos en línea, para que la imagen no se deforme y se adapte a su contenedor.

   El problema es que, aunque la documentación oficial indica que el JSON soporta el estilo en línea 'background-image', no funciona al establecer la sentencia 'url("[PathImage]")', rompiendo la visualización de las tarjetas.

   Ante esta problemática se optó por aplicarle una 100% al tamaño de la imagen en su contenedor, por estilos. Esto provoca que se deforme un poco la imagen, ya que otras propiedades de CSS, que minimiza esta problemática, tan poco están soportadas.

   

   En la propiedad 'Title' de la imagen se ha establecido una fórmula para cargar el título del evento o la descripción que disponga la imagen, para que se muestre en el 'ToolTip' de la imagen. Esto se ha optado por hacer más amigable la galería de cara al usuario.

   

   Formula aplicada a la propiedad 'Title' de la etiqueta imagen

   

   Visualización del contenido hasta este momento

   NOTA IMPORTANTE: Las demás configuraciones relacionadas con el tratamiento de imágenes que se establece por defectos en el JSON de la galería, se han dejado con los valores y estructura por defecto.

5. En la sección del título del evento, se quiere realizar las siguientes acciones:

   • El título este en mayúsculas para dejar todos los títulos homogéneos.

   • El hacer 'Click' en el título, se abre en una nueva ventana del navegador el detalle del evento.

   • Dar estilos de enlace al título.

   Para cubrir estos requisitos se han realizado los siguientes pasos:

   • Para establecer el título en mayúsculas, en la etiqueta párrafo que lo contiene, se agregan estilos en línea para su visualización en mayúsculas.

   • Para crear la etiqueta enlace, con el fin de llevar al usuario al detalle del evento, se ha creado un hijo en la etiqueta párrafo.

     La estructura hijo, se ha copiado de la estructura ya generado en el JSON de la columna 'Event link'.

   • La propiedad 'txtContent' de la etiqueta párrafo, se ha trasladado a la etiqueta enlace.

   • Para proporcionar una apariencia más de enlace al título del evento, se ha aplicado por estilos en línea, el subrayado del contenido del enlace.

   • El valor de la propiedad 'Title' de la etiqueta enlace dependerá de si el enlace a la página dispone de una descripción definida, ya que, si no, se completará con el valor del título del evento.

   

   Ajustes JSON aplicado a la sección título del evento

   Las limitaciones que te vas a encontrar aquí son las siguientes:

   • No se admite usar etiquetas de encabezado. De hecho, la etiqueta párrafo no se admite según su validador, pero si la procesa en el renderizado del HTML.

   • En las etiquetas enlace, no se puede dar efectos con la propiedad 'Hover' de CSS, ya que no se pueden definir estilos fueras de las etiquetas HTML.

   

   Visualización del contenido hasta este momento

6. En la sección 'Breve descripción' del evento, se quiere realizar las siguientes acciones:

   • Ampliar el texto que se muestra a dos líneas.

   • Si el contenido es mayor, se debe seguir viendo los tres puntos suspensivos.

   • En 'ToopTip' de la etiqueta párrafo debe aparecer toda la breve descripción del evento.

   NOTA IMPORTANTE: Estos requerimientos se pueden realizar muy fácilmente con estilos de CSS, pero al no estar permitido ciertas propiedades del CSS, se ha tenido que realizar de otra forma para cubrir esta necesidad del cliente.

   Para cubrir estos requisitos se han realizado los siguientes pasos:

   • A la etiqueta párrafo, se le agregan los estilos en línea para anular los 'puntos suspensivos' a una sola línea que ofrece la maquetación original.

   • Se otorga un tamaño fijo, para mostrar el contenido del párrafo en dos líneas, a través de los estilos en línea.

   • A la hora de colocar el contenido del párrafo, solo se carga los primeros 60 caracteres, aplicando fórmulas que te proporciona la herramienta. Posteriormente se concatena los 'puntos suspensivos' al párrafo.

   NOTA: Como no hay ninguna función que te permita saber la longitud de la breve descripción, se ha agregado al final del contenido unos caracteres especiales '#;#', y posteriormente a través de la función 'indexOf' se pregunta en que índice del contenido aparecen esos caracteres especiales, para determinar de esta forma la longitud de la breve descripción y determinar, así como efectuar el efecto deseado en las tarjetas del evento.

   

   Ajustes JSON aplicado a la sección breve descripción del evento

   

   Visualización del contenido hasta este momento

7. En la sección 'Enlace al detalle del evento', al ser ya utilizado en la sección 'título' del evento, se procede a eliminar esta sección del esquema del JSON.

   

   Visualización del contenido hasta este momento

8. En la sección 'Localización' del evento, se quiere realizar las siguientes acciones:

   • Se quiere agregar un icono que represente una ubicación para el usuario.

     NOTA: Se puede utilizar la propiedad 'iconName' de las etiquetas y utilizar iconos que ofrece 'Fluent UI Icons' en vez de utilizar imágenes externas, pero me apetecía utilizar 'Flexbox' de CSS para entender sus limitaciones en la estructura JSON.

   • Se quiere que al hacer 'Click' sobre la localización, se abra en una ventana nueva, el mapa de Google Maps, con la ubicación del evento.

   Debido a que es un poco complicado explicar, toda la estructura de HTML, necesaria para cubrir estos requisitos, he optado por dejar directamente una captura de la estructura utilizada y explicar ciertos conceptos de ella.

   • Se agrega en alguna biblioteca de la colección de sitios, el icono de un mapa, para representar la geolocalización del evento.

   • Para un correcto posicionamiento del contenido en pantalla, se ha utilizado 'Flexbox' para distribuir su contenido gráficamente.

   • Para generar el enlace a Google Maps, con las coordenadas se ha utilizado el siguiente enlace como plantilla.

     https://www.google.com/maps/search/?api=1&query=[Longitude]%2C[Latitude]

   • Para generar el valor de la propiedad 'Href' en la etiqueta enlace, se ha remplazado las secciones '[Longitude]' y '[Latitude]', por los valores de las colunas de la lista correspondientes.

   • Se han aplicado ciertos estilos en línea, para dar el efecto de enlace y el contenido estuviera bien distribuido.

   

   Ajustes JSON aplicado a la sección localización del evento

   

   Visualización del contenido hasta este momento

9. En las secciones 'Longitud' y 'Latitud', como ya han sido utilizadas en la sección 'Localización', se ha procedido a eliminar sus secciones del JSON inicial.

   

   Visualización del contenido hasta este momento

10. En la sección 'Fecha' del evento, se quiere realizar las siguientes acciones:

    • Se quiere agregar un icono que represente la fecha del evento para el usuario.

    • Se quiere que al hacer 'Click' sobre la fecha del evento, se abra en una ventana nueva, el calendario de Outlook, para agregar el evento en la agenda del usuario.

    Debido a que es un poco complicado explicar, toda la estructura de HTML, necesaria para cubrir estos requisitos, he optado por dejar directamente una captura de la estructura utilizada y explicar ciertos conceptos de ella.

    • Se agrega en alguna biblioteca de la colección de sitios, el icono de un calendario, para representar la agenda del usuario.

    • Para un correcto posicionamiento del contenido en pantalla, se ha utilizado 'Flexbox' para distribuir su contenido gráficamente.

    • Para generar el enlace para agregar el evento al calendario, se ha utilizado el siguiente enlace como plantilla, con los siguientes parámetros en la QueryString:

      https://outlook.office.com/calendar/0/deeplink/compose?subject=[Title]&body=[Description]&location=[Location]&startdt=[StartDayAndTime]&enddt=[EndDayAndTime]

      • Subject: Representa el título del evento en el calendario

      • Body: Representa la descripción del evento en el calendario

      • Startdt: Representa la hora de inicio del evento en el calendario

      • Enddt: Representa la hora de finalización del evento en el calendario

      • Location: Representa el lugar donde tiene lugar el evento.

    • Para generar el valor de la propiedad 'Href' en la etiqueta enlace, se ha rellenado todos los parámetros de la QueryString con los valores existentes, de las otras columnas del elemento de la lista.

    • Hay que indicar que se han aplicado múltiples formular y formatos para poder generar correctamente las horas de inicio y finalización del evento para registrarlo en OutLook.

    • Para marcar la hora de finalización del evento, se ha agregado 3 horas a la fecha de inicio del evento, a través de las fórmulas que ofrece el sistema de formateó de columnas/vistas.

    • Se han aplicado ciertos estilos en línea, para dar el efecto de enlace y el contenido estuviera bien distribuido.

    

    Ajustes JSON aplicado a la sección fecha del evento

    NOTA: Os dejo aquí la fórmula que he aplicado para generar el enlace para agregar eventos al calendario del usuario, para que sea más fácil de entender.

    "href":"='https://outlook.office.com/calendar/0/deeplink/compose?subject='+[$Title]+'&body='+[$bs_ne_EventDescription]+'&location='+[$bs_ne_EventLocation]+'&startdt='+getYear([$bs_ne_EventDay])+'-'+padStart(toString((getMonth([$bs_ne_EventDay])+1)),2,'0')+'-'+padStart(toString(getDate([$bs_ne_EventDay])),2,'0')+'T'+substring(toString([$bs_ne_EventDay]),(indexOf(toString([$bs_ne_EventDay]),toString(getYear([$bs_ne_EventDay]))+' ')+5),(indexOf(toString([$bs_ne_EventDay]),toString(getYear([$bs_ne_EventDay]))+' ')+5)+8)+'&enddt='+getYear(addMinutes([$bs_ne_EventDay], 180))+'-'+padStart(toString((getMonth(addMinutes([$bs_ne_EventDay], 180))+1)),2,'0')+'-'+padStart(toString(getDate(addMinutes([$bs_ne_EventDay], 180))),2,'0')+'T'+substring(toString(addMinutes([$bs_ne_EventDay], 180)),(indexOf(toString(addMinutes([$bs_ne_EventDay], 180)),toString(getYear(addMinutes([$bs_ne_EventDay], 180)))+' ')+5),(indexOf(toString(addMinutes([$bs_ne_EventDay], 180)),toString(getYear(addMinutes([$bs_ne_EventDay], 180)))+' ')+5)+8)"

    

    Visualización del contenido hasta este momento

11. Para finalizar, solo queda ajustar el alto de las tarjetas. Tan solo hay que configurar la propiedad 'Height' que hay al comienzo del JSON, por un valor que sea adecuado a la tarjeta deseada.

    

Tras realizar estos cambios en el JSON de la vista galería, quedara el contenido de la siguiente manera.

Galería de lista en páginas de contenido

Una vez que se dispone del diseño de la galería de lista terminado, tan solo queda agregar en la página de contendió correspondiente el componente 'Lista' de SharePoint y configurarlo para la vista de tipo galería creada.

Para configurar una página de contenido, con la nueva vista de tipo galería, hay que realizar los siguientes pasos:

1. Ir a la página que se quiere colocar la galería nueva.

2. Editar la página moderna.

3. Agregar el componente de tipo lista.

   

4. Configurar los parámetros del componente.

   

5. Aplicar los cambios y publicar la página si todo está correcto.

Con estos sencillos pasos, la página de contenido tendrá el siguiente aspecto en la nueva intranet del cliente.

A continuación, os dejo una animación como se interactúa con un perfil de solo lectura en la intranet, sobre este componente del producto y su customización.