Actualizar la personalización de marca de secciones de página y sitios de SharePoint existentes
Puede actualizar la personalización de marca en los sitios y colecciones de sitios de SharePoint existentes, así como personalizar las regiones de las páginas de SharePoint. Esto conviene hacerlo, por ejemplo, al actualizar a una nueva versión del sitio.
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.
Actualizar la personalización de marca de los sitios y subsitios
El ejemplo Branding.Refresh del proyecto patrones y prácticas para desarrolladores de Office 365 en GitHub muestra cómo usar la biblioteca OfficeDevPnP.Core para recorrer en iteración sitios y subsitios existentes para comprobar y actualizar la personalización de marca aplicada. El ejemplo se centra en cómo actualizar la personalización de marca del sitio, pero el mismo concepto se podría usar para hacer otras cosas, como implementar una nueva biblioteca en una lista de sitios o actualizar una acción personalizada que se implementó durante el aprovisionamiento. Puede usar el mismo proceso para mover los sitios existentes a una versión más reciente.
La operación conlleva dos pasos:
- Obtener los sitios que quiere actualizar.
- Actualice la personalización de marca del sitio.
Obtener los sitios que desea actualizar
En primer lugar, hágase con una lista de los sitios y subsitios que quiera actualizar. El ejemplo muestra cómo hacer esto con la funcionalidad de búsqueda, pero existen otras opciones, como leer desde un directorio del sitio o proporcionar una interfaz de usuario de administración donde los administradores puedan especificar la lista. En el siguiente ejemplo se muestra cómo usar la funcionalidad de búsqueda para generar la lista.
// Get a list of sites. Search is one way to get this list, an alternative can be a site directory.
List<SiteEntity> sites = cc.Web.SiteSearchScopedByUrl("https://bertonline.sharepoint.com");
// Generic settings (apply changes on all webs or just root web).
bool applyChangesToAllWebs = true;
// Optionally further refine the list of returned site collections.
var filteredSites = from p in sites
where p.Url.Contains("13003")
select p;
List<SiteEntity> sitesAndSubSites = new List<SiteEntity>();
if (applyChangesToAllWebs)
{
// You want to update all sites, so the list of sites is extended to all subsites.
foreach (SiteEntity site in filteredSites)
{
sitesAndSubSites.Add(new SiteEntity() { Url = site.Url,
Title = site.Title,
Template = site.Template });
GetSubSites(cc, site.Url, ref sitesAndSubSites);
}
sites = sitesAndSubSites;
}
La llamada a GetSubSites es recursiva, por lo que captura el árbol del subsitio. Una vez recuperado el árbol, compruebe que el número devuelto es correcto antes de continuar.
Actualización de la personalización de marca
Después de seleccionar un sitio para procesarlo, puede usar los métodos de OfficeDevPnP.Core para manipularlo. En el ejemplo se muestra cómo hacer esto para la personalización de marca del sitio, pero se puede procesar cualquier tipo de cambio de la misma manera.
En el ejemplo se usa un patrón en el que se usa el contenedor de propiedades web para almacenar información sobre la configuración actual. Primero, el código lee el contenedor de propiedades web y, luego, realiza la acción que sea adecuada para cada valor.
// Verify that you have a property bag entry.
string themeName = cc.Web.GetPropertyBagValueString(BRANDING_THEME, "");
if (!String.IsNullOrEmpty(themeName))
{
// If no theme property bag entry, assume no theme has been applied.
if (themeName.Equals(currentThemeName, StringComparison.InvariantCultureIgnoreCase))
{
// The applied theme matches to the theme you want to update.
int? brandingVersion = cc.Web.GetPropertyBagValueInt(BRANDING_VERSION, 0);
if (brandingVersion < currentBrandingVersion)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
else
{
if (forceBranding)
{
DeployTheme(cc, currentThemeName);
// Set the web propertybag entries.
cc.Web.SetPropertyBagValue(BRANDING_THEME, currentThemeName);
cc.Web.SetPropertyBagValue(BRANDING_VERSION, currentBrandingVersion);
}
}
}
El código que luego actualiza el tema es sencillo y se basa en los métodos de OfficeDevPnP.Core.
string themeRoot = Path.Combine(AppRootPath, String.Format(@"Themes\{0}", themeName));
string spColorFile = Path.Combine(themeRoot, string.Format("{0}.spcolor", themeName));
string spFontFile = Path.Combine(themeRoot, string.Format("{0}.spfont", themeName));
string backgroundFile = Path.Combine(themeRoot, string.Format("{0}bg.jpg", themeName));
string logoFile = Path.Combine(themeRoot, string.Format("{0}logo.png", themeName));
if (IsThisASubSite(cc.Url))
{
// Retrieve the context of the root site of the site collection.
using (ClientContext ccParent = new ClientContext(GetRootSite(cc.Url)))
{
ccParent.Credentials = cc.Credentials;
cc.Web.DeployThemeToSubWeb(ccParent.Web, themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToSubWeb(ccParent.Web, themeName);
}
}
else
{
cc.Web.DeployThemeToWeb(themeName, spColorFile, spFontFile, backgroundFile, "");
cc.Web.SetThemeToWeb(themeName);
}
Personalización de regiones de una página de SharePoint
Cuando el objetivo es personalizar las regiones de una página de SharePoint, puede usar una combinación de aprovisionamiento remoto y hojas de estilos en cascada (CSS) personalizadas en archivos asociados a regiones de la página. Inicialmente, a continuación, debe tener en cuenta qué archivos de SharePoint están asociados a las distintas regiones de una página de SharePoint.
Tabla 1. Regiones de página de SharePoint y archivos asociados
| Región de la página | Archivos asociados | Más información |
|---|---|---|
| Cinta de opciones | Cualquiera de las páginas maestras predeterminadas. CSS correspondientes:
|
Se puede ocultar con el botón Centrarse en el contenido . |
| Navegación del conjunto de aplicaciones | Cualquiera de las páginas maestras predeterminadas. | Se puede ocultar con el botón Centrarse en el contenido . |
| Vínculos del conjunto de aplicaciones | Se puede ocultar con el botón Centrarse en el contenido . | |
| Menú de bienvenida | *.Maestro | Se puede ocultar con el botón Centrarse en el contenido . |
| Símbolo de engranaje o menú de configuración | *.Maestro | |
| Ayuda | *.Maestro | |
| Pestañas contextuales de la cinta de opciones | Cualquier página maestra predeterminada. | Para ver ejemplos, consulte lo siguiente: |
| Barra de herramientas de acceso rápido | *.Maestro | Se puede ocultar con el botón Centrarse en el contenido . |
| Logotipo del sitio | *.Maestro CSS correspondiente: .ms-sitelcon-img |
|
| Navegación superior | CSOM/JSOM de navegación *.Maestro CSS correspondiente (no en modo de edición):
|
|
| Título de página | CSS correspondiente (en modo de edición):
|
|
| Cuadro de búsqueda | Nav CSOM/JSOM *.master Css correspondiente:
|
|
| Navegación izquierda | Nav CSOM/JSOM *.master | Para más información, consulte: |
| Vista de árbol | *.Maestro | Para obtener más información, vea Cómo personalizar el navegador treeview integrado. |
| Contenido de la página | Diseño de página/Páginas de contenido Zona de elementos web/elementos webCorresponding CSS (zona de elementos web y elemento web):
|
Para obtener más información, vea Crear un diseño de página en SharePoint. |
Para obtener ejemplos relacionados con la personalización de regiones de una página, consulte lo siguiente en el proyecto Office 365 Developer Patterns and Practices en GitHub:
Marcadores de posición de contenido "mínimos" necesarios en las páginas maestras predeterminadas de SharePoint
Las páginas .master de SharePoint requieren que use marcadores de posición de contenido, que representan el contenido básico y los elementos estructurales que necesita una página de SharePoint para admitir el ciclo de vida de la página. En la tabla 2 se enumeran y describen los marcadores de contenido.
Tabla 2. Marcadores de posición de contenido mínimos necesarios para una página maestra de SharePoint
| Marcador de contenido | Incluye contenido de |
|---|---|
| PlaceHolderAdditionalPageHead | Elementos adicionales en la \<head\> sección de una página. |
| PlaceHolderBodyAreaClass | Estilos adicionales en el encabezado de página. |
| PlaceHolderBodyLeftBorder | El elemento de borde izquierdo del cuerpo de la página. |
| PlaceHolderBodyRightBorder | El elemento de borde derecho del cuerpo de la página. |
| PlaceHolderCalendarNavigator | Un selector de fecha para desplazarse por un calendario cuando esté visible en una página. |
| PlaceHolderFormDigest | Control de seguridad "form digest". |
| PlaceHolderGlobalNavigation | La ruta de navegación global (navegación superior). |
| PlaceHolderGlobalNavigationSiteMap | El mapa del sitio en la navegación global (navegación superior). |
| PlaceHolderHorizontalNav | El menú de navegación superior de una página (navegación superior). |
| PlaceHolderLeftActions | El área de navegación inferior izquierda (navegación izquierda). |
| PlaceHolderLeftNavBar | El área de navegación izquierda (navegación izquierda). |
| PlaceHolderLeftNavBarDataSource | El origen de datos del menú de navegación izquierdo (navegación izquierda). |
| PlaceHolderLeftNavBarTop | El área de navegación superior izquierda (navegación izquierda). |
| PlaceHolderMain | El contenido principal de la página (contenido de la página). |
| PlaceHolderMiniConsole | Comandos de nivel de página, como Editar página, Historial y Vínculos entrantes en el caso de una página wiki empresarial. |
| PlaceHolderNavSpacer | El ancho del área de navegación izquierda (navegación izquierda). |
| PlaceHolderPageDescription | Descripción del contenido de la página. |
| PlaceHolderPageImage | Icono de página en la esquina superior izquierda de la página (la cinta de opciones). |
| PlaceHolderPageTitle | Título de página (\<title\>) (Título de página) que se muestra en la barra de título de la página del explorador. |
| PlaceHolderPageTitleInTitle | El título de página (título de página) que se muestra inmediatamente debajo de la ruta de navegación. |
| PlaceHolderQuickLaunchBottom | La parte inferior de la navegación de inicio rápido (navegación superior). |
| PlaceHolderQuickLaunchTop | La parte superior de la navegación de inicio rápido (navegación superior). |
| PlaceHolderSearchArea | El área donde aparece el control de cuadro de búsqueda (cuadro de búsqueda). |
| PlaceHolderSiteName | El nombre del sitio (navegación de conjunto de aplicaciones). |
| PlaceHolderTitleAreaClass | El área de título de la página (navegación de conjunto de aplicaciones). |
| PlaceHolderTitleAreaSeparator | Las sombras del área de título (navegación de conjunto de aplicaciones). |
| PlaceHolderTitleBreadCrumb | El área de contenido de la ruta de navegación de título. |
| PlaceHolderTitleLeftBorder | El borde izquierdo del área de título (navegación de conjunto de aplicaciones). |
| PlaceHolderTitleRightMargin | El margen derecho del área de título (navegación de conjunto de aplicaciones). |
| PlaceHolderTopNavBar | El área de navegación superior (navegación superior). |
| PlaceHolderUtilities | Contenido extra que tiene que aparecer en la parte inferior de la página (contenido de la página). |
| SPNavigation | Incluye operaciones relacionadas con la navegación. |
| WSSDesignConsole | Los controles de edición de página cuando la página está en modo de edición. |
Si quita uno de los marcadores de posición de contenido enumerados en la tabla 2 de una página .master de SharePoint, SharePoint producirá un error. Puede agregar un marcador de contenido con visibilidad oculta, lo que hace que el contenido esté oculto a los usuarios finales.
Para obtener más información, vea Windows SharePoint Services Páginas maestras predeterminadas (en este artículo se describe la funcionalidad de SharePoint Services 3, pero el contenido todavía se aplica). Consulte también Trabajar con controles de marcador de posición de contenido.
Las páginas maestras predeterminadas de SharePoint, como seattle.master y oslo.master, incluyen muchos más marcadores de posición de contenido de los que SharePoint requiere. Por ejemplo, estas páginas maestras incluyen <SharePoint:Themes runat="server"> controles y <SharePoint.CssRegistration runat="server"> .
Los controles Themes y CssRegistration se ejecutan durante el ciclo de vida de la página. Con el patrón de aprovisionamiento remoto, puede usar una acción personalizada para agregar un control de servidor para registrar CSS personalizadas.
Los marcadores de posición de contenido que no están visibles siguen funcionando según lo esperado, pero cualquier contenido que genere se omite del origen HTML que reconocen los exploradores. Un marcador de posición de contenido con Visible="false" está oculto.
Importante
No cree marcadores de posición personalizados en páginas maestras personalizadas que existan en páginas .master de fábrica, como seattle.master y oslo.master. Esto generaría excepciones catastróficas.
Control de navegación de SharePoint Online Suite
SharePoint Online presenta el nuevo marcado de página maestra para el control Navegación de conjunto , que representa la navegación superior. El marcado predeterminado del control de navegación de conjunto de aplicaciones es distinto en función de si el sitio es una intranet o de acceso público. Para más información sobre control de navegación de conjunto de aplicaciones y ver códigos de ejemplos para sitios de intranet y de acceso público que se pueden agregar a las páginas maestras, vea SharePoint Online Suite Navigation control.
Uso de CSOM para personalizar las regiones de una página de SharePoint
Por lo general, se recomienda usar la clase UserCustomAction para agregar o quitar vínculos y otros elementos. Se trata de una variante de SharePoint mediante el elemento CustomAction , que podría reconocer como parte del marco de características si está familiarizado con el modelo de código de plena confianza. Aunque el elemento CustomAction y el patrón de aprovisionamiento de marco de características no se admiten expresamente en el modelo de objetos de cliente (CSOM), sí que es posible usar los mismos identificadores de ubicación disponibles para el elemento CustomAction en el código CSOM.
<CustomAction
RequiredAdmin = "Delegated | Farm | Machine"
ControlAssembly = "Text"
ControlClass = "Text"
ControlSrc = "Text"
Description = "Text"
FeatureId = "Text"
GroupId = "Text"
Id = "Text"
ImageUrl = "Text"
Location = "Text"
RegistrationId = "Text"
RegistrationType = "Text"
RequireSiteAdministrator = "TRUE" | "FALSE"
Rights = "Text"
RootWebOnly = "TRUE" | "FALSE"
ScriptSrc = "Text"
ScriptBlock = "Text"
Sequence = "Integer"
ShowInLists = "TRUE" | "FALSE"
ShowInReadOnlyContentTypes = "TRUE" | "FALSE"
ShowInSealedContentTypes = "TRUE" | "FALSE"
Title = "Text"
UIVersion = "Integer">
</CustomAction>
Personalización de la cinta de opciones de SharePoint
Al personalizar la cinta de opciones, el código HTML que el servidor representa se asigna al nombre de clase que haya asignado a un estilo personalizado. Para usar esta característica, vaya a la Biblioteca de estilos y cree un nuevo archivo CSS por cada estilo que quiera agregar a la cinta de opciones. Puede agregar estilos personalizados a dos secciones de la cinta de opciones:
- Para la sección Elementos de página :
span.ms-rteElement-{{YOUR_OWN_DEFINED_NAME}}. Opcionalmente, puede usar los estilos H1, H2, H3 y H4, que se ajustarán alrededor del texto al que el estilo se aplique. - Para la sección Estilos de texto :
.ms-rteEStyle-{{YOUR_OWN_DEFINED_NAME}}.
Luego, en la definición de clase CSS, agregue la siguiente línea:
-ms-name:"The name visual in the ribbon for your style";
Ahora puede terminar de definir los detalles de la clase CSS personalizada en el archivo .css personalizado.
Personalización de la navegación del conjunto en una página de elementos web
En SharePoint, la interfaz de usuario tiene una apariencia moderna que se basa en iconos de página. Por ejemplo, los iconos dinámicos aparecen de forma predeterminada en la página predeterminada de SharePoint. La navegación superior facilita a los usuarios ver y acceder a contenido social y OneDrive para la Empresa. Puede personalizar el aspecto de estas áreas mediante una combinación de CSS y JavaScript.
Después de crear una página de elementos web, agregue un elemento web Editor de scripts a una zona de elementos web disponible. Puede usar este elemento web para agregar JavaScript a la página. Puede agregar código JavaScript al elemento web Editor de scripts que identifica la barra de navegación superior por su ElementId y, a continuación, ocultarlo estableciendo su propiedad visibility en hidden.
Personalizar el icono de engranaje o menú de configuración
Puede usar las entradas de clase UserCustomAction y contenedor de propiedades para personalizar el menú de configuración de cualquier sitio de SharePoint, como se muestra en el ejemplo de código siguiente.
public void AddCustomActions(ClientContext clientContext)
{
// Add a site settings link if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomSiteSetting"))
{
// Add a site settings link.
UserCustomAction siteSettingLink = clientContext.Web.UserCustomActions.Add();
siteSettingLink.Group = "SiteTasks";
siteSettingLink.Location = "Microsoft.SharePoint.SiteSettings";
siteSettingLink.Name = "Sample_CustomSiteSetting";
siteSettingLink.Sequence = 1000;
siteSettingLink.Url = string.Format(DeployManager.appUrl, clientContext.Url);
siteSettingLink.Title = "Modify Site Metadata";
siteSettingLink.Update();
clientContext.ExecuteQuery();
}
// Add a site actions link, if it doesn't already exist.
if (!CustomActionAlreadyExists(clientContext, "Sample_CustomAction"))
{
UserCustomAction siteAction = clientContext.Web.UserCustomActions.Add();
siteAction.Group = "SiteActions";
siteAction.Location = "Microsoft.SharePoint.StandardMenu";
siteAction.Name = "Sample_CustomAction";
siteAction.Sequence = 1000;
siteAction.Url = string.Format(DeployManager.appUrl, clientContext.Url); ;
siteAction.Title = "Modify Site Metadata";
siteAction.Update();
clientContext.ExecuteQuery();
}
}
Personalizar la vista de árbol
Para modificar el ancho de la vista de árbol, agregue una <div> etiqueta alrededor de la etiqueta de árbol en la página .master y asigne una clase CSS con un atributo de ancho de <div>estilo a . Puede aumentar el ancho de la navegación Inicio rápido agregando la siguiente definición de estilo al archivo *.css .
.ms-nav {
width: 220 px;
}
Personalizar el contenido de una página
Los requisitos para personalizar el contenido de la página dependen del contenido que incluya en la página. En cuanto a la personalización del menú Acciones del sitio , puede usar un objeto UserCustomAction para aprovisionar la personalización de marca en elementos web.
Si va a compilar un sitio de publicación, consulte Creación de un diseño de página en SharePoint para obtener información sobre los conceptos básicos. Los diseños de página dependen de la disponibilidad de la clase ContentTypeId en CSOM. En cuanto a otros miembros que no están disponibles en CSOM, puede usar un servicio de Windows Communication Foundation (WCF) para trabajar con ContentTypeId como solución temporal.