I. Introduction▲
Pour une explication complète sur les types de contenu et leur utilisation au sein de SharePoint, reportez-vous au tutoriel intitulé Les types de contenu, de l'utilisation au développement.
L'objectif de ce tutoriel est d'expliquer comment il est possible d'aller encore plus loin avec les types de contenu notamment par la personnalisation de templates de base présents dans SharePoint. Le cas d'étude que nous allons démontrer est simple : il s'agit d'ajouter une banière publicitaire flash dans chaque formulaire de saisie et d'affichage d'une liste personnelle destinée à être utilisée sur internet.
Notez que vous pourriez bien sûr ajouter la bannière publicitaire à une page maître et que la création d'un type de contenu n'est bien sûr pas indispensable. Néanmoins, cet exemple met tout de même en exergue la personnalisation des formulaires standard associétés aux listes.
Pour parvenir à nos fins, nous allons créer le type de contenu WebItem que nous associerons ensuite aux listes personnelles que nous souhaitons exposer sur internet. L'avantage de passer par la création d'un type de contenu pour personnaliser les formulaires d'encodage et d'affichage réside dans le fait que les types de contenu peuvent pointer vers des modèles SharePoint spécifiques.
II. Objectif à atteindre en images▲
Voici l'objectif à atteindre représenté par les quelques captures d'écran ci-dessous :
Création d'un nouvel élément de type Web Item.
Formulaire d'encodage avec la bannière publicitaire.
Formulaire de visualisation d'un élément de type Web Item également avec la bannière.
III. Les types de contenu et les modèles standard▲
Les types de contenu standard tels que Item, Document etc... pointent vers des modèles de contrôles définis dans le fichier 12\TEMPLATE\CONTROLTEMPLATES\DefaultTemplates.ascx. Celui-ci contient toutes les définitions des contrôles utilisés par SharePoint. Notez que bien qu'il soit possible de le modifier directement, Microsoft ne supporte pas cette manipulation.
Le type de contenu Item pointe notamment vers le modèle ListForm défini dans le fichier DefaultTemplate.ascx. Voici à quoi ressemble la déclaration de ce modèle :
<SharePoint:RenderingTemplate ID="ListForm" runat="server">
<Template>
<SPAN id='part1'>
<SharePoint:InformationBar runat="server"/>
<wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbltop" RightButtonSeparator=" " runat="server">
<Template_RightButtons>
<SharePoint:NextPageButton runat="server"/>
<SharePoint:SaveButton runat="server"/>
<SharePoint:GoBackButton runat="server"/>
</Template_RightButtons>
</wssuc:ToolBar>
<SharePoint:FormToolBar runat="server"/>
<TABLE class="ms-formtable" style="margin-top: 8px;" border=0 cellpadding=0 cellspacing=0 width=100%>
<SharePoint:ChangeContentType runat="server"/>
<SharePoint:FolderFormFields runat="server"/>
<SharePoint:ListFieldIterator runat="server"/>
<SharePoint:ApprovalStatus runat="server"/>
<SharePoint:FormComponent TemplateName="AttachmentRows" runat="server"/>
</TABLE>
<table cellpadding=0 cellspacing=0 width=100%><tr><td class="ms-formline"><IMG SRC="/_layouts/images/blank.gif"
width=1 height=1 alt=""></td></tr></table>
<TABLE cellpadding=0 cellspacing=0 width=100% style="padding-top: 7px"><tr><td width=100%>
<SharePoint:ItemHiddenVersion runat="server"/>
<SharePoint:ParentInformationField runat="server"/>
<SharePoint:InitContentType runat="server"/>
<wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbl" RightButtonSeparator=" " runat="server">
<Template_Buttons>
<SharePoint:CreatedModifiedInfo runat="server"/>
</Template_Buttons>
<Template_RightButtons>
<SharePoint:SaveButton runat="server"/>
<SharePoint:GoBackButton runat="server"/>
</Template_RightButtons>
</wssuc:ToolBar>
</td></tr></TABLE>
</SPAN>
<SharePoint:AttachmentUpload runat="server"/>
</Template>
</SharePoint:RenderingTemplate>Ce modèle de rendu correspond au formulaire suivant :
où l'on retrouve bien les différents boutons, la liste de champs (ListFieldIterator), la gestion de pièces jointes etc.. A partir de là, il est possible de modifier ce modèle de rendu en le redéclarant dans un autre fichier. Cette réécriture aura pour effet d'appliquer votre modèle plutôt que celui de SharePoint. Il suffit de redéclarer ce modèle dans un fichier externe en lui attribuant le même ID que le standard. Cette modification s'appliquera alors à toutes les listes utilisant le type de contenu Item de toute votre ferme. Il s'agit donc d'une modification à impact majeur.
Si vous souhaitez restreindre le champ d'application d'une telle modification à un site ou à une collection, vous pouvez créer votre propre type de contenu et le faire pointer vers votre modèle de rendu personnel. C'est cette méthode que nous utilisons dans le cadre de ce tutoriel.
IV. Création de l'animation Flash▲
Etant un piètre designer, je ne vais pas vous expliquer comment vous y prendre. J'ai choisi flash par facilité mais vous auriez bien sûr pu créer un contrôle SilverLight...L'enjeu n'étant pas l'animation elle-même mais la manière de l'encapsuler dans les formulaires.
J'ai donc réalisé l'animation on ne peut plus simpliste suivante :)) :
Cliquez pour lire la vidéo
V. Création du type de contenu Web Item▲
Créez un nouveau projet Visual Studio de type SharePoint Empty ou encore Project Library. Et créez-y la structure suivante :
Seuls trois fichiers sont nécessaires, le fichier feature.xml, webitem.xml pour déclarer le type de contenu et WebItemListForm.ascx qui représente le contrôle utilisateur personnalisé.
Voici le contenu du fichier feature.xml :
<?xml version="1.0" encoding="utf-8" ?>
<Feature xmlns="http://schemas.microsoft.com/sharepoint/"
Id="9A98A891-2CEA-45a1-98F8-C485A9D462C1"
Title="Web Item"
Description="Web Item avec bannière"
Scope="Site"
Hidden="false"
>
<ElementManifests>
<ElementManifest Location="webitem.xml" />
</ElementManifests>
</Feature>Soit une déclaration tout à fait classique de fonctionnalité.
Voici le contenu du fichier webitem.xml déclarant le type de contenu :
<?xml version="1.0" encoding="utf-8" ?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<ContentType ID="0x010003CB06C7AB9346ea827FE01A11F32350"
Name="Web Item"
Description="Web Item avec bannière"
Group="Developpez.com"
Version="0">
<FieldRefs>
<FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title"/>
</FieldRefs>
<XmlDocuments>
<XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<FormTemplates xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms">
<New>WebItemListForm</New>
<Edit>WebItemListForm</Edit>
<Display>WebItemListForm</Display>
</FormTemplates>
</XmlDocument>
</XmlDocuments>
</ContentType>
</Elements>soit une déclaration classique d'un type de contenu à ceci près que l'on spécifie qu'il faut pointer vers le modèle de rendu WebItemListForm pour les formulaires de type Nouveau, Edition et Affichage.
Enfin, terminez par le modèle de rendu WebItemListForm contenu dans le fichier WebItemListForm.ascx de la solution :
<%@ Control Language="C#" %>
<%@Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"
namespace="Microsoft.SharePoint.WebControls"%>
<%@ Register TagPrefix="wssuc" TagName="ToolBar" src="/_controltemplates/ToolBar.ascx" %>
<%@ Register TagPrefix="wssuc" TagName="ToolBarButton" src="/_controltemplates/ToolBarButton.ascx" %>
<SharePoint:RenderingTemplate ID="WebItemListForm" runat="server">
<Template>
<SPAN id='part1'>
<SharePoint:InformationBar runat="server"/>
<wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbltop" RightButtonSeparator=" " runat="server">
<Template_RightButtons>
<SharePoint:NextPageButton runat="server"/>
<SharePoint:SaveButton runat="server"/>
<SharePoint:GoBackButton runat="server"/>
</Template_RightButtons>
</wssuc:ToolBar>
<SharePoint:FormToolBar runat="server"/>
<TABLE class="ms-formtable" style="margin-top: 8px;" border=0 cellpadding=0 cellspacing=0 width=100%>
<SharePoint:ChangeContentType runat="server"/>
<SharePoint:FolderFormFields runat="server"/>
<SharePoint:ListFieldIterator runat="server"/>
<SharePoint:ApprovalStatus runat="server"/>
<SharePoint:FormComponent TemplateName="AttachmentRows" runat="server"/>
</TABLE>
<table cellpadding=0 cellspacing=0 width=100%><tr><td
class="ms-formline"><IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt=""></td></tr></table>
<TABLE cellpadding=0 cellspacing=0 width=100% style="padding-top: 7px"><tr><td width=100%>
<SharePoint:ItemHiddenVersion runat="server"/>
<SharePoint:ParentInformationField runat="server"/>
<SharePoint:InitContentType runat="server"/>
<wssuc:ToolBar CssClass="ms-formtoolbar" id="toolBarTbl" RightButtonSeparator=" " runat="server">
<Template_Buttons>
<SharePoint:CreatedModifiedInfo runat="server"/>
</Template_Buttons>
<Template_RightButtons>
<SharePoint:SaveButton runat="server"/>
<SharePoint:GoBackButton runat="server"/>
</Template_RightButtons>
</wssuc:ToolBar>
</td></tr></TABLE>
</SPAN>
<SharePoint:AttachmentUpload runat="server"/>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="468" height="60" id="dvpbanner" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="/_layouts/images/webitem/dvpbanner.swf"
/><param name="quality" value="high" /><param name="bgcolor"
value="#ffffff" /> <embed src="/_layouts/images/webitem/dvpbanner.swf"
quality="high" bgcolor="#ffffff" width="468" height="60" name="dvpbanner"
align="middle" allowScriptAccess="sameDomain" allowFullScreen="false"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</Template>
</SharePoint:RenderingTemplate>Ce code est en réalité très similaire à la déclaration standard. La seule différence est l'ajout d'une balise HTML de type Object à la fin qui pointe vers l'animation flash qui est elle-même déployée dans le répertoire /images/webitem/ de la ferme.
Voilà! Il ne vous reste plus qu'à déployer votre solution et à la tester.
VI. Substitution d'un contrôle standard▲
Comme déjà mentionné précédemment, vous pouvez remplacer un contrôle standard par votre propre contrôle en déployant simplement ce contrôle dans le répertoire CONTROLTEMPLATES et en lui attribuant le même ID que l'ID du contrôle standard. Dans le cas précédent, si vous aviez nommé le contrôle WebItemListForm en ListForm, SharePoint aurait utilisé votre propre version du ListForm et l'aurait automatiquement associé par exemple à une liste personnelle utilisant le type de contenu Item. Vous n'auriez donc pas été obligé de déployer votre propre type de contenu.
En analysant le fichier DefaultTemplates.ascx, vous vous apercevrez que certains contrôles sont réutilisés un peu partout, c'est par exemple le cas de ListFieldIterator qui est utilisé pour afficher en mode édition/affichage les différents champs associés au type de contenu et/ou à la liste liée à l'élément en cours d'encoage/d'affichage.
Vous pouvez par exemple créer votre propre version de ListFieldIterator pour afficher/masquer certains types de champs en fonction de l'utilisateur connecté etc...
VII. Conclusion▲
Les types de contenu sont décidément incontournables dans SharePoint. Les perspectives de personnalisation abordées dans ce tutoriel laissent entrevoir d'énormes possibilités.
VIII. Téléchargement▲
Vous pouvez télécharger le projet ici