Bagikan melalui

Mempersonalisasi tata letak laporan

  • Artikel

Dengan tata letak laporan kustom, Anda bisa menyematkan laporan Power BI dengan tata letak yang berbeda dari yang disimpan dalam laporan asli. Saat Anda menentukan tata letak laporan kustom, Anda dapat memvariasi ukuran halaman laporan, dan mengontrol ukuran, posisi, dan visibilitas visual di halaman.

Gambaran umum tata letak kustom

Untuk membuat tata letak laporan kustom, tentukan objek tata letak kustom dan teruskan ke objek pengaturan dalam konfigurasi semat.

Di objek pengaturan, atur layoutType ke models.LayoutType.Custom dan atur customLayout ke objek tata letak kustom Anda:

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

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

Cara menentukan tata letak laporan kustom

Setiap tata letak laporan kustom diwakili oleh objek tata letak kustom yang Anda tentukan untuk menentukan ukuran halaman, skala kanvas, dan tata letak halaman. Dalam tata letak halaman, Anda dapat menentukan tata letak visual untuk setiap visual dan tata letak visual default untuk laporan.

Definisi antarmuka tata letak kustom

Gunakan antarmuka ICustomLayout untuk menentukan objek tata letak kustom:

interface ICustomLayout {
    pageSize?: IPageSize;
    displayOption?: DisplayOption;
    pagesLayout?: PagesLayout;
}

Antarmuka ICustomLayout memiliki properti berikut:

  • pageSize - Objek IPageSize yang menentukan ukuran halaman area kanvas untuk laporan.

    interface IPageSize {
    type: PageSizeType;
}

    Objek IPageSize menggunakan enum PageSizeType untuk mengatur ukuran halaman:

    enum PageSizeType {
    Widescreen,
    Standard,
    Cortana,
    Letter,
    Custom
}

  • displayOption - Enum DisplayOption yang mengontrol cara menskalakan kanvas agar pas dalam bingkai.

    enum DisplayOption {
    FitToPage,
    FitToWidth,
    ActualSize
}

  • pagesLayout - Objek PagesLayout yang mengontrol tata letak untuk setiap visual pada halaman. Properti ini memetakan nama halaman ke objek PageLayout. Untuk informasi selengkapnya, lihat Menentukan tata letak halaman.

    type PagesLayout = { [key: string]: IPageLayout; }

Menentukan tata letak halaman

Gunakan antarmuka IPageLayout untuk menentukan objek tata letak halaman. Antarmuka memungkinkan Anda menentukan peta tata letak visual, yang memetakan setiap nama visual ke objek tata letak baru, dan tata letak visual default. Menentukan tata letak halaman bersifat opsional. Jika Anda tidak menyediakan tata letak untuk laporan, Power BI menerapkan tata letak default ke laporan. Artinya, tata letak default adalah apa yang berlaku untuk semua visual yang tidak Anda tentukan dalam objek tata letak visual. Misalnya, Anda awalnya dapat menyembunyikan semua visual dalam laporan, lalu menampilkan visual yang dipilih dalam tata letak pilihan Anda.

interface IPageLayout {
    defaultLayout: IVisualLayout,
    visualsLayout: { [key: string]: IVisualLayout; };
}

Antarmuka IPageLayout memiliki properti berikut:

  • defaultLayout - Objek IVisualLayout yang menentukan tata letak visual default. Tata letak default secara otomatis diterapkan ke semua visual di halaman laporan.

    defaultLayout?: IVisualLayout

  • visualsLayout - Objek VisualsLayout yang menentukan peta antara nama visual dan tata letak visual di halaman laporan.

    visualsLayout: VisualsLayout

    VisualsLayout = { [key: string]: IVisualLayout; }

Menentukan tata letak visual

Untuk menentukan tata letak visual, gunakan antarmuka IVisualLayout untuk membuat objek tata letak visual dan mengatur posisi, ukuran, dan visibilitasnya.

interface IVisualLayout {
    x?: number;
    y?: number;
    z?: number;
    width?: number;
    height?: number;
    displayState?: IVisualContainerDisplayState;
}

Antarmuka IVisualLayout memiliki properti berikut:

  • x,y,z - Menentukan koordinat x, y, dan z visual.

  • width, height - Menentukan lebar dan tinggi visual.

  • displayState - Objek IVisualContainerDisplayState yang menentukan visibilitas visual.

    interface IVisualContainerDisplayState {
    mode: VisualContainerDisplayMode;
}

    Objek IVisualContainerDisplayState menggunakan enum VisualContainerDisplayMode untuk mengatur visibilitas:

    enum VisualContainerDisplayMode {
    Visible,
    Hidden
}

Memperbarui tata letak

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

Contoh

Contoh kode lengkap ini menunjukkan cara menyematkan laporan dengan tata letak laporan kustom. Semua visual disembunyikan kecuali untuk dua visual: VisualContainer1 dan VisualContainer2. VisualContainer1 memiliki tata letak, posisi, dan ukuran baru, sementara VisualContainer2 terlihat dengan tata letak default laporan.

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

let embedConfig = {
    type: 'report',
    id: reportId,
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Embed,
    accessToken: 'H4...rf',
    settings: {
        layoutType: models.LayoutType.Custom
        customLayout: {
            pageSize: {
                type: models.PageSizeType.Custom,
                width: 1600,
                height: 1200
            },
            displayOption: models.DisplayOption.ActualSize,
            pagesLayout: {
                "ReportSection1" : {
                    defaultLayout: {
                        displayState: {
                            mode: models.VisualContainerDisplayMode.Hidden
                        }
                    },
                    visualsLayout: {
                        "VisualContainer1": {
                            x: 1,
                            y: 1,
                            z: 1,
                            width: 400,
                            height: 300,
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                        "VisualContainer2": {
                            displayState: {
                                mode: models.VisualContainerDisplayMode.Visible
                            }
                        },
                    }
                }
            }
        }
    }
};
...
// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfig);

Konten terkait