Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Transcription

1 Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint , rue de l Etang, L-5326 Contern Tél. : contact@sigi.lu BP 63, L-5201 Sandweiler TVA : LU

2 Historique Nom de fichier : Design Manager v2.0.pdf Date Version Auteur Description J.S/S.R. Version initiale Validation Nom Date Version P.C P.H Design manager v2.0.pdf 2 /

3 Sommaire Historique... 2 Validation... 2 Sommaire Principe Où trouver le Design Manager? Gestion de la masterpage Création de la masterpage Insérer les contrôles SharePoint dans la masterpage Modification d une masterpage Modification d une feuille de style CSS Prise en compte du ruban et autres contrôles SharePoint en mode édition 27 4 Créer un layout de page de composant webparts Packages de conception...37 Design manager v2.0.pdf 3 /

4 1 Principe SharePoint 2013 introduit une nouvelle fonctionnalité : le «Design Manager». Cette fonctionnalité permet de concevoir les éléments graphiques d un site SharePoint Cette fonction est disponible par défaut sur un site de publication. Elle est cependant utilisable sur tous types de modèles de sites dès lors que la feature de publication est activée. En combinant des fichiers HTML, CSS et JavaScript il est possible de changer l aspect du site. 1.1 Où trouver le Design Manager? Il est accessible depuis les paramètres du site : Design manager v2.0.pdf 4 /

5 2 Gestion de la masterpage 2.1 Création de la masterpage 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 Design Manager 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 une page HTML Construire une page HTML, à l aide d un outil de conception de votre choix. Les éléments nécessaires à la création sont les suivants : Une page HTML, Une ou plusieurs feuilles de style CSS, L utilisation d images et de fichiers JavaScript est optionnelle. Ici nous utiliserons un template HTML5 disponible gratuitement. Design manager v2.0.pdf 5 /

6 Etape 2 : Télécharger les fichiers dans SharePoint Une fois sur la page d accueil du Design Manager, cliquez sur «Charger les fichiers de conception sur le réseau» pour télécharger l ensemble de votre dossier dans la bibliothèque de masterpage de votre collection de site. Choisir de mapper un lecteur réseau vers la galerie de pages maîtres pour simplifier l upload des Design manager v2.0.pdf 6 /

7 fichiers de conception Vous pouvez maintenant accéder à la galerie de pages maitres comme à un dossier classique. Fichiers ajoutés dans la galerie de pages maitres. Design manager v2.0.pdf 7 /

8 Etape 3 : Convertir votre masterpage Sur la page d accueil du Design Manager cliquer sur Modifier les pages maîtres Cliquer sur Convertir un fichier HTML en une page maître SharePoint. Design manager v2.0.pdf 8 /

9 Choisir le fichier HTML uploadé plus tôt Design manager v2.0.pdf 9 /

10 Cliquer sur Insérer. SharePoint nous informe que la conversion a réussi. Cliquer sur index pour afficher l aperçu généré par SharePoint. Design manager v2.0.pdf 10 /

11 Si des erreurs sont détectées, cela signifie que le fichier HTML uploadé n est pas correct par rapport aux standards HTML, il est à retravailler. Ici SharePoint nous informe que notre page maitre ne comporte ni erreur ni avertissement. Nous pouvons donc continuer la personnalisation. Tout en bas de cette page d aperçu se situe un encadré jaune : Cet encadré jaune hébergera le contenu central de la page. Nous allons modifier le fichier HTML situé dans la galerie de pages maitres afin de placer l encadré jaune à l endroit où nous souhaitons voir apparaitre le contenu de notre site. Pour ceci, se rendre dans la galerie de pages maitres, puis télécharger le fichier index.html. Design manager v2.0.pdf 11 /

12 Editer le fichier à l aide d un éditeur de texte ou un éditeur HTML. Localiser la balise <div data-name= ContentPlaceHolderMain > La déplacer à l endroit voulu pour le contenu de votre site. Design manager v2.0.pdf 12 /

13 Sauvegarder le fichier puis le ré-uploader dans la galerie de pages maitres. Design manager v2.0.pdf 13 /

