チュートリアル 5: データモデルを接続する

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

access_time 約 30 分

作成するアプリの概要

部署別に従業員を一覧表示する人事アプリを作成します。アプリユーザーは次のことができます。

  • 部署レコードと従業員レコードの追加、編集、並べ替え、削除
  • 次の 2 つの方法による従業員レコードの表示

    • 部署別のみ
    • 部署別、またはすべてを表示

このアプリでは、ユーザーがページ間を移動する方法は用意されていません。プレビュー モードでページセレクタを使用して、ページ間を移動します。

ラボの内容

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

  • データモデル間のリレーションを作成します。このチュートリアルでは、Departments モデルと Employees モデルの間に 1 対多のリレーションを作成します。1 つの部署に複数の従業員を含めることができます。
  • 人事部署の全従業員のレコードなど、リレーションに該当するレコードを表示します。

アプリを作成する

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

Departments データモデルを設定する

  1. Cloud SQL データモデルを追加して、「Departments」と名前をつけます。
  2. 次のフィールドを追加します。

    フィールド名フィールド タイプ
    Department文字列
    Location文字列
  3. [Department] フィールドをクリックし、[Set as display field] をクリックします。

    [Department] を表示フィールドとして設定すると、App Maker はそのフィールド値を使用してモデル内のレコードを参照します。たとえば、このチュートリアルの後半でブルダウン ウィジェットを追加しますが、この場合、[Department] フィールドの値が自動的にプルダウン オプションに表示されます(バインディングの表現は @datasource.items になります)。

従業員データモデルを設定する

  1. Cloud SQL データモデルを追加して、「Employees」 と名前をつけます。
  2. 次のフィールドを追加します。

    フィールド名フィールド タイプ
    FirstName文字列
    LastName文字列
    Email文字列
    StartDate日付

    Employees モデルに表示フィールドを設定する必要はありません。

リレーションを追加する

  1. [Departments] モデルをクリックして、[Relations] タブをクリックします。

  2. [Add Relation] をクリックします。

    1. [Departments] モデルのリレーション エンドで、[Count] の下矢印をクリックして [One] を選択します。このリレーション エンドのデフォルト名はそのままにします。このリレーション エンドの名前に「Department」と入力します。
    2. [Model] の下矢印をクリックし、[Employees] を選択して、もう 1 つのモデルを指定します。
    3. [Employees] モデルのリレーション エンドで、[Count] の下矢印をクリックして [Many] を選択します。このリレーション エンドの名前に「Employees」と入力します。
    4. [Create] をクリックします。

部署の追加用ページを作成する

  1. [NewPage] ページの名前を「EditDepartments」に変更します。ページの最上位パネルが選択されます。
  2. プロパティ エディタで、[datasource] プロパティをクリックし、[Departments] を選択します。
  3. ページに挿入フォームを追加します。フォームのデフォルト オプションをそのまま使用します。
  4. ウィジェット パレットを閉じます([Close] close をクリックします)。

従業員の追加用ページを作成する

  1. 新しいページを追加し、「EditEmployees」と名前をつけます。データソースに [Employees] を指定し、[Create] をクリックします。
  2. ページに挿入フォームを追加します。フォームのデフォルト オプションをそのまま使用します。
  3. ウィジェット パレットを閉じます。

部署ごとに従業員を一覧表示するページを作成する

リレーションを使用して、2 つの方法で部署ごとに従業員を集計できます。このチュートリアルでは両方の方法を紹介します。

  • それぞれの部署のみで集計(このセクションで説明します) - リレーションをデータソースとして使用します。このデータソースを使用するテーブルでは、ページ分けや列ごとの並べ替えはサポートされていません。
  • それぞれの部署で集計(部署が選択されていない場合は、すべての従業員)次のセクションで説明します) - リレーションに対してクエリフィルタを使用します。クエリフィルタを使用するテーブルでは、ページ分けがサポートされています。テーブルを列で並べ替えることもできます。

実際のアプリでは、方法を 1 つ選びます。ページ分けや並べ替えが可能で、部署に従業員がいない場合には空になることから、2 つ目のアプローチがおすすめです。

