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 :
  • Corps principal - corps : #s4-workspace

  • Barre de la suite - partie gauche : #suiteBarLeft

  • Barre de la suite - partie droite : #suiteBarRight

  • Conteneur du ruban : #globalNavBox

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) :
  • Nouvel élément sélectionné : .ms-core-listMenu-horizontalBox li.static > .ms-core.listMenu-selected

  • Nouveau pointage d’élément : .mscore-listMenu-horizontalBox li.static > a.ms-core-listMenu-item:hover

  • Flèche de menu volant : .ms-core-listMenu-horizontalBox .dynamic-children.additional-background

  • Élément de navigation (correspondant aux éléments de menu de niveau supérieur) : .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item

  • Élément de menu volant : ul.dynamic .ms-core-listMenu-item

  • Conteneur de menu volant : ul.dynamic

  • Modification de liens : .ms-navedit-editLinksText > span> .ms-metadata

Fichiers CSS correspondants (en mode d’édition) :
  • Lien de mode d’édition de navigation : .ms-core-listMenu-horizontalBox .ms-core-listMenuEdit > tr> .msnavedit-linkCell > .ms-core-listMenu-item

  • Ajout d’un lien : .ms-core-listMenu-horizontalBox a.ms-navedit-addNewLink

Titre de la page Fichiers CSS correspondants (en mode d’édition) :
  • Titre de page avec et sans lien : .ms-core-pageTitle, .ms-core-pageTitle a

  • Bouton de description : #ms-pageDescriptionDiv

  • Zone de description : .js-callout-mainElement

  • Flèche de zone de description : .js-callout-beak

  • Texte de description : .js-callout-body

Zone de recherche Navigation CSOM/JSOM

.master

Fichiers CSS correspondants :
  • Bordure de zone de recherche : .ms-srch-sb-border

  • Pointage de bordure de zone de recherche : .ms-srch-sb-border: hover

  • Bordure de zone de recherche lorsque vous cliquez dessus : .ms-srch-sb-borderFocused

  • Zone de texte d’entrée de zone de recherche : .ms-srch-sb-borderFocused

  • Corps de zone de recherche : .ms-srch-sb

  • Zone de texte d’entrée de zone de recherche : .ms-srch-sb-searching

  • Recherche

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) :

  • Zone de partie Web : .ms-webpart-zone

  • Titulaire du partie WebPart : .ms-webpartzone-cell

  • Titre du site WebPart : .ms-webpart-titleText

  • Titre du site WebPart avec lien : .ms-webpart-titleText > a

  • Corps de la partie Web : .ms-WPBody

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.

Voir aussi