Après avoir vu un post de Bil Simser, Renaud m’a mis au défi de rendre la même fonctionnalité en modélisation CAML. En clair l’idée est, lors de la définition d’une liste de définir une colonne de type « saisie multiligne » et au rendu d’avoir un pavé que l’on puisse déplier-replier à souhait plutôt que d’avoir le texte brut dans la vue de rendu.
En image il s’agît de lister ses éléments comme ça :
Pour cela, le plus simple est encore de traiter le tout côté client. Pour chaque ligne on va générer deux variables javascript : une qui enregistre l’état plié-déplié du commentaire, une autre pour enregistrer le commentaire complet et également un div pour permettre d’afficher le texte court ou long. Enfin, il nous faudra une fonction javascript qui basculera le contenu du div du texte court accompagné du (+) au texte long accompagné du (-) et inversement.
Donc, pour commencer en partant de notre modèle de librairie documentaire, nous allons faire tout le travail sur son fichier de définition (SCHEMA.XML).
Tout d’abord, on va y ajouter notre colonne commentaire de type texte multiligne, en ajoutant au nœud <Metadata> la définition de ce champ comme suit :
<
Field Type="Note" Name="Commentaire" DisplayName="Commentaire"></Field>
Ensuite, nous allons effectuer le reste du travail dans le nœud <View> correspondant à la vue « Tous les documents » et pour se faciliter la vie on va ajouter la fonction javascript de dépliage-repliage à l’entête de cette vue (dans le nœud <ViewHeader> comme suit :
<
HTML><![CDATA[<script language="javascript">
function toggle(id)
{
if (eval('Collapsed'+id))
{
document.getElementById('ShowComment'+id).innerHTML = eval('Comment'+id) + "
<a href='#' onclick='javascript:toggle("+id+");'>(-)</a>";
eval('Collapsed'+id+ '= false');
}
else
{
document.getElementById('ShowComment'+id).innerHTML = eval('Comment'+id).substring(0,30) + "
<a href='#' onclick='javascript:toggle("+id+");'>(+)</a>";
eval('Collapsed'+id+ '= true');
}
}
</
script>
]]>
</HTML>
Enfin, on va ajouter à la définition du rendu de chaque ligne le traitement spécifique souhaité pour la colonne « Commentaire », savoir ajouter un div et deux variables javascript. Pour cela on s’intéresse au nœud <ViewBody> et plus particulièrement à son sous-nœud <Fields> qui contient le traitement par défaut des colonnes, à savoir dans chaque colonne le rendu simple de la valeur par la présence du nœud <Field/>.
Dans notre cas, on va conditionner cet affichage pour le traiter de la manière spécifique souhaitée pour la colonne « Commentaire » grâce au nœud <FieldSwitch>, comme suit :
<FieldSwitch>
<Expr><Property Select="Name"/></Expr>
<Case Value="Commentaire">
<HTML><![CDATA[<div id="ShowComment]]></HTML>
<Column Name="ID"/>
<HTML><![CDATA["></div>]]></HTML>
<HTML><![CDATA[<script language="javascript">
var Comment]]>
</HTML>
<Column Name="ID"/>
<HTML><![CDATA[ = ']]>
</HTML>
<Column Name="Commentaire"/>
<HTML><![CDATA[';
var Collapsed]]>
</HTML>
<Column Name="ID"/>
<HTML><![CDATA[ = true;
document.getElementById
("ShowComment]]>
</HTML>
<Column Name="ID"/>
<HTML><![CDATA[").innerHTML = Comment]]>
</HTML>
<Column Name="ID"/>
<HTML><![CDATA[.substring(0,30) + "<a href='#' onclick='javascript:toggle(]]>
</HTML>
<Column Name="ID"/>
<HTML><![CDATA[)'>(+)</a>";
</script>
]]>
</HTML>
</Case>
<Default> <Field/> </Default>
</FieldSwitch>
