すっかり長くなってしまった一連の投稿も、今回でいよいよ最終回です。

最後に、これまでの内容の応用としてコンテンツ クエリ Web パーツを使い、サイトコレクション内のすべてのサイトから自分が担当になっいるタスクの一覧を取得するようにしてみたいと思います(これも、以前、ご質問をいただいたことがあるものです。)

[最終目標の画面]

※作業量割には、そこそこ素敵な感じの仕上がりになったように思います。

実現した機能

• タスクの進捗ごとにグループ化する
• タスクのタイトルの他に、優先順位と期日を表示するようにする
• 優先順位で並び替える
• 優先順位が高いものだけにアイコンを表示する
• 新しいアイテムは New! のアイコンを表示する
• 期日が過ぎている場合は、その旨を表示する

作業概要

1. コンテンツ クエリ Web パーツを配置し、サイトコレクション全体から自分が担当になっているタスクを取得するための基本設定を行う
2. コンテンツ クエリ Web パーツをエクスポートし、表示したい列を取得できるよう編集して、再びインポートする
3. ItemStyle.xsl を編集し、見た目を整える
4. コンテンツ クエリ Web パーツに新しいスタイルを適用する

コンテンツクエリWebパーツの基本設定

1. グループ作業ポータルのトップページに、コンテンツ クエリ Web パーツを配置します。
2. [コンテンツ クエリ Web パーツ] の [編集] - [共有 Web パーツの変更] をクリックします。
3. [クエリ] セクションで [ソース] を "このサイトコレクションのすべてのサイトからアイテムを表示する"とします(今回はサイトコレクション全体を対象としてみます)。
4. [リストの種類]から[このリストの種類のアイテムを表示する] を"タスク" に変更します。また[コンテンツ タイプ] で "リスト コンテンツ タイプ" を指定し、[このコンテンツタイプのアイテムを表示する] で "タスク" を指定します。
5. [追加フィルタ] セクションで [次の条件でアイテムを表示する] にて "担当者" が "次の値に等しい" "[Me]" となるように指定します。これで自分のタスクのみをフィルタできるようになります。なお、画面に表示されているようにこの設定ではキャッシュが利用できないため、パフォーマンスが下がる可能性がありますので、実運用で利用される場合は実際にどの程度のパフォーマンスになるかを測定してみてから利用されるとよいと思います。さらに今回は終了したタスクは非表示にするようにしたいため、"かつ" を選択し、"タスクの状態" が "次の値に等しくない" "完了" となるように指定します。
   
6. [プレゼンテーション] セクションでは、[アイテムのグループ化キー]として" タスクの状態" を指定します。[アイテムの並び替えキー]に[優先度]を指定します。
7. すべてのタスクを表示するために [表示するアイテム数を制限する] チェックボックスをオフにします。
8. [グループスタイル]を"帯状"、[アイテムのスタイル]を"箇条書きタイトル" に設定します。
9. [外観]セクションの[タイトル]に"自分の仕事一覧" と入力します。
10. [適用] をクリックします。

表示したい列の取得

1. コンテンツ クエリ Web パーツの右上に表示される▼をクリックし、[エクスポート]をクリックします。
2. 任意の名前でローカルに保存します。今回は "mytask.webpart" という名前で保存します。
3. エクスポートしたファイルをメモ帳などで編集します。次のタグを見つけます。
   
   <property name="CommonViewFields" type="string" />
4. "期日" と "優先度" 列情報を取得できるように次の通り編集します。
   
   <property name="CommonViewFields" type="string">DueDate,DateTime;Priority,Choice</property>
5. 上書き保存します。
6. 再び IE に戻り、編集した Web パーツ情報をインポートするために、[Webパーツの追加]をクリックします。
7. Webパーツの追加画面右下に表示される "Webパーツギャラリーとオプションの詳細設定" リンクをクリックします。
8. 画面右上の "Web パーツの追加" の下に表示される"参照" 部分の▼をくりっし、[インポート] をクリックします。
9. "mytask.webpart" ファイルを指定し、アップロードします。
10. アップロードしたWebパーツをWebパーツ領域に追加します。

ItemStyle.xsl を編集する

1. SharePoint Designer 2007 を起動し、コンテンツ クエリ Web パーツを配置しているサイトを開きます。
2. [フォルダ一覧]内から[Style Library(スタイル ライブラリ)] - [XSL Style Sheets] の順に展開し、ItemStyle.xsl を右クリックしチェックアウトします。
3. ItemStyle.xsl をダブルクリックします。
4. XSLT 内で ddwrt 関数を使用できるよう宣言を次のように追加します。なお、これまでの一連の設定を行っている場合はこの操作は不要です。
   
   <xsl:stylesheet
       version="1.0"
       exclude-result-prefixes="x xsl cmswrt cbq ddwrt"
      ... (中略)
      xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/
   DataView/runtime">
