UI部品 基本編
| この記事でわかること： ・項目を指定せず入力されたワードを含むレコードを抽出する処理の作成方法 ・項目ごとに条件を指定する詳細検索処理の作成方法 ・簡易検索と詳細検索の切り替えができる検索ボックスの作成方法 ・作成した検索ボックスを複数のページで使いまわす方法 |
| プロジェクトファイル （作成バージョン：(10.0.10.0） | customcell_search_2_before.fgcp customcell_search_2_after.fgcp（実装済みプロジェクトファイル） |
1.プロジェクトを確認する
今回の演習で使用するプロジェクトの確認をします。
手順1-1.テーブルの確認
プロジェクトには2つのテーブルが内蔵されています。
手順1-2.ページの確認
プロジェクトには２つのページが内蔵されています。
2.検索ボックスを作成する
データの抽出を行う検索ボックスを作成します。
今回は複数のページで使いまわせるよう、カスタムセルを使って作成します。
手順2-1.カスタムセルの作成
検索処理に必要なパーツを配置するカスタムセルを作成します。
リボンの[作成]＞[カスタムセル]をクリックします。
エディタ画面が切り替わり、新規に「カスタムセル1」が作成されます。
手順2-1-1.行と列の追加
このままではサイズが小さいので、行と列を追加します。
列ヘッダーおよび行ヘッダーを右クリックし、[挿入]をクリックして列・行を増やします。
列は16列（R列）、行は9行になるまで行ってください。
手順2-1-2.セルのサイズ固定
カスタムセルはページに配置する際、配置されるセル範囲のサイズに合わせて伸縮してしまいます。
それを防ぐため、列の幅、行の高さを固定する処理を行います。
すべての列を選択した状態で列ヘッダーを右クリックし、[列の幅…]をクリックします。
列の幅ウィンドウが開くので、「固定」を選択し[OK]ボタンを押して閉じます。
同様に、すべての行を選択した状態で行ヘッダーを右クリックし、[行の高さ…]をクリックします。
行の高さウィンドウが開くので、「固定」を選択し[OK]ボタンを押して閉じます。
手順2-2.簡易検索処理の実装
入力されたキーワードがレコード内のどれかの項目に含まれるデータを抽出する処理を作成します。
手順2-2-1.UIパーツの配置
検索処理に必要なパーツを下記の通りにカスタムセルに配置します。
| セル範囲 | セル型 | テキスト | 備考 |
|---|---|---|---|
| A2～B2 | （指定なし） | キーワード： | 右揃えに設定 |
| J2～K2 | ボタン | 検索 | 右ペインの[セル型]タブ＞[左アイコン]から虫眼鏡のアイコンを追加 |
| A7～B7 | ボタン | 詳細検索 | 右ペインの[セル型]タブ＞[左アイコン]から＋マークのアイコンを追加 |
手順2-2-2.プロパティの作成
カスタムセルのプロパティを作成します。
ナビゲーションウィンドウの「カスタムセル1」を右クリックし、[新しいプロパティの作成…]をクリックします。
新しいプロパティの作成ウィンドウが開くので、下記のように設定します。
| プロパティ名 | キーワード |
| プロパティの型 | テキスト |
作成したプロパティをナビゲーションウィンドウからC2セルにドラッグ&ドロップし、テキストボックスにデータ連結を行っておきます。
手順2-2-3.イベントの作成
カスタムセルのイベントを作成します。
ナビゲーションウィンドウの「カスタムセル1」を右クリックし、[新しいイベントの作成…]をクリックします。
新しいイベントの作成ウィンドウが開くので、名前欄に「キーワード検索実行」と入力し、[OK]ボタンを押下して閉じます。
作成したイベントはボタンに関連付けを行います。
J2セルの検索ボタンを選択した状態で、右ペインの[セル型タブ]から[コマンド…]をクリックします。
コマンドウィンドウが開くので、カスタムセルのイベント実行コマンドを追加し下記のように設定します。
| イベント名 | キーワード検索実行 |
手順2-2-4.詳細検索画面への切り替え処理の作成
A7セルの詳細検索ボタンを押下した際に画面を切り替える処理を作成します。
A7セルを選択した状態で右ペインの[コマンド…]をクリックします。
コマンドウィンドウが開くので、行列のレイアウト設定コマンドを追加し、以下のように条件を追加して閉じます。
| ターゲット領域 | プロパティの種類 | 設定値 |
|---|---|---|
| =2:3 | 表示 | 非表示 |
| =4:6 | 表示 | 表示 |
| =7:7 | 表示 | 非表示 |
| =8:8 | 表示 | 表示 |
手順2-3.詳細検索処理の実装
項目ごとに入力されたキーワードが、レコード内の同名項目に含まれるデータを抽出する処理を作成します。
手順2-3-1.UIパーツの配置
詳細検索処理に必要なパーツを下記の通りにカスタムセルに配置します。
| セル範囲 | セル型 | テキスト | 備考 |
|---|---|---|---|
| A4～B4 | （指定なし） | 項目1： | 右揃えに設定 |
| C4～H4 | テキストボックス | （空欄） | |
| J4～K4 | （指定なし） | 項目2： | 右揃えに設定 |
| L4～Q4 | テキストボックス | （空欄） | |
| H6～K6 | ボタン | 検索 | 右ペインの[セル型]タブ＞[左アイコン]から虫眼鏡のアイコンを追加 |
| A8～B8 | ボタン | キーワード検索 | 右ペインの[セル型]タブ＞[左アイコン]から-マークのアイコンを追加 |
各パーツを配置後、4行目～6行目および8行目の行ヘッダーを右クリックし、[非表示(H)]をクリックして行を非表示にしておきます。
手順2-3-2.プロパティの作成
カスタムセルのプロパティを、新たに4つ作成します。
ナビゲーションウィンドウの「カスタムセル1」を右クリックし、[新しいプロパティの作成…]をクリックします。
新しいプロパティの作成ウィンドウが開くので、下記のように設定します。
また、作成したプロパティはナビゲーションウィンドウからドラッグ＆ドロップしてセルにデータ連結をする必要があります。
データ連結を行う対象のセル番地も下記の表に記載します。
・1つ目
| プロパティ名 | 項目1見出し |
| プロパティの型 | テキスト |
| データ連結先セル | A4 |
・2つ目
| プロパティ名 | 項目1 |
| プロパティの型 | テキスト |
| データ連結先セル | C4 |
・3つ目
| プロパティ名 | 項目2見出し |
| プロパティの型 | テキスト |
| データ連結先セル | J4 |
・4つ目
| プロパティ名 | 項目2 |
| プロパティの型 | テキスト |
| データ連結先セル | L4 |
手順2-3-3.イベントの作成
カスタムセルのイベントを作成します。
ナビゲーションウィンドウの「カスタムセル1」を右クリックし、[新しいイベントの作成…]をクリックします。
新しいイベントの作成ウィンドウが開くので、名前欄に「詳細検索実行」と入力し、[OK]ボタンを押下して閉じます。
作成したイベントはボタンに関連付けを行います。
Ｈ6セルの検索ボタンを選択した状態で、右ペインの[セル型タブ]から[コマンド…]をクリックします。
コマンドウィンドウが開くので、カスタムセルのイベント実行コマンドを追加し下記のように設定します。
| イベント名 | 詳細検索実行 |
手順2-3-4.詳細検索画面への切り替え処理の作成
A8セルのキーワード検索ボタンを押下した際に画面を切り替える処理を作成します。
A8セルを選択した状態で右ペインの[コマンド…]をクリックします。
コマンドウィンドウが開くので、行列のレイアウト設定コマンドを追加し、以下のように条件を追加して閉じます。
| ターゲット領域 | プロパティの種類 | 設定値 |
|---|---|---|
| =2:3 | 表示 | 表示 |
| =4:6 | 表示 | 非表示 |
| =7:7 | 表示 | 表示 |
| =8:8 | 表示 | 非表示 |
これでカスタムセルの設定は完了です。
3.顧客一覧ページに検索ボックスを配置する
顧客一覧ページにカスタムセルを配置し、検索ができるよう設定します。
手順3-1.カスタムセルの配置
結合済みのB3セル～AF10セルを選択した状態で、ナビゲーションウィンドウから「カスタムセル1」をドラッグ&ドロップし、顧客一覧ページにカスタムセルを配置します。
右ペインの[セル型]タブをスクロールし、各種プロパティに下記のように値を入力します。
| プロパティ名 | 入力値 |
|---|---|
| キーワード | （空欄） |
| 項目1見出し | 会社名： |
| 項目1 | （空欄） |
| 項目2見出し | 住所： |
| 項目2 | （空欄） |
手順3-2.イベントの設定
カスタムセルに定義されているイベントに、入力された条件に合致するデータを抽出する処理を設定します。
ページ上のカスタムセルを選択した状態で、右ペインの[セル型]タブから[キーワード検索実行 のコマンド…]をクリックします。
コマンドウィンドウが開くので、まずはセル型の操作コマンドを追加し、下記のように設定します。
| 対象のセル型 | =B3 | |
| 操作 | プロパティから値を取得 | |
| 設定値 | プロパティ名 | 値を格納する変数名 |
| キーワード | キーワード |
続けてクエリーコマンドを追加し、対象テーブルに顧客リストを設定してから抽出条件を以下のように設定します。
| And/Or | フィールド | 操作 | 値 |
|---|---|---|---|
| [会社名] | 指定値を含む | =キーワード | |
| Or | [住所] | 指定値を含む | =キーワード |
同様に、右ペインの[セル型]タブから[詳細検索実行 のコマンド…]をクリックします。
コマンドウィンドウが開くので、まずはセル型の操作コマンドを追加し、下記のように設定します。
| 対象のセル型 | =B3 | |
| 操作 | プロパティから値を取得 | |
| 設定値 | プロパティ名 | 値を格納する変数名 |
| 項目1 | 会社名 | |
| 項目2 | 住所 |
続けてクエリーコマンドを追加し、対象テーブルに顧客リストを設定してから抽出条件を以下のように設定します。
| And/Or | フィールド | 操作 | 値 |
|---|---|---|---|
| [会社名] | 指定値を含む | =会社名 | |
| And | [住所] | 指定値を含む | =住所 |
これで顧客一覧ページの設定は完了です。
4.社員一覧ページに検索ボックスを配置する
社員一覧ページにカスタムセルを配置し、検索ができるよう設定します。
手順4-1.カスタムセルの配置
結合済みのB3セル～AF10セルを選択した状態で、ナビゲーションウィンドウから「カスタムセル1」をドラッグ&ドロップし、顧客一覧ページにカスタムセルを配置します。
右ペインの[セル型]タブをスクロールし、各種プロパティに下記のように値を入力します。
| プロパティ名 | 入力値 |
|---|---|
| キーワード | （空欄） |
| 項目1見出し | 氏名： |
| 項目1 | （空欄） |
| 項目2見出し | よみがな： |
| 項目2 | （空欄） |
手順4-2.イベントの設定
カスタムセルに定義されているイベントに、入力された条件に合致するデータを抽出する処理を設定します。
ページ上のカスタムセルを選択した状態で、右ペインの[セル型]タブから[キーワード検索実行 のコマンド…]をクリックします。
コマンドウィンドウが開くので、まずはセル型の操作コマンドを追加し、下記のように設定します。
| 対象のセル型 | =B3 | |
| 操作 | プロパティから値を取得 | |
| 設定値 | プロパティ名 | 値を格納する変数名 |
| キーワード | キーワード |
続けてクエリーコマンドを追加し、対象テーブルに社員リストを設定してから抽出条件を以下のように設定します。
| And/Or | フィールド | 操作 | 値 |
|---|---|---|---|
| [氏名] | 指定値を含む | =キーワード | |
| Or | [氏名_ひらがな] | 指定値を含む | =キーワード |
同様に、右ペインの[セル型]タブから[詳細検索実行 のコマンド…]をクリックします。
コマンドウィンドウが開くので、まずはセル型の操作コマンドを追加し、下記のように設定します。
| 対象のセル型 | =B3 | |
| 操作 | プロパティから値を取得 | |
| 設定値 | プロパティ名 | 値を格納する変数名 |
| 項目1 | 氏名 | |
| 項目2 | よみがな |
続けてクエリーコマンドを追加し、対象テーブルに社員リストを設定してから抽出条件を以下のように設定します。
| And/Or | フィールド | 操作 | 値 |
|---|---|---|---|
| [氏名] | 指定値を含む | =氏名 | |
| And | [氏名_ひらがな] | 指定値を含む | =よみがな |
これで社員一覧ページの設定は完了です。
5.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されるので、動作を確認してください。
ForguncyのUIパーツについてもっと知る
製品サイトでは、ForguncyのUIパーツや活用方法についてより詳しくご紹介しています。
こちらもぜひご活用ください。
＞開発スタートガイド – Forguncyで機能的なUIを作成する
