Windows Phone アプリのリスト アイテムのクエリとフィルター データをカスタマイズするCustomize list item queries and filter data for Windows Phone apps

Windows Phone アプリのビューの基になるデータのクエリをカスタマイズする方法を説明します。 Windows Phone SharePoint リスト アプリケーション テンプレートから作成されたプロジェクトでは、開発者はテンプレートに実装されたデザイン パターンを利用して、Windows Phone アプリのデータ レイヤー部をカスタマイズすることができます。Windows Phone アプリの SharePoint リストのビューは Microsoft SharePoint Server で設定して電話のアプリにそのまま含めることができ、またはそのアプリ用にカスタム ビューを作成することができます。Customize the data queries on which the views in a Windows Phone app are based. With projects created from the Windows Phone SharePoint List Application template, developers can take advantage of a design pattern implemented in the template that allows them to customize parts of the data layer for a Windows Phone app. A view of a SharePoint list in a Windows Phone app can be configured in Microsoft SharePoint Server and included as is in the app on the phone, or a custom view can be created for the app.

重要: Windows Phone 8 用アプリを開発している場合は、Visual Studio 2010 Express ではなく Visual Studio Express 2012 を使用する必要があります。Important: If you are developing an app for Windows Phone 8, you must use Visual Studio Express 2012 instead of Visual Studio 2010 Express. 開発環境を除き、この記事のすべての情報は、Windows Phone 8 用アプリと Windows Phone 7 用アプリを作成する場合に適用されます。Except for the development environment, all information in this article applies to creating apps for both Windows Phone 8 and Windows Phone 7. > 詳細については、「方法: SharePoint 用モバイル アプリの開発環境をセットアップする」を参照してください。> For more information, see How to: Set up an environment for developing mobile apps for SharePoint.

Windows Phone アプリで使用するためにサーバー上のリスト ビューを構成するConfigure list views on the server for use in Windows Phone apps

Windows Phone SharePoint List Application テンプレートを使用して Windows Phone 用の SharePoint リスト アプリケーションを作成するとき、対象となる SharePoint リストに関連付けられた既存のビューをアプリに含めるかどうかを選択できます。電話に表示されるリストのように SharePoint リストで項目にフィルターを設定する 1 つの方法は、サーバー上のリストにフィルター適用ビューを設定し、そのビューを選択して Windows Phone アプリに含めることです。Windows Phone SharePoint リスト アプリケーション テンプレート ウィザードは、選択したビューに対する Collaborative Application Markup Language (CAML) クエリを生成し、クエリにはサーバーのビューに対して設定されたフィルター適用条件が含まれます。たとえば、サーバー上に Tasks リストのテンプレートを基にしたリストがあるとします。たとえば、Description フィールドに "holiday" や "party" などの言葉が含まれているときだけリスト項目を表示するというフィルター適用条件を追加して、会社の休日パーティの計画に関連する項目のみを含んだ "Holiday Party" という名前のビューをリストに作成することができます。Windows Phone アプリでは、CAML マークアップは次の内容に類似したビューを生成します (アプリに含めるために選択したフィールドにより異なります)。When you create a SharePoint list app for a Windows Phone by using the Windows Phone SharePoint List Application template, you can choose to include in your app any existing views that are associated with the target SharePoint list. One of the ways to filter items in a SharePoint list as the list appears on the phone, then, is to configure a filtered view for the list on the server and then to select that view to be included in your Windows Phone app. The Windows Phone SharePoint List Application template wizard generates a Collaborative Application Markup Language (CAML) query for the selected view that includes the filtering conditions configured for the view on the server. You might, for example, have a list on the server that is based on the Tasks list template. You can create a view for the list named "Holiday Party" that includes only items related to, for example, planning a company holiday party by adding a filter condition to show list items only when the Description field contains the words "holiday" or "party". In the Windows Phone app, the CAML markup generated for the view would resemble the following (depending on the fields chosen to be included in your app).


<View>
    <Query>
        <Where>
            <Or>
                <Contains>
                    <FieldRef Name='Body' />
                    <Value Type='Note'>holiday</Value>
                </Contains>
                <Contains>
                    <FieldRef Name='Body' />
                    <Value Type='Note'>party</Value>
                </Contains>
            </Or>
        </Where>
    </Query>
    <RowLimit>30</RowLimit>
    <ViewFields>
        <FieldRef Name='Title'/>
        <FieldRef Name='Body'/>
        <FieldRef Name='AssignedTo'/>
        <FieldRef Name='Status'/>
        <FieldRef Name='PercentComplete'/>
        <FieldRef Name='StartDate'/>
        <FieldRef Name='DueDate'/>
        <FieldRef Name='Checkmark'/>
    </ViewFields>
