Bagikan melalui

Menyematkan item Power BI dalam aplikasi React

  • Artikel

Saat Anda membuat aplikasi analitik tersemat Power BI, React dapat membantu Anda mengoptimalkan performa dengan integrasi bootstrap, saat menggunakan semua API sisi klien, termasuk penulisan laporan. Ini juga menyederhanakan manajemen siklus hidup power BI yang disematkan di aplikasi Anda. Komponen Power BI React mendukung JavaScript dan TypeScript dan membantu Anda menyematkan analitik Anda di aplikasi web React.

Pustaka React memungkinkan Anda menyematkan item Power BI berikut ini:

  • Laporan
  • Dashboard
  • Petak dasbor
  • Visual laporan
  • Tanya Jawab

Cara menyematkan item Power BI di aplikasi web React

Bagian ini menjelaskan cara mengimpor React ke aplikasi Anda dan menggunakannya untuk menyematkan laporan Power BI.

Untuk informasi penggunaan terperinci, lihat file readme Power BI React .

Mengimpor pustaka React

Komponen Power BI React dapat ditemukan di NPM. Ini juga bersumber terbuka diGitHub .

Untuk mengimpor React ke aplikasi web Anda, tambahkan impor yang tercantum:

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

Sematkan laporan dengan React

Contoh ini memperlihatkan cara menyematkan laporan Power BI menggunakan React. Di bawah contoh, Anda dapat menemukan deskripsi untuk setiap komponen dalam sampel kode.

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

Daftar berikut ini mencakup deskripsi atau informasi tambahan untuk setiap komponen dalam contoh cuplikan kode.

  • Menyematkan konfigurasi - Menentukan konten yang Anda sematkan, dan menentukan pengaturan konten. Konfigurasi semat berubah saat Anda menyematkan item Power BI berikut:

  • eventHandlers - Objek peta untuk nama peristiwa dan penangannya. Lihat Cara menangani peristiwa untuk informasi selengkapnya.

  • cssClassName - Memberi item yang disematkan nama kelas CSS yang memungkinkan Anda mengontrol gaya iframe yang disematkan menggunakan CSS.

  • getEmbedComponent - Panggilan balik yang membantu Anda mendapatkan instans yang disematkan, sehingga Anda dapat menggunakan semua API yang diizinkan pustaka Klien Power BI. Misalnya, saat menyematkan laporan, Anda mendapatkan instans Laporkan kelas.

Bootstrap komponen

powerbi.bootstrap adalah metode yang digunakan untuk membantu pengembang menyematkan item Power BI lebih cepat dan mendapatkan performa yang lebih baik. Untuk informasi lebih lanjut, lihat Gunakan bootstrap untuk kinerja yang lebih baik.

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

Demo react

Repositori React mencakup demo yang mengilustrasikan alur lengkap bootstrapping laporan, penyematan, dan pembaruan laporan yang disematkan. Ini juga menunjukkan penggunaan pustaka penulisan laporan powerbi dengan menghapus visual dari laporan setelah mengklik tombol Hapus Visual.

Untuk informasi selengkapnya, lihat bagian demo dari file readme .

Gif animasi yang menunjukkan Demo Power B I React.

Menjalankan demo

Demo adalah subfolder di repositori. Untuk menjalankan demo di localhost, ikuti langkah-langkah berikut:

  1. Jalankan perintah berikut:

    npm run install:demo
npm run demo

  2. Untuk melihat di browser Anda, alihkan ke http:/localhost:8080/.

Konten terkait