Procédure : créer un type de champ et un contrôle de champ personnalisés

Windows SharePoint Services 3

Pour créer un type de champ personnalisé, vous pouvez étendre un type de champ Windows SharePoint Services par défaut en définissant un type de champ personnalisé et un contrôle pour afficher le champ, puis en ajoutant une définition de type de champ afin d'inscrire le type de champ et son contrôle. Vous pouvez créer un projet de bibliothèque de classes qui définit des classes personnalisées pour le type de champ et le contrôle, copier la DLL de votre projet dans Global Assembly Cache, puis ajouter un fichier XML contenant une définition qui fait référence à la DLL vers Lecteur_Local:\\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\XML.

Types de champs et contrôles de champs

La plupart des types de champs définis dans l'espace de noms Microsoft.SharePoint sont associés aux contrôles de champs définis dans l'espace de noms Microsoft.SharePoint.WebControls. Par exemple, la classe SPFieldText, qui définit le type de champ pour une seule ligne de texte, est associée à la classe Microsoft.SharePoint.WebControls.TextField, qui est spécialement conçue pour afficher un objet SPFieldText. Un type de champ définit les métadonnées spécifiques à une instance de champ. Un contrôle de champ définit la logique et le comportement de l'affichage des données en fonction des trois modes de contrôle utilisés dans les listes SharePoint : New, Display et Edit. Pour plus d'informations sur le modèle objet pour les types de champs et les contrôles de champs, voir Types de champ personnalisés.

Vous définissez une classe de type de champ et son contrôle en créant un assembly. Vous inscrivez la classe et son assembly, et spécifiez également les métadonnées et les modèles d'affichage, par le biais d'un fichier XML écrit en Schémas principaux du langage CAML (Collaborative Application Markup Language).

Exemple

L'exemple suivant définit un champ personnalisé pour l'affichage des logos de société, qui dérive de la classe SPFieldText.

using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI;
using System.Web.UI.WebControls;


namespace MS.Samples.SharePoint.CustomFieldType
{
    public class MyCompanyLogoField : SPFieldText
    {
        public MyCompanyLogoField(SPFieldCollection fields, string fieldName)
            : base(fields, fieldName)
        {}

        public MyCompanyLogoField(SPFieldCollection fields, string typeName, string displayName)
            : base(fields, typeName, displayName)
        {}

        public override BaseFieldControl FieldRenderingControl
        {
            get
            {
                BaseFieldControl fieldControl = new CompanyLogoPickerFieldControl(this);

                fieldControl.FieldName = InternalName;

                return fieldControl;
            }
        }
    }
}

L'exemple se substitue à la propriété FieldRenderingControl pour appeler un constructeur CompanyLogoPickerFieldControl personnalisé, défini dans l'exemple suivant.

Exemple

L'exemple suivant définit un contrôle personnalisé pour afficher le champ personnalisé précédent. L'exemple se substitue à la méthode CreateChildControls pour définir une table afin d'afficher une ListBox déroulante et les images correspondantes permettant de sélectionner des logos de société.

L'exemple spécifie un fichier image par défaut, MyDefaultLogo.png, à utiliser pour des logos de société, mais vous pouvez utiliser le nom ou le type de fichier image de votre choix.

using System;
using System.Collections.Generic;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace MS.Samples.SharePoint.CustomFieldType
{
    public class CompanyLogoPickerFieldControl : TextField
    {
        private MyCompanyLogoField field;
        private ListBox listBox;
        private HtmlTable table;

        public CompanyLogoPickerFieldControl(MyCompanyLogoField parentField)
        {
            this.field = parentField;
            this.listBox = new ListBox();
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
        }

        protected override void CreateChildControls()
        {
            base.CreateChildControls();

            this.table = new HtmlTable();

            HtmlTableRow row = new HtmlTableRow();
            table.Rows.Add(row);

            HtmlTableCell cell = null;

            if (this.ControlMode == SPControlMode.Edit || this.ControlMode == SPControlMode.New)
            {
                cell = new HtmlTableCell();

                cell.ColSpan = 2;
                cell.Attributes["class"] = "ms-formdescription";
                cell.InnerText = "Choose a logo:";

                row = new HtmlTableRow();
                table.Rows.Add(row);

                cell = new HtmlTableCell();
                row.Cells.Add(cell);

                // Create a list selector.
                this.listBox = new ListBox();
                this.listBox.Rows = 12;

                SPSite site = SPContext.GetContext(this.Context).Site;

                SPDataSource dataSource = new SPDataSource();
                dataSource.List = site.RootWeb.Lists["Logos"];

                this.listBox.DataSource = dataSource;
                this.listBox.DataTextField = "Title";
                this.listBox.DataValueField = "Name";

                this.listBox.DataBind();

                // Get the current value of the field.
                String currentValue = (String)this.ItemFieldValue;

                if (currentValue != null && currentValue != String.Empty)
                {
                    this.listBox.SelectedValue = currentValue;
                }
                else if (this.listBox.Items.Count > 0)
                {
                    this.listBox.SelectedIndex = 0;
                }

                // Add the script which updates the preview image.
                this.listBox.Attributes["onchange"] = "document.all.imgLogoPreview.src = '/logos/' + this.options[this.selectedIndex].value;";
                cell.Controls.Add(this.listBox);
                row.Cells.Add(cell);
            }

            cell = new HtmlTableCell();

            LiteralControl literalControl = new LiteralControl();

            String logo = null;
            object logoObject = this.ItemFieldValue;

            if (logoObject != null)
            {
                logo = (String)logoObject;
            }

            if (logo == null || logo == String.Empty)
            {
                logo = "MyDefaultLogo.png";
            }

            literalControl.Text = "<img id='imgLogoPreview' src='/logos/" + logo + "'></img>";

            cell.Controls.Add(literalControl);

            row.Cells.Add(cell);

            base.Controls.Add(table);
        }

        public override void UpdateFieldValueInItem()
        {
            this.EnsureChildControls();

            try
            {
                this.Value = this.listBox.SelectedValue;
                this.ItemFieldValue = this.Value;
            }
            catch (Exception)
            {
                ;
            }
        }

        protected override void Render(HtmlTextWriter output)
        {
            this.table.RenderControl(output);
        }
    }
}