</View>

プロジェクトを作成するとき、Windows Phone アプリに含めるために選択する Tasks リストのその他の既存ビューと同様に、選択したビューに対応する PivotItem コントロールが、アプリの主なユーザー インターフェイス (UI) を構成する Pivot コントロールに追加されます。As with other existing views for the Tasks list that you choose to include in your Windows Phone app when you create your project, a PivotItem control corresponding to the chosen view is added to the Pivot control that constitutes the main user interface (UI) element in the app.

Windows Phone アプリのリスト ビュー クエリのカスタマイズCustomize list view queries in the Windows Phone app

様々な理由により、サーバー上のリストに対するデザインのニーズにすべて合致するビューを、正しく適切に設定できないことがあります。Windows Phone SharePoint リスト アプリケーション テンプレートから作成された Microsoft Visual Studio プロジェクトでは、開発者はデータ レイヤーと呼ばれる要素が利用可能で、主にプロジェクトの ListDataProvider.cs ファイルを介して利用できます。既存のビューに定義された CAML を修正することができ、また ListDataProvider.cs file ファイルの新規ビューの CAML クエリを追加することができます。For one reason or another, it may not be possible or reasonable to configure views that meet all of your design needs for a given list on the server. In a Microsoft Visual Studio project created from the Windows Phone SharePoint List Application template, aspects of what may be called the data layer are made available to developers, primarily through the ListDataProvider.cs file in the project. You can modify the CAML defined for an existing view, or you can add CAML queries for new views in the ListDataProvider.cs file.

ListDataProvider.cs ファイルThe ListDataProvider.cs file

Windows Phone SharePoint リスト アプリケーション テンプレートを基にしたプロジェクトでは、ListDataProvider.cs ファイルは、Windows Phone アプリのビューのデータ ソースとしての SharePoint リストへのアクセスや設定を提供するオブジェクトを定義します。List.xaml ファイルでは、アプリのメイン アプリケーションのページが定義され、 Pivot コントロール (それ自身に PivotItem 子コントロールを含む) が LoadedPivotItem イベントに割り当てられたイベント ハンドラーと共に宣言されます。ListDataProvider.cs ファイルの LoadDataFromServer メソッドは、 PivotItem コントロール (Windows Phone アプリのリスト項目のレンダリング コンテナーとして使用される) が、アプリのメイン アプリケーションのページにロードされると、最終的に呼び出されます。In a project based on the Windows Phone SharePoint List Application template, the ListDataProvider.cs file defines objects that provide for accessing and configuring a SharePoint list as a data source for the views in the Windows Phone app. In the List.xaml file, which defines the main application page for the app, a Pivot control (itself containing the child PivotItem controls) is declared with an event handler assigned to its LoadedPivotItem event. The LoadDataFromServer method in the ListDataProvider.cs file is ultimately called when a PivotItem control (which is used as the rendering container for list items in the Windows Phone app) is loaded on the main application page of the app.

  1. リスト ビューに関連付けられた PivotItem が UI にロードされます。The PivotItem associated with a given list view is loaded in the UI.

  2. List.xaml.cs では、 LoadedPivotItem イベントのハンドラーは、ListViewModel.cs ファイルに実装された LoadData メソッドを呼び出し、ロードが完了した PivotItem コントロールの名前を渡します (Windows Phone SharePoint リスト アプリケーション テンプレートを基にしたプロジェクトの設計では、 PivotItem コントロールの名前は、ListViewModel.cs の CamlQueryBuilder クラスに定義された Dictionary 型の ViewXmls のコントロールに関連付けられたビューに対する CAML クエリ文字列のキーの値と同じものがセットされます)。In the List.xaml.cs file, the handler for the LoadedPivotItem event calls the LoadData method implemented in the ListViewModel.cs file, passing the name of the PivotItem control that has finished loading. (In the design of projects based on the Windows Phone SharePoint List Application template, the name of a given PivotItem control is set to be the same as the key value for the CAML query string for the view associated with that control in the ViewXmls Dictionary type defined in the CamlQueryBuilder class in ListViewModel.cs.)

  3. ListViewModel.cs の LoadData メソッドは、ListDataProvider.cs ファイルに実装された LoadData メソッドを呼び出します。The LoadData method in ListViewModel.cs calls the LoadData method implemented in the ListDataProvider.cs file.

  4. また ListDataProvider.cs の LoadData メソッドは、同じファイルに実装された LoadDataFromServer メソッドも呼び出します。 LoadDataFromServer メソッドは、次の処理を行います。The LoadData method in ListDataProvider.cs calls the LoadDataFromServer method also implemented in that same file. The LoadDataFromServer method then does the following:

  5. ビューに関連付けられた CAML クエリ文字列を取得する。Gets the CAML query string associated with a given view.


