ダッシュボード URL パラメーターの委任
[URL パラメーターの委任 (Delegate URL params)] プロパティを使用すると、ダッシュボードコンポーネントを含む UIB ページで URL パラメーターの更新の処理方法を制御できます。これにより、埋め込みシナリオまたはワークスペースシナリオのカスタムナビゲーションロジックが有効になります。
デフォルトでは、ユーザーがダッシュボードを切り替えたり、タブを変更したり、編集モードを切り替えたりすると、ダッシュボードコンポーネントによってブラウザーの URL が自動的に更新されます。この動作は、標準のダッシュボードページではうまく機能しますが、すべての実装シナリオに適しているわけではありません。
URL パラメーターの委任 プロパティは、URL を直接更新する代わりにダッシュボードコンポーネントがイベントをディスパッチする別のアプローチを提供します。この委任メカニズムにより、親ページではカスタムナビゲーションロジックを実装できます。
ダッシュボードコンポーネント構成パネルでのこのプロパティの詳細については、「 ダッシュボードコンポーネントプロパティ」を参照してください。
URL パラメーター委任を使用する場合
URL パラメーターの委任は、次のシナリオで役立ちます。
- ページの URL 構造にダッシュボードの URL パラメーターが含まれていない (URL パスに
sys-idがないなど) - このページでは、ダッシュボードを変更するためのカスタムナビゲーションロジックが必要です
- ダッシュボードは、親コンポーネントによって URL 管理が処理されるワークスペースに埋め込まれています
- 複数のダッシュボードコンポーネントが同じページに存在し、調整された URL 処理が必要です
委任の仕組み
委任 URL パラメーター が無効になっている場合 (デフォルトの動作):
- ユーザーは、ダッシュボードの切り替え、タブの変更、編集モードの切り替えなどのアクションを実行します
- ダッシュボードコンポーネントが内部
CONTENT_UPDATEDアクションをディスパッチします - UIB フレームワークはアクションを処理し、URL パラメーターを自動的に更新します
委任 URL パラメーター が有効になっている場合:
- ユーザーがアクションを実行します
- ダッシュボードコンポーネントが
CONTENT_UPDATEDディスパッチを抑制します - ダッシュボードコンポーネントは、構造化されたパラメーターデータを使用して
DASHBOARD#URL_PARAMS_UPDATE_REQUESTEDをディスパッチします - ページのクライアントスクリプトがイベントを受信し、カスタムナビゲーションロジックを実装します
イベントペイロード構造
DASHBOARD#URL_PARAMS_UPDATE_REQUESTED イベントには、構造化されたパラメーター情報を持つ urlParams オブジェクトが含まれています。各パラメーターには、値、説明、および追加のメタデータ (ダッシュボード名や新しいタブインジケーターなど) が含まれます。
この構造化されたアプローチにより、新しいブラウザータブでダッシュボードを開くなどの特殊なケースの処理を含め、情報に基づいたナビゲーションの意思決定を行うための十分なコンテキストがクライアントスクリプトに提供されます。
このイベントの詳細については、「 ダッシュボードコンポーネントイベント」を参照してください。
ダッシュボード URL パラメーターの委任の設定
ダッシュボードコンポーネントの URL パラメーター委任を有効にして、 UIB ページにカスタムナビゲーションロジックを実装します。
始める前に
必要なロール：ui_builder_admin
このタスクについて
ダッシュボードナビゲーションでブラウザーの URL を更新する方法をカスタム制御する必要がある場合は、URL パラメーターの委任を構成します。これは、埋め込みダッシュボード、ワークスペースシナリオ、または非標準の URL 構造を持つページに役立ちます。
手順
タスクの結果
ユーザーがダッシュボードを操作する (ダッシュボードの切り替え、タブの変更、編集モードの切り替え) と、コンポーネントはクライアントスクリプトがカスタムナビゲーションロジックで処理できるイベントをディスパッチします。
基本委任クライアントスクリプト
次のスクリプト例は、デフォルトの URL 更新動作を複製します。
function handler({api, event}) {
const {urlParams} = event.payload;
for (const [key, paramInfo] of Object.entries(urlParams)) {
if (key === 'sysId' && paramInfo.isNewTab === true) {
// Handle new tab navigation
api.emit('NAV_ITEM_SELECTED', {
route: 'dashboards',
title: paramInfo.dashboardName || paramInfo.value,
params: {sysId: paramInfo.value},
navigationOptions: {
navigateExternal: true,
target: '_blank'
}
});
return;
}
// Handle normal navigation
api.emit('CONTENT_UPDATED', {
route: 'dashboards',
params: {[key]: paramInfo.value}
});
}
}