フォーム データを更新する

フォームのボタンをクリックすると通常、[実行] ブロックの実行がトリガーされていました。ボタン コンポーネントのクリック操作に、[ローカル更新に使用] という新機能を利用できるようになりました。この機能を使用すると、[実行] ブロックを実行せずにフォームを更新できます。

チュートリアル

次のチュートリアルでは、フォームの複数のページ間を移動するボタンの作成方法を説明します。

1. [フォームを作成] アクティビティからフォーム デザイナーを開きます。

2. 複数のパネル コンポーネントまたは選択した任意のその他のコンポーネントをドラッグ アンド ドロップします。

   この例では、各パネル コンポーネントは、異なる情報を収集するフォームの別々のページを表します。

3. 非表示のコンポーネントを (データ カテゴリから) ドラッグ アンド ドロップします。これは、現在のパネル番号を追跡するために使用されます。

   この例では、コンポーネントの [ラベル] を StepId に設定します。既定では、[フィールド キー] の名前は stepId に設定されています。
   
   

   

   
   

4. 各パネル コンポーネント > [条件] タブに移動して、パネルを表示する条件を設定します。

   この例では、各パネルは stepId がパネル番号と等しい場合にのみ表示されます。このためには、次の手順に従います。

   • [シンプル] 条件セクション > [このコンポーネントを表示] フィールドで、True を選択します。
   • [条件として使用するフォーム コンポーネント] フィールドで、StepId を選択します。
   • [条件として使用する値] フィールドにパネルの番号を入力します (最初のパネル—1、2 番目のパネル—2 など)。
   
   

   

   
   

5. 各パネル コンポーネント内部で、ボタン コンポーネントを次のようにドラッグ アンド ドロップします。

   • 最初のパネルに、2 番目のパネルに移動する 1 つのボタン コンポーネントを追加します (例: Next Step)。
   • 最後のパネルに、前のパネルに移動する 1 つのボタン コンポーネントを追加します (例: Prev Step)。
   • 中間のパネルに、2 つのボタン コンポーネントを追加します (前のパネルに移動する 1 つのボタンと、次のパネルに移動する 1 つのボタン)。
6. 各ボタンの [表示] タブに移動します。ボタンの [アクション] を [クリック] に設定します。[ローカル更新に使用] チェックボックスが表示されます。この機能により、[実行] ブロックを実行せずに、ボタンをクリックしてフォームのパネル間を移動できます。
7. [ローカル更新に使用] チェックボックスをオンにします。[データ ロジックを更新] コード エディタが表示されます。

8. 定義済みの JavaScript スニペットを使用して、更新するデータを中括弧で囲んで入力します。必ず、更新するフォーム コンポーネントの [フィールド キー] の名前を使用してください (手順 3 で設定した名前)。

   JavaScript スニペットには、instance.emit('updateData', {[field_key_name]:[field_key_update_value]}); というテンプレートがあります。[field_key_name] はコンポーネントのフィールド キーを表し、[field_key_update_value] はコンポーネントの新しい値を表します。

   この例では、次のスニペットを使用します。

   • Next Step ボタンの場合—instance.emit('updateData', {stepId:X});。X を次のパネルの番号に置き換えます (例: 2 番目のパネルのボタンの場合は、instance.emit('updateData', {stepId:3}); を使用)。
   • Prev Step ボタンの場合—instance.emit('updateData', {stepId:Y});。Y を前のパネルの番号に置き換えます (例: 2 番目のパネルのボタンの場合は、instance.emit('updateData', {stepId:1}); を使用)。

サンプル ワークフロー

ワークフロー全体を確認するか、今後の参考にするには、XAML の例をダウンロードしてください。