フォーム › フォーム デザイナ › フォーム要素の関数 › 基本的な関数を使用する簡単なフォームの作成

基本的な関数を使用する簡単なフォームの作成

この例では、主要な 3 箇所の地域（カリフォルニア、ペンシルバニア、およびノースカロライナ）で営業活動を行う会社のためのフォームを開発します。 各州において、会社は都市名で識別できる第一、第二のオフィスを設置しています。 会社の方針の実施に責任を負う関係者は、以下のビジネス要件を満たすフォームを望んでいます。

• カリフォルニア州で発生する業務は、デフォルトですべてアナハイムのオフィスを通す必要がある。
• ペンシルバニア州で発生する業務は、デフォルトですべてフィラデルフィアのオフィスを通す必要がある。
• ノースカロライナ州で発生する業務は、デフォルトですべてローリーのオフィスを通す必要がある。
• その他の州で発生する業務は、デフォルトですべてピッツバーグのオフィスを通す必要がある。
• ユーザはその他の州または都市を指定することができる。

例： 基本的なフォーム

以下の手順に従います。

1. ［ライブラリ］タブをクリックします。
2. インタラクション リクエスト フォーム オブジェクトを作成するか、または既存のものを探して、この例の手順に使用します。
3. このフォーム オブジェクトをダブルクリックします。

   ［インタラクション リクエスト フォーム］ダイアログ ボックス（フォーム デザイナ）が表示されます。

4. まだフォーム オブジェクトをチェック アウトしていない場合は、［チェック アウト］をクリックします。
5. ［フォーム要素］ペインで、以下のエントリを展開します。
   1. フォーム要素
   2. フォーム（たとえば Interaction_Request_Form_4）
   3. ページ レイアウト
   4. ページ
6. ［ページ］をクリックします。
7. ツールバーの［名前の変更］をクリックします。
8. 「Location:」という名前を入力して、［OK］をクリックします。
9. 選択フィールドを［フォーム］ペインから Location ページまでドラッグします。
10. 手順 9 を繰り返します。

    Location ページ レイアウトに 2 つの 選択フィールドが表示されます。

11. ［フォーム］ペインで以下のアクションを実行します。
    1. 最初の選択フィールドに 3 つの選択オプションをドラッグします。
    2. 2 番目の選択フィールドに 6 つの選択オプションをドラッグします。
12. 以下のフォーム要素をそれぞれクリックし、次に［名前の変更］をクリックして、各オブジェクトの名前を以下のように変更します。
    1. 最初の選択フィールドの名前を State に変更します。
       • 最初のオプションの名前を CA に変更。
       • 2 番目のオプションの名前を PA に変更。
       • 3 番目のオプションの名前を NC に変更。
    2. 2 番目の選択フィールドの名前を City に変更します。
       • 最初のオプションの名前を Anaheim に変更。
       • 2 番目のオプションの名前を Los Angeles に変更。
       • 3 番目のオプションの名前を Pittsburgh に変更。
       • 4 番目のオプションの名前を Philadelphia に変更。
       • 5 番目のオプションの名前を Charlotte に変更。
       • 6 番目のオプションの名前を Raleigh に変更。
13. 以下のフォーム要素をそれぞれクリックし、［プロパティ］（［名前］および［値］）ペインで以下のプロパティを設定します。
    1. State について、次のように設定します。
       • ［名前］を State に設定。
       • onChange イベントの値を ca_fd.js.selectRegion() に設定。
       • CA オプションの値を California に設定。
       • PA オプションの値を Pennsylvania に設定。
       • NC オプションの値を North Carolina に設定。
    2. City について、次のように設定します。
       • ［名前］を City に設定。
       • 各都市のオプションの値プロパティに都市名を設定します。 たとえば、Anaheim に Anaheim を、Los Angeles に Los Angeles などと設定します。
14. ［フォーム要素］ペインで、フォームの名前をクリックし、次にツールバーで［スクリプト］をクリックします。

    ［スクリプト］ダイアログ ボックスが開きます。

15. スクリプト エディタで以下のコードをコピーして貼り付けます。

    {
     selectRegion: function() 
      {
    	var selectedState = ca_pam_getSelectedOptionValues('Form.State')[0];
     
    	if(selectedState == 'North Carolina') 
    	 {
    	  ca_pam_selectOption('Form.City', 'Raleigh', 'Raleigh', true);
    	 }
    	else if(selectedState == 'California')
    	 {
    	  ca_pam_selectOption('Form.City', 'Anaheim', 'Anaheim', true);
    	 }
    	else if(selectedState == 'Pennsylvania')
    	 {
    	  ca_pam_selectOption('Form.City', 'Philadelphia', 'Philadelphia', true);
    	 }
    	else
    	 {
    	  ca_pam_selectOption('Form.City', 'Pittsburgh', 'Pittsburgh', true);
    	 }
      }
    }
    

16. ［保存］をクリックします。 ［スクリプト］ダイアログ ボックスが閉じられます。
17. フォーム デザイナで、［保存］をクリックします。
18. ［プレビュー］タブをクリックします。
19. 得られた結果が、ここに示す例およびテーブルと同様であることを確認します。