タブサンプルリスト

[SP改]フォーム レイアウト デザイナーを利用して、SharePoint 2016の表示/新規/編集の各リストフォームを下記のようにタブ化します。
「基本情報」タブには、「担当者」「開始日」「終了日」を表示し、「コメント」タブには「コメント」を表示します。

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

▼新規フォーム画面例

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

• fld_TabDemo.js
  

  // jquery がロードされたら呼ばれる初期化関数
  function InitContrl(){
  	// タブの切り替え
  	$('#tabs a[href^='#panel']').click(function(){
  		$('#tabs .panel').hide();
  		$(this.hash).fadeIn();
  		return false;
  	});
  	$('#tabs a[href^='#panel']:eq(0)').trigger('click');
  }
  
  // 今回は、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 をダイナミックロードしています。
• fld_TabDemo.css
  

  formlayoutdiv {
  
  }
  .fld-formtable{
  	width: 100%;
  	z-index: 0;
  	border-collapse:collapse;
  }
  table.fld-formtable > tbody > tr > th{
  	background-color: #f3f3f3;
  	padding:5px 10px 5px 10px;
  	text-align: left;
      font-weight:normal;
      color:#191970;
      white-space:nowrap;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;    
      width: 150px;
  }
  table.fld-formtable > tbody > tr > td{
      background-color: #ffffff;
      padding:5px 10px 5px 10px;
      text-align: left;
      font-weight:normal;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      width: 200px;
  }
  .fld-standardheader{
      text-align:left;
      font-size:1em;
      margin:0px
  }
  #tabs ul {
      overflow:hidden;
      height:2em;
      list-style:none;
      border-bottom:1px
      solid #cccccc;
      padding-left:0px
  }
  #tabs li {
      float:left;
      display:inline;
      margin-left:5px;
      padding:5px;
      border:1px
      solid #ccc;
      border-bottom:none;
      border-radius:5px 5px 0 0;
  }
  #tabs li a{
      color:black;
      text-decoration: none;
  
  }
  #tabs .panel {
      display:none;
  }

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

設定項目

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

表示フォームの設定

• スタイル
  スタイルを選択：その他スタイル
  CSSファイルのURL：/_catalogs/masterpage/fld_TabDemo.css
• 設定画面（↓クリックで拡大表示）
  
• 表示フォームの設定項目
  

  No.	タイプ		設定内容
  1	フィールド タイトル	案件名	なし
  2	フィールド値	案件名	なし
  3	フィールド値	テキスト	<div id="tabs"> <ul> <li><a href="#panel1">基本情報</a></li> <li><a href="#panel2">コメント</a></li> </ul> <div id="panel1" class="panel"> <table class="fld-formtable"><tbody><tr><th>
  4	フィールド タイトル	担当者	なし
  5	フィールド値	テキスト	</th><td>
  6	フィールド値	担当者	なし
  7	フィールド値	テキスト	</td></tr><tr><th>
  8	フィールド タイトル	開始日	なし
  9	フィールド値	テキスト	</th><td>
  10	フィールド値	開始日	なし
  11	フィールド値	テキスト	</td></tr><tr><th>
  12	フィールド タイトル	終了日	なし
  13	フィールド値	テキスト	</th><td>
  14	フィールド値	終了日	なし
  15	フィールド値	テキスト	</td></tr></tbody></table> </div> <div id="panel2" class="panel">コメント:
  16	フィールド値	コメント	なし
  17	フィールド値	テキスト	</div></div>

このページの先頭へ

© 2015 ANK Co.,Ltd.