Personalización de las listas y bibliotecas "modernas"

Artículo
04/08/2023

En 2016, el equipo de SharePoint Online publicó las bibliotecas y listas de documentos "modernas", que aportan una mejor experiencia de usuario más intuitiva, rápida y eficaz. Las experiencias "modernas" tienen muchas ventajas y es muy recomendado usarlas. Si sus personalizaciones actuales aún no funcionan con la experiencia "moderna", es el momento de revisarlas para que los usuarios puedan beneficiarse de estas excelentes mejoras:

Las bibliotecas de documentos "modernas" tienen una interfaz de usuario actualizada que ofrece una experiencia similar a OneDrive, para que sea más intuitivo crear una nueva carpeta y cargar archivos en el explorador.
Puede seleccionar Anclar al principio para agregar documentos "above the fold" (primer pantallazo) en cualquier vista en pantalla.
Copiar no es nada nuevo, pero los gestos de copiar y mover son inteligentes a la hora de mostrar la arquitectura de información y permitirle crear nuevas carpetas en cualquier momento.
Puede que ya no necesite hacer tantas copias. Las bibliotecas de documentos son inteligentes a la hora de recordar otros archivos que ha usado en SharePoint, para que pueda importar otros archivos de otras bibliotecas como vínculos, sin tener que duplicar los archivos entre varios sitios.
Las nuevas bibliotecas de documentos le permiten agrupar los archivos directamente en la página principal sin seleccionar una pantalla de administración independiente. También puede arrastrar para cambiar el tamaño de sus columnas, así como ordenar, filtrar y agrupar desde cualquier encabezado de columna.
Los exploradores móviles tienen las mismas características que las versiones de escritorio, haciendo que SharePoint sea productivo para todos los usuarios, independientemente de si interactúan con el ratón, el teclado, la función táctil o el lector de pantalla.
Ahora puede editar los metadatos directamente desde la vista principal en el panel de información. Ya no es necesario hacer clic en varias pantallas para aplicar una actualización.
Gracias a la integración de Office Online, puede navegar por una vista previa de un documento completo en la parte superior del panel información. El panel muestra los metadatos, incluido el historial de actividades recientes, actualizaciones en el archivo y con quién está compartido el archivo.

Este artículo se centra en las opciones de extensibilidad disponibles en la experiencia de las listas y bibliotecas "modernas". Sin embargo, si quiere obtener más información sobre las funcionalidades que ofrecen las experiencias "modernas", consulte los siguientes recursos:

En el resto de este artículo, usaremos "moderna" para la nueva experiencia de usuario y "clásica" para la experiencia de usuario heredada.

Importante

La experiencia "clásica" no queda en desuso, sino que coexistirá con la "moderna".

Información general sobre las opciones de personalización

Las listas y bibliotecas "modernas" no son compatibles con tantas opciones de personalización como las "clásicas". En este artículo, le ofrecemos información y ejemplos de las opciones compatibles. El equipo de SharePoint está trabajando para admitir más opciones en el futuro. En la lista siguiente se proporciona una descripción general rápida de las funciones compatibles con las listas y bibliotecas "modernas":

Subconjunto de acciones personalizadas de usuario
Marca personalizada
Integración de PowerApps y Flow

Actualmente, las personalizaciones siguientes no son compatibles con las listas y bibliotecas "modernas":

Personalizaciones de campo basadas en JSLink (consulte la nota en Extensiones de SharePoint Framework)
Personalizaciones de vista basadas en JSLink (consulte la nota en Extensiones de SharePoint Framework)
CSS personalizados a través de la propiedad web AlternateCSSUrl
JavaScript personalizado incrustado a través de las acciones personalizadas de usuario (vea la nota en Extensiones de SharePoint Framework)
Páginas maestras personalizadas (en un futuro habrá una mayor compatibilidad con la personalización de marca mediante opciones alternativas).
Personalización mediante InfoPath
Estrategia de descarga mínima (MDS)
Publicación de SharePoint Server

