Personnaliser l’interface utilisateur de votre site SharePoint à l’aide de JavaScript
Vous pouvez mettre à jour l’interface utilisateur de votre site SharePoint à l’aide de JavaScript.
S’applique à : Office 365 | SharePoint 2013 | SharePoint Online
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.
L’exemple de complément Core.EmbedJavaScript ajoute un message de barre d’état à toutes les pages sur un site SharePoint et supprime le lien Nouveau sous-site de la page Contenu du site à l’aide de JavaScript.
Utilisez cette solution si vous voulez appliquer les mises à jour de l’interface utilisateur à votre site SharePoint à l’aide de JavaScript (cette méthode est parfois appelée la technique JavaScript incorporée) au lieu de créer des pages maîtres personnalisées.
Avant de commencer
Pour commencer, téléchargez l’exemple de complément Core.EmbedJavaScript à partir du projet modèles et pratiques Office 365 Développeur sur GitHub.
Utilisation de l’application Core.EmbedJavaScript
L’exécution de cet exemple de code affiche un complément hébergé par le fournisseur, comme le montre la figure 1.
Figure 1. Capture d’écran de la page de démarrage du complément Core.EmbedJavaScript
L’option Incorporer la personnalisation personnalise le site SharePoint en :
créant un message de barre d’état sur toutes les pages dans le site SharePoint, comme illustré dans la figure 2 ;
Suppression du nouveau lien de sous-site du contenu du site , comme illustré dans la figure 3.
Figure 2. Capture d’écran de status barre ajoutée à toutes les pages
Figure 3. Capture d’écran du nouveau lien de sous-site supprimé de la page Contenu du site
Dans la figure 1, choisissez Incorporer les appels de personnalisation btnSubmit_Click dans default.aspx. btnSubmit_Click appelle AddJsLink, qui effectue les opérations suivantes :
Crée une chaîne représentant une définition de bloc de script. Cette définition de bloc script pointe vers un fichier JavaScript (scenario1.js) qui figure sur toutes les pages du site SharePoint.
Utilise UserCustomActions pour obtenir toutes les actions personnalisées de l’utilisateur définies sur le site SharePoint. Toutes les références à un fichier JavaScript appelé scenario1.js existant sont supprimées.
Crée une action personnalisée et attribue la définition de bloc script créée à l’étape 1 à la nouvelle action personnalisée.
Ajoute la nouvelle action personnalisée au site web.
Toutes les pages de votre site SharePoint vont désormais exécuter scenario1.js et afficher les personnalisations de l’interface utilisateur illustrées dans les figure 2 et figure 3.
Remarque
Le code dans cet article est fourni tel quel, sans garantie d’aucune sorte, expresse ou implicite, y compris mais sans s’y limiter, aucune garantie implicite d’adéquation à un usage particulier, à une qualité marchande ou une absence de contrefaçon.
public void AddJsLink(ClientContext ctx, Web web)
{
string scenarioUrl = String.Format("{0}://{1}:{2}/Scripts", this.Request.Url.Scheme,
this.Request.Url.DnsSafeHost, this.Request.Url.Port);
string revision = Guid.NewGuid().ToString().Replace("-", "");
string jsLink = string.Format("{0}/{1}?rev={2}", scenarioUrl, "scenario1.js", revision);
StringBuilder scripts = new StringBuilder(@"
var headID = document.getElementsByTagName('head')[0];
var");
scripts.AppendFormat(@"
newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '{0}';
headID.appendChild(newScript);", jsLink);
string scriptBlock = scripts.ToString();
var existingActions = web.UserCustomActions;
ctx.Load(existingActions);
ctx.ExecuteQuery();
var actions = existingActions.ToArray();
foreach (var action in actions)
{
if (action.Description == "scenario1" &&
action.Location == "ScriptLink")
{
action.DeleteObject();
ctx.ExecuteQuery();
}
}
var newAction = existingActions.Add();
newAction.Description = "scenario1";
newAction.Location = "ScriptLink";
newAction.ScriptBlock = scriptBlock;
newAction.Update();
ctx.Load(web, s => s.UserCustomActions);
ctx.ExecuteQuery();
}
SharePoint utilise la stratégie de téléchargement minimal (MDS) pour réduire la quantité de données que le navigateur télécharge lorsque les utilisateurs naviguent entre les pages d’un site SharePoint. Pour plus d’informations, reportez-vous à la vue d’ensemble de la stratégie de téléchargement minimal. Dans scenario1.js, le code suivant garantit que votre site SharePoint utilise ou non la stratégie de téléchargement minimal, RemoteManager_Inject s’exécute toujours.
// Is MDS enabled?
if ("undefined" != typeof g_MinimalDownload && g_MinimalDownload && (window.location.pathname.toLowerCase()).endsWith("/_layouts/15/start.aspx") && "undefined" != typeof asyncDeltaManager) {
// Register script for MDS if possible
RegisterModuleInit("scenario1.js", RemoteManager_Inject); //MDS registration
RemoteManager_Inject(); //non MDS run
} else {
RemoteManager_Inject();
}
RemoteManager_Inject effectue les tâches suivantes sur votre site SharePoint :
Crée une barre d’état sur le web hôte. RemoteManager_Inject utilise SP. SOD.executeOrDelayUntilScriptLoaded pour garantir que sp.js est chargé en premier, avant d’appeler SetStatusBar pour ajouter la barre d’état au site. Étant donné que les fichiers JavaScript se chargent de façon asynchrone, l’utilisation de SP. SOD.executeOrDelayUntilScriptLoaded garantit que votre fichier JavaScript (sp.js) est chargé avant que votre code appelle une fonction définie dans ce fichier JavaScript.
Masque le nouveau lien de sous-site dans la page Contenu du site .
function RemoteManager_Inject() {
loadScript(jQuery, function () {
$(document).ready(function () {
var message = "<img src='/_Layouts/Images/STS_ListItem_43216.gif' align='absmiddle'> <font color='#AA0000'>JavaScript customization is <i>fun</i>!</font>"
// Execute status setter only after SP.JS has been loaded
SP.SOD.executeOrDelayUntilScriptLoaded(function () { SetStatusBar(message); }, 'sp.js');
// Customize the viewlsts.aspx page
if (IsOnPage("viewlsts.aspx")) {
//hide the subsites link on the viewlsts.aspx page
$("#createnewsite").parent().hide();
}
});
});
}
function SetStatusBar(message) {
var strStatusID = SP.UI.Status.addStatus("Information : ", message, true);
SP.UI.Status.setStatusPriColor(strStatusID, "yellow");
}
function IsOnPage(pageName) {
if (window.location.href.toLowerCase().indexOf(pageName.toLowerCase()) > -1) {
return true;
} else {
return false;
}
}