Faire passer l’information de la Web Part parent à la Web Part enfant

Effectivement, nous voulons le comportement qui permet de modifier la liste des acteurs sur base du film sélectionné. Ainsi, cela ne sera plus provoqué par le clic sur une image mais bien sur une ligne de tableau. Nous allons voir ça. Commencez par taper le code suivant dans le fichier « Film.xslt » :[BBR]

< ?xml version= »1.0″ encoding= »utf-8″?>
< xsl:stylesheet version= »1.0″ xmlns:xsl= »http://www.w3.org/1999/XSL/Transform » xmlns:msxsl= »urn:schemas-microsoft-com:xslt » exclude-result-prefixes= »msxsl »>

< xsl:template match= »/ »>
< table cellpadding= »5″>
< xsl:apply-templates />
< /table>
< /xsl:template>

< xsl:template match= »Row »>

< tr style= »cursor:pointer; » onmouseover= »javascript:this.style.backgroundColor = ‘#efefef’; » onmouseout= »javascript:this.style.backgroundColor = ‘transparent’; »>
< td style= »vertical-align:top;width:110px; »>
< img style= »width:100px; »>
< xsl:attribute name= »src »>
< xsl:value-of select= »@Image » />
< /xsl:attribute>
< xsl:attribute name= »alt »>
< xsl:value-of select= »@Titre » />
< /xsl:attribute>
< /img>
< /td>
< td style= »vertical-align:top; »>
< h1>
< xsl:value-of select= »@Titre » />
< /h1>
Par < b>
< /b>

< div style= »text-align:justify »>
< xsl:value-of select= »@Synopsis » />
< /div>
< /td>
< /tr>

< /xsl:template>

< /xsl:stylesheet>

Ce code aura pour effet d’afficher la « Web Part » de cette manière : voir figure 19.

La seconde ligne est grisée car le curseur de la souris était dessus lors de la capture d’écran. Bien que le rendu soit déjà bien plus attrayant qu’avant, il manque une fonctionnalité principale. Actuellement, si on clique sur une ligne du tableau, plus rien ne se passe. La liste des acteurs n’est pas rafraîchie. Pour ce faire, modifiez votre XSLT comme ceci :

< ?xml version= »1.0″ encoding= »utf-8″?>
< xsl:stylesheet version= »1.0″ xmlns:xsl= »http://www.w3.org/1999/XSL/Transform » xmlns:msxsl= »urn:schemas-microsoft-com:xslt » xmlns:ddwrt= »http://schemas.microsoft.com/WebParts/v2/DataView/runtime » exclude-result-prefixes= »msxsl »>

< xsl:param name= »ColumnKey » />
< xsl:param name= »dvt_1_form_selectkey » />

< xsl:template match= »/ »>
< table cellpadding= »5″>
< xsl:apply-templates />
< /table>
< /xsl:template>

< xsl:template match= »Row »>

< xsl:variable name= »KeyValue » select= »@*[name()=$ColumnKey] » />

< tr style= »cursor:pointer; »>
< xsl:attribute name= »onclick »>
< xsl:value-of select= »ddwrt:GenFireServerEvent(concat(‘dvt_1_form_selectkey={‘,$KeyValue,’}’)) » />; return false;
< /xsl:attribute>

< xsl:choose>
< xsl:when test= »$dvt_1_form_selectkey != $KeyValue »>
< xsl:attribute name= »onmouseover »>
javascript:this.style.backgroundColor = ‘#efefef’;
< /xsl:attribute>
< xsl:attribute name= »onmouseout »>
javascript:this.style.backgroundColor = ‘transparent’;
< /xsl:attribute>
< /xsl:when>
< xsl:otherwise>
< xsl:attribute name= »style »>
cursor:pointer;background-color:#efefef;border:1px solid black;
< /xsl:attribute>
< /xsl:otherwise>
< /xsl:choose>