Nota:

En junio de 2017, las Extensiones de SharePoint Framework pasaron a estar disponible en la versión preliminar para desarrolladores. Al usar estas Extensiones de SharePoint Framework, puede controlar la representación de un campo mediante un código personalizado y puede crear acciones de usuario personalizadas que ejecuten el código personalizado. Para obtener más información, consulte Información general de Extensiones de SharePoint Framework.

Acciones personalizadas de usuario

Las experiencias "modernas" permiten que algunas acciones personalizadas de usuario se muestren en la nueva interfaz de usuario, pero no todas las configuraciones de acciones de usuario que son compatibles con el modo "clásico" son compatibles con la experiencia "moderna". La tabla siguiente proporciona información general de las ubicaciones de acción personalizada compatibles y cómo se muestran en la interfaz de usuario "moderna":

Ubicación de acción personalizada de usuario	Visible en la interfaz de usuario "moderna"
`EditControlBlock`	Sí, estas entradas aparecen como elementos de menú personalizados.
`CommandUI.Ribbon`	Sí, estas entradas aparecen como elementos de la barra de herramientas.
Todas las demás ubicaciones (por ejemplo `scriptlink`)	Estas acciones personalizadas de usuario no funcionarán.

Nota:

Estas acciones personalizadas se muestran en bibliotecas y listas "modernas" cuando está en sitios "clásicos" con la interfaz de usuario "moderna" habilitadas. De forma predeterminada, no aparecen en sitios "modernos" porque no es posible agregar acciones personalizadas de usuario a sitios "modernos", ya que tienen activada la opción NoScript. Sin embargo, puede deshabilitar NoScript en sitios "modernos" para lograr el mismo comportamiento para listas y bibliotecas "modernas" en sitios "clásicos" y "modernos".

Acciones personalizadas de usuario EditControlBlock

Se pueden agregar vínculos personalizados al menú contextual usando EditControlBlock como la ubicación para la acción personalizada. El siguiente archivo XML de aprovisionamiento PnP crea dos entradas personalizadas.

<pnp:ProvisioningTemplate ID="EditControlBlockSamples" Version="1" xmlns:pnp="http://schemas.dev.office.com/PnP/2015/12/ProvisioningSchema">
  <pnp:CustomActions>
    <pnp:SiteCustomActions>
      <pnp:CustomAction Name="CA_1" Description="ca 1" Location="EditControlBlock" RegistrationType="List" RegistrationId="101" Title="CA 1 Title" Sequence="3000" Url="https://contoso.azurewebsites.net/pages/index.aspx" Enabled="true"/>
      <pnp:CustomAction Name="CA_2" Description="ca 2" Location="EditControlBlock" RegistrationType="ContentType" RegistrationId="0x0101" Title="CA 2 Title" Sequence="4000" Url="https://contoso.azurewebsites.net/pages/index.aspx" Enabled="true"/>
    </pnp:SiteCustomActions>
  </pnp:CustomActions>
</pnp:ProvisioningTemplate>

Puede aplicar esta plantilla de aprovisionamiento PnP a un sitio con la biblioteca principal de PnP o con PowerShell PnP. Hemos decidido mostrar el método de PowerShell en este artículo. El primer paso es instalar el módulo de PowerShell PnP. Cuando haya terminado, guarde los archivos XML de aprovisionamiento PnP en un archivo y las dos sencillas líneas de PowerShell PnP son suficiente para aplicar la plantilla:


# Connect to a previously created Modern Site
$cred = Get-Credential
Connect-PnPOnline -Url https://[tenant].sharepoint.com/sites/siteurl -Credentials $cred

# Apply the PnP provisioning template
Apply-PnPProvisioningTemplate -Path c:\customaction_modern_editcontrolblock.xml -Handlers CustomActions

Nota:

