Accueil > SharePoint 2013 > SharePoint 2013 : Design Manager – Présentation

SharePoint 2013 : Design Manager – Présentation


warning

Cet article est désormais disponible sur le Wiki TechNet.

Accèder à l’article sur le Wiki

Accèder au guide des articles en français du Wiki

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

Cet article présente une vue d’ensemble des fonctionnalités; d’autres articles viendront le compléter.

Il fait partie d’une série concernant le Design Manager de SharePoint 2013 :

Comme je l’ai évoqué dans cet article concernant SharePoint Designer, Microsoft semble considèrer le Design manager 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 DM 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. Bonne nouvelle.

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 (cf. cet article).

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://win-sc1c3doh7sv2010/sites/test/_catalogs/masterpage » ouvre en fait « \\win-sc1c3doh7sv@2010\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.

Cet article détaille ce mécanisme.

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.

Conclusion

Personnellement je trouve ce « Design Manager » plutôt intéressant et fonctionnel, en tout cas pour quelqu’un comme moi qui manipule très rarement le design.

En revanche pour les habitués du wysiwig de SP Desginer, je ne suis pas certain que tout celà leur fasse oublier la disparition du Design View dans SharePoint Designer 2013.

  1. Laurent Fauret
    novembre 21, 2012 à 12:51

    Bonjour,

    Merci pour cet article très interessant ! Cela montre bien la puissance du design manager.
    Cependant, je n’arrive pas à faire fonctionner les devices channel avec un template community site même avec les features publishing activées. Cela fonctionne de manière impeccable sur un template publishing portal comme expliquez dans l’article. Qu’en pensez vous ?

    Merci,

    Laurent

  2. novembre 21, 2012 à 4:43

    Bonjour Laurent,

    Je suis en train de finir ma série d’articles sur le Design Manager, j’ai gardé les Device Channel pour la fin.
    Je testerai votre cas et ferai un retour dans l’article dédié.

  3. novembre 25, 2012 à 3:03

    Bonjour Laurent,

    Je viens d’effectuer des sites avec le template « Community Site ».

    Les panel fonctionnent correctement, par contre effectivement la masterpage page ne s’applique pas sur mon Device Channel « Chrome ».

    J’ai constaté que c’était la masterpage « System » qui est utlisée dans ce site template, ce qui est pour moi l’explication de ce non-fonctionnement, puisqu’on ne peut pas associer de masterpage sytème spécifique en fonction de Device Channels.

    Benoît

    • Laurent Fauret
      novembre 26, 2012 à 11:04

      Bonjour Benoît,

      Merci beaucoup d’avoir pris le temps de regarder mon cas et d’y avoir répondu. C’est dommage que cette fonctionnalité très intéressante ne puisse pas s’appliquer au communautaire.
      En tout cas merci pour les test sur les panels, je n’avais pas encore eu l’occasion de tester ça.

      Merci aussi pour cette série d’article sur le design manager🙂

      Laurent

  1. mai 8, 2013 à 4:27

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :