Demonstração de exibições de relatório de captura

Os indicadores de relatório do Power BI capturam o estado atual de uma página de relatório inserida, incluindo o estado de seus visuais e qualquer divisão ou filtragem. Os usuários podem retornar o relatório para esse estado acessando o indicador capturado ou compartilhado. Você pode usar as APIs de Cliente do Power BI para salvar exibições com indicadores com relatórios e permitir que os usuários de relatório capturem e compartilhem seus próprios indicadores.

A demonstração Capturar exibições de relatório no playground de análise integrada do Power BI usa a API de indicadores para permitir que os usuários acessem, capturem, salvem e compartilhem indicadores.

Os usuários podem:

  • Confira exibições com indicadores salvas como parte do relatório.
  • Use filtros, segmentações de dados e outros controles para criar uma exibição de relatório personalizada.
  • Capture a exibição atual salvando um indicador.
  • Compartilhe a exibição capturada com outras pessoas enviando-lhes um link.
  • Retorne às exibições com indicadores que eles criaram durante a sessão de exibição atual.

Capturar a experiência de demonstração de exibições de relatório

Na demonstração De exibições de relatório do Capture , um conglomerado imaginário chamado Contoso mostra seus dados de desempenho em um relatório inserido do Power BI. O relatório usa um Q&A, dois cartões multilinhas, uma matriz e gráficos de colunas para mostrar dados de 2014 para todos os seus fabricantes, produtos e regiões. Os visuais têm controles de filtro e segmentação, para que os usuários possam restringir e exibir partes dos dados.

Configurar uma exibição

Um Gerente de Vendas na região Oeste seleciona Oeste para exibir apenas os dados da região Oeste e usa o controle deslizante de data para restringir o período até o segundo semestre do ano.

Captura de tela mostrando as visualizações e controles na demonstração Capturar exibições de relatório.

O Gerenciador de Vendas pode salvar ou compartilhar a exibição configurada selecionando Modo de exibição de captura. Uma caixa de diálogo pop-up dá a opção de Salvar em 'Meus Modos de Exibição' ou Copiar Link.

Captura de tela mostrando a caixa de diálogo Modo de Exibição de captura.

Salvar um indicador

Para salvar um indicador, o Gerenciador de Vendas seleciona Salvar em 'Meus Modos de Exibição', insere um nome para o modo de exibição e seleciona Salvar.

A caixa de diálogo é fechada e um painel mostrando a lista de indicadores salvos é exibido, com o novo indicador salvo realçado. Selecionar qualquer indicador na lista realça o indicador e exibe essa exibição. Selecionar o símbolo fechar ou o botão Modos de exibição Salvos fecha o painel de indicadores.

Captura de tela mostrando a lista de indicadores com a exibição recém-criada selecionada.

Compartilhar um indicador

Para obter um link para o modo de exibição a ser enviado aos stakeholders, o Gerenciador de Vendas seleciona Copiar Link na caixa de diálogo Modo de Exibição de captura e, em seguida, seleciona Copiar para copiar o link. Selecionar o símbolo fechar ou selecionar em qualquer lugar fora da caixa de diálogo o fecha.

Captura de tela mostrando a caixa de diálogo Copiar Link com o link para o modo de exibição atual.

Ver uma exibição com indicadores

Para acessar qualquer modo de exibição de indicador salvo durante a sessão de exibição de relatório atual, os usuários podem selecionar Modos de exibição salvos para remover a lista de indicadores e selecionar a exibição que desejam ver. O nome do indicador realça e o relatório exibe a exibição com indicadores.

Os indicadores salvos na criação de relatórios estão disponíveis para todos os usuários em todas as sessões. Você também pode salvar indicadores criados pelo usuário entre sessões, mas nesta demonstração, os indicadores criados pelos usuários estão disponíveis somente durante a mesma sessão de exibição ou por URL direta.

Os destinatários de links de indicador compartilhado podem usar os links em seus navegadores para abrir relatórios diretamente para as exibições com indicadores.

Capturar código de demonstração de exibições de relatório

O código para implementar a demonstração está no repositório GitHub do PowerBI-Embedded-Showcases .

  • O código HTML do aplicativo cria o contêiner de relatório e os elementos, o botão Exibições salvas e a lista suspensa e o botão e a caixa de diálogo Capturar modo de exibição .

  • O relatório JavaScript insere o relatório com uma lista salva de indicadores, carrega o relatório com a primeira exibição com indicadores de Todo o Ano de 2014 ativa e implementa as funções de captura, salvamento, compartilhamento e seleção do indicador.

Na classe BookmarksManager do relatório, apply aplica um indicador salvo anteriormente por nome, capture captura e retorna uma cadeia de caracteres que representa o estado atual do relatório e applyState aplica um estado capturado anteriormente. Ao aplicar um indicador salvo, você pode especificar o indicador por name ou por state.

Para obter mais informações sobre operações de indicador e APIs, consulte Indicadores de relatório.

Aplicar uma exibição com indicadores na carga do relatório

O código de demonstração decodifica o nome do indicador do argumento url id de exibição e obtém esse indicador do armazenamento local. A demonstração usa o armazenamento local para simplificar, mas você pode usar qualquer banco de dados. O bookmark atributo no relatório embedConfiguration aplica o indicador na carga.

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
        }
    };

Capturar uma exibição e salvá-la na lista de indicadores

O código de demonstração captura o estado do relatório atual, adiciona o novo nome do indicador à lista de indicadores e abre a lista de indicadores suspensos com o novo indicador ativo.

        // 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));

Mostrar uma exibição selecionada na lista de indicadores

Esse código define um indicador selecionado como ativo, realça-o na lista de indicadores e aplica o estado ativo.

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);
}

Próximas etapas