SharePoint 2013 流リストビューカスタマイズ

SharePoint 2013流リストビューカスタマイズ
Japan SharePoint Group #16@名古屋
2014/9/20
株式会社内田洋行太田浩史

自己紹介
太田浩史（おおたひろふみ）
•株式会社内田洋行（http://www.uchida.co.jp）
•SharePoint の活用提案や支援をしています。
•会社ではSharePoint Online を運用しています。
2013 -Microsoft MVPSharePoint Server
Ota Hirofumi
https://facebook.com/hrfm.jp
Hirofumi OTA
http://www.slideshare.net/hirofumi_ota
@hrfmjp
https://twitter.com/hrfmjp
idea.toString();
http://idea.tostring.jp

ゆるキャラグランプリ2014 エントリー！
ピペットです。
応援してね！

本日のテーマは「JS リンク」です
•昨年の資料 [メモ帳だけで出来る！SharePoint2013 JS リンク“ちょい” Hacks] http://www.slideshare.net/hirofumi_ota/sharepoint-2013-js-hacks
•当時は知らなかった情報を含めてお話します
•ブログの関連記事へのアクセス数も多くなっています
[SharePoint 2013 「JS リンク」を試してみた] http://idea.tostring.jp/?p=68
[続・SharePoint 2013 「JS リンク」を試してみた] http://idea.tostring.jp/?p=133

リストビューやフォームのカスタマイズ
•SharePoint2010までは
–XSLTを書いてカスタマイズ
–サーバーサイドレンダリング
•SharePoint2013では
–JavaScript“でも”カスタマイズが出来るようになった
–クライアントサイドレンダリング（CSR）
•表示テンプレート
•JSリンク
コレ！

JSリンクはどこで設定するか？
•VisualStudioでリスト定義を作成
–Schema.xmlのViewタグの下にあるJSLinkタグで JavaScriptファイルのパスを指定
–Schema.xml のForm タグのJSLink属性へ JavaScript ファイルのパスを指定
•リストビューやフォームのWebパーツの設定
–JSリンクの設定項目へJavaScriptファイルのパスを指定

JSリンクのパス指定の方法
•SharePointURL トークンを使用する
–サイトコレクションやサイトのURLを示す特殊な指定方法を使用する必要あり現在のサイトコレクション: ~sitecollection 現在のサイト: ~site
•複数のファイルを指定する
–「|」で区切ることで、複数のファイルを登録することができます。
–jQuery がマスターページで読み込まれていない場合などに利用できます設定例: ~sitecollection/…（省略)…/jquery.js|~sitecollection/…/jslink.js

簡単に出来るのは、Webパーツの設定から
•リストビュー/フォームWeb パーツの一番下にあるJS リンクへ JavaScriptファイルへのパスを指定

JavaScript だからCSR だから…
• 簡単にカスタマイズできる！（XSLT よりは…）
• 参考になる情報が豊富！（XSLT は…）
• jQuery などと組み合わせが簡単
– 巷にあふれるプラグインなども組み合わせが可能
– 表現力もアップ
• 異なるブラウザの差異はコードでしっかり吸収
• 複雑な処理を入れると、クライアント側のパフォーマンス
に直接影響する

JSリンクを使うと、お知らせのビューを変更したり

JS リンクを使うと、画像ライブラリでスライダーを作ったり

JS リンクを使うと、予定表をアコーディオンで表示したり

