UIパーツ 基本編
アプリケーションを作成するとき、同じようなレイアウトのページを何度も1から作り直すのは面倒ですよね。
そんな時に便利なのがカスタムセル機能です。
Forguncy 10から登場したカスタムセルはテキストボックスやコンボボックス、ボタンなど複数のセルを1つのパーツとして定義し、複数のページ間で流用できる画期的な機能です。
カスタムセルを活用すれば新規ページ作成の時間削減はもちろん、複数のページで同じ修正を繰り返す必要がなくなるため既存ページの修正工数も減らすことができます。
本記事では1つのカスタムセルを使って、2つの異なるページに一覧表のデータ抽出が可能な検索ボックスを実装する方法をご紹介します。
なお、カスタムセルの基本についてはこちらの資料をご確認ください。
| プロジェクトファイル （作成バージョン：(10.0.10.0） | customcell_search_before.fgcp customcell_search_after.fgcp（実装済みプロジェクトファイル） |
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.テーブルを確認
ナビゲーションウィンドウのテーブル欄には「部署マスタ」、「社員マスタ」、「受注案件」、3つが存在しています。
社員マスタと受注案件テーブルのデータは、それぞれ一覧表の形式で見ることのできるページが用意されています。
この2つのテーブルは部署の情報をコードのみで持っているため、部署名が表示できるように部署マスタとの関連付けが既に設定されています。
＞関連記事：Forguncyヘルプ – テーブルの関連付け設定
また、受注案件テーブルは社員の情報もコードのみで持っているため、社員マスタとの関連付けが設定されています。
また、今回はあらかじめForguncyに内部テーブルを用意していますが、ExcelやCSVなどのファイルからデータを取り込んで使用することもできます。
＞関連記事：ExcelやCSVから予実のデータをインポートする
手順1-2.ページを確認
プロジェクトにはあらかじめ2つのページが用意されています。
ナビゲーションウィンドウから「社員一覧」ページを開くと、すでに社員マスタテーブルの情報が一覧形式で表示できるリストビューが配置されています。
同様に「受注案件一覧」ページを開くと、受注案件テーブルの情報が一覧表示できるリストビューが配置されています。
どちらのページにもリストビューの上部に枠線で囲まれた結合済みのセルがあります。
今回の演習では、この枠線の範囲内にデータ絞り込み用の検索ボックスをカスタムセルで作成し、配置していきます。
最終的に社員一覧ページでは入社日、受注案件ページでは受注日でデータを絞り込めるようにします。
2.カスタムセルで検索ボックスを作る
リストビューで一覧表示しているデータを絞り込むことのできる検索ボックスを作成します。
今回のアプリケーションにはページが2つ用意されており、それぞれ参照しているテーブルは異なります。
しかし、どちらのテーブルにも日付/時刻型のデータが存在します。
そのため、日付の選択欄と絞り込みボタンを持つカスタムセルを用意し、社員一覧ページでは入社日、受注案件一覧ページでは受注日でデータを絞り込めるようにしていきます。
手順2-1.カスタムセルを作成する
プロジェクトにカスタムセルを新規に作成します。
リボンの[作成]＞[カスタムセル]を押下します。
するとナビゲーションウィンドウにカスタムセルの欄が増え、「カスタムセル1」という名前のカスタムセルが作成されます。
手順2-2.UIパーツの配置
「カスタムセル1」に、検索に必要なUIパーツを配置していきます。
手順2-2-1.カスタムセルのセル数を増やす
作成したばかりのカスタムセルは3*3の9つのセルしかありません。
今回はそれでは足りないので、任意の列ヘッダーを右クリックし、[挿入]をクリックして列を増やします。
列が4つになったら同じ操作をもう一度繰り返し、5列3行にしてください。
セルの数が揃ったら、列ヘッダーを右クリックし[列の幅…]をクリックします。
列の幅ウィンドウが開くので、「自動調整」を選択します。
手順2-2-2.日付の選択欄を作る
日付は「いつからいつまで」という範囲で絞り込みたいため、日付の選択欄は始点と終点の2つ分を用意します。
B2セルを選択した状態で、リボンの[ホーム]＞[セル型]欄から[日付]を選択します。
セルがコンボボックスのような見た目になり、yyyy/MM/ddと表示されていればセル型の変更は完了です。
同様の操作をD2セルでも行います。
手順2-2-3.絞り込みボタンを作る
一覧表のデータ抽出を行う際にクリックするボタンを作成します。
E2セルを選択した状態で、リボンの[ホーム]＞[セル型]欄から[ボタン]を選択します。
セルの見た目が変わったら、「絞り込み」と入力します。
手順2-2-4.テキストを加える
見出しとなるテキストや日付が範囲指定だと分かりやすくするためのテキストを追加します。
入力する内容は下表の通りです。
| セル番地 | テキスト |
|---|---|
| A2 | 項目名： |
| C2 | ～ |
手順2-3.プロパティを作成する
作成したカスタムセルのパーツのうち、配置するページごとに可変にしたいものに対してはあらかじめプロパティを設定する必要があります。
今回は全部で3つのプロパティを作成します。
＞関連記事：Forguncyヘルプ – カスタムセルのプロパティ
手順2-3-1.項目名のプロパティを作る
手順2-2-4で作成した「項目名：」の欄には、左の日付欄が一覧表におけるどの項目を示しているのか説明するテキストを表示します。
ページによって一覧表の項目は異なるため、プロパティを作成してページごとに変更できるようにします。
ナビゲーションウィンドウのカスタムセル欄から「カスタムセル1」を右クリックし、[新しいプロパティの作成…]をクリックします。
新しいプロパティの作成ウィンドウが開くので、各項目を以下のように入力します。
| プロパティ名 | 項目名 |
| プロパティの型 | テキスト |
| 初期値 | 項目名： |
OKボタンを押下してウィンドウを閉じると、ナビゲーションウィンドウのカスタムセル1の配下にプロパティ「項目名」が追加されています。
手順2-3-2.日付欄用のプロパティを作る
カスタムセル上にある2つの日付選択欄もページによって値を変えたいため、プロパティを準備しておきます。
ナビゲーションウィンドウのカスタムセル欄から「カスタムセル1」を右クリックし、[新しいプロパティの作成…]をクリックします。
新しいプロパティの作成ウィンドウが開くので、各項目を以下のように入力します。
| プロパティ名 | 日付From |
| プロパティの型 | 数式 |
日付の始点のプロパティを作成したら同じ操作をもう一度行い、日付の終点のプロパティも作成します。
終点の設定は下記の通りです。
| プロパティ名 | 日付To |
| プロパティの型 | 数式 |
手順2-3-3.プロパティを各要素にデータ連結する
作成した3つのプロパティを、カスタムセルに配置したそれぞれの要素とデータ連結します。
A2セルを選択した状態で右ペインの[セル型]タブを開きます。
一番上に[データ連結するプロパティ]の欄があるので、「項目名」を選択します。
同様に、B2セルには「日付From」を、D2セルには「日付To」を指定します。
手順2-4.イベントを作成する
カスタムセルで行われる処理を定義するためのイベントを設定します。
＞関連記事：Forguncyヘルプ – カスタムセルのイベント
手順2-4-1.データ抽出用のイベントを作る
ナビゲーションウィンドウのカスタムセル欄から「カスタムセル1」を右クリックし、[新しいイベントの作成…]をクリックします。
新しいイベントの作成ウィンドウが開くので、「名前」欄に「絞り込み」と入力します。
入力後、[パラメーター…]ハイパーリンクをクリックし、開いたパラメーターウィンドウで[新しいパラメーター]ボタンを押下し、下記の2つのパラメーターを作成します。
| パラメーターの名前 |
|---|
| p日付From |
| p日付To |
OKボタンを押下してウィンドウを閉じると、ナビゲーションウィンドウのカスタムセル1の配下にイベント「絞り込み」が追加されています。
ここで追加したパラメーター2つは、日付の始点と終点を入れておく箱のような役割をします。
手順2-4-2.絞り込みボタンにイベントを設定する
カスタムセル上に作成した「絞り込み」ボタンにイベントを設定します。
ボタンのあるE2セルを選択した状態で、右ペインの[セル型]タブを開き[コマンド…]ハイパーリンクを押下します。
コマンドウィンドウが開くので、カスタムセルのイベント実行コマンドを選択し追加します。
イベント名には先ほど作成した「絞り込み」を選択し、パラメーター配下のように設定します。
| パラメーター名 | 値 |
|---|---|
| p日付From | =日付From |
| p日付To | ＝日付To |
OKボタンを押下して設定を完了します。
3.ページにカスタムセルを配置する
作成したカスタムセルを各ページに配置し、検索ボックスとして使うために必要な設定を行います。
手順3-1.社員一覧ページにカスタムセルを配置する
ナビゲーションウィンドウのページ欄から社員一覧ページを開きます。
太枠に囲まれたセル範囲を選択した状態で、ナビゲーションウィンドウのカスタムセル欄から「カスタムセル1」をドラッグ&ドロップします。
手順3-1-1.社員一覧ページのプロパティを設定する
カスタムセルの作成時に準備した3つのプロパティに、社員一覧ページ用の設定を行います。
カスタムセルを配置したB5セルを選択した状態で、右ペインの[セル型]タブを開きます。
「項目名」「日付From」「日付To」の3つのプロパティ欄が表示されるので、下記のように入力します。
| 項目名 | 入社日： |
| 日付From | =EDATE(NOW(),-120) |
| 日付To | =NOW() |
「項目名」に入力した値は選択値の見出しになり、「日付From」、「日付To」に入力した数式はそれぞれの欄の初期値となります。
手順3-1-2.社員一覧ページの絞り込みイベントを設定する
カスタムセルの作成時に準備したイベント「絞り込み」に、社員一覧ページ用の設定を行います。
カスタムセルを配置したB5セルを選択した状態で、右ペインの[セル型]タブを開きます。[絞り込み のコマンド…]ハイパーリンクを押下します。
コマンドウィンドウが開くので、クエリーコマンドを選択して追加します。
対象テーブルには社員マスタを指定し、条件を下記のように設定します。
| And/Or | フィールド | 条件 | 値 |
|---|---|---|---|
| [入社日] | ＞＝（以上） | =p日付From | |
| And | [入社日] | ＜＝（以下） | =p日付To |
OKボタンを押下してウィンドウを閉じます。
手順3-2.受注案件一覧ページにカスタムセルを配置する
ナビゲーションウィンドウのページ欄から社員一覧ページを開きます。
太枠に囲まれたセル範囲を選択した状態で、ナビゲーションウィンドウのカスタムセル欄から「カスタムセル1」をドラッグ&ドロップします。
手順3-2-1.受注案件一覧ページのプロパティを設定する
カスタムセルの作成時に準備した3つのプロパティに、受注案件一覧ページ用の設定を行います。
カスタムセルを配置したB5セルを選択した状態で、右ペインの[セル型]タブを開きます。
「項目名」「日付From」「日付To」の3つのプロパティ欄が表示されるので、下記のように入力します。
| 項目名 | 受注日： |
| 日付From | =EDATE(NOW(),-12) |
| 日付To | =NOW() |
「項目名」に入力した値は選択値の見出しになり、「日付From」、「日付To」に入力した数式はそれぞれの欄の初期値となります。
手順3-2-2.受注案件ページの絞り込みイベントを設定する
カスタムセルの作成時に準備したイベント「絞り込み」に、受注案件一覧ページ用の設定を行います。
カスタムセルを配置したB5セルを選択した状態で、右ペインの[セル型]タブを開きます。
[絞り込み のコマンド…]ハイパーリンクを押下します。
コマンドウィンドウが開くので、クエリーコマンドを選択して追加します。
対象テーブルには受注案件を指定し、条件を下記のように設定します。
| And/Or | フィールド | 条件 | 値 |
|---|---|---|---|
| [受注日] | ＞＝（以上） | =p日付From | |
| And | [受注日] | ＜＝（以下） | =p日付To |
OKボタンを押下してウィンドウを閉じます。これで設定は完了です。
4.デバッグを実行する
デバッグしたいページを開いた状態で、リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
社員一覧ページ、受注案件ページそれぞれでデバッグを実行して表示される項目名が異なること、リストビューに表示されているデータがそれぞれ異なる項目で検索・抽出できることを確認してください。
ForguncyのUIパーツについてもっと知る
製品サイトでは、Forguncyで利用できるUIパーツやレイアウトについてより詳しくご紹介しています。こちらもぜひご活用ください。
＞開発スタートガイド：Forguncyで機能的なUIを作成する