Pour créer un type de champ personnalisé et un contrôle de champ personnalisé

  1. Dans Microsoft Visual Studio, cliquez sur Fichier, pointez sur Nouveau, puis cliquez sur Projet.

  2. Dans la boîte de dialogue Nouveau projet, sélectionnez la langue de votre projet dans la zone Types de projets, sélectionnez Bibliothèque de classes dans la zone Modèles, tapez un nom et un emplacement de génération du projet, puis cliquez sur OK.

  3. Pour ajouter une référence à l'assembly Microsoft.SharePoint, cliquez avec le bouton droit sur le projet dans l'Explorateur de solutions, sous l'onglet .NET de la boîte de dialogue Ajouter une référence, sélectionnez Windows SharePoint Services, puis cliquez sur OK.

  4. Pour donner à votre assembly personnalisé un nom fort lors de la génération du projet, cliquez avec le bouton droit sur Propriétés dans l' Explorateur de solutions, cliquez sur Signature, sélectionnez Signer l'assembly, puis spécifiez un nom pour le fichier de clé de nom fort.

  5. Double-cliquez sur le fichier projet .cs ou .vb par défaut dans l'Explorateur de solutions et ajoutez le même code que dans le premier exemple pour définir une classe pour un champ personnalisé qui étend un type de champ Windows SharePoint Services par défaut.

  6. Cliquez avec le bouton droit sur le projet dans l'Explorateur de solutions, pointez sur Ajouter, puis cliquez sur Nouvel élément.

  7. Sélectionnez Fichier de code dans la boîte de dialogue Ajouter un nouvel élément, puis cliquez sur Ajouter.

  8. Dans l'Explorateur de solutions double-cliquez sur le nouveau fichier .cs ou .vb que vous avez créé à l'étape précédente et ajoutez le même code que vous avez ajouté dans le deuxième exemple pour définir un contrôle afin d'afficher le champ personnalisé qui étend un contrôle de champ Windows SharePoint Services par défaut.

  9. Appuyez sur Ctrl+Maj+B pour générer la solution.

  10. Dans l'Explorateur Windows, faites glisser la DLL à partir de votre dossier de projet vers le Global Assembly Cache.

Exemple

L'exemple suivant inscrit le type de champ personnalisé qui est défini dans l'exemple précédent.

<?xml version="1.0" encoding="utf-8" ?>
<FieldTypes>
  <FieldType>
    <Field Name="TypeName">MyCompanyLogoField</Field>
    <Field Name="ParentType">Text</Field>
    <Field Name="TypeDisplayName">My Company Logo</Field>
    <Field Name="TypeShortDescription">My Company Logo</Field>
    <Field Name="UserCreatable">TRUE</Field>
    <Field Name="Sortable">TRUE</Field>
    <Field Name="AllowBaseTypeRendering">TRUE</Field>
    <Field Name="Filterable">TRUE</Field>
    <Field Name="FieldTypeClass">MS.Samples.SharePoint.CustomFieldType.MyCompanyLogoField, MyExtendedFieldTypeControl1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=34b96198b6e14eee</Field>
    <PropertySchema>
      <Fields></Fields>
    </PropertySchema>
    <RenderPattern Name="DisplayPattern">
      <HTML><![CDATA[<img style="zoom: 50%" src="/logos/]]></HTML>
      <Column HTMLEncode="TRUE" />
      <HTML><![CDATA[">]]></HTML>
    </RenderPattern>
  </FieldType>
</FieldTypes>

L'élément RenderPattern, élément (Types de champs) définit le mode d'affichage du champ dans l'affichage de liste Tous les éléments.

Ce fichier doit être nommé dans le format fldtypes*.xml (par exemple, fldtypes_customfield.xml) et placé dans Lecteur_Local:\\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\XML de sorte que Windows SharePoint Services fusionne le contenu de votre fichier personnalisé avec le fichier FLDTYPES.XML par défaut.

Pour plus d'informations sur le schéma d'un type de champ personnalisé, voir Définition de type de champ personnalisé.

Pour inscrire et tester l'exemple

  1. Dans un éditeur de texte, créez un fichier de définition de type de champ CAML dans \TEMPLATE\XML qui spécifie le type de champ et le contrôle personnalisés que vous avez créés à l'aide de la procédure ci-dessus.

  2. Ajoutez le fichier CAML au répertoire Lecteur_Local:\\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\XML.

  3. À l'invite de commandes, tapez iisreset pour réinitialiser les services Internet (IIS).

  4. Dans le site Web racine d'une collection de sites, créez une bibliothèques d'images nommée « logos » pour contenir les fichiers image à utiliser pour les logos de société.

  5. Dans un affichage de la liste auquel vous souhaitez ajouter le type de champ personnalisé, cliquez sur Paramètres, puis sur Créer une colonne.

  6. Dans la page Créer une colonne, ajoutez le type de champ à l'affichage, qui dans l'exemple précédent est appelé My Company Logo.

  7. Modifiez les éléments existants ou créez des éléments dans la liste pour spécifier des logos de société qui sont affichés dans tous les trois modes de contrôle et dans l'affichage de liste.

Voir aussi

Afficher: