クエリ結果 Web パーツの表示をカスタマイズする

  • Article

こんにちは、SharePoint サポートの佐伯です。
SharePoint のクエリ結果 Web パーツ (コンテンツ クエリ Web パーツ) は、以前から多くのお客様にご利用いただき、カスタマイズに関するお問い合わせもいただいてまいりました。
今回の投稿では、クエリ結果 Web パーツの設定と XSL のカスタマイズについて、一連の手順で説明します。特に、新着情報を表示したいというお問い合わせをよくいただきますので、参考例にしました。ご要望の表示を実現する際のご参考になりましたら幸いです。

なお、クエリ結果 Web パーツとよく比較検討されるコンテンツ検索 Web パーツについて、概要を説明します。その後、クエリ結果 Web パーツのカスタマイズ方法について説明します。

クエリ結果 Web パーツとコンテンツ検索 Web パーツについて
クエリ結果 Web パーツでは、データベースに対してクエリを実行し、サイト コレクション内のアイテムを取得します。(1) サイト コレクション内のすべてのサイトから、(2) 指定したサイトとそのサブ サイトから、(3) 指定したリストから、アイテムを取得することができます。
サイト コレクションをまたいでアイテムを取得することはできませんので、それらのアイテムを取得したい場合は検索の機能を使用します。コンテンツ検索 Web パーツでは、検索インデックスに対してクエリを実行し、アイテムを取得します。

クエリ結果 Web パーツ (コンテンツ クエリ Web パーツ) を使用するか、コンテンツ検索 Web パーツを使用するかを判断される際、下記の公開情報に 2 つの Web パーツを比較した情報がございますので、ぜひご参照くださいませ。 SharePoint でコンテンツ クエリ Web パーツまたはコンテンツ検索 Web パーツを使う場面

例) お知らせアイテムを新着順に表示するクエリ結果 Web パーツを作成する
クエリ結果 Web パーツをカスタマイズし、以下のようにサイト コレクション内のお知らせリストの新着アイテム (最新のアイテム 5 件) を表示してみましょう。

- 手順
1. ページにクエリ結果 Web パーツを配置し、[Web パーツの編集] をクリックします。
2. "クエリ" を展開し、ソースに取得するアイテムの範囲を設定します。今回はサイト コレクション内のアイテムを対象とするため、 [このサイト コレクションのすべてのサイトからアイテムを表示する] を選択します。

3. リストの種類を設定します。今回はお知らせリストのアイテムを取得するため、 [お知らせ] を選択します。

4. "プレゼンテーション" を展開し、アイテムの並べ替えキーを設定します。今回は新着順にアイテムを取得するため、更新日時の降順を設定します。

5. 表示するアイテム数を設定します。今回は 5 を設定します。

6. Web パーツにタイトルをつける場合は "外観" を展開し、タイトルを設定します。今回は 新着情報 を設定します。

7. 枠の種類を タイトルのみ に設定します。

8. 下部の [適用] をクリックして Web パーツに表示されるアイテムを確認し、[OK] をクリックして Web パーツを保存します。
補足 : 既定では、表示するフィールドのリンクに "URL パス" がセットされおります。アイテムの取得条件によっては、この状態で [適用] または [保存] するとエラーが発生します。別の列に変更するか空の状態にし、[適用] または [保存] します。

ここまでの設定で、クエリ結果 Web パーツは以下のような表示になりました。

次に、アイテムのタイトル、更新日時、更新者を表示するようカスタマイズを行います。

アイテムの表示する情報やデザインは、グループ スタイルとアイテムのスタイルの設定で変更できます。 アイテムのスタイルは既定で以下のスタイルが用意されています。 アイテムのスタイルは ItemStyle.xsl に定義されております。ItemStyle.xsl の <xsl:stylexheet> ～ </xsl:stylexheet> 内に、各スタイルが <xsl:template> ～ </xsl:stylesheet> で記述されています。 以降の手順では、カスタムのスタイル (<xsl:template> ～ </xsl:template>) を追加し、クエリ結果 Web パーツのアイテムのスタイルとして設定します。

9. サイト コレクションのトップ ページに移動します。スタイル ライブラリの [XSL Style Sheets] フォルダを開き、ItemStyle.xsl ファイルのコピーをダウンロードします。なお、バックアップのため、作業前に ItemStyle.xsl ファイルのコピーを作成します。

10. ItemStyle.xsl ファイルをメモ帳等のエディタで開きます。日付情報を表示する際に FormatDate 関数を使用するため、<xsl:stylesheet> タグに以下の記述 (緑字) を追加します。

編集前 :
<xsl:stylesheet
version="1.0"
... 中略 ...
xmlns:xsl="https://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt">

編集後 :
<xsl:stylesheet
version="1.0"
... 中略 ...
xmlns:xsl="https://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:ddwrt="https://schemas.microsoft.com/WebParts/v2/DataView/runtime">

11. カスタムの XSL テンプレート (緑字) を <xsl:stylesheet> ～ </xsl:stylesheet> 内に追加します。</xsl:stylesheet> タグの直前に追加する方法が簡単です。

サンプル :
    <xsl:template name="CustomStyle" match="Row[@Style='CustomStyle']' mode='itemstyle'>
    <xsl:variable name="SafeLinkUrl">
        <xsl:call-template name="OuterTemplate.GetSafeLink">
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
        </xsl:call-template>
    </xsl:variable>
    <xsl:variable name="DisplayTitle">
        <xsl:call-template name="OuterTemplate.GetTitle">
            <xsl:with-param name="Title" select="@Title"/>
            <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
        </xsl:call-template>
    </xsl:variable>
    <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
      <xsl:value-of select="$DisplayTitle"/>
    </a><br/>
    <xsl:value-of select="ddwrt:FormatDate(string(@Modified),number('1041'), 1)"/><br/>
    <xsl:value-of select="@Editor"/>
  </xsl:template>

細かいデザインについては、ご要件にあわせて編集してください。
XSL のカスタマイズについては、下記の公開情報もご参照ください。
[方法] コンテンツ クエリ Web パーツ用に XSL をカスタマイズする

FormatDate 関数を使用した日付のフォーマット方法については、下記の公開情報をご確認ください。
dwrt 名前空間内の SharePoint データ ビュー Web パーツ拡張関数
上記のサンプルでは、FormatDate 関数の formatFlag パラメータに 1 を指定しており、この場合、日付は yyyy/MM/dd 形式で表示されます。

12. 編集した ItemStyle.xsl ファイルを保存します。ファイルは文字コード UTF-8 で保存します。
13. スタイル ライブラリの [XSL Style Sheets] フォルダに編集した ItemStyle.xsl ファイルを上書きアップロードします。
14. クエリ結果 Web パーツの編集に戻ります。"プレゼンテーション" を展開し、アイテムのスタイルで CustomStyle (手順 11 で追加したカスタムのスタイル) を選択します。

15. 表示するフィールドに、列の名前を設定します。今回は Modified に 更新日時、Editor に 更新者 を設定します。

16. [適用] をクリックして表示内容を確認し、問題がなければ [OK] をクリックし、Web パーツを保存します。
17. ページを保存します。

上記の手順は参考例となりますので、ご要件に合わせて変更いただき、実装の際は十分なテストをご実施ください。
今回の投稿は以上です。