Migaro. 技術Tips

                       

ミガロ. 製品の技術情報
IBMiの活用に役立つ情報を掲載!


ドロップダウンフィルターを他の値で制限する方法

(※このトピックスは、Valence開発元(米CNX社)のブログ記事を翻訳・再編集したものとなります。原文記事は、コチラとなります。)

Nitro App Builder ベースの多くの業務アプリケーションでは、ドロップダウンのフィルターと連携したデータグリッドが人気の組み合わせとなっています。一般的なグリッド構成では、多くの列や行が存在しますが、ヘッダー行のすぐ上に配置されたフィルターツールバーを使うことで、ユーザーはより関連性の高いレコードに絞り込むことができます。

時には、あるドロップダウンフィルターで選択された値によって、別のフィルターの値が制限されるべきことがあります。例えば、ユーザーが「国」を指定するドロップダウンフィルターを使い、その隣に「州/県」を指定するフィルターがあるとします。このような構成では、もしユーザーが「国」のドロップダウンで「カナダ」を選択した場合、「テキサス」を「州/県」として指定するのは不適切です。

このような状況では、片方のフィルターでの選択に基づいてもう一方のフィルターの内容を制限する「依存フィルター設定」が役立ちます。これはドロップダウンフィルターのデータソースで vvIn_virtual を使用し、アプリ変数を組み合わせることで実現できます。
では、この機能がどのように機能するかを、シンプルなグリッドを使って簡単に説明しましょう。ここでは、弊社お気に入りのダミー顧客マスターテーブル「DEMOCMAST」を使用します。このテーブルには「国(CCOUNTRY)」列と「州/県(CSTATE)」列が含まれています。

我々の目標は、これら2つの列に対してドロップダウンフィルターを設定し、選択された国に応じて、隣接する州/県列の内容が自動的に制限されるようにすることです。また、「リセット」ボタンが押されたり、国が未選択の状態になった場合には、州/県フィルターがすべての選択肢を再び表示するようにしたいと考えています。

STEP1:国および州/県フィルター用のデータソースを作成する

国のドロップダウンに値を供給するデータソースは非常にシンプルです。

select distinct CCOUNTRY from DEMOCMAST order by CCOUNTRY

次に、前述のように州/県のドロップダウンを動作させるためには、vvIn_virtual参照を使用して、指定された国によって制限されるデータソースを作成します。vvIn_virtual句の値はアプリ変数を通じて設定され、ユーザーインターフェースのフロントエンドやバックエンドのRPGプログラムのいずれかで調整できます。

このため、2番目のデータソースには filterCountry という仮想列(アプリ変数)を使ったwhere句を含めます。

select distinct CSTATE from DEMOCMAST
where vvIn_virtual('filterCountry', ' ', 'char', 20, NULL, 'true') in (' ', CCOUNTRY)
order by CSTATE

このSQL文は、filterCountryの評価結果が空白である場合には、DEMOCMASTにあるすべての州を取得します。
一方、filterCountryに値が設定されている場合は、CCOUNTRY列の値がfilterCountryと一致するレコードのみに絞り込みます。

STEP2:グリッドに新しいデータソースを使ってフィルターを作成する

データソースの作成が完了したら、次のステップは非常にシンプルです。グリッドウィジェットの「フィルター」タブに2つのフィルターを追加します。1つはCCOUNTRY用、もう1つはCSTATE用です。そして、両方のフィルターをデータソースからリストを取得するドロップダウン形式に変換します。

また、ユーザーが何らかのフィルターを指定するまでグリッドにデータを表示させたくない場合は、グリッドウィジェットの [Configure(設定)] > [Data(データ)]タブにあるAutoload(自動ローディング)プロパティのチェックを外すと、フィルターがかかった際にデータ表示されるようになります。
以下に示すサンプルスクリーンショットでは、このオプションはオフ(チェックを外した状態)になっているため、グリッドに結果が表示されていません。

STEP3:フィルターの値を取得し、もう片方のフィルターの再読み込みを行うアプリ変数を作成する

次にアプリレベルの設定に移ります。必要なのはアプリ変数を2つ作成することです。
1つは国フィルターで選択された値を取得するための変数、もう1つは国の値が変更されたときに州/県フィルターを再読み込みさせるためのトリガー変数です。
アプリ変数を作成するには、画面左上の「App Variables(アプリ変数)」ボタンをクリックし、アプリ変数一覧にアクセスしてください。

次に、アプリ変数を2つ追加します。
1つ目は “filterCountry”(国フィルターで選択された値を保持するための変数)、
2つ目は “countryFilterChanged”(州/県フィルターに再読み込みを促すための変数)です。
後ほど、グリッドウィジェットの機能と連携させます。

そして、ここからが今回の重要なポイントです。
「countryFilterChanged」は必要に応じて’true’に設定し、州/県フィルターに再読み込みが必要であることを伝えます。
これを実現するには、アプリ変数の式(expression)の重要な性質を利用します。
式に別のアプリ変数への参照が含まれている場合、そのアプリ変数の値に変更が検出されると式が自動的に再評価されます。

そのため、「countryFilterChanged」の Expression(式)セルをクリックすると、式エディタ(expression editor)が表示されます。

そしてそのエディタ内に、以下のJavaScriptコードを入力します。

このコードは単に「filterCountr」のアプリ変数を取得しているだけです(後ほど「国」ドロップダウンにリンクさせます)。そして、そのアプリ変数がundefinedでない限り’true’を返します。このような単純なフィルター構成では、undefinedになることは基本的にありません。

また、式で「保存(Save)」をクリックすると、式のセル内にはコードの簡略表現が表示されます。その中では改行が削除され、appVar.filterCountryは{[filterCountry]}のように短縮されて表示されます。

STEP4:アプリ変数を適切な要素にリンクさせる

最後のステップは、先ほど作成した2つのアプリ変数をグリッドにリンクさせます。
アプリのメインページに戻り、グリッドウィジェットの上にマウスカーソルを乗せて、「リンク」ボタンをクリックしてください。

「Get Filters(フィルターの取得)」カテゴリをクリックし、アプリ変数「filterCountry」を「CCOUNTRY」フィルタードロップダウンに関連付けてください。これにより、ユーザーが国を選択するたびにこのアプリ変数が更新されるようになります。
(その結果、「countryFilterChanged」アプリ変数の式が再評価されることになります)。

最後に、「Reload Filters(フィルターの再読み込み)」をクリックし、これを「countryFilterChanged」アプリ変数にリンクさせてください。これにより、「州/県」データソースの再読み込みが強制的に行われます。

これで最後のステップは完了です!
アプリを保存すると、「国」ドロップダウンの変更によって、「州/県」ドロップダウンの選択肢が制限されるようになっています。