Osadzanie zawartości usługi Power BI w aplikacji Angular

Podczas tworzenia aplikacji osadzonej analizy usługi Power BI usługa Angular może pomóc w szybkim skonfigurowaniu możliwej do utrzymania, skalowalnej aplikacji. Platforma Angular dodaje struktury i wzorce projektowe do programowania frontonu, umożliwiając deweloperom tworzenie bardziej zaawansowanych aplikacji internetowych, które są łatwiejsze do obsługi i aktualizowania.

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

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

Jak osadzić zawartość usługi Power BI w aplikacji internetowej Angular

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

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

Importowanie biblioteki Angular

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

Aby zaimportować usługę Angular do aplikacji internetowej, dodaj import wymienione poniżej.

import { PowerBIEmbedModule } from 'powerbi-client-angular';

@NgModule({
  imports: [
    ...
    ...
    PowerBIEmbedModule
  ],
  exports: ...,
  declarations: ...
})

Osadzanie raportu przy użyciu usługi Angular

W tym przykładzie pokazano, jak osadzić raport usługi Power BI przy użyciu usługi Angular. Poniżej przykładu przedstawiono opis każdego składnika w przykładzie kodu.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: "<Report Id>",
        embedUrl: "<Embed Url>",
        accessToken: "<Access Token>",
        tokenType: models.TokenType.Embed,
        settings: {
            panes: {
                filters: {
                    expanded: false,
                    visible: false
                }
            },
            background: models.BackgroundType.Transparent,
        }
    }}

    [cssClassName] = { "reportClass" }

    [phasedEmbedding] = { false }

    [eventHandlers] = {
        new Map([
            ['loaded', () => console.log('Report loaded');],
            ['rendered', () => console.log('Report rendered');],
            ['error', (event) => console.log(event.detail);]
        ])
    }
>
</powerbi-report>

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

  • embedConfig — 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.

  • phasedEmbedding — poprawia środowisko użytkownika końcowego, zapewniając deweloperom większą elastyczność osadzania raportów fazowych. Aby uzyskać więcej informacji, zobacz Używanie osadzania etapowego.

Uruchamianie raportu usługi Power BI

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.

<powerbi-report
    [embedConfig] = {{
        type: "report",
        id: undefined,
        embedUrl: undefined,
        accessToken: undefined, // Keep as empty string, null or undefined
        tokenType: models.TokenType.Embed,
        hostname: "https://app.powerbi.com"
    }}
>
</powerbi-report>

Aby osadzić raport po uruchomieniu, zaktualizuj element embedConfig (przy użyciu co najmniej parametru accessToken i embedUrl).

Pokaz angular

Repozytorium Angular zawiera pokaz, który osadza przykładowy raport przy użyciu składnika PowerBIReportEmbed. Przedstawia on pełny przepływ z bootstrapping raportu w celu 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ę. Ustawia również zdarzenie "DataSelected".

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

Animowany plik GIF przedstawiający pokaz usługi Power BI Angular.

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 demo

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

Powiązana zawartość

  • Last updated on