フォームへの動的動作の追加
イベントを使用して動的動作をWebフォームに導入し、それらをアクション、条件、関数およびRESTコネクタ・コールと組み合せます。
たとえば、次の動作をフォームに導入できます。
-
フォームの別のコントロール・フィールドに基づいてコントロール・フィールドにデータを移入します。 たとえば、「Country」選択フィールドは「State」選択フィールドに影響を及ぼし、「State」選択フィールドは「City」選択フィールドに影響を及ぼします。
-
別のフォーム・コントロール・フィールドに基づくコントロール・フィールド検証を有効にします。 たとえば、「Start Date」が指定されると「End Date」は必須となり、また、「Full Name」の値は「First Name」と「Last Name」から取得されます。
-
オンデマンドでRESTコールを行い、コールのレスポンスを格納し、レスポンス・データをイベント・アクションまたは条件で使用します。
ノート:
REST操作を実行するためにフォームをロードするときにログインしているユーザー資格証明を使用するには、資格証明なしでRESTコネクタを定義します。 プロセスでサービス・コールと同じ操作を使用するには、別の同じRESTコネクタを資格証明で定義します。 これは、内部REST API呼び出しにのみ適用されます。
イベントの構成
コントロールまたはプレゼンテーションに1つ以上のイベントを構成することによって、コントロールまたはプレゼンテーションの動作を変更します。 フォームでイベントを構成すると、コネクタ・コール、アクション、条件および関数をトリガーできます。
- 「Add」
をクリックしてイベントを定義します。「そのイベント」セクションには、2つのフィールドが表示されます。「イベント名」フィールドと、コントロールまたはプレゼンテーションに使用可能なイベント・オプションをリストするドロップダウン・メニュー付きフィールドが表示されます。
図event-options.pngの説明 - イベント・オプションの選択後、イベント・ドロップダウン・メニューの横の編集アイコンをクリックして、イベントのアクション、条件、コネクタまたは関数を指定します。 「OK」をクリックして、イベントの構成を完了します。
「アクションを指定」、「条件の指定」、および「イベントでのRESTコネクタ・コールの実行」を参照してください。
ノート:
イベントを取り消すには、その削除アイコンをクリックします。 追加イベントを定義するには、「Add」をクリックします。 1つのコントロールに複数のイベントを定義できます。
1つのコントロールで複数のイベントを構成できます。 構成済イベントは実行時に順番に実行されます。 デフォルトでは、最新の構成済イベントはイベント順序の最後に追加され、その後は実行時の最後に実行されることに注意してください。 ただし、イベントを並べ替えて実行順序を制御できます。 イベントの順序を並べ替えたり、実行時に正しい順序で実行されるように、リオーダー・ハンドラ
を使用してイベントを並べ替えます。 イベントの順序変更ハンドラは、コントロールに複数のイベントが構成されている場合にのみ、各イベント名フィールドの前に表示されます。
コントロールに構成されているすべてのイベントを無効にする場合は、コントロールを選択し、アクション「イベントの無効化」を指定します。 「アクションを指定」を参照してください。 これにより、コントロールに構成されているすべてのイベントが無効になり、イベントは実行時に実行されません。 ただし、ロード時タイプのイベントは例外です。 ロード時イベントは、「イベントの無効化」アクションを指定した場合でも実行されます。
「イベントの無効化」アクションによって無効化されたコントロールでイベントを有効化するには、「イベントの有効化」アクションを構成します。 これにより、これらのすべてのイベントが実行時に実行されます。
表、繰返し可能なセクション、セクション、パネル、タブなどのコンテナ・コントロールに対して「イベントの無効化」アクションが構成されている場合、それらの内部にある子コントロール内のすべてのイベントは無効になります。 これは、コンテナ・コントロールで「イベントの無効化」アクションが構成された後にコンテナ・コントロールに追加する行にも適用されます。 コンテナ・コントロールおよびコンテナ・コントロール内のすべての子コントロールでイベントを有効にするには、コンテナ・コントロールで「イベントの有効化」アクションを構成します。
アクションを指定
アクションによって、コントロールに対する変更をトリガーできます。 様々なコントロールおよびスタイル・アクションから選択できます。 たとえば、Clearボタンを構成して他のフォーム・コントロールの値をクリアすることができます。
- コントロール・アクションを構成する場合、表示される追加フィールドに情報を入力します。 「Value」、「Label」、「Help」、「Hint」、「Placeholder」、「Min Value」、「Max Value」、「Pattern」などのコントロール・アクションには、「Type」および「Value」の各フィールドについて追加構成が必要です。
「Type」フィールドが表示された場合は、次のオプションから選択します。
-
「Constant」では、選択したコントロールの値を指定できます。 対応する値を「Value」フィールドで指定してください。
-
「Data Definition」では、ペイロードからの値を使用できます。 隣に表示されている「Value」フィールドをクリックすると、使用可能なアイテムがリストされます。
-
「Control」では、コントロールからのデータを使用できます。 コントロール名および使用するプロパティを選択してください。
プロパティはコントロールに固有です。 たとえば、数値コントロールなどの一部のコントロールには、オプションとして数多くのプロパティが含まれます。 イメージ・コントロールなどのその他のコントロールには、1つのプロパティ「Hidden」のみが含まれます。 電子メールおよび電話コントロールには、プロパティ「Placeholder」が含まれますが、「Min Value」および「Max Value」プロパティは含まれません。
- 「関数」を使用すると、「関数の指定」で説明されているように、文字列、値および配列に対する共通の操作を実行できます。
- 「Connector Data」では、同じイベントから行われたコネクタ・コールから値を割り当てることができます。
ノート:
値やラベルなど、コントロールの複数のプロパティを変更できます。 コネクタ・データなどのデータを使用してコントロールを変更することもできますが、データは変更できません。 -
条件の指定
コントロールの選択されたイベントやコントロールの指定されたアクションについてのアクションまたはコネクタ・コールをトリガーするために、条件を使用して、If/Then/Else条件を構成できます。
- 条件のIf部分を入力します。
- 別の条件を追加するには、「+Condition」をクリックし、
AndまたはOrのいずれの条件であるかを指定して構成します。たとえば、図に示すように、トラベル・リクエスト・フォームのCostコントロール・フィールドに条件を構成して、出張のコストが5000を超え、かつ期間が14日未満である場合に、ThenまたはElse条件がトリガーされるように追加設定できます。
- 別の条件を追加するには、「+Condition」をクリックし、
- 「+Action」をクリックしてアクションを入力し、条件のThen部分を入力します。 「アクションを指定」を参照してください。
たとえば、トラベル・リクエスト・フォームのCostコントロールについて、出張のコストが5000を超え、かつ14日未満である場合、フォームで「Justification」フィールドを必須とします。
- 「+Else Action」をクリックしてアクションを入力し、条件のElse部分を入力します。
たとえば、トラベル・リクエスト・フォームのCostコントロールについて、出張のコストが5000を超え、かつ14日未満である場合、フォームで「Justification」フィールドを必須とし、それ以外はオプションとします。
関数の指定
イベント・アクションおよび条件で関数を使用して、文字列、値および配列を使用した一般的な操作を実行します。 たとえば、関数を使用して、2つの値の加算、2つの文字列の連結、表の行でのアイテムの合計などを行います。
-
選択した関数にパラメータを指定できます。 パラメータ値は、定数、データ定義値、コントロール値、他の関数またはコネクタ・データ値です。
-
一部の関数では、データの配列または繰返し可能なコントロールの選択がサポートされています。
-
関数をネストできます。たとえば、複数の文字列または複数行の結果を連結します。 連結関数を選択し、データ値、コネクタ・データ値またはコントロール値を定数などの別の値と連結する場合があります。
| 関数カテゴリ | 関数名 | パラメータ | 説明 |
|---|---|---|---|
| その他 | Create UUID | なし |
汎用一意識別子を生成します。 |
| その他 | 現在のブラウザ言語 | なし |
ユーザーがブラウザ設定で指定したロケールを返します。 たとえば: en、en-US、de、fr |
| その他 | アプリケーション名の取得 | なし | 現在のアプリケーション名を返します。 |
| その他 | 位置情報の取得 | (番号) |
デバイスの現在の位置を含むオブジェクトのJSON表現を含む文字列を返します。 ブラウザのレスポンスを待機するには、タイムアウト値をミリ秒で指定する必要があります。 ほとんどの場合、タイムアウト時間は10000ミリ秒です。 JSON表現の返される文字列は、次のようになります : 関数 たとえば、緯度の使用にアクセスするには: |
| 日付 | Current Date | なし |
yyyy-mm-dd書式で日付を生成します。 |
| 日付 | Current Time | なし |
24時間T00:00:00書式で時刻を生成します(T23:59:59など)。 |
| 日付 | Current Date Time | なし |
yyyy-mm-dd T00:00:00書式で日付/時刻を生成します。 |
| 日付 | 秒の追加 | (日付、数値) |
指定の日付、時間または日付/時間に秒数を加算します。 |
| 日付 | 分の追加 | (日付、数値) |
指定の日時に分数を加算します。 |
| 日付 | 時間の追加 | (日付、数値) |
指定の日時に時間数を加算します。 |
| 日付 | 日数の追加 | (日付、数値) |
その日付に日数を加算します。 |
| 日付 | 月の追加 | (日付、数値) |
月の数を日付に加算します。 |
| 日付 | 年の追加 | (日付、数値) |
日付に年数を加算します。 |
| ロジック | および | (Input1, Input2, Input3...) |
Input1 & & Input2 & & Input3...がtrueまたはfalseであるかどうかを確認します。 |
| ロジック | または | (Input1, Input2, Input3...) |
Input1 | | Input2 | Input3...がtrueまたはfalseであるかどうかを確認します。 |
| ロジック | 否定 | (条件) |
指定した条件の値を否定します。 |
| ロジック | インラインの条件 | (条件、ValueIfTrue、ValueIfFalse) |
If…Else文を実装します。 指定した条件がtrueである場合、結果として最初の値が返され、それ以外の場合は2番目の値が返されます。 例: (N=5、60、70)の場合、n=5の場合は60が返され、それ以外の場合は70が返されます。 |
| リレーショナル | 等号(=) | (Input1, Input2) |
Input1がInput2と等しいかどうかを確認し、ブール値を返します。 |
| リレーショナル | より大きい (>) | (Input1, Input2) |
Input1がInput2より大きいかどうかを確認し、ブール値を返します。 |
| リレーショナル | より小さい(<) | (Input1, Input2) |
Input1がInput2未満かどうかを確認し、ブール値を返します。 |
| リレーショナル | 以上(>=) | (Input1, Input2) |
Input1がInput2以上であるかどうかを確認し、ブール値を返します。 |
| リレーショナル | 以下(<=) | (Input1, Input2) |
Input1がInput2以下かどうかを確認し、ブール値を返します。 |
| Math | Sum ( + ) | (Number, Number) |
2つの数値を加算します。 |
| Math | 合計 | ([Number]) |
数値の配列を追加します。 |
| Math | Subtract ( - ) | (Number, Number) |
数値を減算します(10-5など)。 |
| Math | Multiply ( * ) | ([Number]) |
数値を乗算します。 たとえば、列内のすべての値を乗算します。 |
| Math | Divide ( / ) | (Number, Number) |
数値を除算し、小数部分を小数点第10位まで含めます(4/3=1.3333333333など)。 |
| Math | Integer Division | (Number, Number) |
数値を除算し、結果を切り捨てます(5/2=2、-5/2=-2など)。 |
| Math | Modulo ( % ) | (Number, Number) |
数値を除算した後の余りを求めます。 |
| Array | Min | ([Number]) |
配列内の最小値を求めます。 |
| Array | 最大 | ([Number]) |
配列内の最大値を求めます。 |
| Array | 索引別 | ([Any], Index) |
配列または文字列の特定の索引にある値を検索します。 |
| Array | 件数 | ([Any]) |
配列内の件数値を求めます。 |
| Array | 平均 | ([Number]) |
配列内の平均値を求めます。 |
| Array | 連結 | ([Any]) |
配列値を結合します。 |
| Array | IndexOf | ([Array]、Element) |
配列内の要素の索引を返します。 たとえば、IndexOf ([1,2,3], 1)は0を返します。 戻り値 -指定した要素が配列内に見つからない場合は1。 |
| テキスト | 連結 | ([String]) |
テキスト文字列を結合します。 |
| テキスト | 分割 | (String、String) |
2番目のパラメータをセパレータとして使用して、文字列を配列に分割します。 たとえば、テキスト・フィールドの一連の数値をチェックリストに分割することができます。 |
| テキスト | 結合 | ([String]、String) |
2番目のパラメータをセパレータとして使用して、配列を文字列に結合します。 たとえば、表の列内のすべての行の値をフェッチして系列を作成できます。 |
| テキスト | Trim | (String) |
先頭または末尾の空白を削除します。 |
| テキスト | 次を含む | (文字列または配列、要素) |
文字列または配列(コントロール内)に特定の要素が含まれているかどうかをチェックし、ブール値を返します。 |
| テキスト | 置換 | (String, String, String) |
テキスト文字列を置換します。 次の3つのパラメータを使用します。
ノート: 正規表現には、特殊な意味を持つ12文字があります: バックスラッシュ\,キャレット^、ドル記号$、ピリオドまたはドット。縦棒またはパイプ記号|、疑問符?、アスタリスクまたは星*、プラス記号+、左カッコ(、右カッコ)、左大カッコ[、左中カッコ {。 これらのいずれかを通常の文字として使用する場合は、バックスラッシュ\.でエスケープする必要があります。 |
| テキスト | 一致 | (String、String) |
2つの文字列または式が一致し、ブール値を返すかどうかを確認します。 |
| テキスト | 部分文字列 | (String、StartingIndex、Length) | 指定された開始索引で始まる文字列の部分文字列を、指定された長さまで返します。 たとえば、Substring ('apple', 0, 3)はappを返します。 |
|
間隔 |
期間(日) |
(日付、日付) |
2つの日付の差を計算し、結果を日数で返します。 間隔を計算するには、開始日と終了日をイベント・ウィンドウに手動で入力するか、フォーム内にある日付コントロールを使用して指定します。 手動で日付を計算する場合は、次の有効な形式を使用します:
以下のセパレータを同じ意味で使用できます:
|
|
間隔 |
期間(月) |
(日付、日付) |
2つの日付の差を計算し、その結果を月数で返します。 |
|
間隔 |
期間 |
(日付、日付) |
2つの日付の間の差を計算し、結果を年数で返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザーID |
なし |
現在ログインしているユーザーのIDを返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザーの名 |
なし |
現在ログインしているユーザーの名を返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザーのミドル・ネーム |
なし |
現在ログインしているユーザーのミドル・ネームを返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザーの姓 |
なし |
現在ログインしているユーザーの姓を戻します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザーの電子メール |
なし |
現在ログインしているユーザーの電子メールを返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザー・マネージャID |
なし |
現在ログインしているユーザー・マネージャのIDを返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザー・マネージャ名 |
なし |
現在ログインしているユーザー・マネージャの名を返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザー・マネージャのミドル・ネーム |
なし |
現在ログインしているユーザー・マネージャのミドル・ネームを返します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザー・マネージャの姓 |
なし |
現在ログインしているユーザー・マネージャの姓を戻します。 |
|
現在のログイン・ユーザー・データ |
現在のユーザー・マネージャの電子メール |
なし |
現在ログインしているユーザー・マネージャの電子メールを返します。 |
- 「Properties」ペインで、「Events」フィールドにスクロール・ダウンします。 「Add」をクリックしてイベントを追加し、そのタイプをドロップダウン・フィールドで選択します(「On Change」など)。
- 追加したイベントの横にある「Edit」
をクリックします。 - 「OK」をクリックしてイベント・ウィンドウを閉じます。 「Preview」をクリックして関数をテストします。 たとえば、簡単なアプリケーションでは、「Value」フィールドに設定された関数を使用して、ユーザーが表内の値を入力または変更するたびに値を合計し、計算された値を「Total」フィールドに表示します。 設定された総計(定数)を合計が超えた場合は、スタイル・アクションによって合計は赤い文字で表示されます。
図specifying-functions.pngの説明
イベントでのフィルタの指定
フィルタを使用すると、より大きなセットのデータのサブセットを使い分けることができます。 フォーム・コントロールの場合は、イベント内でフィルタを定義し、他のコントロール内のフィルタ・データをイベント・アクションおよび条件を通じて使用できます。
イベント内でフィルタを指定するには:
-
フォーム・キャンバスでコントロールを選択し、それに対してイベント・オプションを指定します。 「イベントの構成」を参照してください。
-
「Event」フィールドの隣にあるイベント編集アイコンをクリックします。
イベント・ウィンドウには、上部に選択されたイベント・オプション(たとえば、変更時)が表示され、アクション、条件、コネクタ、またはフィルタをイベントに追加するための色分けされたボタンが表示されます。
-
+Filterをクリックしてフィルタを追加し、特定の情報をフィルタリングするデータソースを指定します。 データ属性、別のコントロール、またはRESTコネクタを選択できます。
-
選択されたデータソースが有効な(タイプの : アレイ)では、次の図に示すように、追加の+Criteriaおよび+Ifボタンが表示されます。
図filter.pngの説明 -
+Criteriaをクリックして、データソースからのデータのフィルタ方法を指定します。 If条件を使用して同じことを行うこともできます。
ノート:
ソースからのデータをフィルタする方法を複数指定できます。 OR条件を指定すると、結果は結合または結合されます。 AND条件を指定した場合、結果はそのフィルタ条件と他のフィルタ条件の交差になります。
フィルタのソース・タイプとして別のフィルタ(以前に指定)を指定することもできます。 これにより、別のフィルタからデータをフィルタできます。
-
フィルタに適切な名前を指定します。データソースから抽出された情報はこのフィルタ内に格納されます。
-
同じイベント・ウィンドウで、フィルタ内のデータを使用して、アクションまたは条件を介して他のコントロールを動的に設定できます。
-
イベントが完成したら、「OK」、「Save」の順にクリックします。
イベントを使用したフィルタリング - 例
このセクションでは、ドロップダウン選択コントロールと表を備えたWebフォームを使用したイベントのフィルタリングについて説明します。
選択コントロールで選択したオプションに基づいて、データソースからデータをフィルタリングし、抽出されたデータを選択的に使用して表にデータを取り込むことができます。
この例では、以前に作成したRESTコネクタを使用して、Webサーバーからデータを取得します。これにはアイテムのリストが含まれています。 この場合の各アイテムは、名字、姓、固有ID、会社名、電子メール、電話番号、都市などの個人の個人情報を含む複合データ・オブジェクトです。 RESTコネクタを最初から作成する方法については、「RESTコネクタの作成」を参照してください。
このRESTコネクタを使用して、フォームのPresentationプロパティでグローバル・コネクタ呼び出しglobalResponseを定義します。 グローバル・コネクタについてもっと知りたいですか? 「プレゼンテーションの操作」を参照してください。 さらに、このコネクタはセレクト・コントロールの入力としても機能します。
-
フォームのキャンバスにドロップダウン選択フィールドを追加して構成します。
-
基本パレットから「選択」コントロールをキャンバスにドラッグ・アンド・ドロップします。
-
コントロールを選択し、「一般」タブで、「ラベル」フィールドを「名」に変更します。
-
オプション・ソースの下で、「コネクタ」オプションを選択し、アプリケーション内で定義されているRESTコネクタに関して「リソース」と「操作」フィールドに入力します。 「RESTコールを使用した、コントロールへのデータの移入」を参照してください。
-
レスポンスで、コントロールのオプションとして表示するアイテム・リストを指定します。
-
この特定の例では、最初の名前属性を「ラベル・バインディング」フィールドにマップして、すべての個人のファースト・ネームのみが選択コントロールのオプションとして表示されるようにします。 また、一意のID属性は、次のように値バインディングフィールドにマップされます:
図filter-response.pngの説明
-
-
-
フォームのキャンバスに表コントロールを追加して構成します。
-
アドバンスト・パレットから「表」コントロールをキャンバスにドラッグ・アンド・ドロップします。
-
2つの列を追加し、列ラベルを「姓」、「組織」、および「Eメール」として編集します。
-
入力テキスト・コントロールを各列にドラッグ・アンド・ドロップします。
-
-
選択コントロールをクリックし、「一般」タブで「変更時」イベントを定義します。
-
イベント編集アイコンをクリックすると、イベント・ウィンドウが開きます。 このウィンドウで、+Filterをクリックしてフィルタを追加します。
-
次の図は、この例のイベント構成を示しています:
-
コネクタ・データはデータソースとして設定され、その値は以前に定義されたグローバル・コネクタ呼び出しglobalResponseから取得されます。
-
次のフィルタ・セクションには、ソースからデータがフィルタされる方法、つまりソース・リスト内のアイテムのIDが、ユーザーが選択したオプションのIDと一致する場合、そのアイテムに関連付けられているすべてのデータがfilterフィルタに格納されます。
-
イベント・アクションは、このフィルタに含まれているデータを選択的に使用して、表にデータを取り込みます。 各アイテムには複数の属性が関連付けられていますが、ここでは姓、会社名、電子メール属性のみを使用します。 これらの属性のそれぞれに、対応する入力テキスト・コントロールまたは表の列をマップします。
図filter-actions.pngの説明
ノート:
イベント・アクションを定義する際に、フィルタ・データを単純なデータ型(たとえば入力テキスト)のコントロールにマップする場合は、コントロールにマップする属性に加えてインデックス値を指定する必要があります。
-
-
フォームがロードされると、選択コントロールには次のようにすべての個人のファースト・ネームが表示されます:
図filter-names.pngの説明 -
選択した後、選択したオプションに関連付けられているすべてのデータがフィルタに格納され、このデータは次の図に示すように選択的に使用されます:
図filter-output.pngの説明
イベント・スニペットの再利用
イベント編集ウィンドウからイベント・スニペットを抽出し、フォームのプレゼンテーション全体で再利用できます。
複雑なイベント・スニペットを一度定義すると様々なイベントで再利用できるため、時間を節約でき、エラーを最小限に抑えることができます。 webフォームのプレゼンテーション・タブから、抽出されたすべてのスニペットを管理できます。 また、グローバル・スニペットの定義を更新すると、他のイベント内にあるスニペットのすべてのインスタンスが更新されます。
定型部分の抽出
アクション、条件、ループ、コネクタまたはフィルタなどのイベント・ブロックをグローバル・スニペットとして抽出し、他のイベント定義で再使用します。
イベント・スニペットを抽出するには:
- イベント定義ウィンドウで、「定型部分の抽出」をクリックします。
ウィンドウの上部に名前フィールドが表示され、使用可能なすべてのブロックが抽出対象として選択されます。
- ブロックのトグル・ボタンをオフにして、抽出から除外します。
- スニペットの適切な名前を入力し、OKをクリックします。
同じプレゼンテーション内の任意のイベントで、スニペットを再利用できるようになりました。 抽出されたスニペットには、フォームの「プレゼンテーション」タブからアクセスして編集できます。 「プレゼンテーションの処理」を参照してください。
をクリックすると、グローバル・スニペット内のブロックを個別に保持できますが、スニペット全体は保持できません。
をクリックして、スニペットおよびそのすべての構成要素を削除します。フォームのカスタム結果の指定
送信に加えて、要件に応じてフォームのカスタム結果(承認、拒否、保留など)を指定し、Composerで同じ結果をテストすることができます。 また、ユーザーがフォームを送信できないように条件を指定することもできます。
コントロールまたはプレゼンテーションの任意のイベントを使用して、カスタム結果を含むフォームの送信をトリガーできます。 イベントを定義する方法を知りたいですか? 「イベントの構成」を参照してください。
-
+Actionをクリックし、Presentationコントロールで使用できる「結果をトリガー」アクションを選択します。
-
「結果」フィールドにカスタム値を指定します(REJECTなど)。
実行時にユーザーがこのボタンをクリックすると、フォームは結果の値がREJECTとして送信されます。
-
+Actionをクリックし、次の図に示すようにすべてのフィールドのパラメータを選択します。
図outcome-submit.pngの説明 -
ユーザーが実行時にフォームを送信すると、入力テキスト・コントロールにフォームの結果値が入力されます。
図outcome-reject.pngの説明「プレビュー」機能を使用して、さまざまなカスタム結果を入力してテストすることができます(「プレビュー・フォームとペイロード」を参照)。
フォーム送信の防止
デフォルトでは、フォームが不完全または無効な場合にフォームの送信が防止されます。 また、「送信時」イベント内でカスタム条件を定義して、ユーザーがフォームを送信できないようにすることもできます。 たとえば、データ属性またはコントロールの値に基づいてサブミットを防止することができます。
次の例は、プレゼンテーション用に定義された「送信時」イベントを示しています。 ここでは、フォームの結果変数に特定の値、つまりPREVENTが含まれていると、フォームの送信が防止されます。
図outcome-prevent.pngの説明
イベントでのRESTコネクタ・コールの実行
イベントでRESTコールを実行すると、コールのレスポンスを格納し、それをイベント・アクションまたは条件で使用できます。
例
-
ユーザーに郵便番号の入力を求めるWebフォームを構成します。 天気サイトを呼び出して天気の値を問い合せるイベントを追加します。 レスポンス・データを格納し、気温関連の値を表示するアクションをイベントに追加します。
-
会社名を入力して「Get Quote」ボタンをクリックすることをユーザーに求めるWebフォームを構成します。 在庫サービス・サイトを呼び出して指定した会社の在庫の値を問い合せるイベントをボタンに追加します。 レスポンス・データを格納し、読取り専用在庫値フィールドを表示するイベント・アクションを追加します。
- コネクタ・コールを構成します。
- レスポンス・データを格納する変数名を入力します(quoteResultやweatherInfoなど)。
- コネクタ・コールの下で、アクション、条件または追加コネクタを構成して、「OK」をクリックします。一般的なユースケースは、コネクタ・コールからのレスポンスを表示するアクションの追加です。 「+Action」をクリックし、コントロールを選択して、そのアクションとして「Value」、そのタイプとして「Connector Data」、および「Value」フィールドに表示するレスポンス変数データを指定します。
ノート:
-
コネクタ・データが要素の配列である場合、対応する配列インデックス(たとえば、quoteResult[0].lastPrice[1].price)を入力することによって、特定の配列アイテムをレスポンス「値」フィールドに指定できます。
-
RESTレスポンスが複雑なデータ・オブジェクトで構成されている場合、イベントを介してデータ・オブジェクトをコントロール(入力テキストやテキスト・エリアなど)に直接マッピングすることはできません。 代わりに、複雑なデータ・オブジェクトの詳細を、イベント・ウィンドウに「連結」 (必要な場合)などの適切な関数と共に、コントロールにマップする必要があるかどうかを指定する必要があります。 たとえば、RESTレスポンスで、nameという複雑なデータ・オブジェクトに2つの要素、firstnameおよびlastnameが含まれている場合は、これらの要素のどれをコントロールに取り込む必要があるかを指定する必要があります。 これらの要素の両方を設定する必要がある場合は、「連結」などの関数を適切なセパレータと共にイベント・ウィンドウに使用します。
-
RESTコールを使用したコントロールへの移入
ドロップダウン選択、チェックリスト、ラジオ・ボタン、表、繰返し可能なセクション・コントロールなどのコントロールに、RESTコネクタを使用して動的にデータを移入します。
- ドロップダウン選択、チェックリストまたはラジオ・ボタンのコントロールについては、「Options Source」フィールドで「Connector」を選択してから、「Options Source」フィールドの下のフィールドを構成し、RESTコールに基づいて値を定義します。 繰返し可能なセクション・コントロールまたは表コントロールについては、「Use Data From Connector」フィールドを選択して、このフィールドの下のフィールドを構成します。
- コールに基づいて、必要なパラメータ(ペイロード値)のリストおよびレスポンスが、「Options Source」フィールドまたは「Use Data From Connector」フィールドの下に表示されます。
- Payload values: RESTコネクタ(パラメータ)に渡す情報を指定します。 問合せ、ヘッダーまたはテンプレート・パラメータを指定できます。 「Text」を選択した場合は、パラメータ情報を入力します。 または、「Control value」を選択した場合は、使用可能なオプションからコントロール値を選択します。
ノート:
テキスト・パラメータはセキュアであり、サーバー上に保持されます。 - Response: レスポンスをコントロール・プロパティにマップする方法を定義します。
-
Options List: コントロールにオプションとして表示されるアイテムを含むレスポンスからの属性リストを指定して、マッピングを定義します。
-
リストが文字列や数値などの単純な型のリストである場合、ラベルと値のマッピングは必要ありません。 リスト内のアイテムの値は、オプションのラベルと値の両方として使用されます。
リストが複合要素で構成されている場合、「Label Binding」および「Value Binding」の各フィールドを使用してマッピングを指定する必要があります。
ノート:
-
表コントロールについては、レスポンスを表内の各列にマップする方法を定義します。 繰返し可能なセクションについては、レスポンスをマップする際のマップ元となるプロパティおよび繰返し可能なセクション内のマップ先となるコントロールを定義します。
-
コネクタ・データが要素の配列である場合、対応する配列インデックス(たとえば、response[0].RestResponse[1].result)を入力することによって、特定の配列アイテムを「レスポンス」フィールドにマップできます。
-
- Payload values: RESTコネクタ(パラメータ)に渡す情報を指定します。 問合せ、ヘッダーまたはテンプレート・パラメータを指定できます。
値リストのリンクとリフレッシュのフィールド
エンド・ユーザーがLOVフィールドで選択するたびに、RESTコール・データがリフレッシュされて別のLOVフィールドで反映されるように、イベントで「Refresh Connector」コントロール・アクションを使用します。 たとえば、注文申込フォームでユーザーが「Category」ドロップダウン・フィールドから選択した後、そのカテゴリのみの製品のリストが「Product」ドロップダウン・フィールドに表示されます。
- 最初のコントロール(「Category」フィールドなど)を選択します。 「Properties」ペインで、「Events」フィールドにスクロール・ダウンして、イベントを追加または編集します。 たとえば、「On Change」イベントを追加し、「Edit」をクリックしてイベントを編集します。
- 表示される「Action」フィールドで、「Refresh Connector」を選択します。 この設定は、ユーザーがカテゴリ・フィールドで選択するたびに、製品フィールドのREST呼び出しがリフレッシュされ、選択したカテゴリの製品値が返されることを意味します。
フォームでのループの例
フォーム・コントロールでループを使用すると、反復処理が必要なアクションを実行できます。 イテレータは、数値または配列です。 ループは、フォーム内で同じアクションを複数回実行する方法です。
ここでは、フォームでのループの動作例をいくつか取り上げます。
単純ループの構成
- 表コントロールを選択し、「イベント」が検索されるまで下にスクロールして表示されるプロパティ・ペインで、。 をクリックして、コントロールのイベントを構成します。
- +Actionsをクリックします。 「制御」ドロップダウン・リストで「表」を選択し、「アクション」ドロップダウン・リストで「行の追加」を選択します。
ループを(フォーム・ロードで)実行すると、行の追加アクションが5回実行されます。
5行がフォーム・ロードとして表に追加されることに注意してください。
ループがどのように実行されたかを確認するには、プレビュー・ウィンドウで「ログ」をクリックします。
.配列を使用したループの構成
- 表コントロールを選択し、プロパティ・ペインで「イベント」が検索されるまで下にスクロールします。 をクリックしてイベントを構成します。
- 別の処理を構成します。 +Actionsをクリックします。
- 表示される「タイプ」フィールドで、「ループ」を選択し、「値」ドロップダウン・リストから「値」を選択します。
ループ・タイプには値として3つのオプションを指定できます。
- 索引: 0ベースの繰返し索引(0, 1, 2, 3...)
- 位置: 1ベースの繰返し索引(1、2、3、4...)
- 値: 現在の反復の値。 イテレータが数値である場合、この値はIndexと同じになります。
- 表示される「タイプ」フィールドで、「ループ」を選択し、「値」ドロップダウン・リストから「値」を選択します。
- フォームをプレビューし、ループがどのように動作するかを確認します。
- カスタム・ペイロード・ウィンドウで、配列を指定して、OKをクリックします。
ログイン・ユーザーの現在のデータ関数の例
フォーム内のアクション内の現在のログイン・ユーザー・データ機能を使用して、フォーム内のユーザーに関する情報を取得します。
「現在のログイン・ユーザー・データ」関数を使用すると、現在のユーザーのid、電子メール、フォームの名、ミドル・ネーム、姓に関する情報を動的に移入できます。 さらに、現在のユーザーのマネージャId、電子メール、および名、ミドル・ネーム、姓を取得することもできます。
ここでは、例とともに、現在ログインしているユーザー・データ関数の使用方法を説明します。 この例では、フォームのロード時に自動的に移入されるように、3つのフィールド(ユーザーのId、姓および名)があるフォームを構成します。 その後、ユーザーがボタンGetManagerEmailをクリックしたときに移入されるように、別のフィールド(マネージャeメール)を構成します。
- ユーザーIDコントロールを構成します。
- をクリックしてイベントを構成します。 ドロップダウン・リストから「ロード時」を選択し、編集アイコンをクリックします。
- 表示される「関数」ドロップダウン・リストで、「現在のログイン・ユーザー・データ」が見つかるまでスクロール・ダウンし、「現在のユーザーID」を選択します。
- GetManagerEmailボタンを構成します。
- ボタンを選択すると、プロパティ・ペインで「イベント」が検索されるまで下にスクロールします。
- をクリックしてイベントを構成します。 ドロップダウン・リストから「クリック時」を選択し、編集アイコンをクリックします。
- イベント・クリック時ウィンドウで、「コントロール名」ドロップダウン・リストからManagerEmailを選択し、「アクション」ドロップダウン・リストから「値」を選択します。 表示される「タイプ」ドロップダウン・リストで、「関数」を選択します。
- 表示される「関数」ドロップダウン・リストで、「現在のログイン・ユーザー・データ」が見つかるまでスクロール・ダウンし、「現在のユーザーのマネージャの電子メール」を選択します。
- 「OK」をクリックします。
- 「プレビュー」をクリックします。
フォームがロードされると、ユーザーのid、姓および名が、ユーザーID、最初の「名前」、最後の「名前」の各フィールドに自動的に入力されます。 「マネージャの電子メールの取得」フィールドが空です。
GetManagerEmailボタンをクリックします。 マネージャのEメールが「マネージャのメール」フィールドにロードされます。
