2024/09/06

作ってみよう:#13)お小遣い帳 - キーワード検索機能追加

今回は、Google Map と連携した近隣検索機能を拡張し、キーワード検索機能を追加します。次のような画面を表示して、キーワードを入力しします。必要に応じて、プレイスタイプを指定し、より限定した検索を可能とします。


検索条件入力フォーム作成

ノーツではこの事例のような複雑な入力画面は、ダイアログボックスで実現します。そこで、まずは、ダイアログボックス用のフォームを作成します。

フォーム名 (dlgInpKeyword)
別名 dlgInpKeyword

項目名 フィールド名 種類 補足
キーワード dlgKeyword テキスト
プレイスタイプ dlgSchType テキスト 非表示
dlgSchTypeKj テキスト

※ プレイスタイプは作成時の計算結果で初期値は ""


画面イメージは以下の通りです。


表は 3 段階のカスケードの表で作成されています。それぞれの階層に役割がを持たせています。


1 階層目(一番外側)

この表の役割は画面の幅を有効に使うことで、2 行 1 列の表を作成し、表の幅を『ウィンドウに合わせる』としています。セルの背景は 1 行目(ヘッダ)を黄色、2 行目(明細)を白に設定。罫線の色を濃い黄色にして行間のみ表示しています。


2 階層目

この階層は左マージンの確保が目的です。

マージンに合わせる表を作成し、列の間隔を 0.5 cm に設定しています。行の間隔は、ヘッダが 0.1 cm、明細が 0.06 cm とヘッダを少し広くしています。

明細側の表は 4 行 1 列で、1 階層と同様に背景色を変え、項目名と入力欄を分けています。


3 階層目

この階層は入力項目の配置管理が目的です。


プレイスタイプの選択

キーワード検索でもプレイスタイプを選択する機能を実装します。[選択]ボタンに次の LotusScript を記述します。

(Options)

Option Declare
Use "lsGoogleMAP_UI"

Click

Sub Click(Source As Button)
   Dim nuiw As New NotesUIWorkspace
   Dim nuid As NotesUIDocument
   Dim nd As NotesDocument
   Dim s As String
   Dim v As Variant

   Set nuid = nuiw.CurrentDocument
   Set nd = nuid.Document

   'プレイスタイプの選択
   s = PicPlaceType()
   If s = "" Then Exit Sub

   v = Split(s, "|")
   nd.dlgSchType = v(1)
   nd.dlgSchTypeKj = v(0)
End Sub


エージェントの作成

これまで利用していた NearBySearch_Google エージェントをコピペして、KeywordSearch_Google エージェントを作成します。エージェントを編集し、プレイスタイプを選択していた部分を削除して、次のコードを追加します。

Sub Initialize
         ・・・
   Set oLoc = New Location(nd.Sch_Latitude(0), nd.Sch_Longitude(0))
   Set oSch = New NearBySearch(oLoc)

   '検索条件取得
   Dim ndDlg As NotesDocument
   Set ndDlg = xndb.CreateDocument()

   If xnuiw.Dialogbox("dlgInpKeyword", True, True, False, False, False, False, "検索条件", ndDlg, True) Then Else Exit Sub


   '検索条件設定
   oSch.Keyword = ndDlg.GetItemValue("dlgKeyword")(0)
   oSch.SearchType = ndDlg.GetItemValue("dlgSchType")(0)

   Call oSch.Search()

   '検索結果の確認
   If oSch.Count = 0 Then
         ・・・
End Sub


メインフォームの修正

支出フォームを編集し、[近隣]ボタンをコピペして[検索]ボタンを作成します。検索ボタンをクリックすると、先ほど作成した KeywordSearch_Google エージェントを実行するように変更します。

この作業は、Nomad 用とノーツ用の両方のフォームで行います。


動作検証

完成したら、動作検証です。

Nomad からの実行では次のようになります。


画面いっぱいに表示される予定だったのですがそうはなっておらずあまり美しくありませんね。このあたりはもう少し検証が必要なようです。改善策が見つかれば別途まとめたいと思います。


ノーツから実行すると次のように表示されました。PC だと色遣いが少々不自然ですが、デザイン的には計画通りとなっていますね。


前回 作ってみよう


0 件のコメント:

コメントを投稿