使いやすくカスタマイズ！Forguncy(フォーガンシー)でページナビゲーションと検索機能を実装
Excel関数もグラフも使えて画面も変更できる、ノンプログラミングWebシステム開発ツール「Forguncy（フォーガンシー）」。
今回は前回作成した Forguncyを使用した住所録 の見た目を整え、検索機能を追加していく方法をご紹介いたします。
↓↓ 前回の記事はこちら ↓↓
今回ご紹介する機能は下記の2つとなります。
このプログラムをビルドすると下の画像のように表示されます。
このままでも住所録としても使えますが、件数が増えてくると目当てのデータが探しにくくなります。
また、リストビューにスクロールバーが表示されたり使い勝手があまりよくありません。
初めに、ページナビゲーションを使用してリストビューの見た目を整えましょう。
データの件数が増えてしまうとスクロールされて表全体が見にくくなりますので、これを解消するにはリストビューの表示レコードを20件程度にしてページ送りをすれば見やすくなります。このリストビューのページ送りに表示する機能はForguncyにデフォルトで使用できる機能で実装することができます。
まず、リストビューの行数を縦に20行程度になるように変更します。
リストビューのレイアウトを変更するには、リストビューを選択すると上のメニューよりリストビューツールを選択できるようになります。
リストビューツールの「デザイン」を選択し、一番左側の「サイズ変更の開始」をクリックします。リストビューの範囲が変更できるので、
今回はレコードの行数が20行になるように変更します。
選択範囲を変更し、「サイズ変更の終了」ボタンを押します。ここはエンターキーでも変更した範囲の確定となります。
リストビューの描画サイズを変更できました！
リストビューの名称も変更してみましょう。
リストビューを選択して右側のメニューをセル型に切り替えます。リストビュー名を変更することができるので、「住所録」に変更します。
※この方法の他にも、先ほど使用した「サイズ変更の開始」の上のセルからでもリストビューの名称を変更できますので、使いやすい方で変更してください。
次に、表の下部のセルを選択して、セル型を「ページナビゲーション」に変更します。
似たような名称で「レコードナビゲーション」とありますが、こちらは別の機能となるので、間違えないように注意してください。
ナビゲーションが表示されたので、次はリストビューと連携しましょう。
右側のメニューのセル型より、「対象リストビュー」を先ほど名称を変更した「住所録」に設定します。この設定をすることでページナビゲーションとリストビューが連携されます。また、今回表示させるレコードは1ページ当たり20件としたいので、「1ページに表示する行数」を「20」に設定します。
最後にページナビゲーションのセルを中央揃えに設定したら完了です。
ここまで出来たら、いったんビルドをして確認してみましょう。
ページナビゲーションの矢印をクリックすることで、ページも切り替えることができます。
このようにページを切り替えて表示できるようになりました！デフォルトの機能でここまでできるのはForguncyならではですね。
もちろんページナビゲーションのテキストボックスにページを入力すれば、該当のページまで飛ぶこともできます。
次は検索機能を実装してみましょう。
今回の検索はお名前、郵便番号と住所を対象にしています。まずは、下の画像のようにテキストボックスと検索ボタンを配置します。
お名前は漢字とひらがなのどちらでも検索できる[あいまい検索]、郵便番号は[完全一致]、住所は[キーワードを含むもの]で絞り込むという検索機能を実装したいと思います。
まずは検索ボタンにクエリーを設定しましょう。検索ボタンをクリックしてコマンドを選択します。
コマンドの選択より「クエリー」を選択します。
クエリーは指定したテーブルのフィールドに対して条件を設定して値を抽出することができる機能です。
下の画面が出てくるので、対象テーブルが「住所録マスタ」であるか確認しましょう。
今回はテーブルが一つしかないので、最初から指定されていますが、複数ある場合は検索先のテーブルを指定してください。
ここからクエリーの条件を指定していきます。先ほどの画面は検索条件がありませんので、何も指定のないテーブルの全件検索となります。
最初に郵便番号と住所の検索を設定しましょう。
新しい条件を2回クリックして下の画像のように設定します。今回は「郵便番号」は入力されたテキストボックスと等しい条件となります。
また、住所はテキストボックスの入力された文字列を含む条件として指定します。
テキストボックスを指定するときは入力フォームの右側にあるボタンをクリックすると、住所録の編集画面全体が表示されて視覚的に入力することが可能です。
次に名前の検索条件を入力しましょう。
お名前のテキストボックスに入力された単語を元に、住所録マスタの「お名前」もしくは「かな」の中から検索します。
今回の例だと、お名前に「西岡」「にしおか」どちらを入力しても、IDが1番の西岡さんが検索にヒットするようにすることを目的としています。
新しい条件を2回クリックして下記のように入力します。「条件の削除」ボタンの右側にある三角のボタンより、順番を入れ替えることもできます。
順番を入れ替える際には「And/Or」の箇所は変更されないのでご注意ください。また、Forguncyでは条件の検索に括弧を設定することができます。
今回作成したクエリーではお名前に入力された値が「お名前」「かな」のどれかに含まれるか、郵便番号が入力された値と一致しているか、住所が入力された値を含むかの条件にて検索されます。
また、クエリーでは空欄にした場合は空欄にした項目は全件検索となります。入力された部分のみ検索することができるので、細かい条件分岐はしなくてOKです。
最後にリストビューの見た目を整えます。リストビューを右クリックして「リストビュー設定」をクリックします。
「外観」より「フォーカスを取得していないときは選択枠を表示しない」にチェックを入れて、「その他の動作」より「列全体を選択する」を選びます。
選択枠は初期設定だと表示されていますが、今回では表示しない方が自然に見えるので表示しないように設定しました。
ドロップダウンにはフィルタ機能も実装されていますが、このフィルタは現在表示されている20件のレコードのみを絞り込みをする機能です。
ドロップダウンのフィルタでは他のページにあるレコードは検索できないので、今回はドロップダウンを非表示としました。
さて、全部出来上がりましたので、ビルドをして動作確認をしてみましょう。
画像のように仕上がっていれば完成です！選択枠も表示されていないのでスッキリしています。
検索機能も正しく動くかも確認してみましょう。試しに「西岡」と入力して検索ボタンをクリックすると該当のレコードが表示されます。
平仮名で「にしおか」と入力しても同様の結果が得られます。
住所に「東京都」と入力すると、東京都を含むレコードが検索されます。他にも色々な条件で検索してみましょう。
今回はページナビゲーションと検索機能であるクエリーについてご紹介いたしました。
ページナビゲーションは普通のプログラムだと実装するのがかなり大変ですが、Forguncyならデフォルトの機能にて実装可能です！
また、レコードの検索もSQLを使用せず、クエリーに条件を入力するだけで実装できます。複数の条件も通常のプログラムであれば条件分岐してSQLを繋げて記述しなければなりませんが、Forguncyであれば空欄は全件検索となるので1回の記述で実現できます。
このように、Forguncyでは強力なリストビューの機能を搭載しております。前回の住所録もより使いやすくパワーアップすることができました。
ぜひ、Forguncyの機能を活用してみてください！