PnP PowerShell es una solución de código abierto con una comunidad activa que ofrece su soporte. No hay ningún contrato de nivel de servicio para el soporte de la herramienta de código abierto de Microsoft.

Si actualiza la vista "moderna" de una biblioteca de documentos del sitio, verá aparecer las nuevas entradas.

Acciones personalizadas EditControlBlock visibles en el menú

Nota:

Si intenta esto en un sitio de grupo "moderno" en el que ha deshabilitado la opción NoScript, use la versión de abril de 2017 o una versión posterior desde PowerShell PnP. También puede usar la versión actual de desarrollo.
Si quiere usar este ejemplo en una lista, establezca el atributo RegistrationId en 100.

Acciones personalizadas de usuario CommandUI.Ribbon

Si quiere ampliar la barra de herramientas en las experiencias "modernas" de listas y bibliotecas, puede hacerlo si agrega una acción personalizada de usuario haciendo referencia a la ubicación CommandUI.Ribbon como se muestra en este ejemplo XML de aprovisionamiento PnP.

<pnp:ProvisioningTemplate ID="CommandUIRibbonSamples" Version="1" xmlns:pnp="http://schemas.dev.office.com/PnP/2015/12/ProvisioningSchema">
  <pnp:CustomActions>
    <pnp:SiteCustomActions>
      <pnp:CustomAction Name="CA_4" Description="ca 4" Location="CommandUI.Ribbon" RegistrationType="List" RegistrationId="101" Title="CA 4 Title" Sequence="6000" Enabled="true">
        <pnp:CommandUIExtension>
          <CommandUIDefinitions>
            <CommandUIDefinition Location="Ribbon.Documents.Copies.Controls._children">
              <Button
                Id="Ribbon.Documents.Copies.OfficeDevPnPDownloadAll"
                Command="OfficeDevPnP.Cmd.DownloadAll"
                Image16by16="/_layouts/15/images/sharepointfoundation16.png"
                LabelText="Download All"
                Description="Download all files separately"
                ToolTipTitle="Download All"
                ToolTipDescription="Download all files separately"
                TemplateAlias="o1"
                Sequence="15"/>
            </CommandUIDefinition>
          </CommandUIDefinitions>
          <CommandUIHandlers>
            <CommandUIHandler
              Command="OfficeDevPnP.Cmd.DownloadAll"
              CommandAction="https://contoso.azurewebsites.net/pages/index.aspx" />
          </CommandUIHandlers>
        </pnp:CommandUIExtension>
      </pnp:CustomAction>
      <pnp:CustomAction Name="CA_6" Description="ca 6" Location="CommandUI.Ribbon" RegistrationType="ContentType" RegistrationId="0x0101" Title="CA 6 Title" Sequence="5000" Enabled="true">
        <pnp:CommandUIExtension>
            <CommandUIDefinitions>
              <CommandUIDefinition Location="Ribbon.Tabs._children">
                <Tab Id="Custom Tab" Title="Custom Tab" Description="Custom Tab">
                  <Scaling Id="Custom Tab.Scaling">
                    <MaxSize Id="Custom Group.Scaling.MaxSize" GroupId="Custom Group" Size="TwoLarge" />
                    <MaxSize Id="Custom Group 2.Scaling.MaxSize" GroupId="Custom Group 2" Size="OneLarge" />
                    <Scale Id="Custom Group.Scaling.Scale" GroupId="Custom Group" Size="TwoLarge" />
                    <Scale Id="Custom Group 2.Scaling.Scale" GroupId="Custom Group 2" Size="OneLarge" />
                  </Scaling>
                  <Groups Id="Custom Tab.Groups">
                    <Group Id="Custom Group 2" Title="Custom Group 2" Description="Custom Group 2" Sequence="7888" Template="Ribbon.Templates.OneLarge">
                      <Controls Id="Custom Group 2.Controls">
                        <Button Id="CustomButton3" LabelText="Custom Button 3" Image16by16="/_layouts/15/images/attach16.png" Image32by32="/_layouts/15/images/attach16.png" ToolTipTitle="Custom Button 3" ToolTipDescription="Custom Button 3" Command="CustomButton3.Command" TemplateAlias="c3" />
                      </Controls>
                    </Group>
                    <Group Id="Custom Group" Title="Custom Group 1" Description="Custom Group 1" Sequence="10000" Template="Ribbon.Templates.TwoLarge">
                      <Controls Id="Custom Group 1.Controls">
                        <Button Id="CustomButton1" LabelText="Custom Button 1" Image16by16="/_layouts/15/images/itslidelibrary.png" Image32by32="/_layouts/15/images/itslidelibrary.png" ToolTipTitle="Custom Button 1" ToolTipDescription="Custom Button 1" Command="CustomButton1.Command" TemplateAlias="c1" />
                        <Button Id="CustomButton2" LabelText="Custom Button 2" Image16by16="/_layouts/15/images/dldsln16.png" Image32by32="/_layouts/15/images/dldsln16.png" ToolTipTitle="Custom Button 2" ToolTipDescription="Custom Button 2" Command="CustomButton2.Command" TemplateAlias="c2" />
                      </Controls>
                    </Group>
                  </Groups>
                </Tab>
              </CommandUIDefinition>
              <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.TwoLarge">
                  <Layout Title="TwoLarge" LayoutTitle="TwoLarge"> 
                    <Section Alignment="Top" Type="OneRow"> 
                      <Row> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c1" /> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c2" /> 
                      </Row> 
                    </Section> 
                  </Layout> 
                </GroupTemplate>
              </CommandUIDefinition>
              <CommandUIDefinition Location="Ribbon.Templates._children">
                <GroupTemplate Id="Ribbon.Templates.OneLarge">
                  <Layout Title="OneLarge" LayoutTitle="OneLarge"> 
                    <Section Alignment="Top" Type="OneRow"> 
                      <Row> 
                        <ControlRef DisplayMode="Large" TemplateAlias="c3" /> 
                      </Row> 
                    </Section> 
                  </Layout> 
                </GroupTemplate>
              </CommandUIDefinition>
            </CommandUIDefinitions>
            <CommandUIHandlers>
              <CommandUIHandler Command="CustomButton1.Command" CommandAction="https://contoso.azurewebsites.net/pages/index.aspx" />
              <CommandUIHandler Command="CustomButton2.Command" CommandAction="http://www.bing.com" />
              <CommandUIHandler Command="CustomButton3.Command" CommandAction="https://developer.microsoft.com/sharepoint" />
            </CommandUIHandlers>
        </pnp:CommandUIExtension>
      </pnp:CustomAction>
    </pnp:SiteCustomActions>
  </pnp:CustomActions>
</pnp:ProvisioningTemplate>

Después de agregar estas acciones personalizadas de usuario, las verá aparecer en la barra de herramientas. Observe que las fichas personalizadas se transforman en un menú desplegable.

Acción personalizada visible en la barra de herramientas

Acción personalizada visible en la barra de herramientas

Nota:

Si intenta esto en un sitio de grupo "moderno" en el que ha deshabilitado la opción NoScript, use la versión de abril de 2017 o una versión posterior desde PowerShell PnP. También puede usar la versión actual de desarrollo.
Si quiere usar este ejemplo en una lista, establezca los atributos RegistrationId en 100 y use el siguiente XML para la acción personalizada de usuario CA_4.

	<CommandUIDefinition Location="Ribbon.Templates._children">
	  <Button
	    Id="Ribbon.Templates.OfficeDevPnPDownloadAll"
	    Command="OfficeDevPnP.Cmd.DownloadAll"
	    Image16by16="/_layouts/15/images/sharepointfoundation16.png"
	    LabelText="Download All"
	    Description="Download all files separately"
	    ToolTipTitle="Download All"
	    ToolTipDescription="Download all files separately"
	    TemplateAlias="o1"
	    Sequence="15"/>
	</CommandUIDefinition>

Limitaciones de las acciones personalizadas de usuario

