6.3 フォームの作成

この項では、新しいフォームを作成し、コントロールをそのフォームに追加する方法について説明します。次のトピックについて説明します。

6.3.1 新しいフォームの作成

  1. プロビジョニング要求定義エディタを開いて、［フォーム］タブをクリックします。

  2. ページの［フォームの選択］セクションで［追加］をクリックして、［新規フォーム］ウィザードにアクセスします。

  3. 次のようにフィールドに値を入力します。

    フィールド

    説明

    フォーム名

    Designerで表示するフォームの名前を入力します。

    テンプレートの1つを使ってフォームを作成します

    既存のテンプレートに基づいて新しいフォームを作成する場合は、このオプションを選択し、フォームテンプレートリストからいずれかのフォームを選択します。

  4. ［OK］をクリックしてフォームを保存するか、［キャンセル］をクリックして保存せずに終了します。

6.3.2 フォームコントロールとアクションの追加

［フォームコントロール］セクションを使用して、フォームのコンテンツとレイアウトを定義します。

メモ:Designerは、フォームの上から下、左から右へフォームを配置します。コントロール間で間隔を空けるには、改行を使用します。

コントロールをフォームに追加する

  1. ［追加］をクリックします。Designerは、Fieldというコントロールをフォームの最下部に追加します。

    複数のコントロールを同じ名前でフォームに追加した場合、コントロール名の最後に一意の番号がDesignerによって追加されます。

  2. コントロールの次のプロパティを定義します。

    フィールド

    説明

    フォームのフィールド名

    フィールドの固有名です。この名前は次の場所で使用されます。

    • ［ワークフロー］タブの［データ項目マッピング］ダイアログボックス。

    • ［ECMA expression builder］ダイアログボックス。

    • プロビジョニング要求定義ファイル内の内部XMLリファレンス。

    ［データ項目マッピング］ダイアログボックスと［ECMA expression builder］ダイアログボックスで混同しないように、フォームフィールドに使用する命名規則を考慮してください。たとえば、要求フォームと承認フォームの両方に、Reasonというフィールドが含まれているとします。データマッピングを実行しているときに作業しているフィールドを明確にするために、使用しているフォームの名前をフィールド名の先頭に付けることができます。一方のReasonフィールドの名前をReq_Reason、もう一方のフィールドの名前をApp_Reasonにすることができます。

    データタイプ

    フィールドのデータタイプです。データタイプにより、有効なコントロールタイプと実行する検証のタイプが決まります。

    Control Type

    データの表示または編集に使用する視覚コントロールのタイプです。選択リストの項目は、選択したデータタイプに基づいてフィルタされます。

    改行

    コントロールの後に挿入する行数を定義します。

    フォームフィールドコントロールには、［データ項目マッピング］プロパティシートも［電子メール通知］プロパティシートもありません。

  3. コントロールごとに、［プロパティ］タブ（［ウィンドウ］>［ビューの表示］>［プロパティ］の順に選択）でそれぞれのプロパティを指定します。詳細については、セクション 6.5, フォームコントロールのリファレンスを参照してください。

  4. ［アクション］タブをクリックして、ユーザがフォームで行える作業を定義します。たとえば、ユーザがフォームを送信したりキャンセルしたりできるようにするアクションを追加できます。

    要求フォームには最低限、SubmitActionが必要になります。SubmitActionがない場合、要求は処理されません。CancelActionもすべてのフォームに設定することをお勧めします。各承認フォームには、最低1つのアクションを定義している必要があります。

  5. ［アクション］ページで、［追加］をクリックして、新しいアクションを追加します。次のようにフィールドに値を入力します。

    フィールド

    説明

    アクションの場所

    フォームに追加するアクションボタンの場所を選択します。

    下フォームの最下部にアクションボタンを配置します。(デフォルト.)

    ［上］: フォームの最上部にアクションボタンを配置します。

    ［上と下］: フォームの最上部と最下部にボタンを配置します。

    アクションコマンド

    ボタンのアクションを選択します。詳細については、セクション 6.4, アクションのリファレンスを参照してください。

    改行

    アクションボタンの後に挿入する行数を定義します。

  6. フォームを保存します。

6.3.3 イベントの定義

イベントハンドラに添付するスクリプトは、ブラウザウィンドウではなく適切なコントロールにスコープされます。

