SharePointクロスサイトのリスト表示をJQueryで行う

いきなりSharePointの話題なのであるが、同時にかなりマニアックである。

仕事場では4年前からSharePointを使っており自分の部署のアドミンなどをなぜか押し付けられ、とはいうもののねっこのところはしっかりITのかたがたが管理しているわけで、仏様の手のひらにのった孫悟空のようなカスタマイズしかできないわけではあるが、それはさておき

SharePointの不満のひとつにクロスサイトで使っているリストパーツを表示できない、というのがある。 同じサイトコレクションの下であればリストの共有もできる、ということだが、我がITチームはそのようには設定してくれなかった。 もちろん、それなりの理由が4年前にはあったわけで愚痴は言うまい(←言ってる).

Christophe Humbert氏が主催している Path to SharePoint ではこれに対する 解決法が載っている. 彼のサイトにある online tools のひとつが吐き出すJavaScriptを CEWPに落とし込んであげるだけで、他のサイトからのリストやカレンダーの表示が可能になる。 このスクリプトは  JQueryを使ってターゲットページのリストを抜き出し、中身をCEWPのあるところに表示するような仕掛けになっている。

この “Cross site list Snapshot tool” 、使ってみると快適に作動する。 ただし、この方法で抜き出されたリストはそのままではTextToHTML script が使えない。

この TextToHTML というのもChristopheさんの作なのだが、リスト表示の中身を計算式HTMLを生成したコラムをスクリプトを使って処理してカラーテキストや背景色を変えたり、果てはバーグラフやKPIに使うような赤・青・黄の信号灯を表示したりそのほかにも色々できる便利ものである。 もし、SharePointを使っていて、まだ見たことがなければ百聞は一見にしかず、 これとか,これ, あるいは こんな表示もできる、ということで、SharePointの表現力が一気に高まる。 同じ作者の Easy Tabs なども使ってサイトの設計を行えば、苦労せずに同僚から尊敬のまなざしで見られること間違いなしである。

ではなぜ、この二つのツールが組み合わせではうまくうごかないかというと  TextToHTML はページがロードしている最中に実行されてしまうが、そのときにはまだ Cross site list snapshot のスクリプトは他のページを読みこんでいる最中でリストの表示が間に合わないのである。

やはりおなじようなことを彼のブログで質問した人がいて、 Christopheさんが言うにはJQueryのcallback functionを使えば動くはず、ということであった。.

つまりJQuerryの load function に textToHTML scriptをコールバックさせて、順序正しくスクリプトを実行させればよいわけ。

早速試してみて、うまくいったので、ここに書いておく。 2010年の11月1日時点でPathToSharePointサイトにおいてあるスクリプトで作動を確認済み。

まずは TextToHTML のほうを修正する。.  このスクリプトをChristopheさんのサイトからダウンロードしたら、テキストエディターを使って以下の部分を修正する。 (ここでは “light version”を使用)

// Calendar views
var regexpA = new RegExp("\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*");
TextToHTML(document.getElementsByTagName("a"),regexpA);

// List views
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);

上の部分を下のように修正する。基本的には実行コードをファンクションとして定義する。

// Start of modifications
//Calendar views
function calendarT2H() {
var regexpA = new RegExp("\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*");
TextToHTML(document.getElementsByTagName("a"),regexpA);
}
// List views
function listT2H(){
var regexpTD = new RegExp("^\\s*<([a-zA-Z]*)(.|\\s)*/\\1?>\\s*$");
TextToHTML(document.getElementsByTagName("TD"),regexpTD);
}
//maintains the original functionality of the script.
// Omit below two lines if no other part of the page uses TexttoHtML
calendarT2H();
listT2H();
//end of modifications

で、この修正されたスクリプトを TextToHTMLとして保存

次に Path To SharePoint’s  Tool のCross-Site-List-Snapshotページ を使って、自分の使いたいリストのスクリプトを作成。

このスクリプトをtext editorで開き、以下の文字列を探す。

..(“href”,$(this).attr(“href”)+s+”Source=”+location.href);});});};LoadView…

ここの

“location.href);});});};”

この部分を

“location.href);},listT2H());});};”

このように変更してコールバックを追加。  [ listT2H() はリスト表示の場合。カレンダーの場合は calendarT2H() に変更.]

[おまけ]JQuery load() 関数の使いかた。
Load (url,parameters,callback)
ここで url は参照されるURL, parameters は Javascript object で、サーバーにおくる値を プロパティーとして保持。callback はAjaxが終了した時点でjQueryが呼び出す関数。SnapshotのコードではurlがターゲットリストのあるページのURL. parametersはクリストフさんが処方したマジックパラメーターで、これでリスト成分をぬきだしている。ただし、オリジナルスクリプトではコールバックが空白になっている。 (実は昔JQueryの参考書を読んだときに、このCallback機能の具体的な使い方がわからなかったのだが今回の経験で必要性を実感した次第)

このスクリプトをセーブする.

われわれの環境はSharePoint2007で、一番綺麗にCEWPを使ってスクリプトを実行させる方法は、ソースとして書き込むのではなく、スクリプトファイルをリンクすることだと思っているので、サイト内に “webpart”というドキュメントライブラリーを作成し、ここに二つのスクリプトファイルをアップロードする。

リストを表示したい Web Part ZoneにはふたつのCEWPを埋め込むことになる。

WepPart 1 – CEWP  linked to ../webpart/CrossSiteListSnapshot-modified.txt
WebPart 2 – CEWP (Hidden) linked to ../webpart/TexttoHTML-modified.txt

これで、他のサイトのリストやカレンダーが色つきカラーバー付きで表示されるようになる。

めでたしめでたし!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.