顧客リスト

[SP改for2013]フォーム レイアウト デザイナーを利用して、SharePoint 2013のリストで顧客情報を管理するフォームを自由にレイアウトします。

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

手順の流れ

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

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

前提条件

事前準備

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

リストの作成

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

  1. [カスタムリスト]テンプレートでリスト(アプリ)を作成します。
  2. 以下の列を作成します。
    列名 列内部名 種類 最大文字数 必須
    title 1行テキスト 50
    fld_firstnamer 1行テキスト 50
    セイ fld_lastnamekana 1行テキスト 50
    メイ fld_firstnamekana 1行テキスト 50
    電話番号 fld_tel1 1行テキスト 15
    郵便番号 fld_zip 1行テキスト 7
    市区町村/番地 fld_address1 1行テキスト 255
    マンション名 fld_address2 1行テキスト 255  
    メールアドレス fld_email1 1行テキスト 255  
    内線番号 fld_extnumber1 1行テキスト 50  

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

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

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

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

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

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

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

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

設定項目

表示フォームの設定

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

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

このページの先頭へ