受信メール機能を使用してブログに投稿する
[操作]メニューから特定のメニューを非表示にする

タイトル列の非表示 (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 (英語)

コメント

bobo

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

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

山崎愛

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

bobo

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

コメントの確認

コメントのプレビュー

プレビュー中です。コメントはまだ投稿されていません。

処理中...
コメントを投稿できませんでした。エラー:
コメントを投稿しました。コメントは記事の投稿者が承認してから表示されます。 さらにコメントを投稿する

入力された文字と数字は画像と一致していません。再度入力してください。

最後に、下の画像の中に見える文字と数字を入力してください。これはプログラムを使ってコメントを自動的に投稿するのを防ぐために行われています。

画像を読み取れない場合は 別の画像を表示してください。

処理中...

コメントを投稿

コメントは記事の投稿者が承認してから表示されます。

アカウント情報

(名前とメールアドレスは必須です。メールアドレスは公開されません。)