JavaScriptの骨組み
(function(){
varoverrideCtx={};
overrideCtx.Templates={};
overrideCtx.Templates.Header=overrideHeader;
overrideCtx.Templates.Footer=overrideFooter;
overrideCtx.Templates.Item=overrideItem;
overrideCtx.Templates.Fields={
'<internal name1>':{'View':overrideField1},
'<internal name2>':{'View':overrideField2}
}
functionoverrideHeader(ctx){
return<returnhtml>;
}
function・・・
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
カスタマイズしたい箇所を指定
表示するためのHTML を組み立てる
表示上書き

JSリンクでカスタマイズできる範囲
ヘッダー overrideCtx.Templates.Header
アイテム overrideCtx.Templates.Item
フィールド overrideCtx.Templates.Fields
フッター overrideCtx.Templates.Footer
•すべてを定義する必要はなく、必要な箇所のみを指定
•アイテムとフィールドは同時に利用できないような気がします…
•アイテムを指定・ヘッダーを非指定の場合は、アイテムを描画する HTMLにおいて、TR、TDタグで必ず前後を囲む必要があります

jQuery のプラグインを利用する場合の
テクニック
• アイテム、ヘッダー、フッターの組み合わせで、jQuery プラグインに
必要なタグ構造を組み立てる
• クライアント側レンダリング処理の後に、特定の処理を登録できる
OnPostRender を利用してプラグインを適用
ポイント
実際に描画されるタグ構造を確認すると、ヘッダーとアイテムの間に、
Script タグが入っているため、jQuery などを利用して事前に
取り除いておくと上手くいく。

jQuery プラグインを組み込むときの JavaScript 例（ポイントだけ）
overrideCtx.Templates.Header="<div id='event'>";
overrideCtx.Templates.Footer="</div>“
overrideCtx.Templates.Item=eventItem;
overrideCtx.OnPostRender=postRenderHandler;
functionpostRenderHandler(ctx){
vareventTags=jQuery("#event");
eventTags.find("script").remove();
eventTags.accordion();
}
ヘッダーとフッターでｊQueryから特定しやすく ID をつけておくと良し
アイテムの描画はプラグインに合わせて
描画後の処理を登録
jQueryUIのアコーディオンの例
ScriptタグをRemove 後に、 accordion を登録

JSリンクの問題点
問題点: ダウンロード最小化戦略が有効のページではうまく動かない…
•解決策
–MSDN ブログで解説されています。 [Register CSR-override on MDS enabled SharePoint 2013 site] http://blogs.msdn.com/b/sridhara/archive/2013/02/08/register-csr- override-on-mds-enabled-sharepoint-2013-site.aspx
•RegisterModuleInit() というファンクションを使ってJS リンクのために作成したJavaScript を処理に登録すると良いようです。

問題点: ページにある全てのWeb パーツに影響が出てしまう
•解決策
–BaseViewID、ListTemplateTypeのいずれかまたは両方を指定
–この方法だと別のリストの種類毎に設定の影響範囲を切り分けられる
こっちで設定したのに…
こっちにも設定が反映される！

問題点: カスタムリストが複数配置されているページはどうするんだ！！
•世界は広い！イギリスPaul さんがワークアラウンドを公開していました！ [ListViewWeb Part issues with JSLinkand Display Templates –A solution?] http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues- with-jslink-and-display-templates-a-solution/
•描画処理の手前で、BaseViewIDを書き換えるという荒業！

これらをまとめると、次のような JavaScript を書くと良さそうです。
functionRenderMyDisplayTemplate(){
varoverrideCtx={};
overrideCtx.Templates={};
//リストやビューの種類に応じて影響範囲を限定する
overrideCtx.ListTemplateType=106;//event list
overrideCtx.BaseViewID=99;
overrideCtx.Templates.Header="<div id='event'>";
overrideCtx.Templates.Footer="</div>";
overrideCtx.Templates.Item=eventItem;
overrideCtx.OnPostRender=postRenderHandler;

（続き）
//複数のWebパーツに問題が出るときに必要な処理
ExecuteOrDelayUntilScriptLoaded(function(){
varoldRenderListView=RenderListView;
RenderListView=function(ctx,webPartID){
//Check the context of the currently rendering List view
if(ctx.ListTitle=="カレンダー"){
//Override the BaseViewIDif it's the one we want.
ctx.BaseViewID=99;
}
//now call the original RenderListViewwith the updated ctxobject if applicable
oldRenderListView(ctx,webPartID);
}},"ClientTemplates.js");

（さらに続き）
//アイテムのレンダリング処理
functioneventItem(ctx){
varret ="<h3>"+ctx.CurrentItem.Title+" ("+ctx.CurrentItem.EventDate+")"+ "</h3>";
ret +="<div><p>"+ctx.CurrentItem.Description+"</p>";
ret +="<a style=‘text-decoration:underline’ href=‘"+ctx.displayFormUrl+"&ID="+ ctx.CurrentItem.ID +"’>詳細はこちら>>></a></div>";
returnret;
}
//レンダリング処理後のjQuery の登録処理
functionpostRenderHandler(ctx){
vareventTags=jQuery("#event");
eventTags.find("script").remove();
eventTags.accordion();
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}

（さらにさらに続き）
//ダウンロード最小化戦略の対応
//CSR-override for MDS enabled site
RegisterModuleInit("/_catalogs/masterpage/eventjslink.js",RenderMyDisplayTemplate);
//CSR-override for MDS disabled site (because we need to call the entry point function in this case whereas it is not needed for anonymous functions)
RenderMyDisplayTemplate();

JS リンクには、このように設定しました。
~sitecollection/Shared Documents/jquery-1.9.1.js|~sitecollection/Shared Documents/jqueryui/jquery-ui-1.9.2.js|~sitecollection/_catalogs/masterpage/eventjslink.js
※ eventjslink.js だけがマスターページギャラリーにあるのは、ダウンロード最小化戦略対応を試していた時に、他のライブラリではちゃんと動いてくれなかったため…
単にキャッシュが影響していただけかもしれませんが、マスターページギャラリーに入れるのが個人的には推奨かと思います。VS でリスト定義作るときはLayouts に入れる。

さいごに
•SharePoint2013のJS リンクを使うと、かなり自由度高く、しかもローコストでリストビューをカスタマイズすることができます。
•つまずきやすいポイントは、複数のリストビューWeb パーツが配置されたページへの適用と、ダウンロード最小化戦略です。
•SharePointOnlineでも全く同じ方法でカスタマイズできます。
•本当は、リストフォームもカスタマイズできます。 ⇒次ページのおすすめサンプルを参考にしてください。

おすすめサンプルなど
[Client-side rendering (JS Link) code samples]
http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
[SharePoint 2013 Folder Navigation for List View WebPart]
http://code.msdn.microsoft.com/office/SharePoint-2013-Folder-661709eb
[JSリンクを使ってビューにニコちゃんマークを表示してみた]
http://marimew.wordpress.com/2014/09/11/display-icon-web-part-column- using-jslink/
[JSリンクを利用して、リストの表示をカスタマイズする]
http://wakky10777.blog.fc2.com/blog-entry-30.html

SharePoint 2013 流リストビューカスタマイズ

SharePoint 2013 流リストビューカスタマイズ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to SharePoint 2013 流リストビューカスタマイズ

Similar to SharePoint 2013 流リストビューカスタマイズ (20)

More from Hirofumi Ota

More from Hirofumi Ota (20)

Recently uploaded

Recently uploaded (11)