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

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

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

▼新規フォーム画面例

補足：アップロードする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 をダイナミックロードしています

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

設定項目

• コンテンツタイプ：　アイテム
• 表示フォームのレイアウトを全てのフォームで適用：　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	フィールド値	コメント	なし

このページの先頭へ

© 2015 ANK Co.,Ltd.