Partager via

Procédure pas à pas : personnalisation des titres d’élément sur des formulaires 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 RenderingTemplate personnalisé. L’exemple montre comment personnaliser, sur le formulaire Affichage d’élément de liste mobile, le champ Titre d’un élément dans une liste Annonces. Pour obtenir une vue d’ensemble des étapes de personnalisation des champs sur les pages mobiles, voir Procédure : personnaliser le rendu des champs sur les pages mobiles.

Comme indiqué dans Système de rendu des pages mobiles, une chaîne d’appels, démarrée par un contrôle sur la page, aboutit à un appel à un contrôle RenderingTemplate dont l’ID présente le format suivant : MobileCustomListField_IDTypeListe_TypeChamp_Champ.

IDTypeList est soit le numéro d’identification du type de la liste active (par exemple 105) ou l’une des valeurs de l’énumération SPListTemplateType (par exemple Contacts). TypeChamp est le type de données du champ, par exemple, Text ou Number, et Champ est le nom du champ, par exemple WorkPhone. Si aucun RenderingTemplate avec cet ID n’existe, le RenderingTemplate avec l’ID MobileDefaultListField est utilisé.

Microsoft SharePoint Foundation ne contient aucun contrôle RenderingTemplate avec l’ID MobileCustomListField_Announcements_Text_Title. Dans cette procédure pas à pas, vous allez en créer un qui substitue, sur le formulaire Affichage mobile pour un élément dans la liste Annonces, un nouveau titre pour l’élément.

Pour personnaliser le champ Titre d’un élément Annonces

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

  2. Ajoutez un dossier mappé SharePoint à TEMPLATE\ControlTemplates.

  3. Cliquez avec le bouton droit sur le nouveau dossier et ajoutez un contrôle utilisateur SharePoint. Attribuez au fichier ascx un nom qui le différencie de ceux des autres fournisseurs de solutions, par exemple, modèles_rendu_mobile_contoso.ascx. Visual Studio ajoute automatiquement le fichier au manifeste de solution SharePoint et le configure afin qu’il soit déployé sur %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates.

    ConseilConseil

    N’ajoutez pas le contrôle utilisateur en cliquant avec le bouton droit sur le projet dans l’Explorateur de solutions. Lorsque vous ajoutez un contrôle utilisateur de la sorte, 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.

  4. Supprimez les fichiers .ascx.cs et .ascx.designer.cs (ou .ascx.vb et .ascx.designer.vb). Ils ne sont pas nécessaires pour ce projet.

  5. Remplacez toute la section de directives du fichier .ascx par le balisage 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" %>

  6. 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>

  7. Dans l’élément RenderingTemplate, définissez un élément Template ayant un contrôle enfant Label. Définissez l’attribut Text de l’étiquette comme indiqué.

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

  8. Dans le menu Générer, sélectionnez Déployer la solution. Cette opération enregistre automatiquement le fichier .ascx, le déploie dans %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates et recycle l’application Web, ce qui permet de recharger tous les fichiers .ascx situés dans ce dossier.

  9. À l’aide de votre périphérique ou émulateur, accédez à une liste Annonces qui comporte au moins un élément. Cliquez sur un élément pour l’afficher. Le nouveau titre doit apparaître comme indiqué dans l’image ci-dessous.

Formulaire mobile personnalisé d’affichage 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