14 Publier le fichier en version principale. Retourner dans le Design Manager puis choisir de modifier la page maitre uploadée à l étape précédente. Design manager v2.0.pdf 14 /

15 On voit maintenant que l encadré jaune se situe au milieu de la page. Nous allons maintenant utiliser notre page maitre fraichement créée et afficher du contenu. Pour cela, choisir d affecter la page maitre à un site SharePoint, elle sera disponible dans la liste de choix des pages maitres disponibles. Design manager v2.0.pdf 15 /

16 Voici le résultat : Nous allons maintenant éditer la page pour y insérer du contenu. Design manager v2.0.pdf 16 /

17 Nous ajoutons un composant webpart fourni nativement avec SharePoint. Design manager v2.0.pdf 17 /

18 2.2 Insérer les contrôles SharePoint dans la masterpage Le Design Manager permet également d insérer des contrôles natifs SharePoint à votre masterpage comme le menu de navigation, une zone de recherche, des composants webparts personnalisées, etc Ici nous allons insérer le menu de navigation. Toujours depuis la page d accueil du Design Manager, choisir de modifier la page maitre. Cliquer ensuite sur Extraits de code Design manager v2.0.pdf 18 /

19 Sur cet écran, il est possible de choisir un composant SharePoint à insérer Choisir dans le ruban le contrôle à insérer. Cet écran se compose en 4 parties : 1. Description du contrôle. 2. Un aperçu du rendu du contrôle. 3. Le code généré à insérer dans la page HTML. 4. Les propriétés du contrôle. Ici le principe est de modifier les propriétés du contrôle pour correspondre à vos besoins. Les propriétés varient en fonction du type de contrôle choisi. Voici un aperçu des propriétés disponibles pour le menu de navigation : Design manager v2.0.pdf 19 /

20 Design manager v2.0.pdf 20 /

21 Nous allons modifier la couleur de fond de ce contrôle. Cliquer sur le menu Appearance puis dans la zone de saisie BackColor Design manager v2.0.pdf 21 /

22 Choisir une couleur, puis cliquer sur OK. Même opération pour les paramètres suivants : Cliquer sur Mettre à jour puis copier le code généré. Design manager v2.0.pdf 22 /

23 Coller ce code dans le fichier index.html à l endroit souhaité. Sauvegarder le fichier et l uploader dans la galerie de pages maitres. Design manager v2.0.pdf 23 /

24 On remarque ici que notre composant de navigation a été inséré sur la masterpage. Nous ajoutons des liens dans le composant de navigation : Design manager v2.0.pdf 24 /

25 On remarque que le style affiché ne correspond pas aux paramètres que l on a spécifiés. Cela est dû à la feuille de style CSS fournie avec le template HTML. Nous pouvons cependant modifier cette feuille de style pour que cela corresponde à nos attentes. Design manager v2.0.pdf 25 /

26 2.3 Modification d une masterpage. Il faut toujours prendre comme base le dernier fichier portant l extension HTML afin de modifier une masterpage : le télécharger depuis la galerie de pages maitres. Ce fichier est converti en.master à chaque upload dans la galerie de pages maitres. Design manager v2.0.pdf 26 /

27 Il n est pas possible d extraire et de modifier directement le.master. 3 Modification d une feuille de style CSS La modification de la feuille de styles est soumise au système de versioning SharePoint. Il suffit d uploader une nouvelle version du fichier CSS dans la galerie de pages maitres, puis la publier en version principale pour que les changements soient pris en compte. Le système de versioning permet de republier une version précédemment uploadée. 3.1 Prise en compte du ruban et autres contrôles SharePoint en mode édition Dans le cadre du CMS, plusieurs zones sont à différencier : Le front office en mode non identifié : C est ce que les utilisateurs voient en mode anonyme, aucun contrôle SharePoint non implémenté dans la masterpage n est affiché. Le front office en mode identifié : Ce que les rédacteurs du CMS voient lorsqu ils éditent directement depuis le front office. Ici ils voient le contenu d une ou plusieurs pages soumises à la masterpage publique, puis le ruban SharePoint proposant les actions d édition. Design manager v2.0.pdf 27 /

28 Le back office (vues de listes, paramètres de configuration du site, etc ) : disponible seulement pour les rédacteurs identifiés, ici la masterpage n est pas celle du front office, c est une masterpage par défaut SharePoint. Design manager v2.0.pdf 28 /

29 Il faut porter une grande attention à ce que les styles définis par un CSS customisé n impactent pas les fonctionnalités natives de SharePoint dans le mode front office identifié : cela aurait pour effet par exemple de cacher certaines fonctions d édition proposées par SharePoint (redimensionnement des images intuitif, disparition de contrôles, boutons d administrations déportés / inutilisables). 4 Créer un layout de page de composant webparts SharePoint propose plusieurs types de layouts pour les pages de composants webparts. La plus utilisée étant celle de la page d accueil : elle comprend 8 zones : 1 zone entête couvrant la largeur de la page si la colonne droite est vide. 2 zones supérieures respectivement supérieur gauche, supérieur droit. 3 zones respectivement centre-gauche, centre, centre-droit. 1 zone pied de page couvrant la largeur de la page si la colonne droite est vide. 1 zone colonne droite. Le design manager permets de créer d autres types de layouts : Depuis la page d accueil du design manager : Cliquer sur modifier les mises en page : Design manager v2.0.pdf 29 /

30 Créer une mise en page. Donner un nom, choisir une page maitre comme template, puis sélectionner le type de contenu Page d accueil Design manager v2.0.pdf 30 /

31 On obtient comme pour la masterpage un aperçu Pour ajouter des zones de webparts, cliquer sur extraits de code Sélectionner Zone de composants WebPart Design manager v2.0.pdf 31 /

32 Copier le code généré Télécharger le fichier HTML fraichement produit depuis la galerie de pages maitre Design manager v2.0.pdf 32 /

33 Editer le fichier à l aide d un éditeur HTML Localiser les lignes : <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">- -> Et <!--ME:</asp:ContentPlaceHolder>--> Correspondantes. Supprimer tout le contenu entre ces lignes. Ici nous allons simplement créer une structure <table> contenant une ligne avec 5 colonnes contenant chacune une zone de webpart. Design manager v2.0.pdf 33 /

34 Dans chaque colonne nous collons l extrait de code généré par SharePoint un peu plus haut : Attention aux IDs des webpart zones : ils doivent êtres uniques, il faut soit les changer à la main, soit générer un nouvel extrait de code de zone de webpart via le design manager Une fois les 5 colonnes remplies, sauvegarder le fichier. L uploader dans la galerie de pages maitres en choisissant de remplacer le fichier existant. Publier une version principale. Le fichier du même nom portant l extension aspx est mis à jour à la date de l upload. Design manager v2.0.pdf 34 /

35 Design manager v2.0.pdf 35 /

36 La mise en page est prête à être utilisée. Design manager v2.0.pdf 36 /

37 5 Packages de conception Vous pouvez créer un package de votre conception pour faciliter l'importation vers d'autres collections de sites. Le package n'inclut pas les fichiers de conception de SharePoint par défaut Générer le package de conception : Pour exporter un package de conception, aller sur la page d accueil du Design Manager, puis cliquer sur Créer le package de conception. Design manager v2.0.pdf 37 /

38 Choisir un nom pour le package. Il est possible d intégrer la configuration de la recherche dans le package de conception. Cliquer sur Créer Cette opération peut être longue à exécuter. Cliquer sur le lien pour télécharger le package. Design manager v2.0.pdf 38 /

39 Un fichier WSP est produit. Importer un package de conception : Sur la page d accueil du Design Manager, cliquer sur Importer un package de conception complet Cliquer sur Choisissez un fichier Sélectionner un package de conception puis cliquer sur importer Design manager v2.0.pdf 39 /

40 Un message vous informe du succès de l opération. Votre masterpage contenue dans le package de conception est maintenant disponible sur le site SharePoint. Design manager v2.0.pdf 40 /