Archives de mot-clé : WebPart

Techniques pour récupérer les éléments HTML d’une WebPart en JavaScript (Partie 2)

Dans mon billet précédent, j’ai abordé différentes techniques pour récupérer les éléments HTML d’une WebPart en JavaScript.

Cependant, que faire si vous ne voulez pas afficher le Titre d’une WebPart de recherche de contenu et que des changements dans l’ordre des WebParts est possible (changement de ID)?

J’ai donc trouvé deux nouvelles techniques :

Technique 3 – Ajouter une balise dans le modèle d’affichage et naviguer dans ses éléments parents

Cette technique consiste à utiliser le ajouter une balise (un div avec un ID « wp » dans ce cas) puis de naviguer dans ses éléments parents pour récupérer le HTML d’une WebPart précise.

Voici le code pour y arriver :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(initializeScript, "sp.js");</pre>


function initializeScript()
{
//Find the DIV with the webpartid then the closest parent div starting with MSOZoneCell_WebPartWPQ
$wp= $("#wp").parents("div[id*='MSOZoneCell_WebPartWPQ']"); //MSOZoneCell_WebPartWPQ2
$wp.css('max-width', '660px');
$wp.css('float', 'left');
}
</script>

Résultat

Dans cet exemple de WebPart de recherche de contenu, un style est appliqué sur le DIV MSOZoneCell_WebPartWPQ2 en utilisant une balise :

techniqueHTML3

Points à faire attention avec cette technique

  • Assurez-vous de mettre un ID significatif qui est unique dans votre page.

Technique 4 – Utiliser le GUID de la WebPart

Cette technique consiste à utiliser le webpartid puis de naviguer dans ses éléments parents pour récupérer le HTML d’une WebPart précise.

Voici le code pour y arriver :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(initializeScript, "sp.js");

function initializeScript()
{
//Find the DIV with the webpartid then the closest parent div starting with MSOZoneCell_WebPartWPQ
$wp= $("DIV[webpartid='13c8d6db-fa88-4e77-985c-ef4fcc858865']").parents("div[id*='MSOZoneCell_WebPartWPQ']"); //MSOZoneCell_WebPartWPQ2
$wp.css('max-width', '660px');
$wp.css('float', 'left');
}
</script>

Résultat

Dans cet exemple de WebPart de recherche de contenu, un style est appliqué sur le DIV MSOZoneCell_WebPartWPQ2 en utilisant le webpartid:

techniqueHTML4

Points à faire attention avec cette technique

  • Assurez-vous d’ajuster votre code si vous supprimez puis ajoutez à nouveau la WebPart car le webpartid changera.

Conclusion

Les deux nouvelles techniques présentées dans cet article peuvent vous permettre facilement d’appliquer des personnalisations sur un élément HTML d’une WebPart.

Ces techniques peuvent répondre à un besoin simple mais cela ne constituent pas une solution aussi robuste et à l’épreuve du futur que l’utilisation du SharePoint Framework.

Il faut comprendre que l’utilisation de code client qui repose sur des éléments du DOM spécifiques ne sont pas recommandé car ceci n’est pas pris en charge dans l’interface utilisateur moderne. De plus, le DOM dans SharePoint Online est sujet à des changements fréquents…

Advertisements

Techniques pour récupérer les éléments HTML d’une WebPart en JavaScript

Introduction

Dans ce billet je vous propose quelque techniques de JavaScript pour pouvoir récupérer les éléments HTML d’une WebPart spécifique. Chez un de mes clients je me suis vite rendu compte qu’il n’était pas évident d’avoir une « poigné » fixe pour appliquer une personnalisation sur une seule WebPart. Le Client Side Rendering (CSR) est à la mode c’est temps-ci mais il comporte une certaine complexité en comparaison aux quelques lignes de JavaScript qui suivront. Pour ce qui est du CSS, il n’est pas évident de l’appliquer seulement à une WebPart.

Examinons le code généré d’une WebPart

En appuyant sur F12 dans une page contenant des WebParts, vous pourrez examiner le code HTML généré par celle-ci.

Voici un exemple :

WebPartByTitle_HTMLElement

Vous remarquerez qu’il y a un ID unique sur chacune des WebParts de la page.

L’élément DIV avec le ID « MSOZoneCell_WebPartWPQ6 » correspond à l’ensemble de la WebPart.

L’élément DIV avec le ID « WebPartWPQ6_ChromeTitle » correspond à l’entête de la WebPart.

L’élément SPAN avec le ID « WebPartTitleWPQ6 » correspond au titre de la WebPart.

Voyons maintenant quelque techniques pour les récupérer.

Technique 1 – Récupérer les éléments HTML d’une WebPart par son titre

Cette technique consiste à utiliser le titre de la WebPart comme poigné pour récupérer les éléments HTML d’une WebPart précise.

Voici le code pour y arriver :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
     //Parcours tous les éléments SPAN ayant un ID qui commencent par WebPartTitleWPQ
     $("span[id^=WebPartTitleWPQ]").each(function()
     {
          //Si le titre de la WebPart commence par "Site Collection Documents"
          if($(this).attr('title').indexOf("Site Collection Documents") == 0){
          //Applique une personnalisation sur l'ensemble de la WebPart (Couleur rouge)
               $(this).parent().parent().css('background-color', 'red');
          }
    });
});
</script>

