Partager via

Personnaliser une page SharePoint à l’aide de la mise en service à distance et des CSS

  • Article

Vous pouvez utiliser les feuilles de style en cascade (CSS) pour personnaliser les champs de texte enrichi SharePoint et les zones de composants WebPart. La personnalisation des champs de texte enrichi se fait directement dans la page que vous modifiez. Pour les zones de composants WebPart, vous pouvez utiliser le composant WebPart Éditeur de script pour ajouter du HTML ou des scripts, ou associer une feuille de style CSS.

Pour voir un exemple de code associé à cet article, voir Branding.AlternateCSSAndSiteLogo dans le projet Pratiques et modèles Office 365 pour les développeurs, sur GitHub.

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. Notez également que vous ne devez pas prendre une dépendance sur la structure de la page html ou sur les noms de style CSS inhabituels comme ceux-ci peuvent être modifiés sans un avertissement.

Personnaliser des champs de texte enrichi

Vous pouvez personnaliser des champs de texte enrichi en utilisant les CSS directement dans l’éditeur de page :

  1. Dans votre page SharePoint, sélectionnez Modifier pour ouvrir l’éditeur de page.

  2. Dans le ruban, sélectionnez Insérer>Incorporer le code.

Vous pouvez désormais ajouter ou modifier des éléments CSS pour un champ de texte enrichi.

Personnaliser des zones de composants WebPart

Pour personnaliser des zones de composants WebPart à l’aide des CSS, utilisez le composant WebPart Éditeur de script.

Remarque

Si vous utilisez SharePoint Online et la fonction NoScript, le composant WebPart d’éditeur de scripts est désactivé.

L’exemple de code suivant télécharge la CSS personnalisée vers la Bibliothèque de composants, applique une référence à l’URL de la CSS avec une action personnalisée, puis crée une action personnalisée pour créer un lien vers le nouveau fichier CSS.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using Microsoft.SharePoint.Client;
using Microsoft.SharePoint.Client.EventReceivers;

namespace AlternateCSSAppAutohostedWeb.Services
{
    public class AppEventReceiver : IRemoteEventService
    {
        public SPRemoteEventResult ProcessEvent(SPRemoteEventProperties properties)
        {
            SPRemoteEventResult result = new SPRemoteEventResult();

            try
            {
                using (ClientContext clientContext = TokenHelper.CreateAppEventClientContext(properties, false))
                {
                    if (clientContext != null)
                    {
                        Web hostWebObj = clientContext.Web;

                        List assetLibrary = hostWebObj.Lists.GetByTitle("Site Assets");
                        clientContext.Load(assetLibrary, l => l.RootFolder);

                        // First, upload the CSS files to the Asset Library.
                        DirectoryInfo themeDir = new DirectoryInfo(System.Web.Hosting.HostingEnvironment.ApplicationPhysicalPath + "CSS");
                        foreach (var themeFile in themeDir.EnumerateFiles())
                        {
                            FileCreationInformation newFile = new FileCreationInformation();
                            newFile.Content = System.IO.File.ReadAllBytes(themeFile.FullName);
                            newFile.Url = themeFile.Name;
                            newFile.Overwrite = true;

                            Microsoft.SharePoint.Client.File uploadAsset = assetLibrary.RootFolder.Files.Add(newFile);
                            clientContext.Load(uploadAsset);
                            break;
                        }
                        
                        string actionName = "SampleCSSLink";

                        // Now, apply a reference to the CSS URL via a custom action.
                        
                        // Clean up existing actions that we may have deployed.
                        var existingActions = hostWebObj.UserCustomActions;
                        clientContext.Load(existingActions);

                        // Run uploads and initialize the existing Actions collection.
                        clientContext.ExecuteQuery();

                        // Clean up existing actions.
                        foreach (var existingAction in existingActions)
                        {
                            if(existingAction.Name.Equals(actionName, StringComparison.InvariantCultureIgnoreCase))
                                existingAction.DeleteObject();
                        }
                        clientContext.ExecuteQuery();

                        // Build a custom action to write a link to your new CSS file.
                        UserCustomAction cssAction = hostWebObj.UserCustomActions.Add();
                        cssAction.Location = "ScriptLink";
                        cssAction.Sequence = 100;
                        cssAction.ScriptBlock = @"document.write('<link rel=""stylesheet"" href=""" + assetLibrary.RootFolder.ServerRelativeUrl + @"/cs-style.css"" />');";
                        cssAction.Name = actionName;
                        
                        // Apply.
                        cssAction.Update();
                        clientContext.ExecuteQuery();
                    }
                    result.Status = SPRemoteEventServiceStatus.Continue;
                    return result;
                }
            }
            catch (Exception ex)
            {
                result.Status = SPRemoteEventServiceStatus.CancelWithError;
                result.ErrorMessage = ex.Message;
                return result;
            }
            
        }

        public void ProcessOneWayEvent(SPRemoteEventProperties properties)
        {
            // This method is not used by app events.
        }
    }
}

Voir aussi