Lorsque l’on utilise SharePoint 2010 pour héberger un site internet, une des premières tâches est l’intégration de la charte graphique. Dans la plupart des cas, le ruban ne devra pas apparaitre pour les internautes. Voyons une implémentation possible pour le masquer proprement.
Une particularité d’un site SharePoint par défaut est qu’en cas de scroll vertical, ce n’est pas la scrollbar du navigateur qui apparait, mais celle d’une div qui contient toute la page sauf le ruban. Cela permet notamment de conserver les boutons d’édition de texte même lorsque l’on édite le bas de la page. Cette zone scrollable est redimensionnée dynamiquement par script en fonction de la hauteur du ruban qui peut varier selon l’onglet sélectionné, et de la hauteur du navigateur qui peut être changée à la volée par l’utilisateur. Ce script qui contrôle la zone scrollable en temps réel causes des problèmes sur certains navigateurs, en particulier Safari et ses dérivés mobiles.
On trouve sur internet plusieurs approches pour masquer le ruban. Nous allons découvrir aujourd’hui celle implémentée il y a un an déjà sur le site www.oddo.fr, et que je réutilise aujourd’hui dans le cadre d’un autre site internet.
L’objectif
Afin de bien comprendre le principe, sachez que l’application web qui héberge le site est accessible en mode authentifié pour les auteurs et en mode anonyme pour les internautes.
Concernant la solution envisagée, l’idée est que si l’utilisateur est anonyme, il s’agit d’un internaute et le ruban ne doit donc pas apparaitre. Dans ce cas, il n’y a pas de raison d’utiliser une div scrollable au lieu de la scrollbar de la fenêtre du navigateur.
Afin d’en simplifier l’implémentation, j’ai redéfini mon objectif comme ceci :
- Par défaut (et donc pour les utilisateurs anonymes) : masquer le ruban, activer la scrollbar du navigateur, désactiver la scrollbar de la div principale
- Si l’utilisateur est authentifié (auteur du site) : afficher le ruban, désactiver la scrollbar du navigateur, activer la scrollbar de la div principale
Les 3 composantes techniques de l’implémentation sont :
- 1 contrôle dont le contenu ne s’affiche que si l’utilisateur connecté est authentifié. Celui-ci encapsulera le contrôle serveur du ruban et une surcharge CSS.
- 1 règle CSS par défaut qui annule la div scrollable, et active les scrollbars du navigateur
- 1 surcharge CSS qui réactive la zone scrollable uniquement si le ruban est affiché
Le contrôle graphique AuthenticatedUserPlaceHolder
Dans le projet, on crée le contrôle graphique suivant :
public class AuthenticatedUserPlaceHolder : PlaceHolder
{
protected override void OnInit(EventArgs e)
{
//On n'affiche ce contrôle (et donc son contenu) que si l'utilisateur est authentifié this.Visible = HttpContext.Current.User.Identity.IsAuthenticated;
}
}
Update : Selon le besoin initial, utiliser les contrôles SPSecurityTrimmedControl ou LoginView permettrait d’obtenir un résultat équivalent sans avoir à développer de contrôle supplémentaire, voir commentaires en bas du post.
Règles CSS par défaut
Dans la balise HEAD de la master page, ou dans la feuille de style principale du projet (préférable), on active la scrollbar du navigateur. Pour simplifier la compréhension, j’inclus ici mes règles CSS directement dans la balise HEAD de la master page :
<head runat="server">
…
<style>
/* active le scroll au niveau de la fenêtre du navigateur */
body
{
height: 100%;
overflow: auto;
width: 100%;
}
/* supprime les barres de scroll au niveau de la zone scrollable de SharePoint */
body #s4-workspace{
overflow:visible;
overflow-x:visible;
overflow-y:visible;
}
</style>
</head>
Attention : sur la balise <body>, un attribut scroll="no" peut empêcher la scrollbar du navigateur d’être affichée par notre règle CSS. S’il est présent, il est nécessaire de le supprimer.
Si on suit ce tutorial avec la master page V4.master, on supprimera aussi l’attribut class="v4master" qui surchargerait nos règles CSS avec des clauses !important. Sur une master page custom, en principe cette problématique disparait.
Affichage conditionnel du ruban et des règles CSS associées
Dans la master page, localiser la div ayant pour identifiant s4-ribbonrow, et l’encapsuler avec notre contrôle AuthenticatedUserPlaceHolder. On ajoutera aussi des règles CSS pour activer la zone scrollable (s4-workspace).
Voici le résultat attendu :
<Winwise:AuthenticatedUserPlaceHolder runat="server" >
<style>
/* supprime le scroll du navigateur */
body{
overflow:hidden;
}
/* réactive le scroll de la zone scrollable de SharePoint */
body #s4-workspace{
overflow-x:auto;
overflow-y:scroll;
}
</style>
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
<div id="s4-ribboncont">
<!-- ribbon starts here -->
...
</div>
</div>
</Winwise:AuthenticatedUserPlaceHolder>
Et hop, on obtient un site web internet sans ruban, avec un scrolling fonctionnel, en conservant une expérience utilisateur normale (avec ruban) lorsqu’un utilisateur est authentifié.
Happy Branding !
Arnault Nouvel
www.winwise.com
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :
