Branding

[SP2013-SP2016] – Utiliser un JSLink pour afficher un slider

Posted on Updated on

Bonjour à tous,

Cela fait un moment que je n’ai rien publié, mais j’ai été pas mal occupé 🙂

Aujourd’hui, comment créer un jslink qui affichera les images d’une bibliothèque d’image sous forme de Slideshow en JavaScript en utilisant les jslink.

1/ Créer une bibliothèque d’images et ajouter des images

Première étape donc, créer une bibliothèque d’image dans un site SharePoint. Facilement réalisable, à la souris via l’interface de création des applications. Pour cela, rendez-vous sur votre site SharePoint concerné, puis utilisez l’engrenage (Paramètres / Settings), puis créer une Application (Add an app) :

01

 

Puis sélectionner le type d’application “Bibliothèque d’images” (Picture Library) :

02

 

Ici je l’appellerai “Images” pour cet exemple :

03

 

L’application “Images” de type bibliothèque d’images est créée :

04

 

Ensuite, je vais charger un ensemble d’images que je souhaite afficher dans mon slideshow. Pour cela, j’utilise le site Pexels (https://www.pexels.com/) mais vous pourrez en trouver sur beaucoup de sites (Attention au droit à l’image) :

05

 

Puis je les télécharger dans SharePoint (via glisser-déposer, mais pour pouvez évidemment utiliser le bouton télécharger, Windows Explorer etc.) :

06

 

Mes images sont donc maintenant dans SharePoint.

 

2/ Les ressources nécessaires

Afin que le diaporama soit animé, et de ne pas redévelopper la roue, j’ai choisi d’utiliser un JavaScript bien connu afin de créer mon diaporama qui s’appelle slidejs (http://www.slidesjs.com/). Ce script est assez facile d’utilisation, il est responsive, “touchable” (tablettes, smartphones) et utilise CSS3 (attention aux navigateurs non-compatibles… ça existe encore).

Il peut également démarrer tout seul (auto-play), utilise des transitions etc. Tout ceci peut être personnalisé suivant les besoins. Ici, je voudrai qu’il change de photo seulement quand l’utilisateur clique sur le bouton suivant (ou précédent).

Je vais donc avoir besoin de charger JQuery, et jquery.slides.min.js.

Pour ma part, JQuery est chargé dans la masterpage de mon site (et le fichier est dans le hive car je l’utilise sur tous les sites : /template/layouts/demo/jquery-1.11.2.min.js) :

07

Et dans ma masterpage (je vous laisse voir les différents moyens de charger JQuery) :

<SharePoint:ScriptLink ID="ScriptLink6" language="javascript"  Name="/_layouts/15/demo/jquery-1.11.2.min.js" runat="server" Localizable="false"/>;

08

 

Pour la fichier jquery.slides.min.js, je vais le charger dans la bibliothèque de style de la collection de sites car il n’est utilisé que pour ce site, et pas sur les autres (rien ne vous empêche de le déployer dans le hive). Pour cela :

Accéder au contenu du site racine (qui est le site en question dans mon exemple), utilisez l’engrenage puis “Contenu du site” (Site Content) :

09

Puis accédez à l’application “Style Library” :

10

Dans cette application, je créé un nouveau répertoire pour isoler mes ressources, ce répertoire s’appellera “demo” :

11

12

13

Et enfin je télécharger le fichier “jquery.slides.min.js” dans ce nouveau répertoire :

14

 

Sans oublier de l’archiver puis de le publier :15

16

17

Et enfin, il nous faut télécharger dans ce même répertoire le fichier JSLink permettant de lancer le Slideshow. Nous allons voir maintenant ce qu’il contient…

3/ Le JSLink

Ici nous allons donc utiliser le fichier “SharePointSlideshow.js” (vous pourrez bien sûr le renommer).

Premièrement, nous allons déclarer un namespace spécifique :

Type.registerNamespace('DEMO');
DEMO.SPSlideshow = DEMO.SPSlideshow || {};
DEMO.SPSlideshow.Templates = DEMO.SPSlideshow.Templates || {}
DEMO.SPSlideshow.Functions = DEMO.SPSlideshow.Functions || {}

Puis déclarer un ID global pour le div qui encapsulera les éléments du slideshow :

var slideshowId = '';

Et enfin, déclarer les fonctions nécessaires :

Fonction affichant 1 élement :

DEMO.SPSlideshow.Functions.Display = function (ctxSlideshow) {

    var viewMoreLabel = "+ Read more";    
    var webpartTitle = "";

    /* DECLARE COLUMNS INTERNAL NAMES  */
    var ColumnIDInternalName = "ID";
    var ColumnTitleInternalName = "Title";
    var ColumnFileRefInternalName = "FileRef";   
    
    /* GET ITEM VALUES FROM CONTEXT  */
    var item = ctxSlideshow.CurrentItem;
    var itemId = item[ColumnIDInternalName];
    var itemTitle = item[ColumnTitleInternalName];
    var itemFileUrl = item[ColumnFileRefInternalName];
       
    //create img form jsslide library
    var strSlideshow = '<img src="' + itemFileUrl + '">';
    
    return strSlideshow;
}

Fonction générant le Header (div encapsulant la structure générale, voir documentation de slidejs) :

DEMO.SPSlideshow.Functions.GenerateHeader = function (ctxSlideshow) {

    var webpartId = ctxSlideshow.wpq;
    var webpartTitleCell = '#WebPartTitle' + webpartId;
    $("#WebPart" + webpartId).css("position","relative");
    var header = '<div class="container">';
    slideshowId = 'slides' + ctxSlideshow.ctxId;
    header += '<div id="' + slideshowId + '">';
    //insert buttons for next and previous
    header += '<a href="#" id="slideshowleftarrow" class="slidesjs-previous slidesjs-navigation"></a>';
    header += '<a href="#" id="slideshowrightarrow" class="slidesjs-next slidesjs-navigation"></a>';
    return header;
}

Fonction générant le Footer (div fermant la structure générale, voir documentation de slidejs):

DEMO.SPSlideshow.Functions.GenerateFooter = function (ctxSlideshow) {  
    var footer = '</div>';
    footer += '</div>';
    return footer;
}

Fonction permettant d’appliquer les éléments en JQuery sur la structure, et mettant en forme le slideshow :

DEMO.SPSlideshow.Functions.PostRender = function (ctxSlideshow) {   
    //start slide
    $(function () {
        var slidedivid = '#' + slideshowId;
        $(slidedivid).slidesjs({
            start: 2,
            pagination: {
                active: false
            }       
        });
    });    
}

Et enfin, le bout de script permettant de faire le “register” du JSLink sur le WebPart standard d’affichage des images (Application Picture Library) :

DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay = function () {
// Fallback to loading jQuery from a CDN path if the local is unavailable
(window.jQuery || document.write('&lt;script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.2.min.js"&gt;&lt;\/script&gt;'));

var slideshowcontext = {};
slideshowcontext.Templates = {};
slideshowcontext.Templates.Header = DEMO.SPSlideshow.Functions.GenerateHeader;
slideshowcontext.Templates.Item = DEMO.SPSlideshow.Functions.Display;
slideshowcontext.Templates.Footer = DEMO.SPSlideshow.Functions.GenerateFooter;
slideshowcontext.Templates.OnPostRender = DEMO.SPSlideshow.Functions.PostRender;

slideshowcontext.ListTemplateType = 109;
slideshowcontext.BaseViewID = 6;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(slideshowcontext);
}

//Register CSR-MDS module then call template registration
DEMO.SPSlideshow.Functions.RegisterInMDS = function () {
//RegisterLikes-override for MDS disabled site (because we need to call the entry point function in this case whereas it is not needed for anonymous functions)
ExecuteOrDelayUntilScriptLoaded(DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay, 'clienttemplates.js');
// RegisterLikes-override for MDS enabled site
RegisterModuleInit(_spPageContextInfo.siteServerRelativeUrl + "/Style Library/demo/SharePointSlideshow.js", DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay);
}

//Load CSR-MDS module if feature is activated
if (typeof _spPageContextInfo != "undefined" &amp;&amp; _spPageContextInfo != null) {
DEMO.SPSlideshow.Functions.RegisterInMDS();
}
else {
ExecuteOrDelayUntilScriptLoaded(DEMO.SPSlideshow.Templates.RegisterSlideshowDisplay, 'clienttemplates.js');
}

Lorsque ce fichier est globalement (et syntaxiquement ok), il faut le télécharger avec le fichier précédent dans Style Library/Demo (on l’archive et publie également) :

18

 

4/ Utilisation

Pour utiliser ce JSLink, il faut tout d’abord ajouter le composant WebPart de l’application Picture Library sur une page. La page d’accueil par exemple. On édite la page en cliquant sur le bouton Modifier (Edit) dans le coin haut-droit :

19

Dans la galerie de WebParts, on choisit le WebPart associé à la nouvelle application Bibliothèque d’images (qui s’appelait “Images” dans mon cas) :

20

 

Et on l’ajoute dans la page, puis on sauvegarde la page :21

Ensuite, on repasse en édition sur la page, et on modifie les propriétés du composant WebPart que l’on vient d’ajouter :

19

Dans le coin en haut à droite du WebPart, on accède au menu “Modifier le composant WebPart” (Edit Web Part) :

22

 

La “boite à outils” du WebPart s’ouvre sur la droite :

23

Dans le dernier champ “JS Link”, il faut indiquer le chemin (relatif à la collection de sites) vers le fichier “SharePointSlideshow.js”. Dans mon cas, j’indique :

~sitecollection/Style%20Library/demo/jquery.slides.min.js|~sitecollection/Style%20Library/demo/SharePointSlideshow.js

J’utilise le token “~sitecollection” afin d’indiquer que mon url est relative à la collection de site (vous pouvez également utiliser ~site), SharePoint se chargera de recomposer l’url absolue. Et ensuite, j’utilise “|” afin de dire à SharePoint qu’il doit charger 2 scripts : “jquery.slides.min.js” et “SharePointSlideshow.js” :

24

 

On clique sur “OK”, on enregistre et immédiatement, le slideshow est fonctionnel (moche mais fonctionnel). En effet les boutons “Previous” et “Next” fonctionnement :

25 26

 

5/ Faire du beau…

En effet, le rendu est un peu sommaire… des liens cliquables, en bas… pas super ergonomique et même moche. Allez on fait du “un peu plus beau”. Et donc de la CSS !

Premièrement, je vais utiliser 4 images pour remplacer les liens Previous / Next par des flèches qui changeront de couleur lorsque la souris les survolera :

rightarrow-active rightarrow-inactive leftarrow-active leftarrow-inactive

 

 

Je vais télécharger ces images dans l’application “Style Library, dans le même dossier que les fichiers *.js téléchargés précédemment :

27

 

Puis enfin je vais créer une nouvelle feuille de style qui contiendra quelques directives pour mettre en place tout ça qui s’appellera SharePointSlideshow.css. Je choisis également de la déployer dans l’application Style Library et de la référencer dans la masterpage :

28

Dans la masterpage :

<SharePoint:CssRegistration ID="DemoCSS" Name="<% $SPUrl:~sitecollection/Style Library/demo/SharePointSlideshow.css %>" After="corev15.css" runat="server">

29

 

Et enfin le contenu de la CSS :

/* WebPart slideshow */

#slideshowleftarrow{
background:url('/sites/tests/Style%20Library/demo/leftarrow-inactive.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
left:0;
z-index:98;

}

#slideshowrightarrow{
background:url('/sites/tests/Style%20Library/demo/rightarrow-inactive.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
right:0;
z-index:98;

}

#slideshowleftarrow:hover{
background:url('/sites/tests/Style%20Library/demo/leftarrow-active.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
left:0;
z-index:99;

}
#slideshowrightarrow:hover{
background:url('/sites/tests/Style%20Library/demo/rightarrow-active.png');
background-repeat:no-repeat;
height: 46px;
width: 35px;
position:absolute;
top:50%;
right:0;
z-index:99;

}

a[title="Previous"] {
display:none;
}

a[title="Next"] {
display:none;
}

/* End WebPart slideshow */

 

Et voici le résultat :

slideshowjs

 

 

[SharePoint 2013] – Erreur JQuery au chargement d’une page en Edit

Posted on

Bonjour,

Aujourd’hui un tips technique sur un problème constaté lors du développement d’une fonction JQuery lorsque l’on passe en Edition sur une page.

J’ai constaté cette erreur sur un site qui a été “brandé” totalement (avec un style personnalisé avancé). Au départ, mes scrollbar (verticale notamment) ne fonctionnaient plus. Et dût au conflit entre plusieurs CSS, l’astuce a été d’écrire une fonction JQuery permettant de modifier le style à la volée pour ajouter un max-height et modifier l’overflow-x sur ma page.

Le contexte ici a peu d’importance, toutefois, ce qui est intéressant, c’est que j’ai décidé d’utiliser le contrôle EditModePanel afin d’utiliser une version de cette fonction lorsque la page est en Affichage ou en mode Edition.

Pour cela, c’est assez simple (sur un site de publication), il faut ajouter une directive Register dans la masterpage du portail :


<%@ Register TagPrefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

 

Et dans la page pour le mode Affichage :


<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Display">

...

</PublishingWebControls:EditModePanel>

 

Et pour le mode Edition :


<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Edit">

...

</PublishingWebControls:EditModePanel>

Tout ceci fonctionne bien, les fonctions sont bien chargées suivant le contexte… Là ou cela se gate, c’est lorsque l’on souhaite appeler des fonctions utiles de Jquery. En effet, en mode Affichage, aucun probleme. En mode Edition, j’ai une erreur qui me dit “Object doesn’t support this property or method ready” ou “Object doesn’t support this property or method resize”.

Il se trouve, qu’apparemment, JQuery ne parviens pas à charger ces fonctions… je me suis simplement dit, en ajoutant un ExecuteOrDelayUntilScriptLoaded pour retarder le chargement de mes fonctions après sp.js, cela devrait marcher. Ou pas.

Je vous passe les multiples essais, échecs, etc. Dans le cas de l’Edition seulement, il faut appeler les fonctions de cette manière :


( function($) {
$(document).ready( function() { FixWorkspaceInEditMode()  } );

} ) ( jQuery );

 

Et donc en résumé :

 
<PublishingWebControls:EditModePanel runat="server" PageDisplayMode="Edit">  
     function FixWorkspaceInEditMode() { 
         ... 
     } 
     ( function($) { $(document).ready( function() { FixWorkspaceInEditMode()  } ); } ) ( jQuery ); 
     ( function($) { $(document).resize( function() { FixWorkspaceInEditMode()  } ); } ) ( jQuery ); 
 
</PublishingWebControls:EditModePanel> 

[SharePoint 2013]–Nouvel outil : SharePoint Color Palette Tool

Posted on Updated on

Avec la sortie de la nouvelle version de SharePoint 2013, nous avons vu (encore) son design général changé. Ce design reprend les principes de Modern UI dictés par Microsoft et repris sur l’intégralité des plateformes : Windows 8, Windows Phone, Xbox.

Nous retrouvons donc dans SharePoint en particulier les Tuiles bien connues, et d’autres un peu moins “Visibles” au premier abord.

SharePoint 2013 apporte également son lot de nouveau thèmes graphiques natifs sur lesquels on peut personnaliser le jeu de couleurs, l’icône, et même la navigation latérale via les materpages oslo.master & seattle.master. Cet éditeur de thèmes permet quand même bien des personnalisations, mais il se peut que cela ne suffise pas !

Dans ces cas là, on peut utiliser le Design Manager permettant d’importer des découpages html pour les convertir en masterpages, les canaux, etc. (voir mon article : SP2013–Design Manager).

 

Pour nous permettre d’aller plus loin, mais sans recourir à SharePoint Designer, aux CSS, aux masterpages, Microsoft nous propose un nouvel outil fraichement releasé : SharePoint Color Palette Tool ! Les prérequis sont Internet Explorer 8 ou supérieur et le Framework 4.5.

Pour ceux qui le connaitraient, pour SharePoint 2010 nous avions Theme Builder renommé Open XML Theme Builder et disponible récemment sur CodePlex : Open XML Theme Builder.

 

Voyons ensemble à quoi cela ressemble !

 

On télécharge l’outil ici : SharePoint Color Palette Tool (1,1Mb).

Et on l’installe (ici sur une machine Windows 8 Enterprise x64 en anglais) :

 

On lance le setup, “Next” :

01

 

On accepte les termes du contrat de licence et “Next” :

02

 

On choisit l’emplacement d’installation, puis “Next” :

03

 

Résumé des information, “Next” :

04

 

L’installation est terminée, on coche “Launch the program”, “Finish” :

05

 

Le programme se lance :

06

 

Premières impressions… plutôt bonnes ! On retrouve sur la gauche un ensemble de contrôles “couleur” avec prévisualisation et code couleur RGB. Au centre, une prévisualisation du résultat (on reprend le thème général de SharePoint 2013) et tout en haut le choix du layout (oslo ou seattle), en dessous un affichage des warnings & erreurs. Sur la droite, un contrôle permet de placer une image en fond, de choisir un jeu de couleurs originel, et au centre un outil permettant de tester le contraste appliqué…

 

Première chose que je vérifie… qu’est-ce que génère cet outil ? En faisant File > Save, on me propose de sauvegarder un fichier *.spcolor :

07

 

Ce fichier spcolor n’est autre qu’un fichier XML :

08

 

Qu’il faudra importer dans SharePoint 2013, pour en savoir plus, direction MSDN : http://msdn.microsoft.com/en-us/library/jj945889.aspx

En fait on retrouve une certaine analogie entre ce fichier spcolor et les css, mais seulement pour la partie couleurs. En effet, on ne retrouve dans ce fichier aucun information sur la masterpage, le layout etc. Donc les paramètres dans l’outil Color Palette ne servent qu’à la prévisualisation, pas au paramétrage du thème en lui-même.

Notons également que dans la zone de gauche, on a des sous items sur lesquels on pourra modifier les couleurs :

09

 

A mon avis, cela va être difficile de faire un jeu de couleur correct dès le premier essai ! Il y a beaucoup de couleurs à paramétrer…

 

Avec 3 ou 4 clics, on arrive à quelque chose… ou pas ! (Notez les warnings…)

10

 

A bientôt !

[SP2013] – Starter MasterPages disponibles en béta

Posted on

Bonjour à tous.

Comme pour chaque nouvelle version de SharePoint, les starters MasterPages sont proposées gratuitement sur CodePlex => par ici.

A quoi vont nous servir ces MasterPages ? Tout simplement elles vont nous servir de point de départ lors de l’élaboration de Design avancés pour SharePoint 2013 en l’occurrence. Elles contiennent donc tous les contrôles nécessaires au bon fonctionnement de SharePoint, rien de plus !

 

 

 

 

 

SP2013–Design Manager

Posted on Updated on

Parmi les nouveautés de SharePoint 2013, il en est une qui n’est pas forcément souvent abordée : Le Design Manager.

Ce n’est pas en soit une nouveauté fonctionnelle mais bien une agrégation d’anciens menus, de nouvelles présentation qui vous permettrons d’accéder et modifier vos ressources graphiques intervenant dans le design de votre site : masterpages, CSS, layouts, etc.

 

Voyons ensemble comment se présente la chose…

Commençons par accéder à ce Design Manager :

01

02

 

Nous voyons tout de suite une succession de 8 menus sur la gauche et leur numérotation n’est pas un hasard, nous déroulerons ces menus en respectant cet ordre pour créer un package de déploiement de branding directement depuis le Design Manager !

 

1/ Sur la page d’accueil de ce Design manager, deux menus principaux. Le premier (Import a complete design package) vous permettra d’importer un package (WSP : Windows SharePoint Package) contenant un design que vous aurez soit acheté chez un éditeur, soit développé vous même grâce à Visual Studio ou le Design Manager. Utile par exemple pour migrer le design mis en place sur une plateforme de développement vers celle d’intégration !

03

 

Le second menu (Pick a pre-installed look) vous permettra de sélectionner un design (thème) déjà présent dans votre plateforme et de l’appliquer à votre site.

04

30

 

Voyons maintenant les menus accessible par la barre latérale à gauche…

2/ Second menu : Manage Device Channels

05

Ce menu présente une interface de type ”Liste” SharePoint… mais à quoi servent ces “Channels”. Et bien ça c’est nouveau, vous allez pouvoir créer des canaux (super traduction…) permettant d’orienter un design suivant un type de navigateur/matériel. Vous pourrez alors dédier un design à des matériels de type Windows Phone, ou encore pour des navigateurs comme Opera Mini. Nous allons donc essayer de créer un nouveau canal :

06

 

On rempli donc les quelques paramètres demandés :

  • Name : nom du canal
  • Alias : cet alias pourra être utilisé dans la déclaration des contrôles/composants des masterpages par exemple pour paramétrer les affichages en fonction du canal d’affichage (par exemple si l’utilisateur navigue sur un Opera Mini, alors on affichera un contrôle différemment d’un autre utilisateur utilisant chrome).
  • Description : description de l’utilisation de ce canal
  • Device Inclusion Rules : règles appliquées pour déterminer si ce canal doit être appliqué au matériel. En effet, on déclarera ici des chaines de caractères qui seront comparées au “browser user agent” pour déterminer si on doit sélectionner ce canal ou un autre. Vous pourrez déterminer ce critère en utilisant par exemple http://whatsmyuseragent.com/ ou http://www.useragentstring.com/pages/Browserlist/ ou encore http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ et http://www.zytrax.com/tech/web/mobile_ids.html
  • Activer ou désactiver le canal

07

 

Ici j’ ai créé 2 canaux supplémentaires :

  • Un pour les Windows Phone OS
  • Une pour les navigateurs Opera

08

 

Vous avez également la possibilité de réordonner liste de vos canaux, ils seront parcourus dans l’ordre fixé ici lors de vérification des règles d’application d’un design par rapport au fameux browser user agent :

09

 

Pour réordonner :

10

 

3/ Passons au troisième menu : Upload Design Files. Ce menu vous permettra d’ouvrir un navigateur ou un Webdav sur la bibliothèque de masterpages et d’uploader vos ressources : Masterpages, CSS, JavaScripts, images, etc.

11

 

4/ Le quatrième menu : Edit Master Pages vous permet de parcourir la bibliothèque des masterpages, de modifier les types de contenu associés à une page…

Tout en haut, on observe deux menus supplémentaires. Le premier se propose de convertir un fichier HTML en masterpage SharePoint… Pour être honnête je ne l’ai pas testé : TODO !

Le second vous propose de créer une masterpage minimale, et ça c’est quand même pratique ! Là où avant il fallait repartir d’une masterpage existante et faire du tri ou aller récupérer les “Minimal Masterpages” sur Codeplex, ça fait gagner du temps !

12

 

Création d’une nouvelle masterpage, rien de plus simple :

15

 

5/ Cinquième menu : Edit Display Templates. Ce menu va vous permettre d’éditer les templates utilisés par défaut pour les rendus des contrôles SharePoint, des WebParts comme par exemple celui utilisé pour le rendu des résultats de recherche. Vous pourrez donc dupliquer les rendus existant, les modifier et les associer aux WebPart habituels… le tout mixé avec des Device channels qui permettront d’avoir des rendus différents suivant les matériels/navigateurs :

19

 

6/ Sixième menu : Edit Page Layouts. Dans ce menu, vous pourrez ajouter directement un nouveau layout depuis un lien en haut de la page. Ici aussi, même remarque que pour les masterpages précédemment, cela nous évitera de devoir copier/coller un layout de départ, mais plutôt de commencer la personnalisation depuis un “minimal layout”.

21

31

 

7/ Septième menu : Publish and apply Design. Ce menu vous permettra, comme son nom l’indique, d’appliquer le Design que vous venez de mettre en place. Pour cela un lien “Apply master pages to your site based on device channel” vous permettra d’accéder à une page dans laquelle vous pourrez appliquer ce design sur les canaux créés tout au début :

24

25

 

8/ Huitième menu : Create Design Package. C’est l’aboutissement des manipulations faites dans les précédents menus, c’est ici que le pourra créer un package de type WSP contenant le Design créé jusqu’ici. Très simple d’utilisation, vous aurez seulement à compléter le nom du package, cliquer sur “Create” et SharePoint 2013 vous proposera de sauvegarder localement ce nouveau package :

26

 

Le package est généré, un nouveau lien apparait nous permettant de le télécharger et de l’enregistrer localement.

28

 

Encore des fonctionnalités biens utiles apportées par ce Design Manager. Plus besoin de crées des solutions Visual Studio pour déployer vos brandings, ils nous suffira de créer un design, le packager et c’est parti. A noter également ces fameux “Device Channels” qui nous permettront d’adapter facilement nos Design suivant le matériel (Device) ou encore suivant le navigateur qui se connectera à notre SharePoint.