Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

11,074 views

Published on

Japan SharePoint Group #16 でお話させて頂いた資料です。

Published in: Technology
  • Be the first to comment

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

  1. 1. SharePoint 2013流 リストビューカスタマイズ Japan SharePoint Group #16@名古屋 2014/9/20 株式会社内田洋行太田浩史
  2. 2. 自己紹介 太田浩史(おおたひろふみ) •株式会社内田洋行(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
  3. 3. ゆるキャラグランプリ2014 エントリー! ピペットです。 応援してね!
  4. 4. 本日のテーマは「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
  5. 5. リストビューやフォームのカスタマイズ •SharePoint2010までは –XSLTを書いてカスタマイズ –サーバーサイドレンダリング •SharePoint2013では –JavaScript“でも”カスタマイズが出来るようになった –クライアントサイドレンダリング(CSR) •表示テンプレート •JSリンク コレ!
  6. 6. JSリンクはどこで設定するか? •VisualStudioでリスト定義を作成 –Schema.xmlのViewタグの下にあるJSLinkタグで JavaScriptファイルのパスを指定 –Schema.xml のForm タグのJSLink属性へ JavaScript ファイルのパスを指定 •リストビューやフォームのWebパーツの設定 –JSリンクの設定項目へJavaScriptファイルのパスを指定
  7. 7. JSリンクのパス指定の方法 •SharePointURL トークンを使用する –サイトコレクションやサイトのURLを示す特殊な指定方法を使用する必要あり 現在のサイトコレクション: ~sitecollection 現在のサイト: ~site •複数のファイルを指定する –「|」で区切ることで、複数のファイルを登録することができます。 –jQuery がマスターページで読み込まれていない場合などに利用できます 設定例: ~sitecollection/…(省略)…/jquery.js|~sitecollection/…/jslink.js
  8. 8. 簡単に出来るのは、Webパーツの設定から •リストビュー/フォームWeb パーツの一番下にあるJS リンクへ JavaScriptファイルへのパスを指定
  9. 9. JavaScript だからCSR だから… • 簡単にカスタマイズできる!(XSLT よりは…) • 参考になる情報が豊富!(XSLT は…) • jQuery などと組み合わせが簡単 – 巷にあふれるプラグインなども組み合わせが可能 – 表現力もアップ • 異なるブラウザの差異はコードでしっかり吸収 • 複雑な処理を入れると、クライアント側のパフォーマンス に直接影響する
  10. 10. JSリンクを使うと、 お知らせのビューを変更したり
  11. 11. JS リンクを使うと、 画像ライブラリでスライダーを作ったり
  12. 12. JS リンクを使うと、 予定表をアコーディオンで表示したり
  13. 13. 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 を 組み立てる 表示上書き
  14. 14. JSリンクでカスタマイズできる範囲 ヘッダー overrideCtx.Templates.Header アイテム overrideCtx.Templates.Item フィールド overrideCtx.Templates.Fields フッター overrideCtx.Templates.Footer •すべてを定義する必要はなく、必要な箇所のみを指定 •アイテムとフィールドは同時に利用できないような気がします… •アイテムを指定・ヘッダーを非指定の場合は、アイテムを描画する HTMLにおいて、TR、TDタグで必ず前後を囲む必要があります
  15. 15. jQuery のプラグインを利用する場合の テクニック • アイテム、ヘッダー、フッターの組み合わせで、jQuery プラグインに 必要なタグ構造を組み立てる • クライアント側レンダリング処理の後に、特定の処理を登録できる OnPostRender を利用してプラグインを適用 ポイント 実際に描画されるタグ構造を確認すると、ヘッダーとアイテムの間に、 Script タグが入っているため、jQuery などを利用して事前に 取り除いておくと上手くいく。
  16. 16. 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(); } ヘッダーとフッターで jQueryから特定しやすく ID をつけておくと良し アイテムの描画は プラグインに合わせて 描画後の処理を登録 jQueryUIのアコーディオンの例 ScriptタグをRemove 後に、 accordion を登録
  17. 17. 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 を処理に登録すると良いようです。
  18. 18. JSリンクの問題点 問題点: ページにある全てのWeb パーツに影響が出てしまう •解決策 –BaseViewID、ListTemplateTypeのいずれかまたは両方を指定 –この方法だと別のリストの種類毎に設定の影響範囲を切り分けられる こっちで設定したのに… こっちにも設定が反映される!
  19. 19. JSリンクの問題点 問題点: カスタムリストが複数配置されているページはどうするんだ!! •世界は広い! イギリス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を書き換えるという荒業!
  20. 20. これらをまとめると、次のような 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;
  21. 21. (続き) //複数の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");
  22. 22. (さらに続き) //アイテムのレンダリング処理 functioneventItem(ctx){ varret ="<h3>"+ctx.CurrentItem.Title+"&nbsp;("+ctx.CurrentItem.EventDate+")"+ "</h3>"; ret +="<div><p>"+ctx.CurrentItem.Description+"</p>"; ret +="<a style=‘text-decoration:underline’ href=‘"+ctx.displayFormUrl+"&ID="+ ctx.CurrentItem.ID +"’>詳細はこちら&gt;&gt;></a></div>"; returnret; } //レンダリング処理後のjQuery の登録処理 functionpostRenderHandler(ctx){ vareventTags=jQuery("#event"); eventTags.find("script").remove(); eventTags.accordion(); } SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx); }
  23. 23. (さらにさらに続き) //ダウンロード最小化戦略の対応 //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();
  24. 24. JS リンクには、このように設定しました。 ~sitecollection/Shared Documents/jquery-1.9.1.js|~sitecollection/Shared Documents/jquery- ui/jquery-ui-1.9.2.js|~sitecollection/_catalogs/masterpage/eventjslink.js ※ eventjslink.js だけがマスターページギャラリーにあるのは、ダウンロード最小化戦略 対応を試していた時に、他のライブラリではちゃんと動いてくれなかったため… 単にキャッシュが影響していただけかもしれませんが、マスターページギャラリーに入れるの が個人的には推奨かと思います。VS でリスト定義作るときはLayouts に入れる。
  25. 25. さいごに •SharePoint2013のJS リンクを使うと、かなり自由度高く、 しかもローコストでリストビューをカスタマイズすることができます。 •つまずきやすいポイントは、複数のリストビューWeb パーツが 配置されたページへの適用と、ダウンロード最小化戦略です。 •SharePointOnlineでも全く同じ方法でカスタマイズできます。 •本当は、リストフォームもカスタマイズできます。 ⇒次ページのおすすめサンプルを参考にしてください。
  26. 26. おすすめサンプルなど [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

×