Aracılığıyla paylaş

React uygulamasına Power BI öğesi ekleme

  • Makale

Power BI tümleşik analiz uygulaması oluşturduğunuzda React, rapor yazma dahil olmak üzere tüm istemci tarafı API'lerini kullanırken bootstrap tümleştirmesiyle performansı iyileştirmenize yardımcı olabilir. Ayrıca uygulamanızda Power BI ekleme yaşam döngüsü yönetimini basitleştirir. Power BI React bileşeni hem JavaScript'i hem de TypeScript'i destekler ve analizlerinizi bir React web uygulamasına eklemenize yardımcı olur.

React kitaplığı aşağıdaki Power BI öğelerini eklemenizi sağlar:

  • Rapor
  • Pano
  • Pano kutucukları
  • Rapor görselleri
  • Q&A

React web uygulamasına Power BI öğesi ekleme

Bu bölümde React'in 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 React benioku dosyası.

React kitaplığını içeri aktarma

Power BI React bileşeni NPMbulunabilir. Ayrıca GitHubüzerinde açık kaynaklıdır.

React'i web uygulamanıza aktarmak için listelenen içeri aktarmaları ekleyin:

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

Raporu React ile ekleme

Bu örnekte React kullanarak Power BI raporu ekleme gösterilmektedir. Örneğin altında kod örneğindeki her bileşen için bir açıklama bulabilirsiniz.

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

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

  • Ekleme yapılandırması - 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.

  • getEmbedComponent - Power BI İstemci kitaplığının izin verdiği tüm API'leri kullanabilmeniz için eklenmiş örneği almanıza yardımcı olan bir geri arama. Örneğin, bir rapor eklerken Rapor sınıfının bir örneğini alırsınız.

Bileşeni ö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 bootstrap kullanma.

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

React tanıtımı

React deposu, bir raporu önyüklemenin, eklenen raporu eklemenin ve güncelleştirmenin tam akışını gösteren bir tanıtım içerir. 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.

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

Power BI React 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 install:demo
npm run demo

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

İlgili içerik