Bagikan melalui

Menyematkan laporan Power BI dengan tata letak seluler

  • Artikel

Pengguna seluler dapat menampilkan halaman laporan Power BI apa pun dalam orientasi lanskap. Namun, penulis laporan dapat membuat tampilan tambahan yang dioptimalkan untuk perangkat seluler dan ditampilkan dalam orientasi potret. Opsi desain ini, yang tersedia di Power BI Desktop dan di layanan Power BI, memungkinkan penulis untuk memilih dan menyusun ulang hanya visual yang masuk akal bagi pengguna seluler saat bepergian.

Jika laporan Anda memiliki tata letak seluler yang dibuat di Power BI Desktop atau layanan Power BI, Anda bisa menyematkan laporan dengan tata letak ini di aplikasi web Anda.

Cara menyematkan laporan menggunakan tata letak seluler

Pertama, Anda perlu membuat tata letak seluler untuk laporan Anda, lihat Mengoptimalkan laporan Power BI untuk aplikasi seluler untuk membuat tata letak ini.

Untuk menyematkan laporan Power BI dalam tata letak seluler laporan, Anda harus mengatur layoutType ke models.LayoutType.MobilePortrait di objek pengaturan:

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Untuk informasi selengkapnya tentang pengaturan laporan, lihat Mengonfigurasi pengaturan laporan.

Ada dua jenis tata letak yang didedikasikan untuk perangkat seluler:

  • MobilePortrait - Dioptimalkan untuk tampilan potret. Ini adalah tata letak seluler yang Anda buat untuk laporan Anda.

  • MobileLandscape - Dioptimalkan untuk tampilan lanskap. Ini adalah tata letak reguler laporan Anda.

Nota

Tata letak laporan akan ditentukan oleh properti layoutType terlepas dari orientasi aktual perangkat.

Misalnya, kode berikut menunjukkan cara menyematkan laporan dengan tata letak seluler.

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Untuk memperbarui tata letak laporan saat laporan sudah dimuat, gunakan metode report.updateSettings. Untuk informasi selengkapnya, lihat Memperbarui pengaturan laporan saat runtime.

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

Periksa apakah halaman laporan memiliki tata letak seluler

Kelas Halaman Klien Power BI, menentukan metode sebagai:

hasLayout(layoutType: any): Promise<boolean>

Metode hasLayout akan mengembalikan boolean jika halaman memiliki jenis tata letak yang ditentukan.

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

Anda dapat menggunakan penyematan bertahap dengan untuk memeriksa apakah halaman memiliki tata letak seluler sebelum menyajikan laporan.

Menggesek peristiwa

Saat menyematkan laporan di tata letak seluler, Anda dapat mendengarkan peristiwa gesek dan menjalankan kode kustom di aplikasi web Anda. Ada dua peristiwa gesek, swipeStart dan swipeEnd mengembalikan format berikut:

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

Misalnya, Anda dapat menggunakan peristiwa swipeEnd untuk mendeteksi gesek kiri:

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

Untuk informasi selengkapnya tentang menangani peristiwa, lihat Cara menangani peristiwa.

Mengoptimalkan aplikasi Anda dengan tata letak kustom

Anda juga dapat menggunakan fitur tata letak kustom untuk membuat tata letak yang disesuaikan yang dioptimalkan untuk layar ponsel atau tablet yang berbeda.

Pertimbangan dan batasan

  • Setelah beban awal laporan, mengubah ke tata letak seluler laporan hanya didukung jika tata letak seluler (potret/lanskap) telah diatur ke dalam objek konfigurasi penyematan awal. Jika tidak, Anda harus terlebih dahulu memanggil powerbi.reset(HTMLElement) untuk menghapus iframe. Kemudian, Anda harus memanggil powerbi.embed(...) menggunakan kontainer yang sama dengan pengaturan tata letak seluler yang ditentukan pada objek konfigurasi yang disematkan.

  • Jika Anda mencoba menyematkan halaman laporan dengan tata letak MobilePortrait dan halaman tidak memiliki tata letak seluler, halaman akan dimuat dengan tata letak MobileLandscape.

  • Untuk memungkinkan pengguna menavigasi antar halaman saat menggunakan tata letak seluler, Anda dapat menggunakan report.setPage dan menerapkan navigasi Anda sendiri. Untuk informasi selengkapnya, lihat navigasi Halaman .

  • Konfigurasi di atas mengacu pada penyematan laporan Power BI dalam tampilan seluler.
    Sematkan dasbor dapat dikonfigurasi ke tata letak seluler dengan konfigurasi pageView: pageView: 'oneColumn'

Konten terkait