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

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

Tech - Par iTPro - Publié le 23 novembre 2011
email

Nous allons maintenant passer au « XSLT » de la « Web Part » des films. Ici, il va y avoir une petite spécificité. 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

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

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 ».
 

Téléchargez gratuitement cette ressource

Guide Startup : 5 leviers pour consolider votre croissance

Guide Startup : 5 leviers pour consolider votre croissance

Créer une startup, c’est une aventure. Pour maximiser les chances de succès, il faut pouvoir rêver les pieds sur terre. Bénéficiez d'une feuille de route infographique complète pour mettre en œuvre un parcours de croissance robuste et pérenne avec SAP Business One & ERT Intégration - groupe kardol.

Tech - Par iTPro - Publié le 23 novembre 2011