Partager via

Procédure pas à pas : personnalisation d'une page mobile d'affichage de liste

  • Article

Dernière modification : mercredi 2 février 2011

S’applique à : SharePoint Foundation 2010

Cette procédure pas à pas explique comment personnaliser une page mobile d’affichage de liste en implémentant un contrôle RenderingTemplate personnalisé. L’exemple montre comment personnaliser la section de corps (contenu) de la page. Pour une présentation de la personnalisation de toute section d’une page d’affichage de liste ou de formulaire mobile, voir Procédure : modifier les pages de formulaire et d'affichage de liste mobiles.

Comme indiqué dans Système de rendu des pages mobiles, la zone de corps d’une page d’affichage de liste est restituée par une chaîne d’appels qui se termine par l’appel d’un objet RenderingTemplate appelé Mobile_IDTypeListe_View_Contents, ou IDTypeListe représente le numéro d’ID d’une définition de liste ou une valeur SPListTemplateType. Si aucun objet RenderingTemplate avec cet ID n’existe, l’objet RenderingTemplate avec l’ID Mobile_Default_View_Contents est utilisé.

Dans Microsoft SharePoint Foundation, il n’existe aucun objet de classe RenderingTemplate avec l’ID Mobile_Announcements_View_Contents (ou Mobile_104_View_Contents, qui fait référence au même type de liste). Dans cette procédure pas à pas, vous allez en créer un qui permet d’ajouter un message de bienvenue au-dessus de la liste Announcements (Annonces).

Procédure

Pour personnaliser la section de contenu de la page d'affichage Announcements (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 mode 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. Lorsqu’un contrôle utilisateur est ajouté 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 marquage ci-après.

    <%@ 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 objet RenderingTemplate et attribuez-lui l’ID que l’objet SPMobileListContents sur la page d’affichage recherche : Mobile_104_View_Contents.

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

</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é dans le code suivant :

    <Template>
    <SPMobile:SPMobileControlContainer RunAt="Server">
      <SPMobile:SPMobileComponent RunAt="Server" 
         TemplateName="MobileViewPicker" />
      <SPMobile:SPMobileComponent RunAt="Server" 
         TemplateName="MobileDefaultSeparator" />
    </SPMobile:SPMobileControlContainer>
    <mobile:Label RunAt="Server" 
      Text="Hello SharePoint Mobile User!"/>
    <SPMobile:SPMobileListItemIterator RunAt="Server" 
       ListItemSeparatorTemplateName="MobileListItemSeparator" />
</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. Accédez à la liste Announcements (Annonces) à l’aide de l’appareil mobile ou de l’émulateur. Le message de bienvenue doit s’afficher au-dessus de la liste, comme illustré dans la capture d’écran ci-après.

Section de corps personnalisée en affichage de liste mobile

Voir aussi

Tâches

Procédure : modifier les pages de formulaire et d'affichage de liste mobiles

Concepts

Mise en page et pagination des pages mobiles

Système de rendu des pages mobiles

Autres ressources

Procédures et procédures pas à pas relatives au développement mobile