検索インターフェースは、ユーザが検索語を入力することのできる検索フォームと、検索結果を表示するビューから成ります。
Zoho Creator では、検索キーワードに基づいたカスタムビューを表示するような、検索インターフェースを作成することができます。
Zoho Market place で利用可能な、Employee Manager (従業員管理)アプリケーション を例にとってご紹介します。
Employee Manager(従業員管理) のダッシュボードページでは、入力した従業員名/チーム名/部署名に基づいて、従業員を検索することができる Search(検索) フォームがあります。
Search(検索) ボタン をクリックすれば、下図のスクリーンショットのような カスタム HTML ビューが表示されます。
Zoho Creator で検索インターフェースを作成するための手順:
1. 検索フォームを作成する
- 検索ダイアログを構成するフィールドから 検索フォーム を作成します。検索フォームは、基本的にはステートレスフォームであり、データをZoho Creator のデータベースに保存しません。
ステートレスフォーム作成に関する詳細は、Stateless Forms(英語) をご参照ください。
- ステートレスフォームにカスタムボタンを追加します。
例えば、下記の Search form(検索フォーム)のように、”searchEmployee” というスクリプト名のフィールドと、“Search” というカスタムボタンを作成します。
2. 検索パラメータ付きの HTML ビューを作成する
- 必要なパラメータ付きの HTML ビューを作成します。例えば、上記の検索フォームで入力された検索語を searchParam というパラメータで渡します。
- このビューにコードを書いて、渡されたパラメータと一致する値を持つレコードをテーブルから取り出します。
HTML ビューでは、ドラッグ&ドロップ操作のスクリプトビルダーを利用できます。HTML コードや Deluge コードを追加し、必要なビューを作成します。
HTMLビュー作成に関する詳細は、Creating HTML Views(英語) をご参照ください。
例えば、Employee Manager(従業員管理)では、Employee_Search と呼ばれる HTML ビューが作成され、このHTMLビューにパラメータとして渡された検索語と一致したデータを取得し、表示します。
下図は、HTML ビューを作成するためのドラッグ&ドロップUIのスクリーンショットです。:
3. 検索フォームのクリック時に、HTML ビューを起動する
- on click (クリック時)スクリプト を、ステートレスフォームに追加します。下図にように、Search(検索) ボタンをクリックした際に、HTML ビューを表示します。:
- on click (クリック時)スクリプトは、OpenURL の Deluge タスクを使って、ステートレスフォームを HTML ビューへリダイレクトさせます。
searchUrl = “#View:Employee_Search?searchParam=” + input.searchEmployee; openUrl(searchUrl, “same window”); |
ここで、
searchUrl – Search(検索) ボタンがクリックされた時に表示されるURLを持つ、変数です。
Employee Manager(従業員管理) アプリケーションでは、#View:Employee_Search が HTML ビューリンクで、 ステートレスフォーム(Search Form)内の searchEmployee フィールドからの searchParam が検索語を持つパラメータです。
openUrl – 指定した URL にフォームをリダイレクトするための Deluge タスクです。
Deluge タスクの構文と使用法についての詳細は、Help Doc -> Deluge Reference (英語) をご参照ください。
- Save Script(スクリプトの保存) をクリックして、スクリプトを更新してください。アクセスモードでは、Search(検索) ボタンのクリック時に、Employee Search view(従業員検索ビュー)が表示されます。
■Zoho Creator サービスページ:http://zoho.jp/zoho-creator.html