Skip to main content

 

アプリケーションの開発

 

OutSystems

リストから1つの値を選択する

値を入力せずに、事前定義済みの値のリストからエンドユーザーが値を選択できるようにする場合があります。 OutSystemsでは、Dropdownウィジェット(モバイルアプリの場合)またはCombo Boxウィジェット(Webアプリの場合)を使用してこれを実装します。

モバイルアプリでは、以下の手順を実行します。

  1. Dropdownウィジェットをツールボックスからフォームにドラッグします。
  2. ドロップダウンに表示する値のリストをListプロパティに設定します。
  3. Valuesプロパティで、表示されている値を識別するアトリビュートを選択します。
  4. Variableプロパティを選択した値を保持する変数に設定します。
  5. ウィジェットツリーのDropdownで、表示する値を式に設定します。

Webアプリケーションでは、以下の手順を実行します。

  1. Combo Boxをツールボックスからフォームにドラッグします。
  2. 以下の2つのいずれかの方法でCombo Boxをフィードします。
    • List経由
      1. 値のリストをSource Record Listプロパティに設定します。
      2. Source Attributeプロパティで、リストに表示するアトリビュートを選択します。
    • エンティティから直接
      1. Source Attributeプロパティで、表示するアトリビュートをエンティティから選択します。
      2. Combo Boxに表示する事前定義済みの値を持つエンティティをSource Entityプロパティに設定します。
  3. Variableプロパティを選択した値を保持する変数に設定します。

モバイルアプリケーションの例

場所の検索やレビューができるモバイルアプリケーションであるGoOutアプリは、エンドユーザーが新しい場所のレビューをできるようにします。 ここで、[WriteReview]画面に新しい場所に関する3つの入力を表示します。

  • Name
  • Category
  • Address

カテゴリは値のリストであるため、Dropdownウィジェットを実装します。 すべてのカテゴリを取得するために、GetCategories Aggregateを使用します。

  1. [WriteReview]画面を開きます。
  2. Dropdownウィジェットをツールボックスからフォームにドラッグし、名前と住所の入力の間にドロップします。
  3. ListプロパティをカテゴリのリストGetCategories.Listに設定します。
  4. ValuesプロパティをCategory. Idに設定して、ドロップダウンの各値の識別子を定義します。
  5. Variableプロパティを「Place.CategoryId」に設定します。
  6. ウィジェットツリーのDropdownで、GetCategories.List.Current.Category.Labelに式を設定します。
  7. パブリッシュしてテストします。

Webアプリケーションの例

GoOutアプリのWeb版であるGoOutWebアプリで、編集の際に場所のカテゴリを設定します。すべてのカテゴリを保持するCategory静的エンティティがあります。

  1. [PlaceEdit]画面を開きます。
  2. Combo Boxウィジェットをツールボックスからフォームにドラッグします。
  3. Source EntityプロパティをCategory静的エンティティに設定します。
  4. 各カテゴリのラベルを表示するために、Combo BoxのSource Attributeプロパティを「Category.Label」に設定します。
  5. Variableプロパティを場所のカテゴリPlaceForm.Record.Place.CategoryIdに設定します。このプロパティは、Combo Boxでエンドユーザーが選択した値を保存する変数を指定します。
  6. パブリッシュしてテストします。