概要と目標
ボックスのうち, MOSS’ コンテンツのクエリ Web パーツ (CQWP) その結果、一覧形式で表示します。, 検索結果に同じような. また、グリッド形式で結果を表示することが可能です。 (すなわち. HTML テーブルの形式). グリッドのフォーマットはいくつかの状況で優れています。. この記事でその効果を達成するために方法を記述します。.
ビジネス シナリオ
私はモスをエンタープライズ全体に展開のクライアントで働いています。. プロジェクト階層内の最初のクラスの市民は、独自の最上位レベルのサイトを持っている、我々 は彼らの分類を設計しています。. プロジェクト マネージャーは、プロジェクトのサマリー情報の単一リストを維持します。, タイトルなど, 予算, 予想される完了日, 残りの予算と他の集計タイプのフィールド. 「シングルトンで" 私は必ず 1 つだけ項目が含まれ、SharePoint のカスタム リストを意味します。. 簡単に言えば, それはこのように見える:
技術的なアプローチは多くの説明と同じ ここで (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!447.entry). CQWP は、XSL 変換を使用してレンダリングするブラウザーの HTML を出力するには.
私は常に XSL は悪夢のようなので、XSL に飛び込む前に結果を思い描く. ここでは私の目的の結果:
このような HTML は、その結果を生成します。:
|
|
<html>
<体>
<センター>
<テーブル 境界線= 1>
<!-- ラベル->
<tr bgcolor青 =>
<td><フォント 色= ホワイト><b>プロジェクト名</b></フォント></td>
<td 位置合わせ= 右><フォント 色= ホワイト><b>完全な日付</b></フォント></td>
<td 位置合わせ= 右><フォント 色= ホワイト><b>予算</b></フォント></td>
<td 位置合わせ= 右><フォント 色= ホワイト><b>実際の経費</b></フォント></td>
<td><フォント 色= ホワイト><b>全体的な状態</b></フォント></td>
</tr>
<tr>
<td>再コンピューター室.</td>
<td 位置合わせ= 右>02/01/08</td>
<td 位置合わせ= 右>22,500.00</td>
<td 位置合わせ= 右>19,000.00</td>
<td>進行中</td>
</tr>
<tr>
<td>SQL アップグレードのサーバをプロビジョニング</td>
<td 位置合わせ= 右>04/01/08</td>
<td 位置合わせ= 右>7,500.00</td>
<td 位置合わせ= 右>0.00</td>
<td>計画</td>
</tr>
</テーブル>
</センター>
</体>
</html>
|
アプローチ
グリッドを作成する手順します。:
- グリッドの各コンポーネントを識別します。 (行/列).
- 定義し、必要なサイト内の列を作成します。.
- サブ プロジェクトを単一のリストのサイトを作成します。.
- Web ページに、CQWP を追加し、あなたのリストを検索するように構成.
- 追加の列を収集するために、CQWP の XML を変更します。.
- テーブルを生成する XSL を変更します。.
数は 6 に集中するつもり. 番号 1 から 4 は、まっすぐ進むと CQWP ユーザーが既に行われている何か. 5 番は MSDN からこの徹底的なスクリーン ショット満載記事を含む他の人が十分に文書化されています。 ここで (http://msdn2.microsoft.com/en-us/library/bb897399.aspx) ヘザー ソロモンのブログ ここで (http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx).
ナットとボルト
開始し、ステップ 1 から 5 は、MSDN のドキュメントとヘザー ソロモンの記事に従って.
この時点で, ページに、CQWP を追加したし、するが、 <CommonViewFields> 必要に応じて構成.
通常の手順に従って, これらの中間結果を得る:
1. コンテンツ タイプを作成します。, そのコンテンツ タイプの 2 つのサイト テンプレートのカスタム リスト. ここでは、コンテンツのタイプ:
ここでは、サイトの構造:
2. 私のプロジェクトのサブサイトとシングルトン プロジェクト サマリー リストを作成した後、CQWP を追加します。:
3. 経由するすべての追加情報を追加します <CommonViewFields>:
<プロパティ 名前="CommonViewFields" タイプ="文字列">Project_x0020_Name;Project_x0020_Expenses;Project_x0020_Status;Project_x0020_Start_x0020_Date;Project_x0020_End_x0020_Date;Project_x0020_Budget</プロパティ>
1 つの行またはそれのすべてのプロパティ フィールドを維持しなければならなかったことに注意が働かないでしょう (CQWP は、クエリ結果項目をないこと私に言うだろう).
4. この時点で, MSDN の記事「を超えて移動する準備整いましたとヘザー ソロモンの記事を上にフリップ. 彼女の手順をステップ付近から #5 作成をカスタマイズする / ItemStyle.xsl の実体化バージョン. ヘザーを忠告します。, ステップ アップ 11 これらの中間結果を得る:
4.1: 私 XSL テンプレートの名前をとおり:
<xsl:テンプレート名 ="グリッド" 一致"の行を =[@Style =「グリッド」]" モード =「itemstyle」>
私も若干示唆彼女を変更します。 <xsl:それぞれ …> 追加することによって、 <br/> クリーナーのリストを提供するタグ:
<xsl:それぞれ 選択="@*">
P:<xsl:値の 選択="名前()" /><br/>
</xsl:それぞれ>
4.2: Web パーツを変更します。, 外観に移動し、私の"グリッドを選択します" スタイル:
変更を適用して、ここでは、結果:
我々 のフィールドを上から見ることができます。 (プロジェクト名, 経費, ステータス, など) 我々 は、HTML を出力するときに使用するの. それだけでなく, XSL のこれらの列を参照する必要がありますに使用する名前がわかりますが、. たとえば, "Project_x005F_x0020_Name"としてプロジェクトの進捗状況を参照します。.
この時点で, ヘザーのブログから、これらの巨人の肩から出発します。, 自分自身の小さなビットを追加します。.
ContentQueryMain.xsl
メモ: ItemStyle.xsl だけでなく ContentQueryMain.xsl に変更を加えるとき, 変更の効果を確認する前にそれらのファイルを再度チェックインする必要があります。.
グリッド作る目的のため, モスは、CQWP から見る結果を生成する 2 つの XSL ファイルを使用します。. 出力の前のビットを生成するには, ItemStyle.xsl を修正しました. モスは実際に別の XSL ファイルを使用します。, その HTML を生成する ItemStyle.xsl と共にに ContentQueryMain.xsl. その名の通り, ContentQueryMain.xsl は、"メインです。" XSL 変換の全体的な流れを制御します。. 見つかったすべての項目を反復処理し、ItemStyle.xsl 1 つずつテンプレートに渡します. ItemStyle.xsl オープンを生成するを変更します <テーブル> 最初の行のデータおよび閉鎖の出力前にタグ <テーブル> 最後の行を出力後のタグ. これを達成するために, ContentQueryMain.xsl が変更され、"グリッドに 2 つのパラメーターを渡す" ItemStyle.xsl でテンプレート, "最後の行" 「現在の行」. ItemStyle.xsl はこれらを使用して、条件付きで必要なタグを生成するには.
ヘザー ソロモンのテクニックを使用してください。, 我々 は ContentQueryMain.xsl を探します. ItemStyle.xsl と同じ場所にあります。. このスクリーン ショットを助ける必要があります。:
次の変更を加える必要があります。:
- Xsl テンプレートを変更します。, "CallItemTemplate" 実際に ItemStyle.xsl でグリッド テンプレートを呼び出す. それはカバーの開閉を条件付きで生成する必要があるデータがあるのでグリッド テンプレートに 2 つのパラメーターを渡します <テーブル> タグ.
- "CallItemTemplate を呼び出す ContentQueryMain.xsl の別のビットを変更します。" それを渡す"LastRow" パラメーターを LastRow 私たちグリッド テンプレートに渡される可能性がありますので.
"OuterTemplate.CallItemTemplate という名前のテンプレートを見つける" 文字列で識別されます。:
<xsl:テンプレート 名前="OuterTemplate.CallItemTemplate">
次のように全体のテンプレートを置き換える:
|
|
<xsl:テンプレート 名前="OuterTemplate.CallItemTemplate">
<xsl:param 名前="CurPosition" />
<!--
LastRow」を追加します。" パラメーター.
我々 だけがあるとき使用で項目スタイル パス「グリッド」.
-->
<xsl:param 名前="LastRow" />
<xsl:選択してください。>
<xsl:とき テスト="@Style = 'NewsRollUpItem'">
<xsl:テンプレートを適用 選択="." モード="itemstyle">
<xsl:param と 名前="EditMode" 選択="$cbq_iseditmode" />
</xsl:テンプレートを適用>
</xsl:とき>
<xsl:とき テスト="@Style = 'NewsBigItem'">
<xsl:テンプレートを適用 選択="." モード="itemstyle">
<xsl:param と 名前="CurPos" 選択="$CurPosition" />
</xsl:テンプレートを適用>
</xsl:とき>
<xsl:とき テスト="@Style = 'NewsCategoryItem'">
<xsl:テンプレートを適用 選択="." モード="itemstyle">
<xsl:param と 名前="CurPos" 選択="$CurPosition" />
</xsl:テンプレートを適用>
</xsl:とき>
<!--
現在の位置と lastrow グリッド itemstyle.xsl テンプレートに渡す.
ItemStyle.xsl が使用オープンを放出して終了 <テーブル> タグ.
-->
<xsl:とき テスト="@Style = 'グリッド'">
<xsl:テンプレートを適用 選択="." モード="itemstyle">
<xsl:param と 名前="CurPos" 選択="$CurPosition" />
<xsl:param と 名前="最後" 選択="$LastRow" />
</xsl:テンプレートを適用>
</xsl:とき>
<xsl:それ以外の場合>
<xsl:テンプレートを適用 選択="." モード="itemstyle">
</xsl:テンプレートを適用>
</xsl:それ以外の場合>
</xsl:選択してください。>
</xsl:テンプレート>
|
コメント、変更の目的を説明します。.
もちろんです, "OuterTemplate.CallItemTemplate" 自体は別のテンプレートから呼び出される. このテキスト文字列を検索してそのテンプレートを特定します。:
<xsl:テンプレート 名前="OuterTemplate.Body">
OuterTemplate.Body の指示をスクロールし、LastRow パラメーターを次のように挿入 (斜体のコメントとして表示されます。):
<xsl:呼び出しテンプレート 名前="OuterTemplate.CallItemTemplate">
<xsl:param と 名前="CurPosition" 選択="$CurPosition" />
<!-- LastRow パラメーターを挿入します。. -->
<xsl:param と 名前="LastRow" 選択="$LastRow"/>
</xsl:呼び出しテンプレート>
これすべての後, 我々 は最終的に私たち ItemStyle.xsl を出すことができるように正しくセットアップされてものを持っています。 <テーブル> 適切な場所にタグ.
ItemStyle.Xsl
メモ: もう一度, これらの変更の効果を確認するように変更を行った後 ItemStyle.xsl でチェックします。.
ここに 2 つのタスクがあります。:
- グリッド テンプレート全体を置き換える. コピー/ペーストを下からすることができます。.
- "Formatcurrency できるようにするテンプレート定義の外部のいくつかのちんぷんかんぷんの追加します。" テンプレートを使用. (XSL に関する微妙なハンドルを持って私はことを伝えることができます。).
最初, ItemStyle.xsl の上部にあります。, この行を追加します:
<!-- 米国を表示させることができますいくつかマンボ ジャンボ. 通貨. -->
<xsl:10 進形式 名前="スタッフ" 桁="D" />
<xsl:テンプレート 名前="既定" 一致="*" モード="itemstyle">
私は追加直接前に注意してください、 <xsl:テンプレート名 ="デフォルト" …> 定義.
次, グリッド テンプレートに戻る. グリッド テンプレート全体を以下のコードに置き換えます. それは徹底的にコメントします。, 私にメールや質問がありましたら、私のブログにコメントを残すことを躊躇しないが、.
|
|
<xsl:テンプレート 名前="グリッド" 一致="行[@Style = 'グリッド']" モード="itemstyle">
<!--
ContentMain.xsl は、CurPos と最後に渡します.
我々 は条件付きでオープンを出力するこれらを使用しての開閉 <テーブル> タグ.
-->
<xsl:param 名前="CurPos" />
<xsl:param 名前="最後" />
<!-- 次の変数が標準 ItemStyle.xsl から変更されていません -->
<xsl:変数 名前="SafeImageUrl">
<xsl:呼び出しテンプレート 名前="OuterTemplate.GetSafeStaticUrl">
<xsl:param と 名前="UrlColumnName" 選択="「ImageUrl」"/>
</xsl:呼び出しテンプレート>
</xsl:変数>
<xsl:変数 名前="SafeLinkUrl">
<xsl:呼び出しテンプレート 名前="OuterTemplate.GetSafeLink">
<xsl:param と 名前="UrlColumnName" 選択="「LinkUrl」"/>
</xsl:呼び出しテンプレート>
</xsl:変数>
<xsl:変数 名前="DisplayTitle">
<xsl:呼び出しテンプレート 名前="OuterTemplate.GetTitle">
<xsl:param と 名前="タイトル" 選択="@Title"/>
<xsl:param と 名前="UrlColumnName" 選択="「LinkUrl」"/>
</xsl:呼び出しテンプレート>
</xsl:変数>
<xsl:変数 名前="LinkTarget">
<xsl:場合 テスト="@OpenInNewWindow = 'true'" >_blank</xsl:場合>
</xsl:変数>
<!--
ここで我々 は、変数を定義します。, "tableStart". これは列ラベルと同様に、テーブルの開口部を定義するために使用する HTML を含む. その場合 CurPos = 1, CDATA タグで HTML が含まれています.
それ以外の場合, それは空になります.
ItemStyle は ContentQueryMain.xsl で呼び出されるたびに、tableStart の値はエミッタ.
-->
<xsl:変数 名前="tableStart">
<xsl:場合 テスト="$CurPos = 1">
<![CDATA[
<表の罫線 = 1>
<tr bgcolor ="blue">
<td><フォントの色「白」を =><b>プロジェクト名</b></フォント></td>
<td 整列 =「右」><フォントの色「白」を =><b>完全な日付</b></フォント></td>
<td 整列 =「右」><フォントの色「白」を =><b>予算</b></フォント></td>
<td 整列 =「右」><フォントの色「白」を =><b>実際の経費</b></フォント></td>
<td><フォントの色「白」を =><b>全体的な状態</b></フォント></td>
</tr>
]]>
</xsl:場合>
</xsl:変数>
<!--
別の変数, tableEnd は単に終了を定義タグを表.
TableStart と同様に, それは常にエミッタ. だからこそ、その値が割り当てられているかどうか我々 は ContentQueryMain.xsl で最後の行を渡されてきたに基づいて条件付きで.
-->
<xsl:変数 名前="tableEnd">
<xsl:場合 テスト="$CurPos = $Last">
<![CDATA[ </テーブル> ]]>
</xsl:場合>
</xsl:変数>
<!--
常に tableStart の内容を出力します。. これは ContentQueryMain.xsl によって私達に渡された最初の行ではない場合, 我々 はその値が空白になります知っているし、.
出力エスケープを無効にするとき tableStart ない空白, ブラウザーでレンダリングしたい実際の HTML が含まれています. 我々 は教えていない場合 XSL パーサーを無効にする出力エスケープ, ようなものが生成されます"<テーブル>" 」の代わりに<テーブル>".
-->
<xsl:値の 選択="$tableStart" 無効にする出力エスケープ="はい"/>
<tr>
<!--
P:Project_x005F_x0020_Name P:Project_x005F_x0020_End_x005F_x0020_Date P:Project_x005F_x0020_Budget P:Project_x005F_x0020_Expenses P:Project_x005F_x0020_Status
-->
<td>
<xsl:値の 選択="@Project_x005F_x0020_Name"/>
</td>
<td 位置合わせ="右">
<xsl:値の 選択="@Project_x005F_x0020_End_x005F_x0020_Date"/>
</td>
<td 位置合わせ="右">
<xsl:呼び出しテンプレート 名前="formatcurrency">
<xsl:param と 名前="値"
選択="@Project_x005F_x0020_Budget"></xsl:param と>
</xsl:呼び出しテンプレート>
</td>
<td 位置合わせ="右">
<xsl:呼び出しテンプレート 名前="formatcurrency">
<xsl:param と 名前="値" 選択="@Project_x005F_x0020_Expenses">
</xsl:param と>
</xsl:呼び出しテンプレート>
</td>
<td>
<xsl:値の 選択="@Project_x005F_x0020_Status"/>
</td>
<!--
以下のすべて、物事を明確にコメント アウト.
ただし, それを戻すとかに、 <td> その効果を確認するには.
-->
<!--
<div id ="linkitem" クラス =「アイテム」>
<xsl:場合テスト ="文字列の長さ($SafeImageUrl) != 0">
<div クラス =「画像エリア左」>
<href ="{$SafeLinkUrl}" ターゲット ="{$LinkTarget}">
<img クラス ="画像-固定幅" src ="{$SafeImageUrl}"
alt ="{@ImageUrlAltText}"/>
</は>
</div>
</xsl:場合>
<div クラス「リンク項目」を =>
<xsl:呼び出しテンプレート
name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<href ="{$SafeLinkUrl}"
ターゲット ="{$LinkTarget}" タイトル ="{@LinkToolTip}">
<xsl:値の選択"$DisxslyTitle"=/>
</は>
<div クラス =「説明」>
<xsl:値の select="@Description" />
</div>
</div>
</div>
-->
</tr>
<!--
終了を出力テーブルのタグ. 我々 は最後の行をしている場合,
これは空白になります.
-->
<xsl:値の 選択="$tableEnd" 無効にする出力エスケープ="はい"/>
</xsl:テンプレート>
<xsl:テンプレート 名前="formatcurrency">
<xsl:param 名前="値" 選択="0" />
<xsl:値の 選択='番号の書式設定($値, "$DDD,DDD,DDD。HD ®, 「スタッフ」)' />
</xsl:テンプレート>
|
