SharePoint 2013 introduit une nouvelle fonctionnalité : le "Design Manager".

Cet article fait partie d'une série concernant le Design Manager de SharePoint 2013 :

Le Design manager est désormais considéré comme "the place to be" de la customisation.

"

To simplify the process of integrating customized SharePoint pages, SharePoint Server 2013 includes a new feature called the SharePoint Design Manager.

[...]

However, we will look for opportunities to leverage SharePoint itself as the primary tool for customization and configuration tasks.

"

Où trouver ce Design Manager ?

Cette fonctionnalité est activée par défaut dans le modèle de site "Publishing Portal".

Vous pouvez néanmoins l'activer sur les autres sites en activant la feature de publication.

Une fois dans votre collection de sites, vous y accédez via le bouton "Settings".

Ou via les "Site Settings"

Une fois le Design Manager lancé, vous accédez à une page d'accueil qui regroupe sur la gauche différents liens (8 pour être précis) qui permettent d'accéder aux différentes fonctionnalités de l'outil.

En voici le descriptif.

1. Welcome

Un court message vous indique que vous êtes au bon endroit si votre but est de customiser votre site SharePoint.

2 liens sont présents et permettent :

  • D'importer un package existant (cf 8. Create Design package),
  • De changer le thème de votre site.

 

2. Manage Device Channels

Les "Device Channels" sont une nouveauté de SharePoint 2013 qui permettent de définir une masterpage spécifique (et donc une mise en page ou des portions de page différentes) pour différent type de device.

Cette page vous permet :

  • De créer un nouveau "Device Channel",
  • De modifier un "Device Channel" existant.

Par exemple, vous définissez un channel pour votre l'IPAD :

Puis vous associez ce channel à une masterpage que vous aurez créée spécialement.

Ici les utilisateurs non IPAD se verront donc présenter la masterpage "seattle", et es Apple-Addicts la masterpage "oslo".

A l'affichage d'une page, SharePoint parcoure les channels, et s'il détecte votre device (qu'il détecte via son User Agent) est dans sa liste , il affiche la masterpage adéquate.

3. Upload Design Files

Cette page vous permet de télécharger tous les éléments (page HTML, CSS, Images, ...) nécessaires à la customisation de votre site.

Le lien fourni permet un accès en webdav à la bibliothèque de masterpage : bien pratique !

Le lien affiché "http://VotreServeur/sites/test/_catalogs/masterpage" ouvre en fait "\\VotreServeur\sites\test\_catalogs\masterpage".

 

4. Edit Master Pages

Cette page va vous permettre de convertir la page téléchargée à l'étape précédente en masterpage.

Une fois la conversion terminée, vous n'aurez "plus qu'à" rajouter tous les contrôles SharePoint que vous souhaitez dans cette page, et ce via du code généré en fonction de ce que vous souhaitez.

2 liens sont présents et permettent :
  • De convertir une page HTML en masterpage,
  • De créer une masterpage "minimale".

5. Edit Display Templates

(Encore) une fonctionnalité intéressante : la possibilité de customiser l'affichage des résultats de recherche, via ces "Display Templates".

Ces modifications peuvent s'appliquer à :

  • Une liste "globale" de résultats,
  • Un groupe de résultat,
  • Un résultat.

Par exemple pour modifier l'affichage des fichiers Word dans les résultats de recherche :

 

6. Edit Page Layouts

1 lien dans cette page vous permet de créer une page layout.

Cliquez sur le lien, saisissez un nom, sélectionnez une masterpage et un type de contenu : la page layout est créée.

 

7. Publish and Apply Design

Comme son titre l'indique, cette page vous permet d'appliquer les customisations sur votre site.

Rien de complexe ici :
  • Le premier lien vous emmène dans votre galerie de masterpage,
  • Et le second vers la page de configuration de la masterpage de votre site.

8. Create Design package

Et enfin, vous pouvez rassembler toutes vos customisations dans un package (qui est un WSP) afin de le déployer sur d'autres environnements.

Le package est stocké dans la galerie de solutions du site, et s'incrémente  à chaque création.