Share via

モバイル リスト ビュー ページをカスタマイズする

  • [アーティクル]

最終更新日: 2011年2月2日

適用対象: SharePoint Foundation 2010

このチュートリアルでは、カスタム RenderingTemplate コントロールを実装することでモバイル リスト ビュー ページをカスタマイズする方法を示します。例では、ページの本文 (コンテンツ) セクションのカスタマイズ方法について説明します。モバイル フォームまたはリスト ビュー ページのセクションをカスタマイズする方法の概要については、「[方法] モバイル リスト ビュー ページおよびフォーム ページをカスタマイズする」を参照してください。

「モバイル ページのレンダリング システム」で説明されているように、リスト ビュー ページの本文領域は、Mobile_ListTypeID_View_Contents という名前の RenderingTemplate オブジェクトを呼び出すことで終了する一連の呼び出しによってレンダリングされます。ListTypeID はリスト定義の ID 番号か SPListTemplateType 値です。この ID の RenderingTemplate オブジェクトが存在しない場合は、ID が Mobile_Default_View_Contents である RenderingTemplate オブジェクトが使用されます。

Microsoft SharePoint Foundation では、ID が Mobile_Announcements_View_Contents (または、同じリストの種類を参照する Mobile_104_View_Contents) である RenderingTemplate クラス オブジェクトがありません。このチュートリアルでは、お知らせリストに上記のあいさつを追加するクラス オブジェクトを作成します。

手順

モバイルの [お知らせ] ビュー ページの本文セクションをカスタマイズするには

  1. Microsoft Visual Studio で、空の SharePoint プロジェクトを作成し、そのプロジェクトをサンドボックス ソリューションではなくファーム ソリューションにします。

  2. [SharePoint のマップされたフォルダー] を TEMPLATE\ControlTemplates に追加します。

  3. 新しいフォルダーを右クリックし、SharePoint ユーザー コントロールを追加します。.ascx ファイルに、他のソリューション プロバイダーの名前と簡単に区別できる名前 (ContosoMobileRenderingTemplates.ascx など) を付けます。Visual Studio により、ファイルが SharePoint Solution マニフェストに自動的に追加され、%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates に展開されるように設定されます。

    ヒントヒント

    ソリューション エクスプローラーでプロジェクトを右クリックしてユーザー コントロールを追加しないでください。この方法でユーザー コントロールが追加されると、Visual Studio は、そのコントロールを TEMPLATE\ControlTemplates のサブフォルダーに追加します。その後、Visual Studio は、移動されなかったコントロールを、%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\ControlTemplates の対応するサブフォルダーに展開します。サブフォルダー内のモバイル版のレンダリング テンプレートは読み込まれません。

  4. .ascx.cs ファイルと .ascx.designer.cs (または .ascx.vb および .ascx.designer.vb) ファイルを削除します。これらのファイルはこのプロジェクトでは必要ありません。

  5. .ascx ファイルのディレクティブ セクション全体を次のマークアップで置き換えます。

    <%@ 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. ディレクティブの下に RenderingTemplate オブジェクトを追加し、ビュー ページの SPMobileListContents オブジェクトが検索する ID (Mobile_104_View_Contents) を指定します。

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

</SharePoint:RenderingTemplate>

  7. RenderingTemplate 要素内で、Label 子コントロールを持つ Template 要素を定義します。ラベルの Text 属性を、次のコードで示すように設定します。

    <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. [ビルド] メニューで [ソリューションの展開] を選択します。これにより, .ascx ファイルが自動的に保存され、%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATES\ControlTemplates に展開され、Web アプリケーションがリサイクルされるので、そのフォルダーにあるすべての .ascx ファイルが再度読み込まれます。

  9. デバイスまたはエミュレーターを使用して、[お知らせ] リストに移動します。次のスクリーンショットのように、リストの上部にあいさつが表示されます。

モバイル リスト ビュー内のカスタマイズされた本文セクション

関連項目

タスク

[方法] モバイル リスト ビュー ページおよびフォーム ページをカスタマイズする

概念

モバイル ページのレイアウトと改ページ

モバイル ページのレンダリング システム

その他の技術情報

モバイル開発の方法およびウォークスルー