チュートリアル: オプションを選択する

ボタン ウィジェット App Maker の中級スキル

access_time 10〜15 分

作成するアプリの概要

ピザを注文するためのアプリを作成します。アプリのユーザーは次のことができます。

  • ピザを注文し、ピザのサイズとトッピングを選ぶ
  • テーブルのすべての注文を表示する
  • トッピング オプションを更新する

ラボの内容

このチュートリアルでは、次の方法について説明します。

  • さまざまな種類の入力ウィジェットを設定する
  • 3 種類の方法で入力ウィジェットのオプションを設定する

また、データモデルの作成、ページの追加、バインディングの使用によるウィジェット内のオプション設定についても説明します。詳細については他のチュートリアルで説明します。

アプリを作成する

  1. 雇用主や学校から提供される G Suite アカウントにログインします。
  2. App Maker を開きます。
  3. 空のアプリを作成し、「Pizza Order」と名前を付けます。

アプリのデータモデルと UI を設定する

  1. Cloud SQL モデルを追加して「Orders」と名前を付けます。
  2. 次のフィールドを追加します。
フィールド名
CustomerEmail 文字列
Size 文字列
Toppings 文字列
  1. [Size] フィールドをクリックしてから [Advanced] をクリックします。[Possible value] フィールドをクリックし、「small」などのサイズを入力して、[Add] をクリックします。「medium」や「large」など、他のサイズについても同様に設定し、[Done] をクリックします。
  2. 左側のナビゲーションにある [NewPage] をクリックします。プロパティ エディタで、次のプロパティを設定します。

    1. Name - PizzaOrders
    2. DisplayName - Pizza Orders
    3. datasource - Orders
  3. ウィジェット パレット widgets を開いて、フォーム ウィジェット をページに追加します。

    1. データソースは「Inherited: Orders」のままにします。
    2. 挿入タイプのフォームを選択します。
    3. [Choose form fields] ページの [ID] チェックボックスをオフにします。

    フォームには、データソースのフィールドに対応するテキスト フィールドが自動的に生成されます。次のステップでは、ウィジェットを追加して、これらのテキスト フィールドの一部を置き換えます。なお、テキスト フィールドには、ウィジェットのデータソースへの接続方法が表示されているので、ここではまだ削除しません。

  4. テーブル ウィジェット をフォームの横に追加します。すべてデフォルトのままにします。

選択ウィジェットを追加する

このセクションでは、ユーザーがピザのサイズとトッピングを選択するためのウィジェットを設定します。

  1. ピザのサイズを選択するためのプルダウン リストを作成します。

    1. プルダウン ウィジェット を [Customer Email] テキスト フィールドの下の [Pizza Orders] フォームに追加します。
    2. プロパティ エディタで、プルダウン ウィジェットに「SizeSelector」という名前を付けます。
    3. [label] を「Select size: 」に設定します。
    4. [options] をクリックします。プルダウン オプションを [Size] フィールドの範囲内の値にバインディングするには、[options] を @datasource.model.fields.Size.possibleValues に設定します。
    5. [values] をクリックして [Size] を選択します。この設定により、値に @datasource.item.Size がバインディングされます。[Size] テキスト フィールドのウィジェットをクリックすると、同じ値になっていることが確認できます。[value] により、ウィジェットがデータソースとつながります。ユーザーが注文を作成すると、アプリにより [Size] フィールドがウィジェットで選択された値に設定されたうえで、データモデルにレコードが追加されます。
    6. [Size] テキスト フィールド ウィジェットを削除します。
  2. ピザのトッピングを選択するための複数選択ウィジェットを作成します。

    1. 複数選択ウィジェット を、ページの [Select size] プルダウン リストの下に追加します。
    2. プロパティ エディタで、複数選択ウィジェットに「ToppingsSelector」と名前を付けます。
    3. [label] を「Select toppings: 」に設定します。
    4. [options] をクリックします。バインディング コードエディタで、@datasource.text を削除して ["basil", "eggplant", "garlic", "tomatoes"](または他の好きなトッピング)を入力します。

      この際、データソースの [Toppings] フィールドに設定された値に、[options] をバインディングしないようにしてください。これらの値はデータの検証用に使用され、正確な一致が求められます。複数選択ウィジェットで、この方法を使用する場合には、それぞれのトッピングに加えて、すべてのトッピングの組み合わせも入力します。たとえば、「basil」、「eggplant」、「garlic」、「tomatoes」、「basil,eggplant」、「basil,garlic」、「basil,eggplant,garlic」のように入力する必要があります。

    5. [values] をクリックして、バインディングを @datasource.item.Toppings#strToArray() に設定します。[Toppings] テキスト フィールド ウィジェットをクリックすると、同じ値になっていることが確認できます。ユーザーが複数選択ウィジェットで複数のトッピングを選択できるようにするために、#strToArray() を使用してウィジェット内のリストをデータソースに格納されている配列に変換しています。

    6. [Toppings] テキスト フィールド ウィジェットを削除します。

  3. ウィジェット パレットを閉じます([Close] close をクリックします)。

  4. アプリをプレビューしてテストします。

    1. [Preview] をクリックして、アプリがデータにアクセスできるようにします。
    2. [Create Orders] ペインで、ピザを注文します。[Submit] をクリックすると、ピザの注文がテーブルに追加されます。
    3. プレビュータブを閉じます。

