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

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

▼新規フォーム画面例新規フォーム

手順の流れ

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

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

前提条件

事前準備

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

リストの作成

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

  1. [カスタムリスト]テンプレートでリスト(アプリ)を作成します。
  2. 以下の列を作成します。
    列名 列内部名 種類 その他設定 必須
    タイトル title 1行テキスト  
    日付 fld_datet 日付と時刻 日付のみ  
    コメント fld_comment 複数行テキスト 拡張リッチ テキスト  

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

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

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

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

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

リストでフォーム レイアウト デザイナー機能を有効にし、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の設定ファイルがインポートされたことを確認し、設定画面下部にある[保存]ボタンをクリックします。

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

設定項目

表示フォームの設定

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

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

このページの先頭へ