Résultat

Le background-color rouge est appliqué uniquement sur la WebPart avec le titre « Site Collection Documents » :

WebPartByTitle_After

Points à faire attention avec cette technique

  1. Assurez-vous d’avoir un titre unique pour vos WebParts
  2. Assurez-vous d’utiliser un type de chrome incluant le « Titre »

Au besoin, vous pouvez modifier le titre de votre WebPart ou le type de chrome :

WebPartByTitle_MenuWP

Technique 2 – Récupérer les éléments HTML d’une WebPart par son ID

Cette technique consiste à utiliser l’ID comme poigné pour récupérer les éléments HTML d’une WebPart précise.

Voici un exemple de code pour modifier une WebPart par sont ID :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 //Applique une personnalisation à l'ensemble de la WebPart (Couleur bleu) par son ID
 $("#MSOZoneCell_WebPartWPQ6").css('background-color', 'blue');
});
</script>

Résultat

Le background-color bleu est appliqué uniquement sur la WebPart avec le ID MSOZoneCell_WebPartWPQ6 :

WebPartByID_After

Points à faire attention avec cette technique

  1. Assurez-vous d’ajuster votre code si une WebPart est déplacé,  ajouté ou supprimé

Que se passe-t’il si on déplace une WebPart ou qu’on en ajoute une nouvelle?

Le ID de la WebPart va tout simplement changer.

Avant la suppression d’une WebPart (2 WebParts) :

WebPartByTitle_HTMLElement_AvantDelete

WebPart 1 : WebPartWPQ4_ChromeTitle

 

Après la suppression d’une WebPart (1 WebPart) :

WebPartByTitle_HTMLElement_ApresDelete

WebPart 1 : WebPartWPQ2_ChromeTitle 

Voici un autre exemple qui utilise cette technique.

Conclusion

Les deux techniques présentés dans cet article peuvent vous permettre facilement d’appliquer des personnalisations sur un élément HTML d’une WebPart. La première technique utilisant le titre de la WebPart n’est pas sans faille si deux WebParts se retrouvent avec le même nom. Pour ce qui en est d’utiliser le ID de l’élément HTML de la WebPart, il faut faire attention si on déplace, supprime ou ajoute une WebPart dans la page car les ID sont susceptible de changer et ainsi de rendre votre code non fonctionnel. Ces techniques peuvent vous permettre d’appliquer des modifications rapidement lorsque ce n’est pas possible de le faire avec du CSS ou que c’est trop complexe avec du Client Side Rendering.

Un bottin dans SharePoint qui s’alimente de l’AD?

Introduction

Dans tout bon intranet, il y a un bottin téléphonique pour permettre aux utilisateurs de rechercher leur collègues soit par leur nom ou prénom à l’intérieur d’une même entreprise. Les gens de communications vous le dirons, c’est une des fonctionnalités les plus utilisées si l’information est fiable et que le tout est simple d’utilisation. Trop souvent, une liste SharePoint est créé et utilisé comme un bottin téléphonique et malheureusement cette liste n’est pas mise-à-jour régulièrement. En plus de dupliquer le contenu entre l’AD et SharePoint, cela peut créer une incohérence lorsque l’information diffère entre les deux endroits. L’idéal c’est d’avoir l’information à jour dans l’AD et de s’en servir comme source principale. Ensuite, on peut s’alimenter de l’AD ou se synchroniser à partir de l’AD pour avoir un bottin téléphonique mis-à-jour régulièrement.

Il existe plusieurs solutions pour y arriver et dans ce billet que je vais tenter d’éclairer vos lanternes en vous proposant 2 solutions :

1. En utilisant la recherche de personne et en s’alimentant du service des profils utilisateurs (UPS)

C’est probablement la meilleure solution car elle est évolutive et native. En plus de cela, il y a la possibilité d’avoir d’autres propriétés propres à chaque individu (ex. : compétences, langues, expertises, etc.). De plus, on peut alimenter les profils utilisateurs avec l’information provenant d’autres systèmes (ex. : Système de RH).

En quoi ça consiste ?

  • Mise en place du service de profil utilisateur (UPS);
  • Synchronisation du service de profil utilisateur avec l’AD;
  • Configuration de la recherche de personnes;
  • Création des pages du bottin qui effectuent des requêtes sur le service de profil utilisateur via le service de recherche.

Exemple :

sharepoint-people-directory

2. En utilisant une WebPart pour l’affichage et en s’alimentant de l’AD

Si vous n’envisagez pas d’avoir un site MySite et de configurer les services applicatifs requis, cette solution est probablement votre meilleure alternative. Elle est peu coûteuse mais elle n’offre pas tout les avantages de la première solution avec le service des profils utilisateurs et la recherche.

En quoi ça consiste ?

  • Installation d’une WebPart gratuite;
  • Configuration de la WebPart pour se connecter à l’AD;
  • Personnalisation de l’affichage de la WebPart (Au besoin).

Exemple :

UsersADBrowser

Source :  http://usersadbrowser.codeplex.com/