Partager via

Procédure pas à pas : créer un contrôle de rendu de champ personnalisé pour les pages mobiles

  • Article

Dernière modification : mercredi 2 février 2011

S’applique à : SharePoint Foundation 2010

Cette procédure pas à pas montre comment personnaliser le rendu des champs dans les pages mobiles en implémentant un contrôle de rendu de champ personnalisé conjointement avec un objet RenderingTemplate. L’exemple de procédure montre comment personnaliser le champ Title d’un élément dans une liste Announcements sur les pages mobiles Afficher l’élément, Nouvel élément et Modifier l’élément. La personnalisation est différente pour les trois types de pages :

  • Formulaire d’affichage—Ajoute un lien de recherche qui permet aux utilisateurs d’utiliser Bing pour rechercher le titre de l’annonce sur Internet.

  • Formulaire de modification—Ajoute un texte par défaut lorsque la valeur de la colonne Expire est antérieure à la date actuelle.

  • Nouveau formulaire—Ajoute du texte par défaut afin d’afficher aux utilisateurs un format spécifique pour les valeurs.

Pour une vue d’ensemble des étapes de la personnalisation des champs des pages mobiles, voir Procédure : personnaliser le rendu des champs sur les pages mobiles.

Conditions requises

Effectuez au moins l’une des opérations suivantes :

Conseil : effectuez la procédure pas à pas décrite dans Procédure pas à pas : personnalisation des titres d’élément sur des formulaires mobiles.

Pour configurer le projet de champ personnalisé

  1. Dans Visual Studio, créez un projet SharePoint vide. Définissez-le en tant que solution de batterie de serveurs, et non solution en bac à sable (sandbox), et attribuez-lui le nom de MobileItemTitleField.

  2. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, puis sélectionnez Propriétés.

  3. Sous l’onglet Application de la boîte de dialogue Propriétés, entrez Contoso.SharePoint.MobileControls.ItemTitleField comme nom de l’assembly et entrez Contoso.SharePoint.MobileControls en guise d’espace de noms par défaut. Laissez le paramètre Framework cible défini sur .NET Framework 3.5.

  4. Si la zone Plateformes Solution du menu standardVisual Studio n’indique pas « Tout processeur » ou « x64 », ouvrez l’onglet Version et définissez le paramètre Plateforme cible sur « Tout processeur » ou « x64 ». Pour plus d’informations sur la décision à prendre, voir Procédure : définir le Framework et l’unité centrale cibles adéquats.

  5. Cliquez sur le bouton Enregistrer tous les fichiers de la barre d’outils.

  6. Cliquez avec le bouton droit sur le nom du projet dans l’Explorateur de solutions, pointez sur Ajouter, puis sélectionnez Nouvel élément.

  7. Dans la boîte de dialogue Ajouter un nouvel élément, sélectionnez Visual C#, puis Code dans l’arborescence Modèles installés.

  8. Dans la boîte de dialogue Modèles, sélectionnez Classepuis, dans le champ Nom, tapez ItemTitleField.cs. Cliquez sur Ajouter.

  9. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nœud Références, puis cliquez sur Ajouter une référence. Tout en maintenant enfoncée la touche Ctrl, sélectionnez System.Web et System.Web.Mobile sur l’onglet .NET de la boîte de dialogue Ajouter une référence. Cliquez sur OK.

  10. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nom du projet, pointez sur Ajouter, puis sélectionnez Dossier mappé SharePoint.

  11. Utilisez le contrôle d’arborescence qui s’ouvre pour mapper le dossier sur TEMPLATE\ControlTemplates, puis cliquez sur OK.

  12. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le nouveau dossier ControlTemplates (plutot que sur le nom du projet), pointez sur Ajouter, puis cliquez sur Nouvel élément.

  13. Dans la boîte de dialogue Ajouter un nouvel élément puis dans l’arborescence Modèles installés, sélectionnez SharePoint, puis 2010.

  14. Dans la boîte de dialogue Modèles, sélectionnez un contrôle utilisateur SharePoint et attribuez au fichier ascx le nom AnnouncementsItemTitleField.ascx. Cliquez sur Ajouter. Visual Studio ajoute automatiquement le fichier au manifeste de solution SharePoint et le configure de manière à ce qu’il soit déployé sur %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. En outre, il ajoute parallèlement l’assembly au manifeste et le configure de manière à ce qu’il soit déployé sur Global Assembly Cache (GAC).

    ConseilConseil

    N’ajoutez pas le contrôle utilisateur en cliquant avec le bouton droit sur le nom de projet dans l’Explorateur de solutions. Lorsquun contrôle utilisateur est ajouté de cette façon, Visual Studio le place dans un sous-dossier de TEMPLATE\ControlTemplates ; s’il n’est pas déplacé, Visual Studio le déploie dans un sous-dossier correspondant de %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates. Les modèles de rendu mobile situés dans des sous-dossiers ne sont pas chargés.

  15. Supprimez les fichiers AnnouncementsItemTitleField.ascx.cs et AnnouncementsItemTitleField.ascx.designer.cs qui sont créés automatiquement sous le fichier AnnouncementsItemTitleField.ascx. Ils ne sont pas nécessaires à ce projet. Le contenu par défaut d’AnnouncementsItemTitleField.ascx fait référence au fichier AnnouncementsItemTitleField.ascx.cs que vous venez de supprimer et le compilateur affiche un message d’avertissement relatif au fichier manquant. Ignorez l’avertissement : le contenu par défaut est modifié dans une étape ultérieure de cette rubrique.

