SkyDesk Creatorの検索インターフェイス

概要

[検索インターフェイス]は、ユーザーが検索語を入力する検索フォームと、検索結果のビューで構成されています。SkyDesk Creatorは、キーワードに基づいて、カスタマイズされたレポートを表示する検索インターフェイスの作成に対応しています。

Employee Manager のアプリの例で、SkyDesk Creatorでの検索インターフェイスの作成方法について説明します。アプリの[ダッシュボード]ページに、指定した従業員名、チーム名、部門に基づいて、従業員を検索する検索フォームを表示します。[Search]ボタンをクリックすると、下記の画面のようにカスタムHTMLページが表示されます。

検索インターフェイスの作成手順

1. 検索フォームの作成

  • Search ダイアログを生成する項目のあるSearch フォームを作成します。
  • 検索フォームは基本的にステートレスなフォームです。SkyDesk Creatorのデータベースにデータを格納しません。ステートレスなフォームの作成についての詳細は、ステートレスなフォームを参照してください。
  • ステートレスなフォームに、選択した[カスタムボタン]を追加します。

例えば、下記の検索フォームには、スクリプト名[searchEmployee]の項目とカスタムボタン[Search]があります。

2. 検索パラメーターを持つHTMLページの作成

  • パラメータ(例:searchParam)を含むHTMLページを作成して(上記Searchフォームで指定した)searchキーを渡します。
  • このビューにコードを記述して、渡されたパラメータに合う値を持つテーブルからレコードを取得します。

例えば、[Employee Manager]では、[Employee_Search]というHTMLページが作成され、パラメータとしてこのレポートに渡された検索キーに一致するデータを持つ対象のデータを取得して表示します。HTMLページで、スクリプトビルダーのドラッグ&ドロップを利用して、HTMLやDelugeコードを追加し、対象のレポートを作成します。詳細は、ページの作成を参照してください。レコードを取得するスクリプトと、それを格納するHTMLページ[Employee_search]は下記になります。

EmpOtherInfo = Other_Information [(((Employee_Name.contains(input.searchParam) || Team.contains(input.searchParam)) || Department.contains(input.searchParam)) || Employee_Name.Email_Id.contains(input.searchParam))] range from (stIndex + 1) to endIndex;

ここでは、

    • 上記でスクリプトされたレコードの取得タスクは、 [Other_Information]フォームの様々な項目に対する[searchParam]の変数 (例: 入力の値)をチェックして、[EmpOtherInfo]という名前の変数の集合に関連のレコードを格納します。
    • stIndexendIndex は、HTMLに表示されるレコードの範囲を示します。
srchCount = Other_Information[(((Employee_Name.contains(input.searchParam) || Team.contains(input.searchParam)) || Department.contains(input.searchParam)) || Employee_Name.Email_Id.contains(input.searchParam))].count();

ここでは、

  • count() - [searchParam]の値に一致した[Other_Information]フォームのレコード数を返す関数です。
  • srchCount - count() 関数によって返されたレコード数を格納する変数の集合です。
if (srchCount > 0)
{
div elName='zc-component' formLinkName='Search_Form' params='zc_Header=false&zc_BdrClr=white&zc_LblClr=FFFFFF&srchParam=<%=searchParam%>

ここでは、

  • [If Condition]は、検索数が0より大きいかどうかをチェックします。条件に一致すると、ヘッダー、線、ラベルの色を持つリンク名[Search_Form]のフォームが、HTMLページのテーブルとして作成されます。そうでなければ、結果は、「No records found」として表示されます。

コード<%=searchParam%>は、HTMLコード内のDelugeの変数です。通常、HTMLコード内のDelugeの変数は、<%= %>内で記述されます。ぺージにパラメーターを追加する詳細は、リンクを参照してください。

従業員の検索ページで、コード <%=srchCount%> records found for <%=searchParam%> は、入力されたパラメーター[searchParam]に一致した[srchCount]変数で見つかったレコード数を返します。

" for each EmpRow in EmpOtherInfo"

上記のコードで、 for each ループを使用して、変数[EmpRow]は[EmpOtherInfo]パラメーターに存在する各値を繰り返します。行とテーブルの列にレコードの詳細 (勤務地、携帯番号、会社の電話)を挿入します。スクリプト全体を確認するには、[Employee_search]ページのワークフローをクリックします。

Extn. no.: <%=thisapp.replNullValue((""+EmpRow.Extension)

上記のコードで、[thisapp.replNullValue]は、[Extn.no]項目に対して、[EmpRow]変数の内線番号を返す関数です。関数[replNullValue]のコードは下記です。

string replNullValue(string val)
{
if ((input.val == null) || (input.val == ""))
{
return "&nbsp;";
}
return input.val;

上記のコードで、[val]は項目の値を持つ変数です。入力した値が、無効、または空の文字列の場合、1つの空白が特定の項目名に対する結果として返されます。[val]に入力がある場合、 その値が項目に対する結果として返されます。

同様に、様々な他の項目の値は関数を使用して返されます。アプリケーションの関数のスクリプトを見るには、編集モードからワークフロー --> 関数 -->replNullValueを開きます。

3. 検索フォームのクリックでHTMLページを起動

検索ボタンをクリックすると、HTMLページが表示されます。これは検索ボタンをクリックによって、HTMLページが起動することで実現します。

このアクションを実行するには

  • ステートレスなフォームの編集モードで、[ワークフロー] タブをクリックします。
  • フォームのアクション--> クリック時タブを選択して、下記のコードを入力します。
searchUrl = “#View:Employee_Search?searchParam=” + input.searchEmployee;
openUrl(searchUrl, “same window”);

ここでは、

    • searchUrl –検索ボタンがクリックされた時に表示するURLを持つ変数です。[Employee Manager]アプリでは、 #View:Employee_SearchはHTMLリンクで、 searchParamは、ステートレスなフォーム (検索フォーム)で、[searchEmployee]項目からの検索キーを持つパラメーターです。
    • openUrl – 指定したURLへフォームをリダイレクトするDelugeタスクです。構文と各Delugeタスクの利用についての詳細は、Help Doc ->Open URLを参照してください。
    • クリック時スクリプトでは、[openUrl] Delugeタスクを使用して、ステートレスなフォームをHTMLページにリダイレクトします。
  • [スクリプトの保存]をクリックして、スクリプトを更新します。ライブモードで、[Search]ボタンをクリックすると[Employee Search]ビューが表示されます。