Une vue de liste est constituée de plusieurs parties. Il y a par exemple le ViewHeader qui permet d'indiquer comment s'affiche la barre affichant le nom des colonnes. Il y a également le ViewEmpty qui indique comment afficher la liste lorsque celle-ci ne contient aucun élément. Dans ce cours, nous allons parler du ViewBody. Cette section va permettre d'afficher le contenu de la liste, donc, les éléments. Pour cet exemple, nous allons repartir d'une définition de liste standard que nous allons modifier. La technique à utiliser pour obtenir une solution fonctionnelle a été décrite dans le cours correspondant. Ici, nous allons nous baser sur une solution déjà faite téléchargeable ici : Solution. Le déploiement de cette solution va vous créer un nouveau template de liste permettant de créer une liste générique standard. Nous allons ici modifier le ViewBody pour afficher les éléments avec un fond vert ou un fond rouge selon la valeur d'un champ de la liste. Mais avant de faire cela, voyons à quoi ressemble ce ViewBody. Ici, nous allons étudier celui de la vue par défaut de la liste :
<HTML><![CDATA[<TR class=;">]></HTML> <GetVar Name="AlternateStyle"/><HTML><![CDATA[">]]></HTML> <IfEqual> <Expr1> <GetVar Name="AlternateStyle"/> </Expr1> <Expr2>ms-alternating</Expr2> <Then> <SetVar Scope="Request" Name="AlternateStyle"> </SetVar> </Then> <Else> <SetVar Scope="Request" Name="AlternateStyle">ms-alternating</SetVar> </Else> </IfEqual> <Fields><HTML><![CDATA[<TD Class="]]></HTML> <FieldSwitch> <Expr> <Property Select="ClassInfo"/> </Expr> <Case Value="Menu"><HTML><![CDATA[ms-vb-title" height="100%]]></HTML> </Case> <Case Value="Icon">ms-vb-icon</Case> <Default> <FieldSwitch> <Expr> <Property Select="Type"/> <PresenceEnabled/> </Expr> <Case Value="UserTRUE">ms-vb-user</Case> <Case Value="UserMultiTRUE">ms-vb-user</Case> <Default>ms-vb2</Default> </FieldSwitch> </Default> </FieldSwitch><HTML><![CDATA[">]]></HTML> <Field/><HTML><![CDATA[</TD>]]></HTML> </Fields><HTML><![CDATA[</TR>]]></HTML> </ViewBody>
Ce code XML va permettre à SharePoint d'afficher les différents éléments de la liste. Ce schéma de représentation sera appelé à chaque fois qu'un élément devra être affiché. Nous allons le décomposer pas à pas pour bien comprendre comment cela fonctionne.
<![CDATA[<TR class=;">]></HTML>
Cette ligne va tout d'abord créer la ligne du tableau correspondant à l'élément. Comme vous le voyez, la définition s'arrête avant la valeur de l'attribut class. La raison est que la classe appliquée à la ligne va dépendre d'une chose. Effectivement, si vous regardez une liste contenant plusieurs éléments, vous pouvez remarquer que la couleur d'arrière-plan des lignes change une fois sur deux :
La ligne
<GetVar Name="AlternateStyle"/><HTML><![CDATA[">]]></HTML>
Récupère donc la valeur de la variable AlternateStyle et la fait passer comme valeur de la classe de la ligne. Le segment de code suivant :
<IfEqual> <Expr1> <GetVar Name="AlternateStyle"/> </Expr1> <Expr2>ms-alternating</Expr2> <Then> <SetVar Scope="Request" Name="AlternateStyle"> </SetVar> </Then> <Else> <SetVar Scope="Request" Name="AlternateStyle">ms-alternating</SetVar> </Else> </IfEqual>
Va simplement permettre d'alterner la classe affectée pour le prochain élément. Effectivement, le IfEqual va comparer la valeur de la variable AlternateStyle avec la valeur ms-alternating, qui est la classe affectée aux lignes grises. Si la condition est respectée, la variable AlternateStyle est modifiée et sa valeur est effacée. Dans le cas contraire, la variable est modifiée avec la valeur ms-alternating. Pour résumer, si le style est ms-alternating, il devient "", dans le cas contraire, il devient ms-alternatig. Cela permet donc d'alterner le fond des éléments.
<HTML><![CDATA[<TD Class=;">]></HTML>
L'élément Fields est en fait une boucle qui va parcourir tous les champs du ViewFields de la vue. Autrement dit, cette boucle parcourra tous les champs affichés dans la vue et non tous les champs de la liste. Une colonne est donc ouverte pour chacun de ces champs grâce à l'élément TD. Le FieldSwitch va permettre d'analyser le contenu de la propriété ClassInfo du champ :
<FieldSwitch> <Expr> <Property Select="ClassInfo"/> </Expr>
Nous avons ensuite deux choix :
<Case Value="Menu"><HTML><![CDATA[ms-vb-title" height="100%]]></HTML> </Case> <Case Value="Icon">ms-vb-icon</Case>
Ces deux Case appliquent simplement une classe différente selon le type du champ. Dans le cas ou ce type n'est ni Icon ni Menu, le Default est appliqué :
<Default> <FieldSwitch> <Expr> <Property Select="Type"/> <PresenceEnabled/> </Expr> <Case Value="UserTRUE">ms-vb-user</Case> <Case Value="UserMultiTRUE">ms-vb-user</Case> <Default>ms-vb2</Default> </FieldSwitch> </Default> </FieldSwitch><HTML><![CDATA[">]]></HTML>
Encore une fois, un FieldSwitch va être utilisé pour analyser le contenu renvoyé par la fusion de la propriété Type du champ et la propriété PresenceEnabled qui permet de définir si le rond de présence doit ou non apparaître dans la liste. Selon la valeur renvoyée par cette concaténation, une classe différente est appliquée à l'élément.
<Field/><HTML><![CDATA[</TD>]]></HTML>
Cette ligne aura simplement pour effet d'afficher le contenu formaté du champ. Nous précisons "formaté" car si vous voulez récupérer la valeur brute du champ, il faut utiliser l'élément Column. Enfin, la structure est fermée :
</ViewBody>
Nous allons maintenant passer à la pratique en rajoutant un champ Finished à notre liste. Si celui-ci vaut True, l'élément apparaîtra en vert, dans le cas contraire, il apparaîtra en rouge. La première chose à faire est de créer le champ. Tapez donc ceci dans l'élément Fields de votre définition de liste :
<Field ID="{638c9097-5ae6-4eb0-8478-6e509cb77af0}"
Name="Finished"
SourceID="http://schemas.microsoft.com/sharepoint/v3"
StaticName="Finished"
Type="Boolean"
DisplayName="Finished" />
Cela créera une colonne appelée Finished de type booléen. Nous allons ensuite remplacer les lignes :
<ContentTypeRef ID="0x01"> <Folder TargetName="Item"/> </ContentTypeRef>
Par la définition de notre content type :
<ContentType ID="0x0100b7e7232f45a445d08b61a99edac1ee5a"
Name="ECLCT"
Group="AreaProg"
Version="0">
<FieldRefs>
<FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title" Required="TRUE" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
<FieldRef ID="{638c9097-5ae6-4eb0-8478-6e509cb77af0}" Name="Finished" ShowInNewForm="TRUE" ShowInEditForm="TRUE" />
</FieldRefs>
<XmlDocuments>
<XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<Display>ListForm</Display>
<Edit>ListForm</Edit>
<New>ListForm</New>
</FormTemplates>
</XmlDocument>
</XmlDocuments>
</ContentType>
Ce content type dérive donc de Item et contient une référence au champ Finished que nous venons de créer. Ajoutez enfin une référence à ce champ dans les ViewFields de la vue :
<ViewFields> <FieldRef Name="Attachments" /> <FieldRef Name="LinkTitle" /> <FieldRef Name="Finished" /> </ViewFields>
Déployez cette solution, créez une liste sur base du nouveau template ainsi créé et ajoutez différents éléments dedans en cliquant Finished pour certains et en ne le cliquant pas pour d'autres :
Revenez maintenant dans votre schema.xml et positionnez vous au niveau du ViewBody de votre vue (celle par défaut étant celle dont l’ID vaut 1). Remplacez alors ceci :
<![CDATA[<TR class=;">]></HTML> <GetVar Name="AlternateStyle"/><HTML><![CDATA[">]]></HTML> <IfEqual> <Expr1> <GetVar Name="AlternateStyle"/> </Expr1> <Expr2>ms-alternating</Expr2> <Then> <SetVar Scope="Request" Name="AlternateStyle"> </SetVar> </Then> <Else> <SetVar Scope="Request" Name="AlternateStyle">ms-alternating</SetVar> </Else> </IfEqual>
Par :
<HTML><![CDATA[<TR style="background-color:]]></HTML>
<IfEqual>
<Expr1>
<Column Name="Finished" />
</Expr1>
<Expr2>0</Expr2>
<Then>
<HTML><![CDATA[#ff2f2f]]></HTML>
</Then>
<Else>
<HTML><![CDATA[#00ea00]]></HTML>
</Else>
</IfEqual>
<HTML><![CDATA[;">]]></HTML>
Nous avons remplacé l'attribut class par l'attribut style et nous définissons la propriété background-color. Pour lui attribuer la bonne valeur, nous utilisons IfEqual pour tester la valeur du champ Finished. Pour récupérer la valeur de ce champ, il suffit d'utiliser l'élément Column et lui faire passer le nom du champ dans l'attribut Name. Si la valeur du champ vaut 0 (donc false), nous définissons la couleur d'arrière-plan de la ligne sur #fff2f2. Par contre, si la valeur est différente de 0 (donc true), nous attribuons la couleur #00ea00. Enfin, nous fermons l'élément TR. Si nous rafraichissons la liste, nous obtenons ceci :
Le ViewBody est donc correctement appliqué et les lignes sont colorées en fonction de la valeur du champ Finished.