Pour créer le contrôle de rendu

  1. Ouvrez le fichier ItemTitleField.cs du projet s’il n’est pas déjà ouvert et ajoutez les instructions using suivantes.

    using System.Web.UI.MobileControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.MobileControls;

  2. Ajoutez le modificateur d’accès public à la déclaration ItemTitleField s’il n’y figure pas déjà, puis modifiez la déclaration afin de spécifier qu’elle hérite de SPMobileBaseTextField.

    public class ItemTitleField : SPMobileBaseTextField
{

}

  3. Ajoutez la substitution suivante de la méthode CreateControlForDisplay().

    protected override MobileControl CreateControlForDisplay()
{
   string title = Convert.ToString(this.ItemFieldValue);
   if (!String.IsNullOrEmpty(title))
   {
      this.LabelControl.BreakAfter = false;
      this.LabelControl.Text = title + " ";

      this.LinkControl.BreakAfter = false;
      this.LinkControl.Text = "Search";
      this.LinkControl.href = "https://www.bing.com/search?q=" + title.Replace(' ', '+');

      Panel panel = new Panel();
      panel.BreakAfter = false;
      panel.Controls.Add(this.LabelControl);
      panel.Controls.Add(this.LinkControl);

      return panel;
   }
   return null;
}

    Notez que la première opération de cette méthode consiste à obtenir la valeur du champ Titre de l’élément de liste actuel. Cette valeur est stockée dans la propriété ItemFieldValue.

  4. Ajoutez la substitution suivante de la méthode CreateControlForNew.

    protected override MobileControl CreateControlForNew()
{
   MobileControl myNewControl = null;
   if (this.Field != null)
   {
      string text = "Group: Project Name";
      if (!this.Page.IsPostBack)
      {
         this.TextBoxControl.Text = text;
      }
      myNewControl = this.TextBoxControl;
   }
   return myNewControl;
}

  5. Ajoutez la substitution suivante de la méthode CreateControlForEdit.

    protected override MobileControl CreateControlForEdit()
{
   MobileControl myEditControl = null;
   if (this.Item != null && this.Field != null)
   {
      if (this.NeedEllipsisRendering)
      {
         myEditControl = this.CreateControlForDisplay();
      }
      else
      {
         if (!this.Page.IsPostBack)
         {
            string strEdit = this.Field.GetFieldValueForEdit(this.ItemFieldValue);
            string overDue = "OVERDUE: ";

            SPListItem item = this.ListItem;
            if (item["Expires"] != null)
            {
               System.DateTime date = (DateTime)item["Expires"];
               if (date.CompareTo(System.DateTime.Today) < 0)
               {
                  this.TextBoxControl.Text = overDue + strEdit;
               }
               else
               {
                  this.TextBoxControl.Text = strEdit;
               }
            }
         }
         myEditControl = this.TextBoxControl;
      }
   }
   return myEditControl;
}

Pour créer le modèle de rendu

  1. Ouvrez le fichier AnnouncementsItemTitleField.ascx et remplacez la section entière des directives par le marquage suivant.

    <%@ Register TagPrefix="GroupBoardMobile"   Namespace="Microsoft.SharePoint.Applications.GroupBoard.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#"   %> 
<%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %> 
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="SPMobile" Namespace="Microsoft.SharePoint.MobileControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register TagPrefix="WPMobile" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

  2. Ajoutez un enregistrement de préfixe de balise supplémentaire avec le code suivant.

    <%@ Register TagPrefix="Contoso" Namespace="Contoso.SharePoint.MobileControls" Assembly="$SharePoint.Project.AssemblyFullName$" %>

    Le jeton Visual Studio$SharePoint.Project.AssemblyFullName$ est remplacé par le nom d’assembly à quatre parties au moment de la génération du projet.

  3. Ajoutez une directive Import pour l’espace de noms Microsoft.SharePoint.

    <%@ Import Namespace="Microsoft.SharePoint" %>

  4. Sous les directives, ajoutez un élément RenderingTemplate et attribuez-lui l’ID recherché par le runtime : MobileCustomListField_Announcements_Text_Title.

    <SharePoint:RenderingTemplate RunAt="Server" ID="MobileCustomListField_Announcements_Text_Title" >

</SharePoint:RenderingTemplate>

  5. Dans l’élément RenderingTemplate, définissez un élément Template qui possède votre objet ItemTitleField personnalisé comme contrôle enfant.

    <Template>
  <Contoso:ItemTitleField RunAt="Server" />
</Template>

    Notez que ce fichier est similaire à celui créé dans Procédure pas à pas : personnalisation des titres d’élément sur des formulaires mobiles. Les différences sont les suivantes :

    • Une nouvelle directive Register est ajoutée pour enregistrer le préfixe de balise « Contoso ».

    • Une ligne qui importe l’espace de noms Microsoft.SharePoint est ajoutée.

    • La ligne suivante est mentionnée dans Procédure pas à pas : personnalisation des titres d’élément sur des formulaires mobiles :

      <mobile:Label Text="Title field in Announcements List" RunAt="Server" />

      Cette ligne est remplacée dans l’exemple de code de cette rubrique par cette ligne

      <Contoso:ItemTitleField RunAt="Server" />

      Ceci permet au modèle de rendu d’appeler le contrôle de rendu de champ que vous avez précédemment créé dans cette procédure pas à pas.

  6. Dans le menu Générer, sélectionnez Déployer la solution. Cette opération permet de reconstruire l’assembly, d’enregistrer le fichier ascx, de déployer l’assembly sur le GAC et le fichier ascx sur %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates, puis de recycler l’application Web automatiquement.

Tester le contrôle de rendu

Avec votre appareil portable ou votre émulateur, accédez dans votre application Web à un site Web qui possède une liste Annonces. Accédez à cette liste Annonces. Cliquez sur le lien Nouvel élément. Le résultat obtenu devrait ressembler à ceci :

Figure 1. Texte par défaut spécifié pour le champ du titre du formulaire de création

Formulaire mobile personnalisé de création d’élément

Créez un élément et attribuez-lui une valeurd’expiration correspondant à une date passée. Cliquez sur Enregistrer. Cette opération active l’affichage de liste. Cliquez pour afficher le nouvel élément. Le résultat obtenu devrait ressembler à celui de la Figure 2. Le lien Rechercher est ajouté à la fin du titre.

Figure 2. Lien de recherche ajouté au formulaire d’affichage

Formulaire mobile personnalisé d’affichage d’élément

Cliquez sur le lien Modifier. Le résultat obtenu devrait ressembler à celui de la Figure 3. Notez la mention « En retard » ajoutée au titre.

Figure 3. Rendu conditionnel du texte dans le champ du titre du formulaire de modification

Formulaire mobile personnalisé de modification d’élément

Voir aussi

Tâches

Procédure : personnaliser le rendu des champs sur les pages mobiles

Concepts

Mise en page et pagination des pages mobiles

Système de rendu des pages mobiles