< td style= »vertical-align:top;width:110px; »>
< img style= »width:100px; »>
< xsl:attribute name= »src »>
< xsl:value-of select= »@Image » />
< /xsl:attribute>
< xsl:attribute name= »alt »>
< xsl:value-of select= »@Titre » />
< /xsl:attribute>
< /img>
< /td>
< td style= »vertical-align:top; »>
< h1>
< xsl:value-of select= »@Titre » />
< /h1>
Par < b>
< xsl:value-of select= »@Realisateur »/>
< /b>

< div style= »text-align:justify »>
< xsl:value-of select= »@Synopsis » />
< /div>
< /td>
< /tr>

< /xsl:template>

< /xsl:stylesheet>

Ce n’est pas aussi compliqué que cela en a l’air. En fait, SharePoint dispose d’un mécanisme interne lui permettant de faire passer l’information de la « Web Part » parent à la « Web Part » enfant (en l’occurrence, la « Web Part Personne »).

Pour utiliser celui-ci, nous devons ajouter l’espace de nom « ddwrt » et créez deux variables globales nommées « ColumnKey » et « dvt_1_form_selectkey ». « ColumnKey » va en fait contenir toujours la même valeur, à savoir « BdcIdentity ». Si vous vous rappelez, c’est le nom d’un attribut se trouvant dans chaque élément « Row ». C’est grâce à la valeur de cet attribut que la ligne sera identifiée. La variable « dvt_1_form_selectkey », quant à elle contiendra justement la valeur de l’attribut « BdcIdentity » de la ligne sélectionnée.

Nous générons ensuite une variable nommée « KeyValue » permettant de récupérer la valeur de l’attribut « BdcIdentity » de l’élément courant. Nous utilisons une « requête » pour ce faire car nous ne pouvons pas garantir que l’attribut vaudra toujours « BdcIdentity », donc nous préférons nous baser sur la valeur de la variable « ColumnKey » automatiquement initialisée par SharePoint.

Nous modifions ensuite l’attribut « onclick » de la ligne correspondant au film. Nous appelons ainsi la fonction « GenFireServerEvent » de l’espace de nom « ddwrt » qui va se charger de modifier l’attribut « onClick » de manière à générer le « postback » de la page pour permettre à SharePoint d’envoyer les nouvelles données à la « Web Part » enfant. Comme vous le voyez, nous lui faisons passer la valeur de la variable « KeyValue » pour que SharePoint se charge d’initialiser la variable « dvt_1_form_selectkey » sur la valeur de « KeyValue » pour indiquer que c’est cette ligne qui est sélectionnée.

La dernière modification se passe au niveau du « choose xsl ». Ici, nous allons simplement comparer la valeur de la variable « dvt_1_form_selectkey » à la valeur de la variable « KeyValue ». Si ces deux valeurs sont égales, cela veut dire que la ligne actuelle est la ligne sélectionnée, nous affichons donc la bordure de la ligne et modifions son fond en gris. Nous ne lui attachons pas de « onmouseover » ni de « onmouseout » pour éviter de perdre la coloration de la ligne au passage de la souris. Dans le cas où la ligne sélectionnée n’est pas la ligne courante, nous définissons les attributs « onmouseover » et « onmouseout ».

Si nous déployons et testons notre solution, nous obtiendrons le résultat suivant : voir figure 20.

Si vous passez votre souris sur une ligne de tableau, celle-ci se colore, sauf s’il s’agit de la ligne déjà sélectionnée. Si vous cliquez sur une autre ligne, la page est rafraîchie ainsi que les données dans la « Web Part Personne ».

Et voilà, c’est ici que s’arrête cet article. Comme vous avez pu le constater, il est très simple de modifier le rendu des « Web Part ». Pour voir comment SharePoint procède nativement, le code XSL d’une « Web Part » de base est attaché dans la propriété XSL de ces « Web Part ». Il suffit donc de modifier cette « Web Part » et de cliquer sur le bouton « XSL » pour voir le « XSL » natif. C’est grâce à cela que j’ai réussi à reproduire le comportement permettant de rafraîchir la « Web Part Personne ».