5. <xsl:template name="Bullets" match="Row[@Style='Bullets']" mode="itemstyle">
   から対応する</xsl:template>までをコピーし、</xsl:stylesheet> の直前に貼り付けます。
6. スタイルシートを次のように変更します(赤色部分が追加修正を行った部分です)。
   
   <xsl:template name="すべてのタスク" match="Row[@Style='すべてのタスク']" 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>
           <xsl:variable name="LinkTarget">
               <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
           </xsl:variable>
           <div id="linkitem" class="item link-item bullet">
               <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
   <span style="color:black;">
      <xsl:value-of select="@Priority"/></span>
      :
               <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                   <xsl:value-of select="$DisplayTitle"/>
               </a>
      <img src="/_layouts/images/blank.gif" width="5" style="visibility:hidden" alt=""/><xsl:if test="@Priority='(1) 高'">
     <img src="/_layouts/images/ewr207s.gif" alt="優先度:高" border="0" height="11px"/>
      </xsl:if>
   <xsl:if test="ddwrt:IfNew(@Modified)">
   <img src="/_layouts/1041/images/New.gif" alt="新しいアイテム"/></xsl:if>
      <img src="/_layouts/images/blank.gif" width="13" style="visibility:hidden" alt=""/>
   <span style="color:black">
      [期日:<xsl:value-of select="ddwrt:FormatDate(string(@DueDate),number('1041'),7)"/>]
           </span>
   <xsl:if test="translate(substring-before(@DueDate,' '),'-','')&lt;translate(substring-before(ddwrt:TodayIso(),'T'),'-','')">
   <span style="color:red;"><img src="/_layouts/images/blank.gif" width="5" style="visibility:hidden" alt=""/>
   ※期日を過ぎています!</span>
   </xsl:if>
   </div>
   </xsl:template>
7. 上書き保存し、メジャーバージョンとして発行します(SharePoint Desigenr 2007 を終了しても構いませんが、記述ミスなどがある場合にすぐに修正できるよういったんは最小化しておいた方が良いでしょう)。

コンテンツ クエリ Web パーツに新しいスタイルを適用する

1. IE に戻ります。コンテンツ クエリWeb パーツの[編集] メニューから[共有Webパーツの変更] をクリックします。
2. コンテンツのクエリツールパーツ内の"プレゼンテーション" セクションを開き、アイテムのスタイルを "すべてのタスク" に変更し 適用します。
3. 表示に問題がなければ発行します。エラーが表示される場合は、ItemStyle.xsl の構文を見直してください。

以上で完了です!

