Maîtriser l’affichage d’une liste SharePoint pour en améliorer le design

Par Thomas Jourdin - 12 juin 2017

Le design d’un site Sharepoint, tout comme celui d’un site web, est le reflet de l’entreprise qu’il représente.
Un design personnalisé et maîtrisé sera toujours un plus pour l’image de marque de l’entreprise, mais aussi pour l’utilisateur pour qui l’accès à l’information sera simplifié et l’expérience utilisateur améliorée. Nous parlerons notamment ici de liste SharePoint.

Affichage de liste SharePoint : cas d’usage

C’est dans le cadre de l’affichage d’une liste d’offres d’emplois que nous avons dû réfléchir à la mise en place d’un affichage de liste différent de ce que propose les modules OOTB de SharePoint Online.

Le but était d’offrir à l’utilisateur une vue simplifiée de l’ensemble des éléments et de lui permettre de consulter facilement le détail d’un élément. En plus de permettre à l’utilisateur de trouver les informations dont il avait besoin de façon claire et concise, il fallait aussi lui donner une expérience utilisateur agréable.

La solution technique pour maîtriser l’affichage de liste SharePoint

L’idée de base de cette solution était la suivante : maîtriser le code HTML d’affichage des éléments pour créer un design proche de celui d’un site web classique. Pour la mettre en place, nous avons choisi de nous baser sur le webpart « Requête de contenu ».

Mise en place de la solution :

  1. Insertion du webpart de « Requête de contenu » dans la page prévue à l’affichage des offres d’emplois
  2. Modification des fichiers ContentQueryMain.xsl et ItemStyle.xsl (Dans le dossier XSL Style Sheets) pour créer un nouveau modèle d’affichage mêlant Données XSL et balises HTML5
  3. Paramétrage du webpart « Requête de contenu » pour sélectionner la liste à afficher et les nouveaux templates d’affichage créés à l’étape précédente
  4. Mise en forme et animation des éléments HTML avec CSS3 et JavaScript

Le résultat obtenu

Les éléments de cette liste SharePoint ne sont plus affichés comme de simples lignes d’un tableau, mais selon un design plus fluide, proche des codes du web et à l’image de l’entreprise. L’accès à l’information et l’expérience utilisateur en ressortent grandement améliorés.

Comparaison [Avant / Après] entre les deux affichages de liste SharePoint

affichage-liste-sharepoint-standard
Affichage classique de la liste SharePoint et de ses éléments

 

affichage-liste-sharepoint-design
Affichage personnalisé par un expert Cyrès

SharePoint est un outil puissant mais pouvant rebuter au premier abord à cause d’une expérience utilisateur qui n’est pas au niveau de ses fonctionnalités. Si les pages « modern expériences » tendent à corriger ce problème, elles ne sont pas encore assez développées pour être utilisées totalement dans un environnement de production. Pour offrir à vos utilisateurs une expérience optimale, la meilleure solution reste de designer et de personnaliser SharePoint.

Taggué avec
Thomas Jourdin

Thomas Jourdin

Concepteur Web Office 365

    Page Linkedin Cyrès

    Facebook

    Twitter

    Calendrier

    juin 2017
    LMMJVSD
    « Mai  
     1234
    567891011
    12131415161718
    19202122232425
    2627282930