Al desarrollar acciones personalizadas de usuario que necesiten funcionar en experiencias "modernas", tenga en cuenta las siguientes limitaciones:

No puede controlar por completo el orden en que las acciones personalizadas se muestran; las acciones personalizadas de usuario se agregan en el orden en que _api/web/Lists(guid'listid')/CustomActionElements las devuelve, y esta API actualmente no tiene en cuenta los atributos de secuencia. Los botones definidos en una ficha personalizada se pueden ordenar agregándolos en el orden correcto en el archivo xml CommandUIDefinition. Nuestro ejemplo muestra el botón 3 como primero y eso se debe al orden en el archivo XML.
La agrupación de acciones personalizadas de usuario dentro de una pestaña personalizada está impulsada por la presencia de elementos Button cuando hay varios elementos Tab o Group en el xml de elemento de acción personalizada de usuario devuelto.
Las acciones de comando no pueden contener JavaScript. Por ejemplo, si usa CommandAction="javascript:alert('My custom Action');" no se mostrará la acción personalizada del usuario.
No es posible usar las propiedades ScriptLink o ScriptBlock porque solo se pueden usar con la ubicación de acción personalizada de usuario ScriptLink, que no es compatible.
El uso de mapas de imagen (por ejemplo, Image16by16="/_layouts/15/1033/images/formatmap16x16.png?rev=33" Image16by16Left="-144" Image16by16Top="-107") no funciona, tendrá que especificar las imágenes individuales. Tenga en cuenta también que solo las imágenes de 16 x 16 son relevantes.

Marca personalizada

Si su sitio usa un tema personalizado, este se respeta en las experiencias de listas y bibliotecas "modernas", como se muestra en el ejemplo siguiente.

Lista moderna con personalización de marca procedente de tema personalizado

Configurar la experiencia del usuario final

Tiene varias opciones para controlar si se utiliza la experiencia de listas y bibliotecas "moderna" o "clásica". Consulte el artículo Excluirse de la experiencia de listas y bibliotecas modernas artículo para obtener más información.

¿Cuando cambia el sistema integrado de detección automática automáticamente la representación a "clásica"?

SharePoint usa un sistema de detección automática para cambiar automáticamente el procesamiento de una lista a "clásico", suponiendo que no desactive la experiencia "moderna" de la lista mediante las invalidaciones de web, sitio o ámbito de lista explicados en la sección anterior. Este sistema de detección automática sistema cambia automáticamente al modo "clásico" siempre que SharePoint detecte que su lista usa características que no son (aún) compatibles con la experiencia "moderna".

Estas son las opciones que se evalúan como parte del sistema de detección automática y que pueden hacer que la lista cambie al modo "clásico":

Si la página de formulario de la lista solicitada tiene un o ningún elemento web.
(Hasta julio de 2017) si la característica del ámbito de web "Navegación y filtrado de metadatos" está habilitada. Estamos implementando la compatibilidad de navegación de metadatos administrados para listas y bibliotecas "modernas".
Si el elemento web disponible es un XSLTListViewWebPart (modo predeterminado para representar la lista) y:
- Hay un conjunto de valores de JSLink o XslLink no estándar de las propiedades del elemento web.
- La página se muestra en un cuadro de diálogo (IsDlg = 1).
- La lista no se basa en uno de los siguientes tipos: lista genérica (100), biblioteca de imágenes (109), página web de biblioteca (119) o biblioteca de documentos (101). A partir de agosto de 2017, los anuncios (104) y vínculos (103) se representan mediante la interfaz de usuario "moderna".
- La propiedad JSLink se establece en uno de los campos para representar.
- Uno de los campos para representar es del tipo datos externos de BCS, Geolocalización, OutcomeChoice o uno de estos tipos de campos de publicación: Image, Html o SummaryLinks.
- Hay acciones personalizadas de usuario con ámbito de lista cuya propiedad ScriptSrc se ha establecido.
Si el elemento web disponible es un ListFormWebPart y:
- La página se muestra en un cuadro de diálogo (IsDlg = 1).
- Es una página de formulario "Nueva" para una biblioteca de documentos.
- Los campos para representar no son ninguno de estos tipos compatibles: Attachments, TaxonomyField, Boolean, Choice, Currency, DateTime, File, Lookup, MultiChoice, MultiLine excepto cuando Anexar con control de versiones está activado, Number, Text, User o Url.

