none
(Comment faire) SharePoint 2013 : Construire une masterpage avec le Design Manager RRS feed

  • Discussion générale

  • SharePoint 2013 propose une nouvelle fonctionnalité : le Design manager.

    Je vous présente ici les étapes de création d'une masterpage avec le Design Manager. (L'article original de mon blog est ici)

    Les étapes de création d’une masterpage via le Design Manager

    Les étapes sont les suivantes :

    • Vous créez dans votre éditeur HTML préféré une page web qui servira de base pour la création de votre masterpage,
    • Vous téléchargez les éléments (page HTML, CSS, images) dans la galerie de masterpage,
    • SharePoint 2013 convertit votre page en masterpage,
    • Vous décidez des composants SharePoint (menus, webparts, …) à ajouter dans cette masterpage,
    • Le DM génère le code HTML pour chaque composant que vous intégrez à votre page HTML déjà uploadée
    • A chaque modification, SharePoint régénère la masterpage.

    Etape 1 : Construire votre page HTML

    Construisez une page HTML, comme bon vous semble, avec l’outil que vous voulez.

    Que vous construisez cette page vous-même, que vous la récupériez d’une agence ou de la voisine n’a aucune importance, ce qu’il vous faut au final c’est un dossier avec :

    • La page HTML,
    • Les images,
    • Les feuilles de style (*.css),
    • etc.

    Ici, j’ai choisi la facilité et récupéré un modèle "Prêt-à-l’emploi":

    Contenu du dossier :

    Etape 2 : Télécharger les fichiers dans SharePoint

    Une fois sur la page d’accueil du DM, cliquez sur "Upload Design Files" pour télécharger l’ensemble de votre dossier dans la bibliothèque de masterpage de votre collection de site.

    Grâce à l’accès en webdav cette étape est une formalité :

    Etape 3 : Visualiser votre masterpage

    C’est ici qu’on passe aux choses sérieuses : SharePoint va convertir votre page HTML en masterpage.

    Cliquez sur le lien "Convert …" :

    Naviguez dans la galerie de masterpage jusqu’à sélectionner votre page HTML  et cliquez sur "Insert" :

    La page est alors convertie (ici avec succès) :

    Cliquez sur le lien pour obtenir un aperçu de cette masterpage :

    Etape 4 : Insérer les contrôles SharePoint

    Si vous observez le screenshot ci-dessus, la masterpage est "brute" : il va falloir maintenant insérer les contrôles SharePoint (menus, titre du site, webparts, …).

    Le tout en gardant en tête que le div suivant ("ContentPlaceHolderMain" présent en bas de la masterpage) est le point central du design car embarquant le contenu de la page.

    Pour cela cliquez sur "Snippets" en haut à droite :

    Vous accédez alors à la page qui va vous permettre d’insérer les contrôles; en haut de la page, je clique sur "Top Navigation" afin d’insérer un menu dans la masterpage.

    A noter qu’il y a foule de contrôles utilisables, difficile de ne pas trouver son bonheur.

    S’affichent alors :

    • Partie 1 : Un descriptif présentant le contrôle,
    • Partie 2 : Une prévisualisation,
    • Partie 3 : Le code généré à coller dans votre page HTML,
    • Partie 4 : Les propriétés modifiables (bouton "Update").

    Une fois que vous estimez que votre contrôle est prêt, cliquez sur le bouton ci-dessous et collez le code dans votre page HTML (celle collée à l’étape 2).

    Pour faire simple, utilisez un éditeur et modifiez directement la page HTML en webdav.

    SharePoint synchronise alors vos modifications en convertissant automatiquement la page HTML en masterpage.

    D’ailleurs dans la page HTML initiale, SharePoint ajoute le commentaire suivant :

    "

    This HTML file has been associated with a SharePoint Master Page (.master file) carrying the same name. While the files remain associated, you will not be allowed to edit the .master file, and any rename, move, or deletion operations will be reciprocated.

    To build the master page directly from this HTML file, simply edit the page as you normally would. Use the Snippet Generator at [....] to create and customize useful SharePoint entities, then copy and paste them as HTML snippets into your HTML code. All updates to this file will automatically sync to the associated Master Page.

    "

    Et ainsi de suite avec tous vos contrôles, en conservant le div jaune en point central :

    Une fois votre page HTML (et donc votre masterpage) achevée, publiez une version principale de la masterpage, paramétrez la sur votre site.

    La page "Site settings" devient ici (avec juste un contrôle "Top Navigation" et "Site Title") :

    Conclusion

    Personnellement, j’aime bien cette gestion "centralisée" des fonctionnalités de branding.

    Dans la vraie vie on peut imaginer communiquer aux agences/designers les portions de code que l’on souhaite voir apparaître dans la masterpage, et récupérer le package (page  HTML + éléments) que l’on convertit ensuite via SharePoint.

    mercredi 24 juillet 2013 14:23
    Modérateur

