Reading Time: 1 minutes

検索インターフェースは、ユーザが検索語を入力することのできる検索フォームと、検索結果を表示するビューから成ります。
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



なお、このブログは、本社(AdventNet Inc.)のZohoブログを翻訳・加筆したものです。
元の
記事(2009年2月24日投稿)はこちら(翻訳:清水)

Comments are closed.