「XSL リンク」を使って SharePoint リスト ビューをカスタマイズする

SharePoint 2013 からは、JavaScript でのカスタマイズ方法も強化・追加されたため、「JS リンク」を利用することで簡単にリスト ビューをカスタマイズできるようになりましたが、SharePoint 2010 までは「XSL（XML 向けの CSS のようなもの）」を記述する必要がありました。

また、SharePoint 2013 になって、多くのリスト ビューは JS リンクでカスタマイズができますが、一部のリスト ビューは依然として XSL でのカスタマイズにのみ対応しているものがあります。

「予定表」リストの「現在のイベント」ビューもその一つです。そうしたものについては、「XSL リンク」を利用してカスタマイズを行うことができます。今回は、過去に TechNet/MSDN フォーラムに寄せられたご質問を課題として、そのカスタマイズ方法をご紹介します。先にお断りをしておくと、この記事では XSL の書き方そのものについては解説しません。

今回の課題

「予定表」リストの「現在のイベント」ビューに表示される「開始時刻」「終了時刻」の表記を独自に定義したものに変更したい。

こうしたもの（標準の状態）を、

このように変更します。

実現するための XSL サンプル

結果を先に記載すると、下記のような XSL を書くことで表記を自在に変更することができます。

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
                xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
                version="1.0"
                exclude-result-prefixes="xsl msxsl ddwrt"
                xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
                xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
                xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" 
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
                xmlns:SharePoint="Microsoft.SharePoint.WebControls"
                xmlns:ddwrt2="urn:frontpage:internal">
  <xsl:include href="/_layouts/xsl/main.xsl"/>
  <xsl:template match="FieldRef[@Name='EventDate']" mode="DateTime_body">
    <xsl:param name="thisNode" select="."/>
    
    <xsl:variable name="dt" select="$thisNode/@*[name()=current()/@Name]"/>
    <xsl:variable name="date" select="substring-before($dt,' ')"/>
    <xsl:variable name="time" select="substring-after($dt,' ')"/>
    <xsl:variable name="year" select="substring($date,0,5)"/>
    <xsl:variable name="month" select="substring($date,6,2)"/>
    <xsl:variable name="day" select="substring($date,9,2)"/>
    <xsl:variable name="hour" select="substring-before($time,':')"/>
    <xsl:variable name="min" select="substring-after($time,':')"/>

    <nobr>
    <xsl:value-of select="concat($year,'年',$month,'月',$day,'日',$hour,'時',$min,'分')"/>
    </nobr>

  </xsl:template>
  
  <xsl:template match="FieldRef[@Name='EndDate']" mode="DateTime_body">
    <xsl:param name="thisNode" select="."/>
    
    <xsl:variable name="dt" select="$thisNode/@*[name()=current()/@Name]"/>
    <xsl:variable name="date" select="substring-before($dt,' ')"/>
    <xsl:variable name="time" select="substring-after($dt,' ')"/>
    <xsl:variable name="year" select="substring($date,0,5)"/>
    <xsl:variable name="month" select="substring($date,6,2)"/>
    <xsl:variable name="day" select="substring($date,9,2)"/>
    <xsl:variable name="hour" select="substring-before($time,':')"/>
    <xsl:variable name="min" select="substring-after($time,':')"/>

    <nobr>
    <xsl:value-of select="concat($year,'年',$month,'月',$day,'日',$hour,'時',$min,'分')"/>
    </nobr>

  </xsl:template>

</xsl:stylesheet>

XSL ができるまで

今回のような XSL のカスタマイズ方法は、MSDN の下記ページにまとまっていますので、詳しくはこちらをご覧ください。

[方法] リスト ビューでのフィールドのレンダリングをカスタマイズする
https://msdn.microsoft.com/ja-jp/library/office/ff606773(v=office.14).aspx

まずはじめに行うことは、カスタマイズを行いたい列の既定の定義を探すことです。既定の XSL は、SharePoint のインストール フォルダ内にある「%ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\XSL\fldtypes.xsl」ですので、これを開きお目当ての列の定義を探します。今回の場合は、「DateTime」で検索をかけて引っかかった下記でした。

<xsl:template name="FieldRef_DateTime_body" ddwrt:dvt_mode="body" match ="FieldRef" mode="DateTime_body">
  <xsl:param name="thisNode" select="."/>
    <xsl:choose>
      <xsl:when test="$FreeForm">
        <xsl:call-template name="FieldRef_ValueOf">
          <xsl:with-param name="thisNode" select="$thisNode"/>
        </xsl:call-template>
      </xsl:when>
      <xsl:otherwise>
        <nobr>
          <xsl:call-template name="FieldRef_ValueOf">
            <xsl:with-param name="thisNode" select="$thisNode"/>
        </xsl:call-template>
      </nobr>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

ここで必要な情報は xsl:template にある mode="DateTime_Body" のみです。次に、今回の独自定義を適用する対象の列内部名を xsl:template に match=Field[@Name='<内部名>' のように追記します。

あとは、フィールドの値は $thisNode/@*[name()=current()/@Name] で取得できるので、xsl:value-of で出力することも出来ますし、今回のサンプルのよう xsl:variable で変数に入れて利用することが出来ます。

この後の実際のカスタマイズを記述していく作業は省略させていただき、ここまででまずは、列の表記を独自に定義するための XSL が完成したとします。

XSL リンクに設定する

完成した XSL を適当な名前で保存しておきます。SharePoint インストール フォルダへ入れる場合は、ファイル名の規則があるようですが、リストの「XSL リンク」設定を利用する場合は、特に規則は守らなくても良いみたいでしたので、今回は「datetime.xsl」として、これまた適当なドキュメント ライブラリにアップロードしました。

こうして出来たファイルの URL をリスト ビューの Web パーツの設定変更から「XSL リンク」へ設定することで、列の表記を変更することができます。

さいごに

正直なところ、今回の記事を読んだだけでは「なんのこっちゃ？」となると思います。もしもご興味を持たれたり、今回のようなカスタマイズを行う必要のある方は参考にしていただけたらと思います。XSL の記述含め、一度試してみると、苦労はしますが難しいものではないと思います。ただし、SharePoint では未だに XSLT 1.0 にのみ対応しているので、制約が多くあるのは覚悟しておく必要があります。こうして見ると、SharePoint 2013 以降での JavaScript を利用したカスタマイズは、かなり楽になったと感じますね。