タブサンプルリスト

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

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

▼新規フォーム画面例新規フォーム(基本情報・コメント)

手順の流れ

[SP改]フォーム レイアウト デザイナーを使って「タブサンプルリスト」を作成する手順の流れは以下の通りです。

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

前提条件

事前準備

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

リストの作成

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

  1. [カスタムリスト]テンプレートでリスト(アプリ)を作成します。
  2. 以下の列を作成します。
    列名 列内部名 種類 その他設定 必須
    案件名 title 1行テキスト 最大文字数:255
    担当者 fld_projectowner ユーザーまたはグループ ユーザーのみ  
    コメント fld_comment 複数行テキスト 拡張リッチ テキスト  
    開始日 fld_startdate 日付と時刻 日付のみ  
    終了日 fld_enddate 日付と時刻 日付のみ  

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

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

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

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

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

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

  1. 上記手順で作成したリストのビューを表示し、リボンの[リスト]タブにある[リストの設定]をクリックします。
    リボン
  2. リストの設定画面が表示されるので、[全般設定]セクションの [[SP改]フォーム レイアウト デザイナー設定]をクリックします。
    全般設定
  3. フォーム レイアウト デザイナーの設定画面が表示されたら、[このリストでフォーム レイアウト デザイナーを有効にする]のチェックボックスを「オン」にします。
    機能の有効化
  4. フォーム レイアウト デザイナーの設定ファイル「タブサンプルリスト.1.0.0.0.xml」を次のようにインポートします。
    設定画面下部にある[インポート]ボタンをクリックすると[インポート]ダイアログが表示されるので、「タブサンプルリスト.1.0.0.0.xml」を指定して[インポート]ボタンをクリックします。
    ※「タブサンプルリスト.1.0.0.0.xml」は、「TabDemo.zip」に格納されています。
    インポート
    ※ルート以外のマスターページギャラリーに「fld_TabDemo.css」をアップロードした場合には、「その他スタイル(CSSファイルのURL):」を変更してください。
    既定では、「/_catalogs/masterpage/fld_TabDemo.css」が指定されています。
  5. XMLの設定ファイルがインポートされたことを確認し、設定画面下部にある[保存]ボタンをクリックします。

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

設定項目

表示フォームの設定

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

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

このページの先頭へ