CamlQuery query = CamlQueryBuilder.GetCamlQuery(ViewName);
  1. 取得するリストのクライアント オブジェクト モデルを登録する。Registers with the client object model the list to be retrieved.
  ListItemCollection items = Context.Web.Lists.GetByTitle(ListTitle).GetItems(query);
  1. リスト項目とそのリスト項目のフィールドを、(テキスト値として) 返却する必要があることをクライアント オブジェクト モデルに指示する。Indicates to the client object model that it should return the list items and the fields of those list items (as text values).
  Context.Load(items);
Context.Load(items, listItems => listItems.Include(item => item.FieldValuesAsText));
  1. ExecuteQueryAsync を呼び出し、SharePoint Server に要求を送信し、データを取得する (非同期)。Calls ExecuteQueryAsync to send the requests to SharePoint Server and retrieve the data (asynchronously).

カスタム リスト ビュー クエリと対応する UI 要素の追加Add a custom list view query and corresponding UI elements

ご自身のプロジェクトでは、独自のカスタム CAML クエリ文字列とリスト ビューを追加するために設計されたデータ レイヤーを利用することができます。In your own projects, you can take advantage of the way the data layer is designed to add your own custom CAML query strings and list views.

次に示すコード例では、SharePoint Server のターゲットインストールに、顧客リスト テンプレートから作成された製品オーダー リストがあり、トピック「方法: SharePoint 用 Windows Phone アプリでビジネス ロジックとデータ検証を実装する」の「表 1」に示されているフィールドと種類で構成されていることを前提としています。For the following code sample, assume again that the target installation of SharePoint Server has a Product Orders list created from the Custom List template, configured with the fields and types indicated in Table 1 in the topic How to: Implement business logic and data validation in a Windows Phone app for SharePoint. ソースとして製品オーダー リストなどのリストを使用する Windows Phone の SharePoint リスト アプリケーション テンプレートに基づいてプロジェクトを作成します (「方法: Windows Phone 用 SharePoint 2013 リスト アプリを作成する」を参照)。Create a project based on the Windows Phone SharePoint List Application template that uses a list like the Product Orders list as a source (as described in How to: Create a Windows Phone SharePoint list app). この例の目的のために、Windows Phone アプリにカスタム ビューを追加しています (server.md のリストに追加するのではありません)。このビューは、オーダーされた数量が 100 以上の製品オーダーのみを表示するようにフィルター処理されます。For the purposes of this example, we add a custom view to the Windows Phone app (not to the list on the server.md) that is filtered to display only those product orders in which the quantity ordered is 100 or more.

カスタムのクエリとビューを追加するにはTo add a custom query and view

  1. ソリューション エクスプローラー で、ListDataProvider.cs ファイルをダブルクリックし (またはファイルを選択して F7キーを押す)、編集するファイルを開きます。In Solution Explorer, double-click the ListDataProvider.cs file (or choose the file and press F7) to open the file for editing.

  2. 静的 CamlQueryBuilder クラスの ViewXmls Dictionary 型の定義を更新して、適切なフィルター適用条件を規定する WHERE 句のある追加の CAML クエリを含めます。Update the definition of the ViewXmls Dictionary type in the static CamlQueryBuilder class to include an additional CAML query, with a WHERE clause stipulating the appropriate filtering condition.


