- ホーム
- Lightning Tools
- XSLTを用いたグラフィカルなビューを作ってみる
XSLTを用いたグラフィカルなビューを作ってみる
こんにちは、初めましてインフォシェアの飯島と申します。
今回は、Lightning Conductorで集約したSharePointリストアイテムデータを、標準のリストビューテーブルではなく、カスタマイズした独自の表示形式で画面に表示できる機能をご紹介します。
連載記事(Lightning Conductor Web パーツ)の目次はこちらをご参照ください。
事前にテンプレートファイルを用意しておけば、Lightning Conductor Webパーツの設定から参照するだけでそのテンプレートに従った表示が可能です。
テンプレートの記述には、Webの標準技術の一つであるXSLT変換を使用できます。XSLTは、任意のXML(データ)から別の形式のテキストに変換を定義する言語で、それ自身もXML形式(ファイル拡張子は「.xsl」)です。特に変換先にはWebページ記述言語であるHTML形式が使用されます。
Lightning Conductorで集約したデータはXMLの形式データとして、XSLTから参照できます。これを任意のHTMLに変換する記述を書くことで、標準のテーブルを超えた表現が可能です。汎用のテンプレートを適用することでデータの内容によらずに統一的な表示も可能ですし、専用のテンプレートを作成することで固有のデータの内容に応じた表示も可能です。
まずは、すでにカスタマイズされた見た目を定義したXSLファイルがあるとして、Lightning Conductor Webパーツからの参照方法をご紹介します。
ここでは、複数のアイテムを横並びに（プロパティを縦並びに）表示する（通常のリストビュー表示の行と列を転置）定義があるXSLファイル「TranspositionList.xsl」を用意してあるとします。このファイルをサイトのスタイルライブラリのフォルダー(/Style%20Library/XSLForLCWP/)にアップロードしてあるとします。
また、すでに以下のようなリストとアイテムがあるとします。
Lightning Conductor Webパーツの設定画面の「Webパーツ」タブの「ディスプレイ プロバイダー設定」で「XSL Style Display Provider」を選択します。
次に「データソース」タブで、上記のリストを指定します。
さらに、「列」タブで、表示したい列をチェックします。ドラッグ＆ドロップで列を並べ替えるとXMLデータの列もその順番が反映されます。
続いて、「XSLスタイルシートを選択」のドロップダウンでアップロードして置いた「TranspositionList.xsl」を選択して更新アイコンをクリックします。日付形式には「yyyy/MM/dd」と入力して、「保存」ボタンで設定を保存します。
以下のようにリストのアイテムが横並びに表示されました。
以上のように、事前にXSLファイルを用意しておけば、設定は簡単です。
さて、XSLTに関してですが、一般的な文法に関してはこちらでは説明しません（Webの標準的な技術ですので、インターネットに情報はあります）。
XSLTから、LCWP集約結果データが以下のようなXML構造データとして参照できます。（実際にXMLファイルが見えるわけでありません。）
XSLTの内部で参照できるXMLデータ（抜粋）
<?xml version="1.0" encoding="utf-8"?>
<Root WebPartInstanceId="xxxxxxxxx" DateTimeFormat="yyyy/MM/dd">
<Root>
<Description>
<List>
<Title>SampleCustomList</Title>
・・・ ・・・ ・・・ ・・・
</List>
・・・ ・・・ ・・・ ・・・
</Description>
<Header>
<Field ID="XXXX1" Title="ID" InternalName="ID" Type="Counter" ・・IsChecked="True"></Field>
<Field ID="YYYY2" Title="タイトル" InternalName="LinkTitle" ・・IsChecked="True"></Field>
<Field ID="ZZZZ3" Title="イメージ" InternalName="xxxxxx" ></Field>
<Field ID="AAAAA4" Title="オプション" ・・・></Field>
・・・ ・・・ ・・・ ・・・
</Header>
<Rows>
<Row ID="1" Title="" Url="http://xxxxxxx/DispForm.aspx?ID=1" ・・・>
<Column fID="zzzzzz" fInternalName=" xxxxxx " Value="xxxx.gif, チンゲン菜"></Column>
<Column fID="zzaaaa" fInternalName="_x8aac__x660e_" ・・・></Column>
<Column fID="aaaabbbb" ・・・></Column>
<Column fID="bbbbcccc" ・・・></Column>
・・・ ・・・ ・・・ ・・・
</Row>
<Row ID="2" Title="" Url="http://xxxxxxx/DispForm.aspx?ID=2" ・・・>
・・・ ・・・ ・・・
</Row>
・・・ ・・・ ・・・ ・・・
</Rows>
</Root>
</Root>
XSLTに記述する内容は、このXMLから個々のデータを取り出して、HTML要素に置き換えてページを作成する変換の定義です。以下にXSLファイルの抜粋を示します。
TranspositionList.xsl(抜粋)
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl ="http://www.w3.org/1999/XSL/Transform"
xmlns ="http://www.w3.org/1999/xhtml">
<xsl:output indent="no" method="html" />
<xsl:template match="/" name="vertical">
<xsl:variable name="Rows" select="Root/Root/Rows" />
<xsl:choose>
<xsl:when test="count(Root/Root/Rows/Row)=0">データがありません。</xsl:when>
<xsl:otherwise>
<table id="LCWPlistItems" width="100%" style="border: 1px solid black;" >
<xsl:for-each select="Root/Root/Header/Field[@Hidden='False'・・・]">
<tr>
<xsl:call-template name="RowRendering">
<xsl:with-param name="Rows" select="$Rows"></xsl:with-param>
</xsl:call-template>
</tr>
</xsl:for-each>
</table>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template name="RowRendering" match="Field">
・・・ ・・・ ・・・ ・・・
</xsl:template>
・・・ ・・・ ・・・
</xsl:stylesheet>
LCWPとこの表示テンプレートの詳細に関してご興味がある方は、ぜひ弊社までご連絡お願いします！
「ディスプレイ プロバイダー設定」は「JSON Provider」も用意されています。こちらは、JavaScriptからLightning Conductorで集約したデータを、やはりWebで広く使用されているJSONという形式で参照して、ページのHTML要素を自由に記述できる設定となります。XMLよりもJavaScriptの扱いに慣れている技術者がいる場合は、使い慣れた「JSON Provider」を使用して表示するためのテンプレートを開発していただくということも可能です。
「XSL Style Display Provider」や「JSON Provider」を使用したビューのカスタマイズについての動画もご覧いただけます���
http://youtu.be/eVC9wbfzRi4