Mise à jour de la personnalisation de sites et de zones de page SharePoint existants
Vous pouvez actualiser la personnalisation sur vos sites SharePoint et collections de sites existants, ainsi que personnaliser les régions des pages SharePoint. Vous pourriez en avoir besoin, par exemple, lorsque vous effectuez une mise à jour vers une nouvelle version du site.
Importante
Cette option d’extensibilité est disponible uniquement pour des expériences SharePoint classiques. Vous ne pouvez pas l’utiliser avec des expériences modernes dans SharePoint Online, telles que des sites de communication.
Actualisation de l’image de marque de sites et sous-sites existants
L’exemple Branding.Refresh dans le projet Office 365 Developer Patterns and Practices sur GitHub vous montre comment utiliser la bibliothèque OfficeDevPnP.Core pour itérer sur les sites et sous-sites existants afin de vérifier et mettre à jour la personnalisation appliquée. L’exemple montre comment mettre à jour la personnalisation d’un site, mais le même concept peut servir à effectuer d’autres opérations, telles que déployer une nouvelle bibliothèque vers une liste de sites ou mettre à jour une action personnalisée qui a été déployée au cours de la mise en service. Vous pouvez utiliser la même procédure pour déplacer des sites existants vers une version plus récente.
L’opération comporte deux étapes :
- définissez les sites que vous souhaitez mettre à jour ;
- Mettez à jour la personnalisation du site.
Obtenir les sites que vous souhaitez mettre à jour
Tout d’abord, obtenez une liste des sites et sous-sites que vous souhaitez mettre à jour. L’exemple montre comment procéder en utilisant la fonctionnalité de recherche, mais d’autres options incluent la lecture à partir d’un répertoire du site, ou la fourniture d’une interface de gestion où les administrateurs peuvent indiquer la liste. L’exemple suivant vous montre comment utiliser la fonctionnalité de recherche pour générer la liste.
// 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;
}
L’appel à GetSubSites étant récursif, il extrait l’arborescence du sous-site. Après l’extraction de l’arborescence, vérifiez que le nombre renvoyé est correct avant de continuer.
Mettre à jour la personnalisation
Après avoir sélectionné un site pour qu’il soit traité, vous pouvez utiliser des méthodes OfficeDevPnP.Core pour manipuler le site. L’exemple montre comment procéder pour la personnalisation de site, mais vous pouvez apporter tout type de modification de la même manière.
L’exemple utilise un modèle qui tire parti du conteneur de propriétés web pour stocker des informations sur les paramètres actuels. Le code lit d’abord les valeurs du conteneur de propriétés web, puis effectue une opération appropriée pour chaque valeur.
// 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);
}
}
}
Le code qui met ensuite à jour le thème est simple et repose sur des méthodes 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);
}
Personnaliser les régions d’une page SharePoint
Lorsque votre objectif est de personnaliser les régions d’une page SharePoint, vous pouvez utiliser une combinaison d’approvisionnement à distance et de feuilles de style en cascade (CSS) personnalisées sur les fichiers associés aux régions de la page. Dans un premier temps, vous devez savoir quels fichiers SharePoint sont associés aux différentes régions d’une page SharePoint.
Tableau 1. Régions de page SharePoint et fichiers associés
| Zone de page | Fichiers associés | Plus d’informations |
|---|---|---|
| Ruban | L’une des pages maîtres par défaut. Fichiers CSS correspondants :
|
Possibilité de le masquer à l’aide du bouton Axer sur le contenu. |
| Navigation de suite | L’une des pages maîtres par défaut. | Possibilité de la masquer à l’aide du bouton Axer sur le contenu. |
| Liens de la suite | Possibilité de les masquer à l’aide du bouton Axer sur le contenu. | |
| Menu d’accueil | *. master | Possibilité de le masquer à l’aide du bouton Axer sur le contenu. |
| Menu Paramètres ou engrenages | *. master | |
| Aide | *. master | |
| Onglets contextuels du ruban | Toute page maître par défaut. | Par exemple, consultez les éléments suivants : |
| Barre d’outils Accès rapide | *. master | Possibilité de la masquer à l’aide du bouton Axer sur le contenu. |
| Logo du site | *. master CSS correspondant : .ms-sitelcon-img |
|
| Navigation supérieure | Navigation CSOM/JSOM *. master Fichiers CSS correspondants (pas en mode d’édition) :
|
|
| Titre de la page | Fichiers CSS correspondants (en mode d’édition) :
|
|
| Zone de recherche | Nav CSOM/JSOM *.master CSS correspondant :
|
|
| Navigation de gauche | Nav CSOM/JSOM *.master | Pour plus d’informations, voir : |
| Arborescence | *. master | Pour plus d’informations, consultez Guide pratique pour personnaliser le navigateur Treeview intégré. |
| Contenu de la page | Mise en page/Pages de contenu Zone/composants WebPartCorresponding CSS (zone de composants WebPart et composant WebPart) :
|
Pour plus d’informations, voir Créer une mise en page dans SharePoint |
Pour obtenir des exemples liés à la personnalisation des régions d’une page, consultez les éléments suivants dans le projet Office 365 Developer Patterns and Practices sur GitHub :
Espaces réservés de contenu « minimal » requis dans les pages de master SharePoint par défaut
Sharepoint. master pages nécessitent que vous utilisiez des espaces réservés de contenu, qui restituent le contenu de base et les éléments structurels dont une page SharePoint a besoin pour prendre en charge le cycle de vie de la page. Le tableau 2 répertorie et décrit les espaces réservés de contenu.
Tableau 2. Espaces réservés de contenu minimum requis pour une page de master SharePoint
| Espace réservé de contenu | Comprend du contenu pour |
|---|---|
| PlaceHolderAdditionalPageHead | Éléments supplémentaires dans la \<head\> section d’une page. |
| PlaceHolderBodyAreaClass | Les styles supplémentaires de l’en-tête de la page. |
| PlaceHolderBodyLeftBorder | L’élément de bordure gauche pour le corps de la page. |
| PlaceHolderBodyRightBorder | L’élément de bordure droite pour le corps de la page. |
| PlaceHolderCalendarNavigator | Un sélecteur de date pour la navigation dans un calendrier lorsqu’un calendrier est visible sur une page. |
| PlaceHolderFormDigest | Contrôle de sécurité « form digest ». |
| PlaceHolderGlobalNavigation | La barre de navigation globale (navigation supérieure). |
| PlaceHolderGlobalNavigationSiteMap | Le plan du site dans la navigation globale (navigation supérieure). |
| PlaceHolderHorizontalNav | Le menu de navigation supérieur pour une page (navigation supérieure). |
| PlaceHolderLeftActions | La zone de navigation inférieure gauche (navigation de gauche). |
| PlaceHolderLeftNavBar | La zone de navigation de gauche (navigation de gauche). |
| PlaceHolderLeftNavBarDataSource | La source de données pour le menu de navigation de gauche (navigation de gauche). |
| PlaceHolderLeftNavBarTop | La zone de navigation supérieure gauche (navigation de gauche). |
| PlaceHolderMain | Le contenu principal de la page (contenu de la page). |
| PlaceHolderMiniConsole | Les commandes de niveau page, telles que Modifier la page, Historique et Liens entrants sur une page Wiki d’entreprise. |
| PlaceHolderNavSpacer | La largeur de la zone de navigation de gauche (navigation de gauche). |
| PlaceHolderPageDescription | La description du contenu de la page. |
| PlaceHolderPageImage | L’icône de la page dans le coin supérieur gauche de la page (ruban). |
| PlaceHolderPageTitle | Titre de la page (\<title\>) (Titre de la page) affiché dans la barre de titre de la page du navigateur. |
| PlaceHolderPageTitleInTitle | Le titre de la page (titre de la page) affiché sous la barre de navigation. |
| PlaceHolderQuickLaunchBottom | La zone se situant sous la navigation Lancement rapide (navigation supérieure). |
| PlaceHolderQuickLaunchTop | La zone supérieure de la navigation Lancement rapide (navigation supérieure). |
| PlaceHolderSearchArea | La zone où le contrôle de zone de recherche apparaît (zone de recherche). |
| PlaceHolderSiteName | Le nom du site (navigation de suite). |
| PlaceHolderTitleAreaClass | La zone de titre de la page (navigation de suite). |
| PlaceHolderTitleAreaSeparator | Les ombres dans la zone de titre (navigation de suite). |
| PlaceHolderTitleBreadCrumb | La zone de contenu de la barre de navigation du titre. |
| PlaceHolderTitleLeftBorder | La bordure gauche de la zone de titre (navigation de suite). |
| PlaceHolderTitleRightMargin | La marge de droite de la zone de titre (navigation de suite). |
| PlaceHolderTopNavBar | La zone de navigation supérieure (navigation supérieure). |
| Espace réservéUtilities | Le contenu supplémentaire qui doit apparaître au bas de la page (contenu de la page). |
| SPNavigation | Comprend les opérations liées à la navigation. |
| WSSDesignConsole | Les contrôles de modification de page lorsque la page est en mode d’édition. |
Si vous supprimez l’un des espaces réservés de contenu répertoriés dans le tableau 2 d’un SharePoint . master page, SharePoint génère une erreur. Vous pouvez ajouter un espace réservé de contenu avec une visibilité masquée, ce qui permet de masquer le contenu aux utilisateurs finaux.
Pour plus d’informations, consultez Windows SharePoint Services pages maîtres par défaut (cet article décrit les fonctionnalités de SharePoint Services 3, mais le contenu s’applique toujours). Voir aussi Utilisation des contrôles d’espace réservé de contenu.
Les pages de master SharePoint par défaut telles que seattle.master et oslo.master incluent beaucoup plus d’espaces réservés de contenu que sharePoint n’en a besoin. Par exemple, ces pages master incluent les <SharePoint:Themes runat="server"> contrôles et <SharePoint.CssRegistration runat="server"> .
Les contrôles Themes et CssRegistration sont exécutés lors du cycle de vie de la page. Le modèle d’approvisionnement distant vous permet d’utiliser une action personnalisée pour ajouter un contrôle serveur afin d’enregistrer des CSS personnalisées.
Les espaces réservés de contenu qui ne sont pas visibles fonctionnent toujours comme prévu, mais tout contenu qu’ils génèrent est omis de la source HTML que les navigateurs reconnaissent. Un espace réservé de contenu avec Visible="false" est masqué.
Importante
Ne créez pas d’espaces réservés personnalisés dans des pages de master personnalisées qui existent dans des pages .master prêtes à l’emploi telles que seattle.master et oslo.master. Cela entraîne des exceptions catastrophiques.
Contrôle de navigation de suite SharePoint Online
SharePoint Online introduit un nouveau balisage de page master pour le contrôle De navigation de suite, qui affiche la navigation supérieure. Le balisage par défaut du contrôle Navigation de suite peut changer si le site est privé ou public. Pour en savoir plus sur le contrôle Navigation de suite et obtenir des exemples de code pour des sites publics et privés que vous pouvez ajouter à vos pages maîtres, voir SharePoint Online Suite Navigation control.
Utiliser CSOM pour personnaliser les régions d’une page SharePoint
En règle générale, nous vous recommandons d’utiliser la classe UserCustomAction pour ajouter ou supprimer des liens et d’autres éléments. Il s’agit d’une variante de SharePoint utilisant l’élément CustomAction , que vous pouvez reconnaître dans le cadre de l’infrastructure de fonctionnalités si vous êtes familiarisé avec le modèle de code de confiance totale. Bien que l’élément CustomAction et le modèle d’approvisionnement de l’infrastructure de fonctionnalité ne soient pas spécifiquement pris en charge dans le modèle d’objet côté client (CSOM), les mêmes identifiants d’emplacement disponibles pour l’élément CustomAction peuvent être utilisés dans le code 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>
Personnaliser le ruban SharePoint
Lorsque vous personnalisez le ruban, le code HTML que le serveur rend est affecté au nom de la classe que vous affectez à un style personnalisé. Pour utiliser cette fonctionnalité, accédez à la bibliothèque de styles et créez un fichier CSS pour chaque style que vous souhaitez ajouter au ruban. Vous pouvez ajouter des styles personnalisés à deux sections du ruban :
- Pour la section Éléments de page :
span.ms-rteElement-{{YOUR_OWN_DEFINED_NAME}}. Vous pouvez également utiliser les styles H1, H2, H3 ou H4, qui seront encapsulés autour du texte auquel le style est appliqué. - Pour la section Styles de texte :
.ms-rteEStyle-{{YOUR_OWN_DEFINED_NAME}}.
Ensuite, dans votre définition de classe CSS, ajoutez la ligne suivante :
-ms-name:"The name visual in the ribbon for your style";
Maintenant, vous pouvez terminer la définition des détails de votre classe CSS personnalisée dans votre fichier .css personnalisé.
Personnaliser la navigation suite sur une page de composants WebPart
Dans SharePoint, l’interface utilisateur a une apparence moderne basée sur des vignettes de page. Par exemple, les vignettes dynamiques apparaissent par défaut sur la page SharePoint par défaut. La navigation supérieure permet aux utilisateurs de voir et d’accéder facilement au contenu social et aux OneDrive Entreprise. Vous pouvez personnaliser l’apparence de ces zones à l’aide d’une combinaison de CSS et de JavaScript.
Après avoir créé une page de composant WebPart, ajoutez un composant WebPart Éditeur de script à une zone de composant WebPart disponible. Vous pouvez utiliser ce composant WebPart pour ajouter JavaScript à votre page. Vous pouvez ajouter du code JavaScript au composant WebPart Éditeur de script qui identifie la barre de navigation supérieure par son ElementId, puis le masquer en définissant sa propriété de visibilité sur masquée.
Personnalisation du menu Paramètres ou des engrenages
Vous pouvez utiliser les entrées de classe UserCustomAction et de conteneur de propriétés pour personnaliser le menu des paramètres d’un site SharePoint, comme indiqué dans l’exemple de code suivant.
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();
}
}
Personnalisation de l’arborescence
Pour modifier la largeur de l’arborescence, ajoutez une <div> balise autour de la balise d’arborescence dans la page .master et affectez une classe CSS avec un attribut de largeur de <div>style au . Vous pouvez augmenter la largeur de la navigation lancement rapide en ajoutant la définition de style suivante au fichier *.css .
.ms-nav {
width: 220 px;
}
Personnalisation du contenu de la page
Les exigences de personnalisation du contenu de la page dépendent du contenu que vous incluez dans votre page. En ce qui concerne la personnalisation du menu Actions du site , vous pouvez utiliser un objet UserCustomAction pour approvisionner la personnalisation des composants WebPart.
Si vous créez un site de publication, voir Créer une mise en page dans SharePoint pour en savoir plus sur les principes de base. Les mises en page dépendent de la disponibilité de la classe ContentTypeId dans CSOM. Comme pour les autres membres qui ne sont pas disponibles dans CSOM, vous pouvez utiliser un service Windows Communication Foundation (WCF) pour utiliser ContentTypeId comme solution de contournement temporaire.