Detectar mediante programación si la biblioteca o lista se mostrarán con aspecto "moderno" o "clásico"

La sección anterior explica las razones de nuestro mecanismo de detección automática pero, afortunadamente, hay una forma sencilla para usted como desarrollador de comprender cómo se representará una lista o biblioteca. Obtener esta información es tan sencillo como obtener el valor de la propiedad PageRenderType, que puede obtener con CSOM o REST. Los ejemplos siguientes muestran cómo cargar primero la página que se está representando la lista y después obtener el PageRenderType:

Ejemplo de CSOM

using (var cc = new ClientContext(siteUrl))
{
    cc.Credentials = new SharePointOnlineCredentials(userName, password);
    
    // Load the AllItems.aspx file from the list
    File file = cc.Web.GetFileByServerRelativeUrl("/sites/dev/ECMTest/Forms/AllItems.aspx");
    cc.Load(file, f => f.PageRenderType);
    cc.ExecuteQuery();

    // Check page render type
    Console.WriteLine($"Status = {file.PageRenderType}");
}

Nota:

La propiedad PageRenderType se introdujo en la versión CSOM de enero de 2017 (16.1.6112.1200).

Solicitud REST

GET _api/web/getfilebyserverrelativeurl('/sites/dev/ECMTest/Forms/AllItems.aspx')/pageRenderType

La llamada a REST le devuelve el valor de número entero, que se describe en la tabla siguiente.

Valor	Motivo
0	Indefinido = 0 (no hay suficiente información para conocer el modo de representación)
1	MultipeWePart
2	JSLinkCustomization
3	XslLinkCustomization
4	NoSPList
5	HasBusinessDataField
6	HasTaskOutcomeField
7	HasPublishingField
8	HasGeolocationField
9	HasCustomActionWithCode
10	HasMetadataNavFeature
11	SpecialViewType
12	ListTypeNoSupportForModernMode
13	AnonymousUser
14	ListSettingOff
15	SiteSettingOff
16	WebSettingOff
17	TenantSettingOff
18	CustomizedForm
19	DocLibNewForm
20	UnsupportedFieldTypeInForm
21	InvalidFieldTypeInForm
22	InvalidControModeInForm
23	CustomizedPage
24	ListTemplateNotSupported
100	Moderno

Consideraciones adicionales

Iremos presentando más opciones de personalización de la experiencia de listas y bibliotecas "moderna". Estas opciones se alinearán con el lanzamiento de funciones adicionales de SharePoint Framework. En este momento no hay ningún plan exacto disponible, pero actualizaremos los artículos de la experiencia "moderna" cuando se publiquen nuevas funciones.

Compartir a través de

Personalización de las listas y bibliotecas "modernas"

Información general sobre las opciones de personalización

Acciones personalizadas de usuario

Acciones personalizadas de usuario EditControlBlock

Acciones personalizadas de usuario CommandUI.Ribbon

Limitaciones de las acciones personalizadas de usuario

Marca personalizada

Configurar la experiencia del usuario final

¿Cuando cambia el sistema integrado de detección automática automáticamente la representación a "clásica"?

Detectar mediante programación si la biblioteca o lista se mostrarán con aspecto "moderno" o "clásico"

Ejemplo de CSOM

Solicitud REST

Consideraciones adicionales

Vea también

Recursos adicionales