クラッシュコース101
10 モジュール
5 週

オプション用部品

クリックでコピー

ウェブアプリケーションで様々なオプションを選択するためのコンポーネント


URLでIDを使用する代わりに、特別な Selectコンポーネントを使用してフィルタリングを作成することができます。以前、私たちはすでに Relselectコンポーネントを使用し、その動作のロジックは非常に似ています。 Selectのおかげで、利用可能なすべての国からの選択肢を提供するだけでなく、独自のオプションを追加することもできます。

Select コンポーネント

の設定を見てみましょう。 Selectの設定を見てみましょう。どの国のどの都市をテーブルに表示するかを決定する選択肢と、一般的に利用可能なすべての都市を表示する機能が追加されました。


を作成する場合 Selectコンポーネントを作成する際には、そこから選択される選択肢を記入しなければなりません。これを行うには、次のように Relselectのように、国の一般的なリストを取得する必要があります。しかし、その場合、このリストを Selectに直接送るのではなく、このリストを利用可能なオプションに変換して、それぞれを Select Optionモデルとして表現します。そこで Select Optionsを変数として宣言し,ループの中で必要なデータを入れていきます.


この例では、私たちにとって重要な Select Optionsフィールドは次のとおりです。 Label(提案されたオプションのテキスト) と Value(数値の識別子) です。これらの値には、国の名前とその ID を設定します。

ループが完了したら、国によるフィルタリングを行わずに利用可能なすべての都市を表示するオプションをもうひとつ作成し、追加しなければなりません。ここでは Label = WorldValue = 0.

いずれかのオプションを選択すると Select onChangeトリガーが起動します。これを利用して、選択されたオプションを見つけ出し、それを新しいグローバル変数 Country selected.この場合、追加のチェックが必要で、もし最後のオプション(利用可能なすべての都市)が選択されたなら、この変数の値を空(empty)に設定する必要があります(null).

このビジネス・プロセスの最後のアクションは、ボタンをクリックすることです。 Refreshボタンをクリックすることで、テーブルのデータがリフレッシュされます。そのビジネス・プロセスも、新しい変数の出現を考慮に入れて、少し変更する必要があります。


ここで、どの国のどの都市を表に表示するかを選択することができます。


そして最後に、異なるオプションを選択することができる別のコンポーネントを見てみましょう。 Dropdown.その重要な違いは、特定のオプションを選択すると、選択したオプションを記憶するだけでなく、直ちに何らかのアクションを引き起こす必要があることです。これは、機能を拡張したボタンと呼ぶことができます。

例えば Dropdownをテーブルの国の削除ボタンの代わりとして使ってみましょう。この場合、データベース内のエントリーはすぐには削除されませんが、削除を確認したりキャンセルしたりできる追加のオプションが呼び出されます。

まずは、コンポーネントの一般的な設定から始めましょう。外観と利用可能なオプションを選択しましょう。


次に、ビジネスプロセスそのものを作成します。そして、その中の最初のアクションは、ボタンがクリックされたレコードを決定することです。 Dropdownがクリックされたレコードを決定します。通常のボタンでは、この値は Record IDとして渡されますが、この場合 Dropdown自体が押されるわけではなく、目的のオプションを持つ子コンポーネントが押されます。そのため、エントリIDの取得は少し複雑になります。

繰り返しのテーブル要素では Component IDは2つの部分から成り、"-"記号で区切られる。最初の部分は標準的なコンポーネントIDである。しかし、2番目の部分は単なるレコードIDであり、これを追加することで繰り返しコンポーネントの識別子を一意にすることができる。

これがわかっていれば、このIDを取得すればいいだけである。そこで、文字列を分割して(Split string)に分割し、2番目の部分の値を求める(index = 1)


次のステップとして、どのようなオプションが選択されたかを確認する必要があります。


もしこれが本当に削除を確認するためのオプションであれば、適切なコマンドを実行します。そうでなければ、何らかのアクションが必要ではないので、何もしなくてよい。


これで、データベースからのレコードの削除は、誤ってクリックされることから保護されるようになりました。

Was this article helpful?
まだ答えをお探しですか?