Share via


Modernizar las personalizaciones

Importante

Las herramientas de modernización y todos los demás componentes PnP son herramientas de código abierto sostenidas por una comunidad activa que proporciona soporte técnico. Los canales oficiales de soporte técnico de Microsoft no ofrecen ningún contrato de nivel de servicio para herramientas de código abierto.

Un aspecto importante que se debe tener en cuenta cuando se moderniza un sitio es comprender las personalizaciones que se usan en ese sitio, ya que no todas las personalizaciones existentes seguirán funcionando tras la modernización del sitio. Une ejemplo clásico que se da frecuentemente es el de un banner de sitio que muestra determinada información de la empresa (como, por ejemplo, un aviso legal).

Esto se suele conseguir a través de una acción personalizada del usuario que inserta JavaScript en la página que, a su vez, es responsable de mostrar el banner. Este banner se puede ver en todas las páginas clásicas, pero no se verá en las páginas modernas. Para solucionar este problema, puede implementar el banner como extensión de personalizador de aplicación de SharePoint Framework e implementar esta en el espacio empresarial o el sitio.

Este artículo proporciona información general sobre las personalizaciones que no son compatibles con la interfaz de usuario moderna e instrucciones sobre cómo solucionarlo.

Personalizaciones en listas y bibliotecas

Esta sección se centra en las personalizaciones que puedan haberse implementado en listas y bibliotecas. SharePoint vuelve automáticamente a la interfaz de usuario clásica de listas y bibliotecas cuando detecta una personalización incompatible. Por lo tanto, es importante resolver esas personalizaciones si se quiere una interfaz totalmente moderna.

Si quiere entender mejor la compatibilidad de la interfaz de usuario moderna de listas y bibliotecas, use el analizador de modernización de SharePoint.

Un modelo muy común para controlar cómo se representa un campo en la interfaz de usuario de SharePoint se obtiene mediante el uso de JSLink. Básicamente, JSLink permite usar JavaScript como complemento, el cual se encargará después de representar el campo. En la interfaz de usuario moderna, hay disponibles funcionalidades de personalización similares para las páginas de vista de lista, aunque actualmente no se puede personalizar el panel de edición de listas.

Si reemplaza JSLink, hay dos métodos alternativos que puede considerar, cada uno de ellos funciona mejor en función de la complejidad de la solución existente:

  • Si solo se trata de cómo mostrar los datos, la mejor opción suele ser usar el formato de columna.
  • Si se necesitan más comportamientos, la mejor opción suele ser usar una extensión de personalizador de campo de SharePoint Framework.

Uso del formato de columna

Puede usar el formato de columna para personalizar cómo se muestran los campos en las listas y bibliotecas de SharePoint. Para ello, debe crear un objeto JSON que describa los elementos que se muestran cuando un campo se incluye en una vista de lista y los estilos que se aplican a esos elementos. El formato de columna no cambia los datos en el elemento o archivo de la lista, solo cómo se muestra a los usuarios que la consultan. Cualquiera que pueda crear y administrar vistas en una lista puede usar el formato de columna para configurar cómo se muestran los campos de la vista.

Por ejemplo, una lista con los campos Título, Esfuerzo, Asignado a y Estado a los que no se haya aplicado ninguna personalización, tendría este aspecto:


Antes del formateador de columna


Una lista con la apariencia de los campos Esfuerzo, Asignado a y Estado personalizados con formato de columna será similar a la siguiente:


Después del formateador de columna


Para obtener más información sobre el formato de columna, consulte:

Extensión de personalizador de campo de SharePoint Framework

Las extensiones del SharePoint Framework permiten ampliar la experiencia del usuario de SharePoint dentro de las páginas modernas y las bibliotecas de documentos, a la vez que se utilizan las conocidas herramientas y bibliotecas del SharePoint Framework para el desarrollo. Concretamente, los personalizadores de campo le permiten controlar por completo la forma en que se presentan los datos del campo en las vistas de lista o biblioteca.

El siguiente es un ejemplo de columna de porcentaje.

Personalizador de campo

Para obtener más información sobre las extensiones de personalizador de campo de SharePoint Framework, consulte:

Acciones personalizadas de usuario de ámbito de lista que agregan opciones de menú personalizadas o insertan JavaScript

El uso de una acción personalizada del usuario de ámbito de lista que agrega opciones de menú personalizadas en la cinta de lista o el menú contextual o inserta JavaScript es, junto con JSLink, un patrón de personalización muy común que ya no funciona en la experiencia moderna de listas y bibliotecas. Afortunadamente, con SharePoint Framework Extensions puede conseguir personalizaciones similares, en concreto mediante la extensión de conjunto de comandos que le permite agregar elementos de menú de bloque de control de edición (ECB) o botones personalizados a la barra de comandos de una lista o biblioteca. Se puede asociar cualquier acción JavaScript (TypeScript) a estos comandos.


Conjunto de comandos de vista de lista

Para obtener más información sobre las extensiones de conjuntos de comandos de ListView de SharePoint Framework, consulte:

Personalizaciones en las páginas

SharePoint tiene varios tipos de páginas de sitio clásicas, como, por ejemplo, páginas de wiki, de elementos web y de publicación. Cada una de estas páginas permite que el usuario personalice las mismas agregando elementos web y texto (con formato) o insertando JavaScript a través de acciones personalizadas del usuario. Esta sección proporciona información general sobre los modelos de personalización existentes y cómo se pueden sustituir por opciones modernas compatibles.

Elementos web clásicos prediseñados

SharePoint tiene muchos elementos web clásicos prediseñados (como el elemento web Editor de secuencias de comandos) que funcionan en las páginas clásicas, pero no en las paginas modernas (esto es, no hay elementos prediseñados modernos equivalentes). También hay un conjunto de partes modernas de la web que ofrecen una funcionalidad similar a algunas de las partes clásicas de la web; sin embargo, no hay paridad de características.

Si necesita la funcionalidad de una parte web clásica como un equivalente moderno, debe lanzar su propia versión basada en el SharePoint Framework o alternativamente consumir una parte web de la gran lista de partes web de código abierto del SharePoint Framework, que puede encontrar en el repositorio sp-dev-fx-webparts GitHub.

En el diagrama siguiente, se muestra un ejemplo de elemento web.

Ejemplo de elemento web de SPFX

Para obtener más información sobre las partes de la web de SharePoint Framework, consulte:

Acciones personalizadas del usuario con ámbito de sitio o web que insertan JavaScript

En la introducción mencionamos el patrón común de agregar un banner de sitio al insertar JavaScript a través de una acción personalizada del usuario con ámbito de sitio o web. Como este patrón no es compatible con la interfaz de usuario moderna, deberá volver a trabajar en este tipo de personalización basada en las extensiones de personalizador de aplicación de SharePoint Framework. Mediante personalizadores de aplicación, puede insertar scripts personalizados que se pueden usar para insertar HTML en la interfaz de usuario moderna de SharePoint en puntos de extensión predefinidos en la parte superior o inferior de la página.


Ejemplo de personalizador de aplicación de SPFX


Para obtener más información sobre las extensiones de personalizador de aplicación de SharePoint Framework, consulte:

Elementos de menú personalizados en el menú Acciones del sitio

Actualmente, no puede agregar sus propios elementos de menú personalizados al menú Acciones del sitio (el icono de engranaje) en páginas modernas. Como alternativa, puede agregar los vínculos necesarios en la navegación o en la página principal del sitio.

Consulte también