顧客リスト

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

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

▼新規フォーム画面例

手順の流れ

[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の設定ファイルがインポートされたことを確認し、設定画面下部にある[保存]ボタンをクリックします。

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

設定項目

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

表示フォームの設定

• スタイル
  スタイルを選択：グレータイプ
• 設定画面（↓クリックで拡大表示）
  
• 表示フォームの設定項目
  

  No.	タイプ		設定内容
  1	フィールド タイトル	テキスト	■名前
  2	フィールド タイトル	テキスト	<nobr>フリガナ<span class="ms-accentText" title="これは必須フィールドです。"> *</span></nobr>
  3	フィールド値	テキスト	姓:
  4	フィールド値	セイ	なし
  5	必須検証設定	セイ必須	タイトル：セイ必須 対象フィールド：セイ エラーメッセージ：「姓」をカタカナで入力して下さい。
  6	パターン一致 検証設定	セイパターン	タイトル：セイパターン 対象フィールド：セイ パターン(正規表現)：^[ァ-ー]+$ エラーメッセージ：全角カタカナで入力して下さい。
  7	フィールド値	テキスト	名:
  8	フィールド値	メイ	なし
  9	必須検証設定	メイ必須	タイトル：メイ必須 対象フィールド：メイ エラーメッセージ：「名」をカタカナで入力して下さい。
  10	パターン一致 検証設定	メイパターン	タイトル：メイパターン 対象フィールド：メイ パターン(正規表現)：^[ァ-ー]+$ エラーメッセージ：全角カタカナで入力して下さい。
  11	フィールド値	テキスト	<span id="comment_01"><nobr>全角カタカナで入力してください。</nob></span>
  12	フィールド タイトル	テキスト	<nobr>氏名<span class="ms-accentText" title="これは必須フィールドです。"> *</span></nobr>
  13	フィールド値	テキスト	姓:
  14	フィールド値	姓	なし
  15	必須検証設定	姓必須	タイトル：姓必須 対象フィールド：姓 エラーメッセージ：「姓」を入力して下さい。
  16	フィールド値	テキスト	名:
  17	フィールド値	名	なし
  18	必須検証設定	名必須	タイトル：名必須 対象フィールド：名 エラーメッセージ：「名」を入力して下さい。
  19	フィールド タイトル	テキスト	■連絡先
  20	フィールド タイトル	電話番号	なし
  21	フィールド値	テキスト	<table><tr><td>
  22	フィールド値	電話番号	なし
  23	必須検証設定	電話必須	タイトル：電話必須 対象フィールド：電話番号 エラーメッセージ：「電話番号」を入力して下さい。
  24	パターン一致 検証設定	電話番号パターン	タイトル：電話番号パターン 対象フィールド：電話番号 パターン(正規表現)：^[0-9]{1,4}-[0-9]{1,4}-[0-9]{1,4}$ エラーメッセージ：電話番号を正しく入力して下さい。例) 090-1111-2222
  25	フィールド値	テキスト	<table><tr><td>内線:
  26	フィールド値	内線番号	なし
  27	フィールド値	テキスト	</td></tr></table>
  28	フィールド値	テキスト	<span id="comment_02"><nobr>半角数値で入力してください。(ハイフンあり)</nobr><BR/>例) 090-1111-2222</span>
  29	フィールド タイトル	メールアドレス	なし
  30	フィールド値	メールアドレス	なし
  31	パターン一致 検証設定	メールアドレス パターン	タイトル：メールアドレスパターン 対象フィールド：メールアドレス パターン(正規表現)：^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@(([a-zA-Z0-9\_-])+\.)+([a-zA-Z0-9]{2,4})+$ エラーメッセージ：メールアドレスが正しくありません。
  32	フィールド値	テキスト	<span id="comment_02"><nobr>例）aaaa@aaaa.co.jp</nobr></span>
  33	フィールド タイトル	テキスト	■住所
  34	フィールド タイトル	郵便番号	なし
  35	フィールド値	テキスト	<table><tr><td>
  36	フィールド値	郵便番号	なし
  37	フィールド値	テキスト	</td><td>
  38	フィールド値	ボタン	ボタンタイトル：住所検索 onclick：buttonClick(); JavaScript： function buttonClick(){ zipToAddressSearch(); }
  39	フィールド値	テキスト	</td></tr><tr><td colspan="2">
  40	必須検証設定	郵便番号必須	タイトル：郵便番号必須 対象フィールド：郵便番号 エラーメッセージ：「郵便番号」を入力して下さい。
  41	パターン一致 検証設定	郵便番号パターン	タイトル：郵便番号パターン 対象フィールド：郵便番号 パターン(正規表現)：^[0-9]{7}$ エラーメッセージ：郵便番号を正しく入力して下さい。例)1010001
  42	フィールド値	テキスト	</td></tr></table>
  43	フィールド値	テキスト	<span id="comment_03"><nobr>郵便番号は半角数値で入力してください。(ハイフンなし)</nobr><br/>例) 1010001</span>
  44	フィールド タイトル	市区町村/番地	なし
  45	フィールド値	市区町村/番地	なし
  46	必須検証設定	住所必須	タイトル：住所必須 対象フィールド：市区町村/番地 エラーメッセージ：「市区町村/番地」を入力して下さい。
  47	フィールド タイトル	マンション名	なし
  48	フィールド値	マンション名	なし

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リンクを設定します。

このページの先頭へ

© 2015 ANK Co.,Ltd.