ボタンのクリックでタブを切り替える

複数のタブを設定する場合、次のタブに切り替えるボタン コンポーネントを追加できます。このチュートリアルでは、次のタブに切り替えるボタン コンポーネントの作成方法について説明します。

チュートリアル

カスタマイズしたボタン コンポーネントを作成するには、以下の手順を実行します。

1. フォームにボタン コンポーネントをドラッグ アンド ドロップします。
2. ボタン コンポーネントの [表示] タブで、[アクション] プロパティを [クリック] に設定します。
3. [ローカル更新に使用] チェックボックスをオンにします。
4. ボタン コンポーネントを設定して、[データ ロジックを更新] セクションの 2 番目のタブに切り替えます。
5. 2 番目のタブを表示するタブ コントロールを設定します。この例では、ボタンをクリックしたときに [Q2] タブを表示する必要があります。

   0 ベースのインデックスを扱っているので、2 番目のタブを設定するときは、そのタブを Tab(1) として参照します。

   この例では、以下のスクリプトをコピーして貼り付けて、タブ コントロールを設定します。[ユーザーがスクリプトを貼り付ける場所を指定する必要があります]

   var tabs = form.getComponent('tabs');
   tabs.setTab(1);

6. 次の追加スクリプトを使用すると、2 番目のタブに切り替える際に [実行] ブロックを実行できます。このステップは任意であり、ボタン コンポーネントがクリックされた回数を示すために作成しています。

   instance.emit('executeDoBlock', instance.component);

7. コンポーネントとフォームを保存します。

サンプル ワークフロー

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