Tag( "Customize" ){ return results; };

JS リンクで列の値に応じて行の色を変える（クイック編集モード対応）

Published Date: December 8, 2017 - 12:05 am / JavaScript, SharePoint 2013, SharePoint 2016, SharePoint Online

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

この記事は、Office 365 Advent Calendar 2017 に参加しています。

Office 365 Advent Calendar 2017
https://adventar.org/calendars/2585

SharePoint Server 2013 以降や、SharePoint Online の “クラシック UI” のリストで利用できる JS リンクを使って、列に入力された値に応じて行の色を変える方法です。

JS リンクの OnPostRender を利用する方法でイルミネート・ジャパン・ブログさんに記事がありますが、こちらのサンプルではリストのクイック編集モードに対応していないようでしたので、クイック編集モードに対応するように少しだけ書き足してみました。

[SharePoint Online/SharePoint Server 2013] JS リンクでリストビューに条件付き書式設定 | イルミネート・ジャパン ブログ
https://crieilluminate.wordpress.com/2016/01/26/sharepoint-onlinesharepoint-server-2013-js-%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%A7%E3%83%AA%E3%82%B9%E3%83%88%E3%83%93%E3%83%A5%E3%83%BC%E3%81%AB%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E6%9B%B8%E5%BC%8F/

とは言っても、ほんの数行書き足しただけです。

Read More

SharePoint Online モダン ページのページ ヘッダーを非表示にする

Published Date: February 2, 2017 - 1:51 pm / SharePoint Online

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

SharePoint Online では新しい「モダン ページ」が利用可能となっており、先日も Bing マップなどの新たな Web パーツも追加されました。

New web parts for your modern communications in SharePoint Online
https://techcommunity.microsoft.com/t5/SharePoint/New-web-parts-for-your-modern-communications-in-SharePoint/m-p/40937

この新しいモダン ページは、作成済みのサイトにも追加できます。手順は、下記の記事の通りです。

SharePoint Online のチーム サイトのホームを”新しい” UI のページへ変更する
https://idea.tostring.jp/?p=2304

ただ、このモダン ページには「ページ ヘッダー」が表示されるパターンと表示されないパターンの 2 種類が存在しているのが気になっていました。特にサイトのホームに設定した場合、ページ ヘッダーが少々邪魔に感じることもあるので、なんとかして非表示にできないかと試してみました。

Read More

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

Published Date: July 5, 2016 - 5:45 pm / SharePoint 2010, SharePoint 2013

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

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

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

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

Read More

SharePoint 2013 以降のドキュメント ライブラリでドラッグ & ドロップのアップロード機能を無効化する

Published Date: March 25, 2016 - 4:13 pm / SharePoint 2013, SharePoint 2016, SharePoint Online

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

SharePoint 2013 以降では、ドキュメント ライブラリへのファイルのアップロードが、デスクトップからのドラッグ & ドロップで行うことができるようになりました。これはすごく便利なのですが、ファイルのアップロード時にメタデータを入力させたい場合は、自動的に入力のためのダイアログが開かないため少々手間がかかります。であれば、いっそのことこの機能を無効にして、従来通りのアップロード画面からの利用に統一したいなと思うも、どこからも無効化するための設定を探し出せません。というわけで調べたところ、JavaScript を使って無効化できる方法を発見しました。SharePoint Online でもこの方法で OK でした。

Read More

SharePoint のスクリプト オンデマンドに触れてみる

Published Date: November 30, 2015 - 8:31 pm / SharePoint 2010, SharePoint 2013

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

SharePoint 2010 以降（Online を含む）では、大量の JavaScript ファイルを読み込み、また、実行し動作しています。この大量の JavaScript ファイルは、毎回のページ ロードで全て読み込まれるわけではなく、ユーザー操作に応じて動的に（オンデマンドに）読み込むことができる仕組みが用意されています。これは「スクリプト オンデマンド（SOD）」と呼ばれており、この仕組みを利用するための JavaScript メソッドが SharePoint の JavaScript Library に実装されています。

自分でもよく動作を調べ直すことがあるので、メモ代わりに残しておきます。

Read More

他のサイト コレクションのリストの情報を JavaScript で取得する

Published Date: March 24, 2015 - 11:05 am / SharePoint 2013, SharePoint Online

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

SharePoint のサイトを作っていくと、他のサイト コレクションのリストに保存された情報などをページに表示したいということがあります。例えば、とあるワークフローが他のサイト コレクションにある場合、そのワークフローにより割り当てられるタスクが格納されるリストの新着アイテムを表示したいなどです。ほかにも他のサイト コレクションのお知らせリストの新着アイテムを表示できても良いですね。

しかしながら、SharePoint の標準機能におけるリストに格納されたデータの利用・表示範囲はサイトの単位になっているため、その更に上位のサイト コレクションが異なる場合にはもちろん利用できません。何か方法はないものかと、試しに SharePoint の JavaScript API で試してみたところ実現できそうだったので投稿します。

今回の記事では、SharePoint Online にて動作確認を行っています。SharePoint Online では全てのサイト コレクションが「<tenant>.sharepoint.com」の配下に作成され、クロスドメイン制約に該当しないことも重要な点かなと思います。

Read More

SPUtility.js を使ってみた

Published Date: November 26, 2014 - 5:43 pm / JavaScript, SharePoint, SharePoint Online

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

SharePoint のリストを触っていると、ちょっとだけ工夫したくなるときがあります。例えば…「アイテムの新規作成時には入力させたいけど、編集時には入力させたくない列がある」「姓と名の列が入力されたら、自動的に氏名列に値を入れたい」「URL のクエリ文字列に応じて、列の既定値を変えたい」…などなどです。どれも、JavaScript やワークフローなどの組み合わせで実現が出来るのですが、スゴク簡単に利用できそうな jQuery ライブラリを Codeplex で見つけたので試してみました。それが「SPUtility.js」というライブラリです。

SPUtility.js
http://sputility.codeplex.com/

Read More

JS リンク コードサンプル集

Published Date: November 19, 2013 - 9:11 am / JavaScript, SharePoint 2013, SharePoint Online

• Click to share on Facebook (Opens in new window)
• Click to share on Twitter (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Pocket (Opens in new window)

以前の記事でも利用方法を紹介した JS リンクですが、嬉しいことにカスタマイズのサンプル集が MSDN デベロッパーセンターにて公開されていました。これを参考にすることで、さまざまなカスタマイズへ応用が利きそうですね。私もさっそくダウンロードしました。7種類のサンプルコードが含まれており、特に「Sample 7 (List add and edit – Email Regex Validator)」のリスト フォームのバリデーションは多々応用が利きそうですね。

Client-side rendering (JS Link) code samples
http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

Read More