Agregar un fragmento de código de zona de elementos web a SharePoint
Importante
Esta opción de extensibilidad solo está disponible para experiencias clásicas de SharePoint. No puede usar esta opción con experiencias modernas en SharePoint Online, como con los sitios de comunicación. No se recomienda seguir usando la experiencia clásica o esas técnicas de personalización de marca.
Una zona de elementos web es un fragmento de código que puede agregar a un diseño de página para que los autores de contenido puedan agregar, editar o eliminar elementos web de esa zona.
Introducción al fragmento de código de zona de elementos web
Un elemento web es un control de servidor que proporciona una parte específica de la funcionalidad de SharePoint y una zona de elementos web es un contenedor que determina el diseño, el comportamiento y otras propiedades de los elementos web contenidos en esa zona. Por ejemplo, una zona de elementos web puede especificar si los elementos web de la zona:
- Está dispuestos en un diseño horizontal o vertical.
- Muestran elementos de interfaz de usuario comunes, como una barra de título o un borde.
- Pueden personalizarlos los autores de contenido cuando editan una página en el explorador.
- Podrán personalizarlos los visitantes del sitio que creen una vista personal de un elemento web cuando vean una página en el explorador.
En un sitio de publicación, los autores de contenido con los permisos necesarios pueden crear o editar páginas que residen en la biblioteca de páginas. Como diseñador, puede agregar una zona de elementos web a un diseño de página. Cuando un autor de contenido crea o edita una página basada en ese diseño de página, el autor puede agregar, editar o eliminar elementos web en esa zona. Por ejemplo, es posible que desee agregar una zona de elementos web a un diseño de página para que los autores de contenido puedan:
- Mostrar los resultados de una consulta de búsqueda mediante un elemento web búsqueda de contenido. Los autores pueden actualizar o modificar la consulta de búsqueda cuando un elemento web controlado por búsqueda reside dentro de una zona de elementos web.
- Insertar clips de vídeo o audio en una página web mediante un elemento web Multimedia.
- Crear listas de hipervínculos que se puedan editar, agrupar o reordenar fácilmente mediante un elemento web Vínculo de resumen.
- Crear un mapa del sitio que muestre todas las páginas de un sitio y que se actualice automáticamente siempre que se agregue, elimine, cambie de nombre o mueva una página mediante un elemento web Tabla de contenido.
Cuándo usar zonas de elementos web
Cuando un diseño de página incluye una o varias zonas de elementos web, las zonas de elementos web están disponibles en todas las páginas que usan ese diseño, lo que permite a los autores insertar elementos web en esas páginas. Si permite a los autores insertar elementos web en páginas, reduce el control sobre la experiencia de los usuarios del sitio. Por ejemplo, un autor podría insertar un elemento web Tabla de contenido en una página que exponga partes del sitio a las que no desea que los visitantes naveguen desde la página actual.
Si desea un control completo sobre cómo aparece un elemento web en el sitio y si desea que ese elemento web aparezca en todas las páginas de un tipo determinado, agregue el elemento web directamente a un diseño de página. Si desea que un elemento web aparezca en todas las páginas de un sitio, también puede agregar un elemento web directamente a una página maestra.
Nota:
Las zonas de elementos web están disponibles en los diseños de página, pero no en las páginas maestras. El propósito de las zonas es permitir a los autores modificar los elementos web y los autores normalmente no editan una página maestra.
También puede agregar zonas de elementos web a un diseño de página, pero restringir su uso. Por ejemplo, puede agregar elementos web a una zona y, a continuación, establecer una propiedad de esa zona para que los autores de contenido puedan editar las propiedades de los elementos web existentes, pero no agregar ni quitar elementos web de la zona. Las zonas de elementos web tienen un conjunto de propiedades que tienen un doble propósito. Puede usar un subconjunto de propiedades para organizar el diseño y el formato de los elementos web en la página. Puede usar otro subconjunto de propiedades para proporcionar un nivel adicional de protección frente a la modificación (o "bloqueo") de los elementos web dentro de la zona.
Para los distintos niveles de control sobre cómo se presentan los elementos web en el sitio, puede:
- Agregue elementos web directamente a una página maestra o a un diseño de página. Esto significa que los autores de contenido no pueden modificar los elementos web.
- Agregar elementos web a zonas en diseños de página, restringiendo esas zonas solo a los elementos web predeterminados que agregue.
- Agregar zonas de elementos web a diseños de página y dar a los autores de contenido un control completo sobre qué elementos web aparecen en esas zonas y cómo se configuran.
Las propiedades de una zona de elementos web pueden especificar si los autores de contenido están autorizados a cambiar:
- El diseño de los elementos web de la zona (agregar, eliminar, cambiar el tamaño o mover los elementos web).
- La configuración de los elementos web para todos los usuarios (la vista compartida de un elemento web).
- Su configuración personal del elemento web (la vista personal de un elemento web).
La tabla 1 muestra las propiedades importantes que hay que tener en cuenta cuando se quiere restringir una zona de elementos web.
Tabla 1. Propiedades de zona de elementos web usadas para restringir los autores de contenido
| Nombre de propiedad | Descripción |
|---|---|
| AllowLayoutChange | Especifica si los elementos web dentro de la zona se pueden cerrar, minimizar, eliminar o restaurar. Si se establece en False, los usuarios no pueden cerrar, minimizar, eliminar o restaurar elementos web de la zona, arrastrar elementos web a otra zona o reorganizar o mover elementos web dentro de la zona. Los usuarios tampoco pueden agregar elementos web desde el catálogo de elementos web y se deshabilitan varias propiedades que afectan a la interfaz de usuario de los elementos web de la zona. Esta propiedad no afecta a la capacidad para cambiar el diseño mediante programación. Si se establece en True, los usuarios con los permisos apropiados pueden realizar estas acciones. |
| LockLayout | Especifica si los elementos web dentro de la zona se pueden agregar, eliminar, cambiar de tamaño o moverse. Esta propiedad funciona igual si la página del elemento web está en vista personal o vista compartida. Si se establece en True, las propiedades de elementos web específicas para cada elemento web de la zona afectada son: Zone (ZoneID), Part Order (PartOrder), Visible on Page (IsVisible), Height (Height), Width (Width), Allow Close (AllowRemove) e IsIncluded (el comando Cerrar del menú del elemento web ). Otras propiedades de elementos web no se ven afectadas. Si se establece en False, las propiedades del elemento web determinan si se pueden hacer modificaciones (junto con los permisos de sitio apropiados). |
| AllowCustomization | Especifica si los valores de la propiedad compartida de los elementos web de la zona se pueden modificar. Si se establece en True, los usuarios con los permisos apropiados pueden realizar cambios en los elementos web de la zona para todos los usuarios. Si se establece en False, los usuarios no pueden realizar cambios en los elementos web de la zona de la interfaz de usuario en la vista compartida. Sin embargo, los cambios se pueden realizar mediante programación y mediante la página Mantenimiento del elemento web. |
| AllowPersonalization | Especifica si los valores de la propiedad personal de los elementos web de la zona se pueden modificar. Si se establece en True, los usuarios con los permisos apropiados pueden realizar cambios personales en los elementos web de la zona. Si se establece en False, los usuarios no pueden realizar cambios personales en los elementos web mediante la interfaz de usuario, a menos que el elemento web sea privado y tengan los permisos apropiados. |
Nota:
No puede insertar una zona de elementos web dentro de un panel de canal de dispositivo. Si quiere permitir que los autores agreguen elementos web a una página y no le preocupa el peso de la página para dispositivos móviles, puede agregar un campo de página de Editor de texto enriquecido a un Panel de canal de dispositivo y, luego, indicar a los autores que agreguen elementos web. Puede agregar elementos web directamente a un panel de canal de dispositivo (sin ninguna zona de elementos web). Para obtener más información, vea How to: Add a Device Channel Panel snippet in SharePoint (Cómo: Agregar un fragmento de código del panel de canal de dispositivo en SharePoint).
Insertar un fragmento de código de zona de elementos web
Igual que todos los fragmentos de código, este se agrega desde la Galería de fragmentos de código. Para navegar hasta la Galería de fragmentos de código, primero debe seleccionar un diseño de página para editar. Las zonas de elementos web se pueden agregar a diseños de página, pero no se pueden agregar a páginas maestras.
Para insertar un fragmento de código de zona de elementos web
Vaya a su sitio de publicación.
En la esquina superior derecha de la página, elija el icono de Configuración y, después, elija Administrador de diseño.
En el Administrador de diseño, en el panel de navegación izquierdo, elija Editar diseños de página.
Seleccione el nombre del diseño de página al que quiere agregar el fragmento de código.
Para abrir la Galería de fragmentos de código, elija Fragmentos de código en la esquina superior derecha de la vista previa del lado del servidor.
En la cinta, en la pestaña Diseño, elija Zona de elementos web.
En el lado derecho de la Galería de fragmentos de código, en Acerca de este componente, haga clic o seleccione los encabezados de sección para expandir o contraer los grupos de propiedades y después, configure las opciones personalizadas que quiera.
La sección denominada importante contiene las propiedades que son fundamentales para el funcionamiento de este fragmento de código determinado. Para una zona de elementos web, el fragmento de código tiene un identificador único. Después de copiar el fragmento de código en su diseño de página, no debe reutilizar este identificador. Si desea agregar otro fragmento de código de zona de elemento web, elija Actualizar para generar un nuevo identificador para el siguiente fragmento de código.
Para obtener descripciones de propiedades necesarias para restringir una zona de elementos web (LockLayout, AllowCustomization y AllowPersonalization), vea la tabla 1.
Nota:
Quizás note que algunos nombres de propiedad están en negrita en la cuadrícula de propiedades de la Galería de fragmentos de código. Estas propiedades tienen valores que han cambiado respecto al valor predeterminado para este componente, pero no son necesariamente relevantes en un escenario de desarrollador. En otras palabras, una propiedad puede estar en negrita pero no ser necesariamente importante para su escenario.
Después de configurar las propiedades, elija Actualizar. Así se actualiza el fragmento de código HTML en el lado izquierdo de la página, para que el marcado refleje los cambios. Siempre puede elegir Restablecer para devolver todas las propiedades a sus configuraciones predeterminadas.
En el lado izquierdo de la Galería de fragmentos de código, en Fragmento de código HTML, elija Copiar al Portapapeles.
En su editor HTML, abra la unidad de red asignada en su equipo y luego abra el archivo HTML de la página principal o del diseño de página al que quiere agregar el fragmento de código.
Para obtener más información, vea Cómo: Asignar una unidad de red a la Galería de páginas maestras de SharePoint.
En el archivo HTML, pegue el fragmento de código en el lugar donde quiere que aparezca el marcado.
Cuando agregue el fragmento de código a un diseño de página, asegúrese de pegar el fragmento de código dentro de PlaceHolderMain.
Reemplace la etiqueta
<div>dondeclass="DefaultContentBlock"por su propio contenido específico.Si quiere volver a rellenar la zona con elementos web (por ejemplo, si la zona restringirá a los autores de contenido para que solo modifiquen los elementos web existentes y no puedan agregar nuevos), inserte fragmentos de código de elementos web donde aparezca la etiqueta .
Guarde la página y actualice la vista previa del lado del servidor en el Administrador de diseño para asegurarse de que la página se muestra tal y como se espera.
Descripción del marcado del fragmento de código
Las dos partes más importantes de un fragmento de código de zona de elementos web son la propiedad ID y el comentario. Cada zona debe tener un identificador único. Si desea agregar más de una zona de elementos web al diseño de página, asegúrese de elegir Actualizar en la Galería de fragmentos de código antes de copiar cada fragmento de código para que se genere un nuevo identificador. El comentario debe reemplazarse por los elementos web que quiera que aparezcan en la zona de forma predeterminada.
En el siguiente código se muestran otras propiedades que se pueden usar para restringir la manera en que los autores de contenido pueden usar las zonas AllowCustomization, AllowPersonalization y LockLayout.
Nota:
Las propiedades AllowCustomization, AllowPersonalization y LockLayout aparecen en el marcado solo si cambia sus valores predeterminados en la cuadrícula de propiedades.
<div data-name="WebPartZone">
<!--CS: Start web part zone Snippet-->
<!--SPM:<%@Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<div xmlns:ie="ie">
<!--MS:<WebPartPages:WebPartZone runat="server" ID="x0e5f5212505f48a9aac43df13eeae4f9" AllowCustomization="True" AllowPersonalization="False" FrameType="TitleBarOnly" LockLayout="True" Orientation="Vertical">-->
<!--MS:<ZoneTemplate>-->
<!--DC: Replace this comment with default web parts for new pages. -->
<!--ME:</ZoneTemplate>-->
<!--ME:</WebPartPages:WebPartZone>-->
</div>
<!--CE: End web part zone Snippet-->
</div>