보고서 보기 쇼케이스 캡처
Power BI 보고서 책갈피는 시각적 개체의 상태와 조각화 또는 필터링을 포함하여 포함된 보고서 페이지의 현재 상태를 캡처합니다. 사용자는 캡처된 책갈피 또는 공유 책갈피에 액세스하여 보고서를 해당 상태로 반환할 수 있습니다. Power BI 클라이언트 API를 사용하여 책갈피가 지정된 뷰를 보고서와 함께 저장하고 보고서 사용자가 자신의 책갈피를 캡처하고 공유할 수 있도록 할 수 있습니다.
Power BI 임베디드 분석 플레이그라운드의 캡처 보고서 뷰 쇼케이스는 책갈피 API를 사용하여 사용자가 책갈피에 액세스, 캡처, 저장 및 공유할 수 있도록 합니다.
사용자는 다음을 수행할 수 있습니다.
- 보고서의 일부로 저장된 책갈피가 지정된 보기를 참조하세요.
- 필터, 슬라이서 및 기타 컨트롤을 사용하여 사용자 지정된 보고서 보기를 만듭니다.
- 책갈피를 저장하여 현재 보기를 캡처합니다.
- 캡처된 보기를 링크를 전송하여 다른 사용자와 공유합니다.
- 현재 보기 세션 중에 만든 책갈피가 지정된 보기로 돌아갑니다.
보고서 보기 캡처 쇼케이스 환경
보고서 보기 캡처 쇼케이스에서 Contoso라는 가상 대기업이 Power BI 임베디드 보고서에 성능 데이터를 표시합니다. 이 보고서는 Q&A, 2개의 다중 카드, 행렬 및 세로 막대형 차트를 사용하여 모든 제조업체, 제품 및 지역의 2014 데이터를 표시합니다. 시각적 개체에는 필터 및 슬라이서 컨트롤이 있으므로 사용자는 데이터의 일부를 좁히고 볼 수 있습니다.
보기 구성
서부 지역의 Sales Manager는 서부 지역 데이터만 보려면 서부 를 선택하고 날짜 슬라이더를 사용하여 기간을 하반기로 좁힐 수 있습니다.
Sales Manager는 캡처 보기를 선택하여 구성된 보기를 저장하거나 공유할 수 있습니다. 팝업 대화 상자는 '내 보기'에 저장 또는 링크 복사 옵션을 제공합니다.
책갈피 저장
책갈피를 저장하려면 Sales Manager가 '내 보기'에 저장을 선택하고 보기의 이름을 입력한 다음 저장을 선택합니다.
대화 상자가 닫히면 저장된 책갈피 목록을 보여 주는 패널이 나타나고 저장된 새 책갈피가 강조 표시됩니다. 목록에서 책갈피를 선택하면 책갈피가 강조 표시되고 해당 보기가 표시됩니다. 닫기 기호 또는 저장된 보기 단추를 선택하면 책갈피 패널이 닫힙니다.
책갈피 공유
관련자에게 보낼 보기에 대한 링크를 가져오기 위해 Sales Manager는 캡처 보기 대화 상자에서 링크 복사를 선택한 다음 복사를 선택하여 링크를 복사합니다. 닫기 기호를 선택하거나 대화 상자 외부의 아무 곳이나 선택하면 닫힙니다.
책갈피가 지정된 보기 보기 보기
현재 보고서 보기 세션 중에 저장된 책갈피 보기로 이동하려면 저장된 보기를 선택하여 책갈피 목록을 드롭다운하고 보려는 보기를 선택할 수 있습니다. 책갈피 이름이 강조 표시되고 보고서에 책갈피가 지정된 보기가 표시됩니다.
보고서 생성 시 저장한 책갈피는 모든 세션의 모든 사용자가 사용할 수 있습니다. 세션 간에 사용자가 만든 책갈피를 저장할 수도 있지만, 이 쇼케이스에서는 사용자가 만드는 책갈피를 동일한 보기 세션 또는 직접 URL로만 사용할 수 있습니다.
공유 책갈피 링크의 수신자는 브라우저의 링크를 사용하여 책갈피가 지정된 보기에 대한 보고서를 직접 열 수 있습니다.
보고서 보기 캡처 코드 표시
쇼케이스를 구현하기 위한 코드는 PowerBI-Embedded-Showcases GitHub 리포지토리에 있습니다.
애플리케이션 HTML 코드 는 보고서 컨테이너 및 요소, 저장된 보기 단추 및 드롭다운 목록, 캡처 보기 단추 및 대화 상자를 빌드합니다.
보고서 JavaScript는 저장된 책갈피 목록과 함께 보고서를 포함하고, 첫 번째, 2014년 전체 책갈피 보기가 활성 상태인 보고서를 로드하고, 책갈피 캡처, 저장, 공유 및 선택 함수를 구현합니다.
보고서 BookmarksManager 클래스 apply 에서 는 이전에 저장된 책갈피를 이름으로 적용하고, capture 보고서의 현재 상태를 나타내는 문자열을 캡처하고 반환하며applyState, 이전에 캡처한 상태를 적용합니다. 저장된 책갈피를 적용할 때 또는 로 책갈피를 namestate지정할 수 있습니다.
책갈피 작업 및 API에 대한 자세한 내용은 보고서 책갈피를 참조하세요.
보고서 로드 시 책갈피가 지정된 보기 적용
쇼케이스 코드는 뷰 URL id 인수에서 책갈피 이름을 디코딩하고 로컬 스토리지에서 해당 책갈피를 가져옵니다. 쇼케이스에서는 간단히 하기 위해 로컬 스토리지를 사용하지만 모든 데이터베이스를 사용할 수 있습니다. 보고서의 embedConfiguration 특성은 bookmark 로드할 때 책갈피를 적용합니다.
async function embedSharedBookmarkReport() {
...
// Get the bookmark name from url param
let bookmarkName = getBookmarkNameFromURL();
// Get the bookmark state from local storage
let bookmarkState = localStorage.getItem(bookmarkName);
// Embed configuration used to describe the what and how to embed
let config = {
...
// Adding bookmark attribute will apply the bookmark on load
bookmark: {
state: bookmarkState
}
};
보기를 캡처하여 책갈피 목록에 저장
쇼케이스 코드는 현재 보고서 상태를 캡처하고, 책갈피 목록에 새 책갈피 이름을 추가하고, 새 책갈피가 활성화된 드롭다운 책갈피 목록을 엽니다.
// Capture the report's current state with personalized visuals
const capturedBookmark = await bookmarkShowcaseState.report.bookmarksManager.capture({ personalizeVisuals: true });
// Build bookmark element
let bookmark = {
name: "bookmark_" + bookmarkShowcaseState.bookmarkCounter,
displayName: capturedViewname,
state: capturedBookmark.state
}
// Add the new bookmark to the HTML list
bookmarksList.append(buildBookmarkElement(bookmark));
// Open the bookmarks list div and show the applied bookmark
bookmarksList.addClass("show position");
bookmarksDropdown.addClass(displayClass);
...
// Set the captured bookmark as active
const newBookmark = "bookmark_" + bookmarkShowcaseState.bookmarkCounter;
setBookmarkActive($(newBookmark));
책갈피 목록에서 선택한 보기 표시
이 코드는 선택한 책갈피를 활성으로 설정하고 책갈피 목록에서 강조 표시하며 활성 상태를 적용합니다.
function onBookmarkClicked(element) {
// Set the clicked bookmark as active
setBookmarkActive($(element));
// Apply respective color to the label of the bookmark
applyColor(element.id);
// Get bookmark ID from HTML
const bookmarkId = $(element).attr("id");
// Find the bookmark in the bookmarks array
let currentBookmark = getBookmarkByID(bookmarkId);
// Apply the bookmark state
bookmarkShowcaseState.report.bookmarksManager.applyState(currentBookmark.state);
}