대시보드 URL 매개변수 위임
URL 매개변수 위임 속성을 사용하면 UIB 대시보드 구성요소가 포함된 페이지에서 URL 매개변수 업데이트 처리 방법을 제어할 수 있습니다. 이렇게 하면 포함된 또는 작업 공간 시나리오에 대한 사용자 지정 탐색 논리를 사용할 수 있습니다.
기본적으로 대시보드 구성요소는 사용자가 대시보드를 전환하거나, 탭을 변경하거나, 편집 모드를 전환할 때 브라우저 URL을 자동으로 업데이트합니다. 이 동작은 표준 대시보드 페이지에서 잘 작동하지만 모든 구현 시나리오에 적합하지 않을 수 있습니다.
Delegate URL params 속성은 대시보드 구성요소가 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}
});
}
}