App Makerでクエリフィルタを使ってデータソースにフィルタをかける方法

filter

photo credit: Nine is the Magic Number Homemade Pop Filter via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

初心者向けにApp Makerのチュートリアルのリレーション編を送りしています。

前回の記事はこちら。

App Makerでリレーションをデータソースとしたテーブルの設置方法
初心者向けApp Makerのチュートリアル、リレーション編を送りしています。今回は、App Makerでドロップダウンリストの設置と、リレーションをデータソースとしたテーブルの設置方法です。

データモデル間のリレーションをデータソースとしたテーブルの作成方法をお送りしました。

「選択した部門の従業員リストを表示する」方法ですが、実はもう一つあります。

クエリフィルタを使う方法です。

ということで、今回はApp Makerでクエリフィルタを使ってデータソースにフィルタをかける方法お送りします。

では行ってみましょう!

スポンサーリンク

前回おさらい

前回作成したアプリは以下のようなものです。

部門を選択すると、その部門の従業員リストをテーブルで表示するというものです。

App Makerで作成したリレーションアプリ

まず、部門リストを表現するデータモデル「Department」 があり、

タイプ フィールド名 表示名
String Department 部門
String Location 所在地

アプリの部門を選択するドロップダウンリストの元データは、この「Department」フィールドのデータ群となります。

また、従業員リストを表現するためのデータモデル「Employee」があり、

タイプ フィールド名 表示名
String FirstName
String LastName
String Email Emailアドレス
Date StartDate 入社日

データモデル「Department」のフィールド「Department」のリレーションが追加されています。

このリレーションをデータソースとしたテーブルを作成すると、前述のイメージで紹介したように「選択した部門の従業員リストを表示する」といったことが実現できるわけです。

今回はそれとは別の方法で、それを実現していきます。

ページを作成する

まず、「クエリフィルタ用」の新規のページを作成します。

左メニューのPAGESの隣の「+」アイコンから「Page」を選択、ページ名は「QueryFilter」、データソースは「Employee」として「CREATE」します。

App Makerで新規ページを作成する

ドロップダウンリストの設置とプロパティの設定

続いてドロップダウンリストの設置をしていきます。

「Widgets」からDropdownをドラッグします。

プロパティエディタではvalueプロパティ、optionsプロパティ、labelプロパティ、onValueEditイベントの設定をしていきますよ。

valueプロパティの設定とクエリフィルタ

まず、valueプロパティを「More options」とし、「datasource > query > filters > Department > _equals」として「OK」とします。

valueプロパティの内容は

@datasource.query.filters.Department._equals

となります。

まず、前提として今回の例の場合は、先程設定したとおり、このページのデータソースは「Employee」で、ウィジェットもそれを継承しています。

Queryオブジェクトは、どのレコードがそのデータソースとして読み込まれるかを制御するオブジェクトです。

それに対してfiltersプロパティで、フィルタを追加することができます。

つまり、データソース「Employee」について「フィールドDepartmentがドロップダウンリストと等しい」というフィルタをクエリに追加してね、という内容になりますね。

optionプロパティの設定

続いて、optionsプロパティで「More option」とし、「datasources > Department > items」として「OK」です。

ドロップダウンリストのデータソースは「Employee」となってしまっているので、WIDGETのdatasourceではなくて、APPLICATIONのdatasourcesを選択することになります。注意してください。

つまりoptionプロパティの内容は

@datasources.Department.items

となります。

labelプロパティの設定

labelプロパティには「部門を選択してください」とします。

App Makerでドロップダウンのプロパティを設定

onValueEditイベントのアクションを設定する

ドロップダウンリストについてもう一点、イベントアクションの設定をします。

ドロップダウンリストの値が変更されたときにデータソースをリロードしてクエリを再実行するというものです。

プロパティエディタの下のほうに「Events」というエリアがあるので、そのエリアを開いて、「onValueEdit」の設定を「Reloard Datasource」とします。

App Makerでドロップダウンリストのイベントアクションを設定する

テーブルを設置する

続いてテーブルを設置していきましょう。

「Widgets」からTableウィジェットをドラッグし、 データソースを「Inherited: Employee」、その他の設定はデフォルトのままで「OK」と進めてください。

以下のようなテーブルが設置されます。

App Makerでテーブルを設置する

プレビューして実行確認

ではプレビューしていましょう。

ドロップダウンで選択された部門の従業員がテーブルに表示されるはずです。

また、ドロップダウンが「No selection」になっているときは、すべての従業員リストが表示されることに注目してください。

App Makerのクエリフィルタによるテーブル表示

ドロップダウンが選択されてないということはクエリフィルタがかかってないということになりますので、全ての従業員リストが表示されるというわけです。

この点が、前回のリレーションをデータソースにした方法と異なる点です。

まとめ

以上、App Makerでクエリフィルタを使ってフィルターをかけたデータソースをテーブルに表示する方法をお伝えしました。

少し難しかったと思いますが、 クエリフィルタの存在と役割についてなんとなく理解いただければと思います。

では、次回はまた別のアプリを題材としたチュートリアルを送りしていきます。

連載目次:初心者向けApp Makerチュートリアル【リレーション編】

初心者向けチュートリアルの第5弾。このシリーズでは従業員データ管理アプリを題材に、App Makerのデータモデル間のリレーションについて、またそれを作成をお伝えしていきます。
  1. App Makerでデータモデル間のリレーションを作成する
  2. App Makerでデータモデルへのデータ入力用のページとフォームを作成する
  3. App Makerでリレーションをデータソースとしたテーブルの設置方法
  4. App Makerでクエリフィルタを使ってデータソースにフィルタをかける方法
タイトルとURLをコピーしました