Toutes les réponses

  • Merci Benoit pour ta contribution dans l'appel à la contribution!

    Courage pour la suite!

    Gokan - Modérateur


    My Technical Blog on Wordpress

    jeudi 25 juillet 2013 06:35
  • Up !

    365 vues et un seul vote :(

    Cet article fait partie de l'appel à la contribution, alors si vous trouvez cet article intéressant ... Votez ! :)

    lundi 5 août 2013 08:08
    Modérateur
  • Merci pour cet article que je trouve intéressant :) 
    lundi 5 août 2013 12:43
  • Salut ici Papa Panda !

    Merci Benoit pour cette "mise à l'étrier" !

    Question subsidiaire : c'est supporté pour faire des master page de type MySite Host ?


    Blog Sharepoint : www.paslatek.net Twitter : @LimozinLionel

    lundi 5 août 2013 12:44
  • Salutttt pappaaa pandaaa.

    Et bien you're welcome, tant que t'as pas de question subsidiaire comme en mai dernier, planqué au fond de la salle ! :)

    Ah si t'en as une en fait; à vrai dire je ne sais pas si c'est supporté, ce que je peux juste dire c'est qu'après activation des features la fonctionnalité est là et opérationnelle, après ...

    Pour ceux qui se posent la question du nom en français :

    lundi 5 août 2013 13:26
    Modérateur
  • Bon j'ai fait quelques tests sur du MySiteHost avec features de publishing activée...

    • l'upload du htm et conversion en master fonctionne
    • la creation d'une minimal master fonctionne
    • par contre dès qu'on cherche à utiliser la page "snippet" on se prend une bonne vielle erreur et dans l'ULS on a le message ci dessous. Pour info dans la page qui présente les masterpage editable on retrouve 'oslo' et 'seattle' mais pas MySite15 ... donc ça me fait dire que DesignManager c'est fait que pour les sites de publishing.... dommage :(
    System.NullReferenceException: Object reference not set to an instance of an object.   
     at Microsoft.SharePoint.Portal.WebControls.MySiteCustomizeSiteActionsAndQuickLaunch.CustomizeQuickLaunch()    
     at Microsoft.SharePoint.Portal.WebControls.MySiteCustomizeSiteActionsAndQuickLaunch.OnPreRender(EventArgs e)    
     at System.Web.UI.Control.PreRenderRecursiveInternal()    
     at System.Web.UI.Control.PreRenderRecursiveInternal()    
     at System.Web.UI.Control.PreRenderRecursiveInternal()    
     at System.Web.UI.Control.PreRenderRecursiveInternal()    
     at System.Web.UI.Control.PreRenderRecursiveInternal()    
     at System.Web.UI.Control.PreRenderRecursiveInternal()    
     at System.Web.UI.Control.PreRenderRecursiveInternal()    
     at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)


    Blog Sharepoint : www.paslatek.net Twitter : @LimozinLionel

    mercredi 7 août 2013 13:53
  • Hello,

    Merci pour le feedback, en effet çà semble pas terrible ...

    C'est bien dommage, comme tu dis !

    mercredi 7 août 2013 15:53
    Modérateur
  • Hi Lionel,

    I'm having the same problem - I get the same error.  Did you fix it?  If so, how?

    mardi 10 juin 2014 05:14
  • Hi

    The solution was to not use Design manager, back to roots of SharePoint web designer and working directly into .master file by adding asp controls...


    Blog Sharepoint : www.paslatek.net Twitter : @LimozinLionel

    mardi 10 juin 2014 07:59