こちらの記事の続きです。
対話モード・レポート上で選択した医療機関をマップ上に表示します。
マップのサンプルではSearch and Showのページに実装されています。ページサンプルの基本をコピーし、ページ番号を７、ページ名をレポート上で選択とした新しいページを作成します。
ページが作成されたら作業の開始です。
リージョンの作成を実行します。作成されたリージョンはContent Bodyの直下に配置します。識別の名前は医療機関、タイプは対話モード・レポートを選択します。ソースの位置はローカル・データベース、タイプをSQL問合せとし、SQL問合せにはマップ・リージョンのソースと同じSELECT文を記載します（マップ・リージョンを選択し、ソースのSQL問合せをコピーしてください）。
もう一度リージョンの作成を実行します。これは画面上のレイアウトを調整するために使用します。医療機関の対話モード・レポートの下に配置します。
識別の名前は地図とします。タイプは静的コンテンツ、レイアウトの新規行の開始をOFFにし、外観のテンプレートとしてBlanck with Attributes (No Grid)を選択します。これで医療機関のレポートの右隣にマップ・リージョンを配置することができます。
ボタン・バーのリージョンを選択し、レイアウトの親リージョンを地図に変更します。続けてマップのリージョンを選択し、同様にレイアウトの親リージョンを地図に変更します。
一旦ページを実行してみます。リージョンのレイアウトは想定どおりです。対話モード・レポートのAns Type M、Ans Type E、Ans Type Hの項目はさすがに分からないので、少し調整しましょう。
共有コンポーネントのLOVを開きます。医療機関の状況について、コードと可読できる文字列を対応させるLOVを作成します。
作成済みのLOVの一覧より、作成を実行します。
LOVの作成は最初からを選択し、次へ進みます。
名前は医療提供状況とします。タイプにはDynamicを選択します。次へ進みます。
データ・ソースはローカル・データベース、ソース・タイプはTableで、表/ビューの名前にC19_ANS_TYPES(表)を選択します。次へ進みます。
戻り列にANS_TYPE_CD、表示列にANS_TYPEを指定します。作成をクリックします。
LOVが作成されると、医療提供状況がリストに表示されます。
対話モード・レポートの列ANS_TYPE_Mを選択し、識別のタイプをプレーン・テキスト(LOVに基づく)に変更します。LOVに医療提供状況を選択します。ヘッダーは外来とします。
同様の変更を列ANS_TYPE_Eにたいして行います。ヘッダーは救急です。
列ANS_TYPE_Hのヘッダーは入院です。
変更を確認してみます。ページの保存と実行を行います。
これから対話モード・レポートから医療機関をひとつ選択し、そこで選択された医療機関がマップの中央に表示されるようにします。
選択された医療機関のFACILITY_IDを保持するページ・アイテムP7_FACILITY_IDを、リージョンのマップに作成します。値を一時的に保持するためだけに使用するため表示はしません。タイプは非表示とし、設定の保護された値はOFFです。
選択した医療機関のみがマップ・リージョンに表示されるよう、マップ・リージョンのSQL問合せを変更します。WHERE句を追加し、P7_FACILITY_IDに一致した医療機関のみを選択します。
select f.facility_id, f.zip_code, f.facility_name, f.facility_addr, f.geometry
, m.ans_type ans_type_m, e.ans_type ans_type_e, h.ans_type ans_type_h
from c19_medical_facilities f
left outer join (
select ans_type, facility_type, facility_id
from c19_medical_facility_statuses
where facility_type = 'M') m
on f.facility_id = m.facility_id
left outer join (
select ans_type, facility_type, facility_id
from c19_medical_facility_statuses
where facility_type = 'E') e
on f.facility_id = e.facility_id
left outer join (
select ans_type, facility_type, facility_id
from c19_medical_facility_statuses
where facility_type = 'H') h
on f.facility_id = h.facility_id
where
:P7_FACILITY_ID is not null
and
:P7_FACILITY_ID = f.facility_id
送信するページ・アイテムとしてP7_FACILITY_IDを指定します。
これで選択された医療機関のみがマップに表示されます。
次に、対話モード・レポート上で医療機関を選択できるようにします。
対話モード・レポートのリージョンを選択し、Attributesを開きます。リンクのリンク列にカスタム・ターゲットへのリンクを選択します。リンク・アイコンとして以下を記載します。
<span class="fa fa-map-marker-check" aria-hidden="true"></span>
ターゲットはタイプをURL、URLとしてJavaScriptの呼び出しを指定します。
javascript:showFeature('#FACILITY_ID#')
ここで呼び出されているshowFeatureというファンクションは、ページ・プロパティのグローバルおよびグローバル変数の宣言に記載します。
function showFeature( pId ) {
apex.item( "P7_FACILITY_ID").setValue( pId );
apex.event.trigger( $("#medical-facilities-region"), "refresh_and_center" );
}
レポート上でクリックした行のFACILITY_IDを受け取り、ページ・アイテムP7_FACILITY_IDに設定します。その後、マップ・リージョンにたいしてrefresh_and_centerというイベントを送信します。
ここで送信されているイベントrefresh_and_centerは、標準ではなくカスタム・イベントです。左ペインにて動的アクション・ビューを開き、そこで動的アクションの作成を実行します。
識別の名前はMap Refresh、タイミングのイベントはカスタムを選択し、カスタム・イベントにreferesh_and_centerと記載します。選択タイプはリージョン、リージョンには ..マップを選択します。
このイベントを受けて実施されるTrueアクションを設定します。識別のアクションはリフレッシュです。影響を受ける要素は選択タイプがリージョン、リージョンは .. マップを選びます。
マップ・リージョンのリフレッシュ後に、選択した医療機関をマップの中心にし情報ウィンドウを表示させます。動的アクションの作成を実行します。
識別の名前をShow Feature、タイミングのイベントをリフレッシュ後、選択タイプをリージョン、リージョンを..マップとします。マップ・リージョンがリフレッシュされた後（先ほど設定した動的アクションMap Refreshが呼び出された後）にアクションが実行されます。
Trueアクションの識別のアクションにはJavaScriptコードの実行を選択し、設定のコードに以下を記述します。
var lMapRegion = apex.region("medical-facilities-region"),
// important: Use the layer name exactly as specified in the "name" attribute in Page Designer
lLayerId = lMapRegion.call("getLayerIdByName", "医療機関"),
lCurrentZoom = lMapRegion.call("getMapCenterAndZoomLevel").zoom,
lFacilityId = apex.item("P7_FACILITY_ID").getValue(),
lFeature = lMapRegion.call("getFeature", lLayerId, lFacilityId ),
lPosition;
if ( lFeature.geometry ) {
lPosition = lFeature.geometry.coordinates;
// close all Info Windows, which might currently be open
lMapRegion.call( "closeAllInfoWindows" );
// focus the map to the chosen feature
lMapRegion.call( "setCenter", lPosition );
// if the current zoom level is below 8, zoom in. Otherwise do nothing.
if ( lCurrentZoom < 12 ) {
lMapRegion.call( "setZoomLevel", 12 );
}
setTimeout( function() {lMapRegion.call( "displayPopup", "infoWindow",
lLayerId, lFacilityId.toString(), false )}, 500 );
}
以上で完了です。ページを実行して記事の最初にあるGIF動画のような動作を確認してみましょう。
索引がある最初の記事はこちらになります。
