Archives de mot-clé : JS

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