static Dictionary<string, string> ViewXmls = new Dictionary<string, string>()
{   
    {"View1",   @"<View><Query><OrderBy><FieldRef Name='ID'/>
        </OrderBy></Query><RowLimit>30</RowLimit><ViewFields>{0}</ViewFields></View>"},
    {"View2",   @"<View><Query><OrderBy><FieldRef Name='ID' /></OrderBy>
     <Where><Geq><FieldRef Name='Quantity' />
          <ValueType='Number'>100</Value>
                </Geq></Where>
             </Query><RowLimit>30</RowLimit>
               <ViewFields>{0}</ViewFields></View>"}
};
  1. List.xaml ファイルをダブルクリックし、編集するファイルを開きます。Double-click the List.xaml file to open the file for editing.

  2. マークアップを追加し、メインの Pivot コントロール内に追加の PivotItem 子コントロールを定義します。メインのアプリケーション ページを定義する UI 要素が宣言された Grid 要素は、次のようなコードにする必要があります。Add markup to define an additional child PivotItem control within the main Pivot control. The Grid element in which the UI elements that define the main application page are declared should resemble the following code.


<Grid x:Name="LayoutRoot" Background="Transparent"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls">
    <!--Pivot Control-->
    <ProgressBar x:Name="progressBar" Opacity="1" HorizontalAlignment="Center" 
     VerticalAlignment="Top" Height="30" Width="470" IsIndeterminate="{Binding IsBusy}" 
     Visibility="{Binding ShowIfBusy}" />
    <Grid x:Name="ContentPanel" Grid.Row="0" Width="470">
        <controls:Pivot Name="Views" Title="Product Orders" LoadedPivotItem="OnPivotItemLoaded">
            <!--Pivot item-->
            <controls:PivotItem Name="View1" Header="All Items">
                <!--Double line list with text wrapping-->
                <ListBox x:Name="lstBox1" Margin="0,0,-12,0" SelectionChanged="OnSelectionChanged" 
                 ItemsSource="{Binding [View1]}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical" Margin="10">
                                <TextBlock Name="txtTitle" Text="{Binding [Title]}" 
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextTitle2Style}" />
                                <TextBlock Name="txtDescription" Text="{Binding [Description]}" 
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" />
                                <TextBlock Name="txtQuantity" Text="{Binding [Quantity]}" 
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>                    
            </controls:PivotItem>

            <!--Added PivotItem control for customized view--><controls:PivotItem Name="View2" Header="Big Orders"><!--Double line list with text wrapping--><ListBox x:Name="lstBox2" Margin="0,0,-12,0" 
                 SelectionChanged="OnSelectionChanged" ItemsSource="{Binding [View2]}"><ListBox.ItemTemplate><DataTemplate><StackPanel Orientation="Vertical" Margin="10"><TextBlock Name="txtTitle" Text="{Binding [Title]}" 
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextTitle2Style}" /><TextBlock Name="txtDescription" Text="{Binding [Description]}" 
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" /><TextBlock Name="txtQuantity" Text="{Binding [Quantity]}" 
                                 TextWrapping="NoWrap" Style="{StaticResource PhoneTextNormalStyle}" /></StackPanel></DataTemplate></ListBox.ItemTemplate></ListBox></controls:PivotItem>

        </controls:Pivot>
    </Grid>
</Grid>
> [!NOTE]
> In particular that the value of the **Name** attribute ("View2") of the **PivotItem** control is the same as the key value of the entry added to the **Dictionary** type defined in step 2. This value is used to identify the appropriate CAML query to use to retrieve the data to be displayed in the **PivotItem**. Also note that the **ListBox** declared here (named "lstBox2" simply to distinguish it from the **ListBox** for the default view) is also bound to the view.

プロジェクトを開始するとき (F5 を押す)、アプリの Pivot コントロールには 2 つの PivotItem コントロールと、それぞれのビューに関連付けられた CAML クエリで取得するデータが含まれます。既定の [すべてのアイテム] ビューは、図 1 (サンプル データで) で表示されているように、すべての注文を表示します。When you start your project (by pressing F5), the Pivot control for the app includes the two PivotItem controls and the data retrieved by the CAML queries associated with their respective views. The default All Items view displays all the orders, as shown in Figure 1 (with sample data).

図 1. サンプル リストのすべての注文 (リスト項目)Figure 1. All orders (list items) in a sample list

サンプル リストのすべての注文 (リスト項目)

またカスタム ビューは、前の手順で定義されたように、100 以上の数量が指定された注文のみを含めるフィルターが適用された項目のリストを表示します。図 2 で示します。And the custom view, as defined in the preceding procedure, displays a filtered list of items that includes only those orders for which a quantity of 100 or more is specified, as shown in Figure 2.

図 2. 大量注文のみFigure 2. Only the big orders

大型の注文のみ

ビューの基になる CAML クエリとビューに関連付けられた UI 要素の両方に対し、その他多くのカスタマイズをすることができます。You can make many other customizations both to the CAML queries on which views are based and to the UI elements associated with views.

関連項目See also