2017.05.23

SkyVisualEditor 新機能のご紹介 検索画面でのURLパラメータ指定

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

今回はSkyVisualEditor V6.0の新機能のひとつ、検索画面でのURLパラメータ指定についてご紹介します。

概要

当機能では、[テンプレート]検索画面 で作成した画面を開く際にURL末尾にパラメータを付与することで、あらかじめ検索条件を指定した状態で開くことができます。
また、画面を開いた時点で初期検索を行い検索結果を表示することも可能です。

gaiyouWithD.png

検索画面側の設定

では検索画面でURLパラメータを指定できるようスタジオで設定してみましょう。

まずは通常の検索画面を作成します。
スタジオでファイル => 新規 => [テンプレート]検索画面を選択し、オブジェクトは「取引先:Account」を指定します。Visualforceページ名は"SamplePage"とします。

検索条件として「産業コード」「親取引先ID」「経度(納入先)」「緯度(納入先)」を指定します。
(「経度(納入先)」「緯度(納入先)」は範囲項目の方を指定してください)

searchConditionSetting.PNG

検索結果にも同様の項目を指定します。

searchResultSetting.PNG

ではここかURLパラメータを使用できるよう設定していきます。
検索テンプレートのページプロパティ「URLパラメータ設定」の設定ボタンを押すとURLパラメータ設定ダイアログが開きます。

設定ボタンwithDescription.PNG

「項目名」には検索条件として配置した項目の一覧が表示されます。今回は「産業コード」を選択します。

selectList.PNG

選択すると「パラメータキー」に項目のAPI参照名が自動的に設定されます。

URLParamSettingSic.PNG

このパラメータキーとして指定した文字列がURLパラメータのキーとなります。

例えば項目「産業コード」のパラメータキーがSicの場合、検索条件として産業コードに4253を設定したい場合はURLの末尾に
Sic=4253
と指定します。

また、演算子を指定したい場合はパラメータキー+"_op"をキーとしてURLパラメータを指定します。

例えば演算子として「次の文字列と一致する」を指定したい場合はURLの末尾に
Sic_op=eq
と指定します。

また、URLの末尾に
isSearch=1
を指定することで、検索画面を開いた時点で初期検索を行うことが可能です。

複数のパラメータを指定する場合は&で繋ぎます。

では実際にこのページをデプロイし、出来上がった検索画面のURLの末尾に
?Sic=4253&Sic_op=eq&isSearch=1
を追加して開いてみましょう。

産業コードの値に4253、演算子に「次の文字列と一致する」が指定され、検索が実行された状態で検索画面が開かれます。

URL.PNGsearchResult_isSearch1withD_2.png

以上が検索画面の設定方法となります。

なお演算子の種類等については以下を参照ください。
(1)-b. URLパラメータ設定

カスタムボタンでの呼出

項目の値を渡す

作成した検索画面はカスタムボタンを使って開くことでURLパラメータにレコードの値を渡すことができます。
例として取引先の画面から親取引先IDを渡して検索画面を開いてみましょう。

まずは先ほどの検索画面のURLパラメータに「親取引先ID」を追加しデプロイします。

parentAdd.PNG

次に新規でSalesforceレイアウト画面を作成します。オブジェクトは「取引先」、Visualforceページ名は"SampleAccount"とします。

newAccount.PNG

画面に表示項目「取引先名」「親取引先ID」を配置します。

次にカスタムボタンを配置し、
・値:親取引先
・動作選択:画面遷移
・遷移先設定:Visualforceページへ を選択し、先ほど作成した検索画面「SamplePage」を指定

のように設定します。

URLParam2.PNG

次にレコードの値の渡し方ですが、項目の値をURLに埋め込むには以下のように記述します。
{!record.項目のAPI参照名}

今回は親取引先IDを渡したいので
{!record.ParentId}
となります。

画面下部のURL入力欄に
/apex/SamplePage
と表示されますので、後ろに続けて
?ParentId={!record.ParentId}&ParentId_op=eq&isSearch=1
と入力してください。

URLParam3.PNG

画面をデプロイし、

accountDep1.PNG

デプロイ後の画面でカスタムボタンを押すことで親取引先が検索結果に表示されます。

parentResult.PNG

位置情報を渡す

最後に小ネタとして、端末の位置情報を元に付近約1km以内の取引先一覧を表示するボタンを設置してみましょう。

スタジオで検索画面「SamplePage」を開きURLパラメータ「緯度(納入先)」「経度(納入先)」を追加しデプロイします。

idokeidoSearch.PNG

作成したSalesforceレイアウトSampleAccountを開きカスタムボタンを配置します。

プロパティ
・値:付近の取引先
・幅:100
・動作選択:JavaScript/Apex呼出
を指定後、OnClickの「...」ボタンをクリックしJavaScriptエディタを開きます。

スクリプト入力欄に

navigator.geolocation.getCurrentPosition(OpenSearchPage);

を指定します。

js1.PNG

次にダイアログの「ページスクリプト編集」ボタンを押しページスクリプトエディタを開き、スクリプト入力欄に以下のように入力します。

function OpenSearchPage(location) {
    window.open("{!URLFOR($Page.SamplePage)}"
        + "?ShippingLatitude_from="
        + (location.coords.latitude - 0.01)
        + "&ShippingLatitude_to="
        + (location.coords.latitude + 0.01)
        + "&ShippingLongitude_from="
        + (location.coords.longitude - 0.01)
        + "&ShippingLongitude_to="
        + (location.coords.longitude + 0.01)
        + "&isSearch=1","_blank");
}

js2.PNG

これでデプロイしてボタンを押すと検索画面SamplePageに「納入先の緯度・経度がデバイスの緯度・経度のプラスマイナス0.01以内」という条件が指定され、検索が実行されれた状態で開かれます。

posResult.PNG

簡単に説明しますと、
navigator.geolocation.getCurrentPositionでデバイスの現在の位置情報を取得します。
取得が完了するとOpenSearchPageが実行されます。
なお緯度の1度あたりの距離は約111km、経度1度あたりの距離は場所によって異なりますが東京だと約90kmです。

以上、検索画面でのURLパラメータ指定についてのご紹介でした。

1 件

関連する記事