Mise à jour de la personnalisation de sites et de zones de page SharePoint existants
Vous pouvez actualiser la personnalisation sur vos sites SharePoint sites et collections de sites existants, ainsi que personnaliser des zones de SharePoint pages. Vous pourriez en avoir besoin, par exemple, lorsque vous effectuez une mise à jour vers une nouvelle version du site.
Important
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 pratiques et modèles de développement Office 365 sur GitHub vous montre comment utiliser la bibliothèque OfficeDevPnP.Core pour itérer sur les sites et sous-sites existants pour vérifier et mettre à jour la marque 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 marque 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 est récursif, il récupère donc 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 branding
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 zones d’une page SharePoint page
Lorsque votre objectif est de personnaliser les zones d’une page SharePoint, vous pouvez utiliser une combinaison de mise en service à distance et de feuilles de style en cascade personnalisées (CSS) sur les fichiers associés à des zones de la page. À l’origine, vous devez savoir quels fichiers SharePoint sont associés aux différentes régions d’une page SharePoint de données.
Tableau 1. SharePoint de page et les 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 | For an example, see FTC to CAM - Custom actions and property bag entries from SP Add-in. |
| 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 Fichier 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 | Navigation CSOM/JSOM .master Fichiers CSS correspondants :
|
|
| Navigation de gauche | Navigation CSOM/JSOM .master |
Pour plus d’informations, voir : |
| Arborescence | .master | Pour plus d’informations, voir Comment personnaliser le navigateur Treeview intégré. |
| Contenu de la page | Mise en page/Pages de contenu Zone de composants Web Part/composants Web Part CSS correspondant (zone de partie Web et partie Web Part) :
|
Pour plus d’informations, voir Créer une mise en page dans SharePoint |
Pour obtenir des exemples relatifs à la personnalisation des zones d’une page, voir les informations suivantes dans le projet pratiques et modèles de développement Office 365 sur GitHub :
Espaces réservé de contenu « minimaux » requis dans les pages maîtres SharePoint par défaut
SharePoint pages .master nécessitent l’utilisation d’espaces réservé de contenu, qui restituer 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é de contenu minimum requis pour une page SharePoint page maître
| Espace réservé de contenu | Comprend du contenu pour |
|---|---|
| PlaceHolderAdditionalPageHead | Éléments supplémentaires dans le 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é « résumé du formulaire ». |
| 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 < (titre) (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). |
| PlaceHolderUtilities | 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é de contenu répertoriés dans le tableau 2 d’une page SharePoint .master, SharePoint une erreur se sera produite. 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, Windows SharePoint Services pages maîtres par défaut (cet article décrit les fonctionnalités dans SharePoint Services 3, mais le contenu s’applique toujours). Voir aussi l’exploitation des contrôles d’espace réservé de contenu.
Les pages maîtres SharePoint par défaut, telles que seattle.master et oslo.master, incluent beaucoup plus d’espaces réservé de contenu que SharePoint nécessaire. Par exemple, ces pages maîtres incluent <SharePoint:Themes runat="server"> et <SharePoint.CssRegistration runat="server"> contrôles.
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é 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 Visible="false" avec est masqué.
Important
Ne créez pas d’espaces réservé personnalisés dans des pages maîtres personnalisées qui existent dans des pages .master pré-personnalisées 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 markup de page maître pour le contrôle de navigation de suite, qui restituera 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 page
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 à l’aide de l’élément CustomAction, que vous pouvez reconnaître comme faisant partie de l’infrastructure de fonctionnalité 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 client
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-<yourowndefinedname>. 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-<yourowndefinedname>.
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 de suite sur une page de partie Web
Dans SharePoint, l’interface utilisateur a une apparence moderne basée sur des vignettes de page. Par exemple, les vignettes en direct apparaissent 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’un mélange de CSS et JavaScript.
Après avoir créé une page de partie Web, ajoutez un élément Web Part Éditeur de script à une zone de partie Web Part disponible. Vous pouvez utiliser ce partie Web Pour ajouter JavaScript à votre page. Vous pouvez ajouter du code JavaScript au partie Web Part Éditeur de script qui identifie la barre de navigation supérieure par son ElementId, puis le masquer en fixant sa propriété de visibilité sur masqué.
Personnalisation du menu Paramètres ou des engrenages
Vous pouvez utiliser les entrées de sac de propriétés et de classe UserCustomAction pour personnaliser le menu des paramètres de n’importe quel site SharePoint, comme illustré 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 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 <div> . 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 conditions requises pour personnaliser le contenu de la page dépendent du contenu que vous insézez dans votre page. Pour personnaliser le menu Actions du site, vous pouvez utiliser un objet UserCustomAction pour mettre en service la personnalisation des composants Web Parts.
Si vous créez un site de publication, voir Créer une mise en page dans SharePoint pour en savoir plus sur les bases. Les mises en page dépendent de la disponibilité de la classe ContentTypeId dans le modèle 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.