データ バインディングでトッピング オプションを設定する

メニューが頻繁に変わる場合にはどうすればいいでしょうか。トッピング オプションを追加するたびに、ウィジェット オプションを編集してアプリを再デプロイする必要はありません。このセクションでは、トッピングを追加するページとそれらを表示するテーブルを追加します。新しいオプションでトッピング セレクタを自動的に更新するように、データ バインディングを設定します。

  1. Cloud SQL モデルを追加して「Toppings」と名前を付けます。
  2. [Fields] タブで文字列型のフィールドを追加し、「Topping」と名前を付けます。
  3. 新しいページを追加します。プロパティ エディタで、次のように変更します。
    1. ページに「CreateToppings」と名前を付けます。
    2. データソースを「Toppings」に設定します。
    3. [Security] セクションで、[Who can see this page] メニューをクリックし、[Admins only] を選択します。この設定を使用すれば、ユーザーがページにアクセスして、トッピングを追加することはできません。ユーザーは [PizzaOrders] ページにのみアクセスできます。
  4. ウィジェット パレット widgets を開いて、フォーム ウィジェット をページに追加します。

    1. データソースを「Inherited: Toppings」のままにします。
    2. [Insert form type] を選択します。
    3. [Choose form fields] ページの [ID] チェックボックスをオフにします。
    4. (省略可)ウィジェットのサイズを変更して、幅を狭くします。
  5. 挿入フォームの横にテーブルを追加します。デフォルト値をそのまま使用します。

  6. [Create Orders] ページに移動します。

  7. [CreateOrders] フォームで、[SelectToppings] 複数選択ウィジェットを選択します。

  8. プロパティ エディタにある、[options] をクリックします。既存の JavaScript 配列を削除します。[Application] で、[datasources] chevron_right [Toppings] chevron_right [items] chevron_right [projections] chevron_right [Topping] の順に選択します。値は @datasources.Toppings.items..Topping です。これでウィジェットのオプションが、Toppings データモデルの値になりました。

  9. アプリをプレビューしてテストします。

    1. [Preview] をクリックします。
    2. [PizzaOrders] ページの [Create Orders] ペインには、トッピング オプションがありません。[Toppings] データベースにトッピングを追加する必要があります。
    3. ページセレクタを使用して [CreateToppings] ページに移動します。
    4. トッピングを追加します。追加した内容はテーブルに入力されます。
    5. ページセレクタを使用して [PizzaOrders] ページに移動します。[Create Orders] ペインに、追加したトッピングがすべて表示されます。

これで、一般的な方法を使用して、ユーザーがオプションを選択できるようにするアプリが作成できました。

次のステップ

  1. データ バインディングを使用して、[Create Order] フォームのピザサイズのオプションを設定してみてください。
  2. ラジオグループ ウィジェットで、ピザサイズ セレクタを設定してみてください。

    ヒント: ラジオ オプションに、[Id] フィールドではなく [Size] フィールドの値を表示させるには、データモデルに移動します。そして [Size] フィールドをクリックしてから [Set as display field] をクリックします。ラジオグループを使用してトッピングも選択できるようにするにはどうすればいいでしょうか。

  3. ベンダー評価テンプレート アプリについて確認します。[CompanyCreate] ページには、会社所在地の地域を選択するための複数選択ウィジェットがあります。地域は、会社のレコードとリレーションで関連付けられています。