Créer un custom field type avec user control.


Bonjour à tous,

Aujourd’hui je vais vous parler d’une problématique que j’ai eue concernant les Custom Field Type.

Le but était de créer un type de champ custom et d’avoir un user contrôle pour l’affichage. Le contrôle était nécessaire car je devais appliquer une expression régulière qui conditionnait le formatage.

Il y a beaucoup de tutoriaux expliquant étapes par étapes comment faire cette opération mais dans un souci de cohésion je vais rappeler les étapes nécessaires.

1) Ajoutons une classe de définition du champ

Pour cet exemple nous allons partir du type de champ standard, le type « text ».  Nous allons donc hériter de « SPFieldText » .Dans cette classe nous allons définir les 2 constructeurs standards de notre custom field.

2) Ajoutons 1 dossier mappé  le dossier xml:

Pour cela, faites un clic droit sur le projet, « ajouter un dossier mappé SharePoint »

Le dossier xml se trouve dans le dossier « SharePointRoot\template »

3) Ajoutons un fichier xml dans le dossier mappé xml

Très important ! : Le nom de ce fichier doit commencer par fldtypes_

Pour cet exemple je l’ai appelé : fldtypes_TutoCustomField.xml

Dans ce fichier xml nous allons décrire les propriétés de notre field.

Une fois ces 2 fichiers créés, nous pouvons déjà voir notre champ en action, pour cela déployons la solution.

Très important ! : Pour que le nouveau type de fichier soit visible a la création d’un nouveau champ, il faut effectuer un iisreset, recycler l’application ne suffit pas.

Créons une nouvelle liste et ajoutons notre nouvelle colonne.

Jusque ici pas de soucis, maintenant nous allons ajouter un contrôle à notre champ.

4) Ajoutons le User contrôle.

Très très très très important ! : Nous touchons ici à la raison première de ce tutorial. A savoir, vous éviter de vous arracher les cheveux et d’envoyer le pc par la fenêtre de frustration (oui j’avoue ça sent le vécu).

Quand nous ajoutons un user control avec Visual Studio 2010, voici ce qu’il ajoute.

A) Il ajoute le cas échéant un dossier mappé sur le dossier « ControlTemplates »

B) il ajoute le cas échéant un dossier du nom de notre projet

C) il ajoute le contrôle.

Bien pratique me direz-vous, sauf que par défaut, SharePoint ne cherche pas dans les sous-dossiers du dossier ControlTemplates pour les customs field type, il ne cherche les composants que dans le dossier ControlTemplates.

Remontons donc notre contrôle pour qu’il soit dans le bon dossier. Supprimons aussi les fichiers « .cs » du contrôle, nous n’avons besoin que de l’ « ascx ».

Dans notre ascx,  supprimons les liens vers les classes de code behind de la ligne « Control »

Devient

Ajoutons maintenant les « RenderingTemplate » qui seront utilisé pour afficher notre contrôle dans les pages « edit item » et « view item ».

Dans le premier, « TutoCustomFieldControl », nous aurons une textbox pour récupérer la donnée. Dans le second, « TutoCustomFieldControlForDisplay », nous aurons un label pour afficher la valeur du champ.

5) Ajoutons la classe de définition du contrôle.

Dans cette classe nous allons définir le comportement de notre contrôle, y comprit les éventuels traitements à effectuer pour l’affichage et la sauvegarde.

Créons donc notre classe « TutoCustomFieldControl » qui hérite de la classe « BaseFieldControl ». Dans cette classe nous allons commencer par déclarer les composants de nos « RenderingTemplate » : le label « MyCustomNameLabel » et le textbox « MyCustomNameText »

Nous devons aussi surcharger 2 variables: DefaultTemplateName et DisplayTemplateName de la manière suivante.

Grâce à cette surcharge, nous spécifions le nom de nos « RenderingTemplate » custom.

Surchargeons maintenant la fonction de création des contrôles.

Dans cette surcharge, nous testons quel est le type d’affichage. S’il s’agit d’une édition, nous remplissons le textbox avec le contenu du champ.

Nous avons encore besoin d’une chose. Si nous laissons cette classe comme ceci, les modifications du champ ne seront pas sauvegardées. Nous devons ajouter un événement de sauvegarde sur la modification de notre champ.

Au chargement du contrôle nous ajoutons l’évènement qui, après validation de la page, effectuera l’update de l’item.

6) Surchargeons le « FieldRenderingControl » de la classe de notre champ.

La dernière étape est de modifier notre classe « TutoCustomField » afin d’ajouter une surcharge appelant notre nouvelle classe « TutoCustomFieldControl ».

Voilà, maintenant nous pouvons déployer notre solution. Si vous avez fait le test du champ à la fin du point 3, la mise à jour du code ne sera pas effective sur ce champ. Supprimez-le pour le recréer pour que la solution fonctionne !

7) Modifier l’affichage dans la liste.

Nous pouvons aller un peu plus loin en modifiant le rendu du champ dans la liste.

Pour cela nous devons ajouter un fichier xsl. Commençons par mapper le dossier xsl, celui ci se trouve dans le dossier « SharePointRoot\template\layouts »

Ajoutons ensuite un fichier xsl

Très important ! : Il faut que le fichier xsl porte le même nom que le fichier xml de notre champ. Il doit donc s’appeler : « fldtypes_TutoCustomField.xsl »

Nous allons changer la couleur du texte en rouge, pour cela il suffit d’ajouter un « span » autour du champ

Faites bien attention au « FieldType » qui doit correspondre au type de notre champ.

Déployons notre solution, sans oublier de faire un iisreset pour que le nouveau fichier soit prit en compte.

Et voila !

Bon codage à tous !

Christopher.

Cet article, publié dans SharePoint 2010, est tagué , , . Ajoutez ce permalien à vos favoris.

2 commentaires pour Créer un custom field type avec user control.

  1. Thomas dit :

    Tres utile, merci!

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s