Udostępnij za pośrednictwem

Osadzanie elementu usługi Power BI w aplikacji React

  • Artykuł

Podczas tworzenia aplikacji osadzonej analizy usługi Power BI platforma React może pomóc w optymalizacji wydajności przy użyciu integracji uruchamiania przy użyciu wszystkich interfejsów API po stronie klienta, w tym tworzenia raportów. Upraszcza również zarządzanie cyklem życia osadzania usługi Power BI w aplikacji. Składnik React usługi Power BI obsługuje zarówno język JavaScript, jak i język TypeScript oraz ułatwia osadzanie analizy w aplikacji internetowej React.

Biblioteka React umożliwia osadzanie następujących elementów usługi Power BI:

  • Raporty
  • Pulpity nawigacyjne
  • Kafelki pulpitu nawigacyjnego
  • Wizualizacje raportów
  • Q&A

Jak osadzić element usługi Power BI w aplikacji internetowej React

W tej sekcji opisano sposób importowania oprogramowania React do aplikacji i używania jej do osadzania raportu usługi Power BI.

Aby uzyskać szczegółowe informacje o użyciu, zobacz plik readme readme w usłudze Power BI React .

Importowanie biblioteki React

Składnik React usługi Power BI można znaleźć w npm. Jest on również typu open source w witrynie GitHub.

Aby zaimportować aplikację React do aplikacji internetowej, dodaj import na liście:

import { PowerBIEmbed } from 'powerbi-client-react';
import { models } from 'powerbi-client';

Osadzanie raportu przy użyciu platformy React

W tym przykładzie pokazano, jak osadzić raport usługi Power BI przy użyciu platformy React. Poniżej przykładu można znaleźć opis każdego składnika w przykładzie kodu.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: '<Report Id>',
        embedUrl: '<Embed Url>',
        accessToken: '<Access Token>',
        tokenType: models.TokenType.Embed, // Use models.TokenType.Aad if you're embedding for your organization.
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
        }
    }
}

eventHandlers = {
    new Map([
        ['loaded', function () {
            console.log('Report loaded');
        }],
        ['rendered', function () {
            console.log('Report rendered');
        }],
        ['error', function (event) {
            console.log(event.detail);
        }]
    ])
}

cssClassName = {
    "report-style-class"
}

getEmbeddedComponent = {
    (embeddedReport) => {
        window.report = embeddedReport;
    }
}

Poniższa lista zawiera opisy lub dodatkowe informacje dla każdego składnika w przykładzie fragmentu kodu.

  • Osadź konfigurację — definiuje osadzaną zawartość i określa ustawienia zawartości. Konfiguracja osadzania zmienia się podczas osadzania następujących elementów usługi Power BI:

  • eventHandlers — obiekt mapy dla nazw zdarzeń i ich procedur obsługi. Aby uzyskać więcej informacji, zobacz Jak obsługiwać zdarzenia.

  • cssClassName — nadaje osadzonym elementom nazwy klas CSS, które umożliwiają kontrolowanie stylu osadzonego elementu iframe przy użyciu css.

  • getEmbedComponent — wywołanie zwrotne ułatwiające uzyskanie osadzonego wystąpienia, dzięki czemu można używać wszystkich interfejsów API, na które pozwala biblioteka klienta usługi Power BI. Na przykład podczas osadzania raportu otrzymujesz wystąpienie klasy Report.

Uruchamianie składnika

powerbi.bootstrap to metoda ułatwiając deweloperom szybsze osadzanie elementów usługi Power BI i uzyskiwanie lepszej wydajności. Aby uzyskać więcej informacji, zobacz Use bootstrap for better performance.

embedConfig = {
    {
        type: 'report', // Supported types: report, dashboard, tile, visual, and qna.
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as an empty string, null, or undefined.
        tokenType: models.TokenType.Embed
    }
}

Pokaz platformy React

Repozytorium React zawiera pokaz ilustrujący pełny przepływ uruchamiania raportu, osadzania i aktualizowania osadzonego raportu. Demonstruje również użycie biblioteki tworzenia raportów powerbi przez usunięcie wizualizacji z raportu po kliknięciu przycisku Usuń wizualizację.

Aby uzyskać więcej informacji, zobacz sekcję demonstracyjną pliku readme .

Animowany gif przedstawiający pokaz platformy React w usłudze Power BI.

Uruchamianie pokazu

Pokaz jest podfolderem w repozytorium. Aby uruchomić pokaz na hoście lokalnym, wykonaj następujące kroki:

  1. Uruchom następujące polecenia:

    npm run install:demo
npm run demo

  2. Aby wyświetlić w przeglądarce, przekieruj go do http:/localhost:8080/.

Powiązana zawartość