2008年2月22日 (金)

タイトル列の非表示 (JavaScript を用いるアプローチ)

以前の記事で、タイトル列の非表示を例にあげ、SharePoint Designer 2007 のユーザー設定のリストフォームを利用する方法をご紹介しました。http://shanqiai.weblogs.jp/sharepoint_technical_note/2007/12/newformaspx_edi_d88b.html

便利な機能ではあるのですが、使い方によっては不具合も多く見られるようです。たとえば、2929さんが何度かコメントされていますがテンプレート化して利用する際にエラーが表示されるなどです。

そこで、タイトル列を非表示にする別のアプローチを探っていたのですが、JavaScript を使って HTML DOM を操作するアプローチが現実的である場合があるように思います。もちろん、ブラウザ依存の部分を考えなければならず、本来はそうした差異を吸収してくれるのがASP.NETのコントロールであったりするわけですが、ある意味逆転の発想です。

参考までに、以下に任意のリストで「タイトル列を非表示にする」スクリプトコードの例を記述しておきます。

*****************************************

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<!-- 以下に、JavaScript を追加-->

<script type="text/javascript">
<!--
_spBodyOnLoadFunctionNames.push("hideTitle");

function hideTitle()
{

var targetTag=getTagFromIdenfifierAndTitle('input','TextField','タイトル');

while(targetTag.parentNode!=null)
{
  tag=tag.parentNode;
  if(tag.tagName=='TR')
  {
   tag.style.display='none';
   return;
  }
}

}//function

function getTagFromIdentifierAndTitle(tagName, identifier, title) {
  var len = identifier.length;
  var tags = document.getElementsByTagName(tagName);

  for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;
    if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
      return tags[i];
    }//if
  }//for

  return null;
}//function

//-->
</script>

****************************************

上記のコードでは、"タイトル" と書かれているノードの親となる "TR" 要素を取得し、スタイル属性に "display:none" を指定しています。これで、テーブル内のタイトル行が非表示になるわけです。

このように JavaScript から DOM を操作するアプローチはロジックを考えるのが少々面倒なところはありますが、既存のWebパーツの邪魔をせずに必要なタグを修正したり、追加できるのでそれなりに使える場面は多いように思います。

開発者の方でも意外と JavaScript でコーディングする機会は少ないかも知れませんが、MOSS のエンジニアはJavaScript による DOM 操作の基本は押さえておきたいですね。


参考: SharePoint Designer 2007 Team Blog (英語)

トラックバック

このページのトラックバックURL: http://bb.lekumo.jp/t/trackback/718613/34255764

タイトル列の非表示 (JavaScript を用いるアプローチ)を参照しているブログ:

コメント

はじめまして。
いつもこちらのブログを参考にさせていただいています。
以前、こちらのブログにも掲載されていました、クリエ・イルミネートさんのSharePoint講習会にも参加させていただきました。

早速ですが。
今回の記事には直接関係ないのですが、今回も利用されてますターゲットのタグを探すgetTagFromIdentifierAndTitle関数ですが、一行テキストや、選択肢などは正しく探し出せるのですが、複数行テキストは、認識してくれないようなのです。
identifier の部分がTextField では無いのかと、いろいろ試してみたのですが、どうにもうまくいかず・・。
何か情報はご存知でしょうか。。
私の環境だけの問題でしたら無視してください。
お忙しいところ大変恐縮ですが、よろしくお願いいたします。

boboさん、いつもお世話になっております。コメントが遅くなりすみません。
複数行テキストは書式なしをしていしている場合で試しましたが、getTagFromIdenfifierAndTitle関数の第一引数に "textarea" を指定することで取得できました。おそらくそこがポイントではないかと思います。おかしいなと思ったらブラウザに出力されるソースコードを確認してみるとよいですよ。これで解決するとよいのですが。

山崎さん、お忙しいところ、コメントありがとうございました。
おっしゃるとおり、第一引数を"textarea"にしたところ、値を取得できました。
はきだされるソースの、テキストボックスの input に対応する部分が、textarea でした。
ちょっと考えればわかりそうなもんですが、テンパって投稿してしまい、大変恐縮です。
次回からはあわてず騒がず、じっとソースを確認します。
ありがとうございました!!