JS Linkを使ってリストのビューをカスタマイズ

弊社ブログをご愛読の皆様、こんにちは。MS開発部の種田です。

先日、かなり昔に作成されたサイトの改修依頼をいただいたので、サイトの仕様を確認したところ、XSLTでビューをこれでもか!というぐらいにカスタマイズされているサイトで、かなり焦りました。
昔はSharePoint Designerを立ち上げてXSLT リスト ビュー Web パーツを挿入し、ビューのカスタマイズを行う方法は1つの手としてありましたがSharePoint 2013からJS Linkという機能が追加され、SharePoint Designerを立ち上げる必要も無く、JavaScriptのみでビューをレンダリングできるようになりました。今回はそのJS Linkについて簡単にご紹介したいと思います。

JS Linkとは

上述の通りSharePoint 2013で追加された機能です。XSLTよりも一般的に利用されているJavaScriptを使用し、クライアントサイドの処理としてビューのレイアウトを変えたり、条件付き書式のような設定が行えます。 今まで大変手間がかかっていたことが簡単に(最低限メモ帳は必要ですが)カスタマイズできてしまうという便利な機能です。 またXSLTと違ってクライアントサイドの処理となるので、サーバーからの応答も大変早く、ブラウザを利用してのデバッグも行えます。
今まで行っていたXSLTや、Web Serviceで取得したXMLをJavaScriptで分解しなどは一体なんだったのでしょうか。。 (JS Linkですがメリットばかりじゃなくデメリットもあったりするんですよね)

JS Linkを使ってビューのレイアウトを変更

これはごく普通のお知らせリストをそのまま表示したものです。
これだけでも最低限の情報は表示されておりますがどこか寂しいですよね。
それでは少しカスタマイズをしてみます。




まずはCSSだけあててみました。
何もしない画面に比べると少し色合いがついて見やすくなりました。これでも良いような気もしますが、データが縦に並ぶレイアウトは相変わらずです。
ではお待ちかねのJS Linkにてもう少し華やかにしてみましょう。




いかがでしょうか!!笑
縦に並んでいたデータがコンパクトに纏まりましたね。JS Linkを適用していないビューの面影はもはやありません。 私がタブ表示をよく使うので今回このレイアウトにて作ってみました。(XSLTで再現する気にはなれませんね)
また表示するデータの並び順やフィルターなどはビューの設定を引き継いでいるため、必要に合わせて現在のビューの編集を行ってご利用いただけるという便利さも兼ね備えております。
表示レイアウトをJS Linkで作ってあげれば、不要データのフィルターや、並び順などの設定はユーザー様でも変更できますね。

これ以外にもニーズや好みに合わせて様々な形式で表示させることが可能です。
業務利用に便利なものとしては、リストに登録されたデータを元にグラフやレーダーチャートを表示させたり、グリッド系ライブラリとあわせてデータを見やすく管理したりなどでしょうか。
機会があればJS Linkを使ったビューのカスタマイズ集も掲載したいと思います。

※反映方法やJS Linkのお作法などはこちらの記事で紹介されておりますので、併せてご参考下さい。

いかがでしたでしょうか?今までは費用対効果などで見送っていた機能などもJS Linkが追加されたことで実装やご提案の機会も増えましたね。弊社の業務に興味をもたれたかたは是非、お気軽にお問い合わせください。
こんなのを作りたいのですがJS Linkで実装できますか?などといったお問い合わせなどでも絶賛お待ちしております。
(お問い合わせはこちらのページをご確認の上、メールアドレス「info@deepcom.co.jp」までご連絡ください。)

以上、最後までご愛読いただきありがとうございました。

コメントは利用できません。