branding

[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> 
Advertisements

[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–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.