と、なんとなく実務で利用できそうな感じ完成しました。トップページを見ると常に自分の仕事が追いかけてくるようになります(^^ゞ。

思いのほか長い連続投稿になってしまいましたが、参考になりましたでしょうか。

他にもいろいろとカスタマイズしたいというニーズがあるかと思いますが、調査中のものもたくさんありますので、また追々ご紹介していきたいと思います。

今日の設定を終えてようやく「すべてのお知らせ」を取得するコンテンツ クエリ Web パーツが完成です! では早速、最後の工程に入りましょう。

コンテンツ クエリ Web パーツは既定では並び替えに利用できる列が限られています。そこで、任意の列で並び替える方法をご紹介します。

今回は、「更新日時」列を使用します。既定では「更新日時(_Hidden)」が表示されます。hidden とはなっているものの表示されているので利用できそうなものですが、実際には並び替えには利用できないようです。そこで、前回取得した「更新日時」列の情報を使って更新日時で並び替えられるように調整します。

コンテンツ クエリ Web パーツで任意の列で並び替えを行えるようにするには、Webパーツのデータを一旦エクスポートし、内容を編集する必要があります。

操作概要

1. コンテンツ クエリ Web パーツのエクスポートする
2. エクスポートしたデータを編集する
3. 2. をインポートする
4. コンテンツ クエリ Web パーツの並べ替えキーを変更する

コンテンツ クエリ Web パーツのエクスポート

1. コンテンツ クエリ Web パーツの右上に表示される▼をクリックし、[エクスポート] をクリックします。
2. 任意の名前でファイルをローカルに保存します。今回も前回と同様に"mycqwp.webpart" という名前で上書き保存しておきます。

Web パーツ情報の編集

1. 次にエクスポートしたXMLファイルをメモ帳などで開き、編集します。次のタグを見つけます。
   
   <property name="AdditionalGroupAndSortFields" type="string" null="true" />
2. 編集日時(Modified) 列が「並び替え」ドロップダウンメニューに表示されるよう次のように変更します。
   
   <property name="AdditionalGroupAndSortFields" type="string">Modified</property>

1. 上書き保存をします。

Web パーツ情報をインポートする

編集した mycqwp.webpart をインポートします。

1. IE を使用してコンテンツクエリWebパーツを追加したサイトを表示します。
2. [サイトの操作]メニューから[ページの編集]をクリックします。
3. "Web パーツの追加" をクリックします。
4. Web パーツの追加画面右下に表示される "Web パーツギャラリーとオプションの詳細設定" リンクをクリックします。

5. 画面右上の"Web パーツの追加" の下に表示される "参照"部分の▼をクリックし、[インポート]をクリックします。

6. 先ほど編集した "mycqwp.webpart" ファイルを指定し、アップロードします。

7. アップロードした Web パーツをWeb パーツ領域に追加(インポート)します。

コンテンツクエリ Web パーツの並べ替えキーを変更する

コンテンツクエリ Web パーツに適用されている並び替え設定を変更します。

1. 追加した Web パーツの[編集]メニューから[共有Webパーツの変更]をクリックします。

2. コンテンツのクエリツールパーツ内の"プレゼンテーション" セクションを開き、"アイテムの並び替えキー" のドロップダウンメニューから "Modified" を選択します。

   

3. [OK]ボタンをクリックします。

4. [発行]します。

以上で、更新日時で並び替えが行われるようになったはずです。

うまく表示されれば完成です、パチパチパチ～♪

次回は最終回として、今回ご紹介してきた一連の内容を応用して「複数サイトから自分のタスクを表示する」ようにしてみたいと思います。

参考: PointBridge Blogs(英語)

コンテンツクエリ Web パーツを使用してサブサイトのアイテムを取得する場合、ルートのサイトコレクションが作成されていないとリンク機能が正しく動作しません。このことは以前の記事でもご紹介しました。

【参考: コンテンツ クエリ Web パーツのエラー 】

しかし、ルートのサイトコレクションを作成しなくてもリンク機能を有効にすることも可能です。ひとつの解決策として、その方法をご紹介しておきます。

解決策

そもそも問題となる固定のリンクの情報は、ContentQueryMain.xsl に記載されています。ここにはリンク先のアイテムにリダイレクトしてくれるはずの"CopyUtil.aspx" のURL が "/_layouts/CopyUtil.aspx" とハードコードされています。これをサイトのURLに合わせて編集してやれば、この場合の問題は解決します。

なお SharePoint Designer 2007 を使用するのがミソです。SharePoint Designer 2007 使用してこのファイルを編集することで、サイトごとに独自の編集が可能となります。

修正方法

1. SharePoint Designer 2007 を起動し、コンテンツ クエリ Web パーツを追加したサイトを開きます。
2. [フォルダ一覧] - [Style Library (スタイル ライブラリ)] - [XSL Style Sheets] を展開し、ContentQueryMain.xsl を右クリックしチェックアウトします。
3. ContentQueryMain.xsl をダブルクリックします。
4. 次のタグを見つけます。

   <xsl:value-of select="concat('/_layouts/CopyUtil.aspx?
   Use=id&amp;Action=dispform&amp;ItemId=',@ID,'
   &amp;ListId=',@ListId,'&amp;WebId=',@WebId,'
   &amp;SiteId=',$SiteId)"/>

5. "/_layouts/CopyUtil.aspx" の部分をサイトのURLに応じて編集します。たとえば、私の環境では次のように編集しました。

   <xsl:value-of select="concat('/sites/top/_layouts/CopyUtil.aspx?
   Use=id&amp;Action=dispform&amp;ItemId=',@ID,'
   &amp;ListId=',@ListId,'&amp;WebId=',@WebId,'
   &amp;SiteId=',$SiteId)"/>

6. 上書き保存し、マイナーバージョンとしてチェックインしておきます。

前回のままでは本文がすべて表示されてしまうため、本文から30文字分のみを表示し全文を読みたいユーザーには "詳細" リンクから参照できるよう調整します。また New! のアイコンも表示するようにします。

[今回の目標画面]

作業内容

1. タイトルの隣に New! アイコンを表示する
2. 本文の表示を制限し、詳細情報へのリンクを追加する

タイトルの隣に New! アイコンを表示する

1. SharePoint Designer 2007 で コンテンツ クエリ Web パーツを追加したサイトを開きます。
2. [フォルダ一覧] - [Style Library (スタイル ライブラリ)] - [XSL Style Sheets] を展開し、ItemStyle.xsl を右クリックしチェックアウトします。
3. ItemStyle.xsl をダブルクリックします。
4. " すべてのお知らせ用スタイル" テンプレート内から、次の部分を見つけます。
   
   <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
                       <xsl:value-of select="$DisplayTitle"/>
     </a>
5. 今回はタイトル部分のリンクを削除しておくため、"<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">" および "</a>" を削除し、<xsl:value-of select="$DisplayTitle"/> の部分のみが残るようにします。
6. <xsl:value-of select="$DisplayTitle"/> の直後に以下のタグを追加します。
   
   <xsl:value-of select="$DisplayTitle"/>
   <xsl:if test="ddwrt:IfNew(@Modified)">
   <img src="/_layouts/1041/images/New.gif" alt="新しいアイテム"/><img src="/_layouts/images/blank.gif" width="13" style="visibility:hidden" alt=""/>
   </xsl:if>

続いて、次の作業を行います。

本文の表示を制限し、詳細情報へのリンクを追加する

1. "すべてのお知らせ用スタイル" テンプレート内で次のタグを見つけます。
   
   <xsl:value-of select="$bodyContent"/>
2. 次のように変更します。この例ではリンクをクリックすると別ウィンドウで表示するようにしています。
   
   <div class="description">
   <xsl:value-of select="substring($bodyContent,1,30)"/>
       ...(
       <a href="{$SafeLinkUrl}" mce="{$SafeLinkUrl}" target="_blank"
        title="{@LinkToolTip}">詳細</a>)
   </div>
3. 上書き保存をします。また今回で ItemStyel.xsl の編集は終わりますのでメジャーバージョンを発行するようにチェックインをしておきます。

最後に、結果を IE で確認します。まだこのままでは、詳細リンクをクリックしてもルートのサイトコレクションがない場合はエラーとなってしまいます。次回は、ルートのサイトコレクションを作成せずにアイテムのリンク先を表示できるよう修正します。

参考: Microsoft Enterprise Content Management Team Blog (英語)

前回は更新日時と本文のデータを取得しましたが、本文は HTML タグのエスケープ処理のために表示される内容に HTML タグがそのまま残ってしまっています。今回はこのマークアップタグを削除するよう変更します。

[今回の目標画面]

作業内容

1. ItemStyle.xsl に "<" から ">" までのタグを取り除く処理を追加する

不要なタグ表示を取り除く

1. SharePoint Designer 2007 を起動し、コンテンツ Web パーツを追加したサイトを開きます。
2. [フォルダ一覧]から[Style Library (スタイル ライブラリ)] - [XSL Style Sheets] を展開し、ItemStyle.xsl を右クリックし、チェックアウトします。
3. ItemStyle.xsl をダブルクリックします。
4. コード内の一番最後の"</xsl:template>タグの直後に次のようなテンプレートを記述します。このテンプレートが "<" から ">" までを再帰的に削除するコードになっています。
   
   <!--不要なタグを取り除く-->
   <xsl:template name="removeMarkup">
     <xsl:param name="string" />
     <xsl:choose>
      <xsl:when test="contains($string, '&lt;')">
       <xsl:variable name="nextString">                                    
       <xsl:call-template name="removeMarkup">
                       <xsl:with-param name="string" select="substring-after($string, '&gt;')" />
       </xsl:call-template>
                </xsl:variable>
       <xsl:value-of select="concat(substring-before($string, '&lt;'), $nextString)" />
      </xsl:when>
      <xsl:otherwise>
       <xsl:value-of select="$string" />
      </xsl:otherwise>
     </xsl:choose>
   </xsl:template>
5. "すべてのお知らせ用スタイル" テンプレート内で本文を取得する次のコードを探します。
   
   <div class="description">
                       <xsl:value-of select="@Body" />
   </div>
6. 以下のように追記および変更します。
   
   <xsl:variable name="bodyContent">
   <xsl:call-template name="removeMarkup">
   <xsl:with-param name="string" select="@Body"/>
   </xsl:call-template>
   </xsl:variable>
       <div class="description">
       <xsl:value-of select="$bodyContent"/>
       </div>
7. ItemStyle.xsl を上書き保存し、マイナーバージョンとしてチェックインします。

IE で再びコンテンツ クエリ Web パーツを表示してみると次のように不要なタグが取り除かれたことが確認できるはずです。

次回は、 本文から30文字分のみを表示し、New ! のアイコンを表示するように変更します。