顧客リスト

手順の流れ

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

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

前提条件

• 使用するSP改製品
  [SP改]フォーム レイアウト デザイナー
  
  
  • [SP改]フォーム レイアウト デザイナーのWSPファイル（ソリューションファイル）はインストール・展開済みで、利用するサイトコレクションの機能も有効化されているものとします。
    ※無料トライアルはこちらからお申込み下さい。
  • [SP改]フォーム レイアウト デザイナーのWSPファイルおよびインストール手順が記載された管理者マニュアルは、[SP改]フォーム レイアウト デザイナーのパッケージに含まれています。
    ※こちらからもご参照いただけます。
• 必要な知識
  HTML、JavaScript
• 実現している機能
  • 表示/新規/編集フォームのレイアウト変更
  • テキストボックス幅の変更（JavaScript）
  • 郵便番号から住所検索（JavaScript）

事前準備

サンプルファイル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の内容

• fld_CustomerInfoDemo.js
  

  // jquery がロードされたら呼ばれる初期化関数
  function InitContrl(){
      
      // 姓カタカナのテキストボックスの幅を変更
      changeInputWidth('fld_lastnamekana_Value', '150px');
      // 名カタカナのテキストボックスの幅を変更
      changeInputWidth('fld_firstnamekana_Value', '150px');
      // 姓のテキストボックスの幅を変更
      changeInputWidth('Title_Value', '150px');
      // 名のテキストボックスの幅を変更
      changeInputWidth('fld_firstname_Value', '150px');
      // 電話番号のテキストボックスの幅を変更
      changeInputWidth('fld_tel1_Value', '150px');
      // 内線番号のテキストボックスの幅を変更
      changeInputWidth('fld_extnumber1_Value', '100px');
      // 郵便番号のテキストボックスの幅を変更
      changeInputWidth('fld_zip_Value', '100px');
  
      // 郵便番号テキストボックスが存在しているか確認
      // 存在しない場合は、表示フォーム
      if($('#fld_zip_Value input').length == 0){
          // 「住所検索」ボタンを非表示
          $('#buttonvid_c0').hide();
          // コメントをすべて非表示
          $('[id ^= comment_]').hide();
      }    
  }
  
  // 指定されたテキストボックスの幅を変更
  function changeInputWidth(idValue, widthValue){
      $('#' + idValue + ' input:first').css('width', widthValue); 
  }
  
  // 郵便番号から住所を取得して、市区町村/番地テキストボックスに挿入
  function zipToAddressSearch(){
      var zipValue = $('#fld_zip_Value input')[0].value;
      var url = 'http://api.zipaddress.net?callback=?';
      var query = {'zipcode': zipValue};
      $.getJSON(url, query, function(json){
          if(json.fullAddress == undefined){
              window.alert('郵便番号が正しくありません。'); 
          }else{
              $('#fld_address1_Value input')[0].value = json.fullAddress;
          }
      });
  }
  
  // 今回は、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);
  }

  
  ※郵便番号からの住所検索は、下記「郵便番号-住所検索API」を使用しています。
  http://zipaddress.net/
  ※本JavaScriptでは、CDNにホストされているjQuery をダイナミックロードしています。

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

リストでフォーム レイアウト デザイナー機能を有効にし、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リンクの設定

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

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