「実践トレーニング⑥ インタラクティブテーブル」について、手順を解説します。
この章のポイント：
- インタラクティブテーブルの作成
関連記事：
手順
ステップ左側、現在の在庫を表示するエリアを作成します。
- アプリの編集画面に戻り、登録ステップを開く
- ツールバーのテキストよりテキストを挿入し、画面右のウィジェットタブで文言を編集して配置する
- ツールバーの埋め込みよりインタラクティブテーブルを挿入し、配置する
- インタラクティブテーブルを選択して画面右のウィジェットタブで下記の通り設定し、テーブルフィールドの幅を調整する。
・データソース：Tulipテーブル＞在庫管理
・テーブルフィールド：アイテム、場所、数量を表示 - ツールバーで入力よりテキストを挿入して下記の通り検索フィルタ用の変数を作成し、それぞれインタラクティブテーブルの「アイテム」「場所」のフィールドの上に配置する
・作成する変数：2個
・変数名：「アイテム_検索」「場所_検索」
・文字サイズ：24 - 再度インタラクティブテーブルを選択し、画面右のウィジェットタブよりフィルタを開き、下記の通りフィルタを追加して保存する
- ツールバーのボタンよりボタンを挿入し、ボタン名・色・境界の半径・大きさを変更して配置する
・ボタン名：クリア
・境界の半径：48 - 画面右のウィジェットタブよりトリガを設定する
開発者モードでの動作確認
最後に開発者モードで、テーブルフィルタ・クリアボタンのトリガ問題なく動作するかを確認します。
- 画面右上のテストをクリックし、開発者モードを立ち上げる
- アプリを開始し、テーブルフィルタ・クリアボタンのトリガが問題なく動作するかを確認する