詳細表示/非表示の切り替え

[SP改]フォーム レイアウト デザイナーを利用して、SharePoint 2016の表示/新規/編集の各リストフォームで「詳細表示」ボタンをクリックすると、下記のように詳細項目の表示/非表示を切り替えができるようにします。

※ SharePoint2019 でも基本的に動作する想定ですが、すべてのチュートリアルの動作検証は行っておりません。動作しない等ございましたら、こちらからお問合せください。

▼新規フォーム画面例

手順の流れ

[SP改]フォーム レイアウト デザイナーを使って「詳細表示/非表示の切り替え」を作成する手順の流れは以下の通りです。

1. [SP改]フォーム レイアウト デザイナーのインストール
2. サンプルファイルのダウンロード
3. リストの作成
4. JavaScriptファイルのアップロード
5. フォーム レイアウト デザイナーの設定
6. JSリンクの設定

前提条件

• 使用するSP改製品
  [SP改]フォーム レイアウト デザイナー
  
  
  • [SP改]フォーム レイアウト デザイナーのWSPファイル（ソリューションファイル）はインストール・展開済みで、利用するサイトコレクションの機能も有効化されているものとします。
    ※無料トライアルはこちらからお申込み下さい。
  • [SP改]フォーム レイアウト デザイナーのWSPファイルおよびインストール手順が記載された管理者マニュアルは、[SP改]フォーム レイアウト デザイナーのパッケージに含まれています。
    ※こちらからもご参照いただけます。
• 必要な知識
  HTML、JavaScript
• 実現している機能
  • 表示/新規/編集フォームのレイアウト変更
  • 詳細項目の表示/非表示切り替え（JavaScript / CSS）

事前準備

サンプルファイルFormHideDemo.zipをダウンロードします。

リストの作成

リスト（アプリ）を作成し、列を追加します。

1. [カスタムリスト]テンプレートでリスト（アプリ）を作成します。
2. 以下の列を作成します。
   

   列名	列内部名	種類	その他設定	必須
   タイトル	title	1行テキスト		〇
   日付	fld_datet	日付と時刻	日付のみ
   コメント	fld_comment	複数行テキスト	拡張リッチ テキスト

JavaScriptファイルのアップロード

サイトコレクションのマスターページギャラリーに、JavaScriptファイルをアップロードします。

1. サイトコレクションのルートのマスターページギャラリー(/_catalogs/masterpage/)に「fld_FormHideDemo.js」をアップロードします。
   ※「fld_FormHideDemo.js」は、「FormHideDemo.zip」に格納されています。

補足：アップロードするJavaScriptの内容

• fld_FormHideDemo.js
  

  function InitContrl(){
      // 日付、コメント行を非表示
      $('#fld_tr_2').hide();
      $('#fld_tr_3').hide();
  }
  
  // 今回は、jquery をダイナミックロード
  loadScript('http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js', 
      function(){
          _spBodyOnLoadFunctionNames.push('InitContrl');
      }
  );
  
  // 指定された JavaScript ファイルをダイナミックロード
  function loadScript(url, callback) {
      var script = document.createElement('script');
      script.type = 'text/javascript';         
      if (script.readyState) {
           script.onreadystatechange = function () {
               if (script.readyState == 'loaded' || script.readyState == 'complete') {
                   script.onreadystatechange = null;
                   callback();                
               }
           };
      } else { 
          script.onload = function () {
              callback();
          };
      }
      script.src = url;
      document.getElementsByTagName('head')[0].appendChild(script);
  }

  
  ※本JavaScriptでは、CDNにホストされているjQuery をダイナミックロードしています

フォーム レイアウト デザイナーの設定

リストでフォーム レイアウト デザイナー機能を有効にし、XML設定ファイルをインポートします。

1. 上記手順で作成したリストのビューを表示し、リボンの[リスト]タブにある[リストの設定]をクリックします。
   
2. リストの設定画面が表示されるので、[全般設定]セクションの [[SP改]フォーム レイアウト デザイナー設定]をクリックします。
   
3. フォーム レイアウト デザイナーの設定画面が表示されたら、[このリストでフォーム レイアウト デザイナーを有効にする]のチェックボックスを「オン」にします。
   
4. フォーム レイアウト デザイナーの設定ファイル「詳細表示非表示.1.0.0.0.xml」を次のようにインポートします。
   設定画面下部にある[インポート]ボタンをクリックすると[インポート]ダイアログが表示されるので、「詳細表示非表示.1.0.0.0.xml」を指定して[インポート]ボタンをクリックします。
   ※「詳細表示非表示.1.0.0.0.xml」は、「FormHideDemo.zip」に格納されています。
   
5. XMLの設定ファイルがインポートされたことを確認し、設定画面下部にある[保存]ボタンをクリックします。

補足：フォーム レイアウト デザイナーの設定内容

設定項目

• コンテンツタイプ：　アイテム
• 表示フォームのレイアウトを全てのフォームで適用：　ON

表示フォームの設定

• スタイル
  スタイルを選択：　グレータイプ
• 設定画面（↓クリックで拡大表示）
  
• 表示フォームの設定項目
  

  No.	タイプ		設定内容
  1	フィールド タイトル	タイトル	なし
  2	フィールド値	タイトル	なし
  3	フィールド値	タイトル	ボタンタイトル：詳細表示 onclick：descButtonClick(); JavaScript： function descButtonClick(){ var btn = $("#buttonvid0_c0"); if(btn.length ==1){ if(btn[0].value == '詳細表示'){ $("#fld_tr_2").show(); $("#fld_tr_3").show(); btn[0].value = '詳細非表示'; } else{ $("#fld_tr_2").hide(); $("#fld_tr_3").hide(); btn[0].value = '詳細表示'; } } }
  4	フィールド タイトル	日付	なし
  5	フィールド値	日付	なし
  6	フィールド タイトル	コメント	なし
  7	フィールド値	コメント	なし

JSリンクの設定

表示フォーム、新規フォーム、編集フォームのJSリンクで、JavaScriptファイルを指定します。

1. リストのビューを表示し、リボンの[リスト]タブにある[フォーム Web パーツ]⇒[既定の新しいフォーム]をクリックします。
   
2. 「既定の新しいフォーム（NewForm.aspx）」の編集画面が表示されたら、タブサンプルリストWebパーツ右上の▼をクリックし、[Webパーツの編集]をクリックします。
   
3. 画面右側にWebパーツのツールウィンドウが表示されるので、[その他]セクションの[JS リンク]にJavaScriptファイルをアップロードした左記のURL（上記手順では、マスターページギャラリーへアップロード）を指定し、[OK]ボタンをクリックします。
   例) ~sitecollection/_catalogs/masterpage/fld_FormHideDemo.js
4. リボンの[ページ]タブで[編集の終了]をクリックします。
   
5. 「既定の表示フォーム（DispForm.aspx）」と「既定の編集フォーム（Edit.aspx）」も同様の手順でJSリンクを設定します。

このページの先頭へ

© 2015 ANK Co.,Ltd.