イベントの定義

  1. イベントを定義しプロパティシートを開くフォームコントロールを選択します。

  2. イベントプロパティに移動して、イベントを追加します。Designerにより、onEventというデフォルトイベント名で行が追加されます。

  3. ［イベント名］フィールドをクリックし、onchangeまたはonloadイベントを選択します。他のイベントを追加する方法について詳しくは、「カスタムイベントの作成」を参照してください。

  4. ［アクション式］フィールドをクリックします。このフィールドにスクリプトを直接入力することも、ボタンをクリックしてイベントアクションExpression Builderにアクセスすることもできます。

  5. アクションスクリプトを定義し、構文を確認して、［OK］をクリックします。この手順を繰り返して、イベントをこのコントロールに追加します。

onChangeおよびonLoadイベントの詳細については、セクション 6.5.2, 一般的なフォームコントロールのプロパティに記したイベントプロパティの説明を参照してください。

カスタムイベントの作成

フォーム上で、他のコントロールに条件またはユーザアクションを通知する独自のイベントを作成できます。［イベント］プロパティを使用してイベントを作成します。イベントには任意の名前を付けることができます。fireEvent（）メソッドを使用しイベントの名前を渡して、イベントを明示的に開始する必要があります。

ユーザが入力した値に一致するグループだけを返すクエリを、［グループ］コンテナで実行することもできます。図 6-7に示した例では、ユーザは名前フィールドに値を入力します。ユーザがタブで次のフィールドに移動すると、ドロップダウンリストのコンテンツは、namechangeカスタムイベントで開始したクエリから取り込まれます。

図 6-7 ユーザアプリケーションのランタイムカスタムイベントのサンプル

［名前］フィールドは、onchangeイベントでnamechangeイベントを開始する［イベント］プロパティを定義します。この定義を図 6-8に示します。

図 6-8 field.FireEvent()メソッドのサンプル

namechangeイベントは、groupsというクエリを実行する式を含みます。

図 6-9 カスタムイベント定義の例

クエリの使用の詳細については、「セクション 6.7, フォームでのDALクエリの使用」を参照してください。

6.3.4 ［スクリプト］タブの使用

［スクリプト］タブを使用して、ページレベルスコープを持つスクリプトを定義します。ページレベルスコープとは、スクリプトがページロード時にロードされ、フォームの存続中使用できることを意味します。表 6-2で説明するいずれかの方法でスクリプトを用意できます。

表 6-2 スクリプトタイプ

スクリプトタイプ

説明

外部

スクリプトは、与えられたURLを使用して参照することによってページに組み込まれます。スクリプトブロックは、たとえば<<script type=”test/javascript” scr=”http://some.server/custom.js”>のようになります。custom.jsファイルがフォームのロード時にインポートされます。

インライン

スクリプトは、フォームの<script>ブロックに直接挿入されます。

これらのスクリプトはページのロード時にロードされるので、フォームコントロールとそれに関連付けられたイベントハンドラスクリプトは、ページがロードされるときに、スコープに入っていません。ページレベルスクリプトとイベントレベルスクリプト間で依存関係をコード化しないようにしてください。ただし、イベントレベルスクリプト内からページレベルスクリプトをコールできます。

外部JavaScriptファイルへのリンクを追加する

  1. ［スクリプト］タブを開いて、［追加］をクリックします。

  2. 次のようにフィールドに入力します。

    フィールド

    説明

    ID

    わかりやすい名前を指定します。この値はイベントアクションExpression Builderで表示されます。

    タイプ

    デフォルト値である［外部］をそのまま使用します。

    URL/インラインスクリプト

    フィールド内をクリックすると、［スクリプトURLエディタ］ボタンが右側に表示されます。このボタンをクリックしてエディタを表示します。

    .jsファイルへのURLを入力し、［OK］をクリックして、［スクリプト］タブに戻ります。外部リンクを追加すると、フォームを表示するページに次の行が生成されます。

    <script src=" someURL.com/script.js"/>

インラインスクリプトを作成する

  1. ［スクリプト］タブを開いて、［追加］をクリックします。

  2. 次のようにフィールドに入力します。

    フィールド

    説明

    ID

    わかりやすい名前を指定します。この値はイベントアクションExpression Builderで表示されます。

    タイプ

    値を［インライン］に設定します。

    URL/インラインスクリプト

    ECMAScriptエディタを使用してJavaScriptを編集します。エディタにアクセスするには、前に指定したIDと同じ名前のタブをクリックします。このタブは、［署名宣言］タブの隣にあります。

    インラインスクリプトの場合、次の行がページに挿入されます。

    <script>入力したスクリプト</script>

インラインスクリプトと外部スクリプトはどちらもページのロード時に実行されますが、ページがコントロールをロードする前に実行されます。また、特にフォームコントロールイベントでコールされたときにも実行されます。