Angular uygulamasına Power BI içeriği ekleme

Power BI tümleşik analiz uygulaması oluştururken Angular, bakımı yapılabilir, ölçeklenebilir bir uygulamanın hızla ayarlanmasına yardımcı olabilir. Angular, geliştiricilerin bakımı ve güncelleştirmesi daha kolay olan daha gelişmiş web uygulamaları oluşturmasına olanak tanıyarak ön uç geliştirmeye yapı ve tasarım desenleri ekler.

Power BI Angular kitaplığı, Angular uygulamanıza aşağıdaki Power BI öğelerini eklemenizi sağlar:

  • Rapor
  • Pano
  • Pano kutucukları
  • Rapor görselleri
  • Soru-Cevap
  • Sayfalandırılmış raporlar

Angular web uygulamasına Power BI içeriği ekleme

Bu bölümde Angular'ın uygulamanıza nasıl aktarıldığı ve bir Power BI raporu eklemek için nasıl kullanılacağı açıklanmaktadır.

Ayrıntılı kullanım bilgileri için bkz. Power BI Angular benioku dosyası.

Angular kitaplığını içeri aktarma

Power BI Angular bileşenini NPMbulabilirsiniz. Ayrıca GitHubüzerinde açık kaynaklıdır.

Angular'ı web uygulamanıza aktarmak için aşağıda listelenen içeri aktarmaları ekleyin.

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

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

Raporu Angular ile ekleme

Bu örnekte, Angular kullanarak Power BI raporu ekleme gösterilmektedir. Örneğin altında kod örneğindeki her bileşenin açıklaması verilmiştir.

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

Aşağıdaki liste, kod parçacığı örneğindeki her bileşen için açıklamalar veya ek bilgiler içerir.

  • embedConfig - Eklediğiniz içeriği tanımlar ve içeriğin ayarlarını belirtir. Aşağıdaki Power BI öğelerini eklediğinizde ekleme yapılandırması değişir:

  • eventHandlers - Olay adları ve işleyicileri için bir eşleme nesnesi. Daha fazla bilgi için bkz. Olayları işleme.

  • cssClassName - Katıştırılmış öğeye, CSS kullanarak eklenmiş iframe'in stilini denetlemenize olanak tanıyan bir CSS sınıf adları verir.

  • phasedEmbedding - Geliştiricilere rapor ekleme aşamaları için daha fazla esneklik sağlayarak son kullanıcının deneyimini geliştirir. Daha fazla bilgi için bkz. Aşamalı ekleme kullanma.

Power BI raporunu önyükleme

powerbi.bootstrap, geliştiricilerin Power BI öğelerini daha hızlı eklemesine ve daha iyi performans elde etmelerine yardımcı olmak için kullanılan bir yöntemdir. Daha fazla bilgi için bkz : Daha iyi performans için önyükleme kullanma.

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

Önyüklemeden sonra raporu eklemek için embedConfig'i güncelleştirin (en azından accessToken ve embedUrl ile).

Angular tanıtımı

Angular deposu, PowerBIReportEmbed bileşenini kullanarak örnek rapor ekleyen bir tanıtım içerir. Raporu önyüklemeden ekli raporu eklemeye ve güncelleştirmeye kadar tüm akışı gösterir. Ayrıca Powerbi rapor yazma kitaplığının kullanımını, Görsel Sil düğmesine tıkladıktan sonra rapordan bir görseli silerek gösterir. Ayrıca bir 'DataSelected' olayı ayarlar.

Daha fazla bilgi için, benioku dosyasının tanıtım bölümüne bakın.

Power BI Angular Tanıtımını gösteren animasyonlu gif.

Tanıtımı çalıştırma

Tanıtım, depodaki bir alt klasördür. Demoyu localhost'ta çalıştırmak için şu adımları izleyin:

  1. Aşağıdaki komutları çalıştırın:

    npm run demo

  2. Tarayıcınızda görüntülemek için http:/localhost:4200/'e yeniden yönlendirin.

İlgili içerik

  • Last updated on