各部署の従業員の一覧表示のみのページを作成する場合:

  1. ページを追加し、「RelationDatasource」と名前をつけます。データソースの [Departments] を指定し、[Create] をクリックします。
  2. アプリユーザーが部署を選択するためのプルダウン リストを追加します。

    1. [Widgets] widgets をクリックして、プルダウン ウィジェット を [RelationDatasource] ページに追加します。
    2. [options] プロパティをクリックし、[More options] chevron_right [datasource] chevron_right [items] の順に選択して [OK] をクリックします。こうすることで、データソースの表示フィールドに使用可能な値が設定されます。今回は [Department] フィールドの値が設定されます。
    3. [value] プロパティをクリックし、[More options] chevron_right [datasource] chevron_right [item] の順に選択して [OK] をクリックします。こうすることで、ユーザーが選択したアイテムにウィジェットの値が設定されます。
    4. [label] プロパティをクリックし、「Select a department」と入力します。
  3. 従業員レコードを表示するためのテーブルを追加します。

    1. テーブル テーブル ウィジェット ウィジェットを、プルダウン ウィジェットの下のページに追加します。テーブル ウィジェットとプルダウン ウィジェットの左側を揃えます。
    2. [Department: Employee (relation)] データソースを選択し、[Next] をクリックします。このデータソースでは、プルダウン ウィジェットの値と一致するすべての従業員がテーブルに表示されます。
    3. テーブルのデフォルト オプションをそのまま使用します。[Next] をクリックして [Finish] をクリックします。
  4. ウィジェット パレットを閉じます。

各部署の従業員の一覧表示、または全従業員の一覧表示のページを作成する

  1. ページを追加し、「QueryFilter」と名前をつけます。データソースに [Employees] を指定して、[Create] をクリックします。
  2. ユーザーが部署を選択するためのプルダウン リストを追加します。

    1. [Widgets] widgets をクリックし、[QueryFilter] ページにプルダウン を追加します。
    2. [value] プロパティのバインディング表現には、[More options] chevron_right [datasource] chevron_right [query] chevron_right [filters] chevron_right [Department] chevron_right [_equals] の順に選択して、[OK] をクリックします。
    3. [options] プロパティで、左側の [Application] パネルからバインディング表現を選択します。[datasources] chevron_right [Department] chevron_right [items] の順に選択して、[OK] をクリックします。
    4. [label] プロパティをクリックし、「Select a department」と入力します。
    5. プロパティ エディタの [Events] セクションを開きます。[onValueEdit] をクリックし、[Reload datasource] を選択します。プルダウン リストの値がアプリユーザーによって変更されたときに、データソースを再読み込みしてクエリを再実行するようになります。
  3. 選択された部署の従業員のレコードを表示するテーブルを追加します。

    1. テーブル テーブル ウィジェット をページのプルダウンの下に追加します。テーブル ウィジェットとプルダウン ウィジェットの左側を揃えます。
    2. データソース [Inherited: Employees] が選択されます。テーブルのデフォルト オプションをそのまま使用し、[Next] chevron_right [Next] chevron_right [Finish] の順にクリックします。
  4. ウィジェット パレットを閉じます。

アプリのプレビューとテストを行う

  1. 右上隅にある [Preview] をクリックし、新しいブラウザタブでアプリを実行します。
  2. アカウントを選択して [Allow] をクリックし、アプリに特定の情報の使用を許可します。
  3. 部署のデータを入力します。
    1. ページセレクタから、[EditDepartments] を選択します。
    2. [Edit Department] フォームで、複数の部署の名前と場所を入力します。[Create] をクリックして、それぞれのレコードを新しく作成します。
  4. 従業員のデータを入力します。
    1. ページセレクタから、[EditEmployees] を選択します。
    2. [Edit Employee] フォームで、複数の従業員に関する情報を入力します。[Create] をクリックして、それぞれのレコードを新しく作成します。従業員ごとにそれぞれの部署を選択します。
  5. テーブルのリレーション データソースを使用するページで、部署ごとに従業員を表示します。

    1. ページセレクタから、[RelationDatasource] を選択します。
    2. プルダウン リストから部署を選択します。テーブルに選択した部署の従業員のレコードが表示されます。部署が選択されていない場合、テーブルは空になります。
  6. クエリフィルタを使用してテーブルのデータを読み込むページで、部署ごとに従業員を表示します。

    1. ページセレクタから、[QueryFilter] を選択します。
    2. 部署が選択されていない場合、テーブルにはすべての従業員のレコードが表示されます。プルダウンから部署を選択すると、テーブルに選択した部署の従業員のレコードが表示されます。

これで、リレーションを使用する App Maker アプリが作成されました。

次のステップ

  1. リレーションの詳細について学ぶ。
  2. Relations サンプルアプリを確認する。今回作成したアプリと同様のものです。
  3. クエリ データソースフィルタについて学ぶ。