Menambahkan halaman arahan ke visual Power BI Anda

Halaman arahan visual Power BI bisa menampilkan informasi di kartu visual Power BI Anda sebelum kartu mendapatkan data. Halaman arahan visual dapat ditampilkan:

• Teks yang menjelaskan cara menggunakan visual.
• Tautan ke situs web Anda.
• Tautan ke video.

Artikel ini menjelaskan cara mendesain halaman arahan untuk visual Anda. Halaman arahan muncul setiap kali visual tidak memiliki data di dalamnya.

Catatan

Mendesain halaman arahan visual Power BI didukung di API versi 2.3.0 ke atas. Untuk mengetahui versi mana yang Anda gunakan, periksa apiVersion di file pbiviz.json .

Membuat halaman arahan

Untuk membuat halaman arahan, dua kemampuan harus diatur dalam capabilities.json file.

• Agar halaman arahan berfungsi, aktifkan supportsLandingPage.
• Agar halaman arahan ditampilkan dalam mode tampilan, atau agar visual menjadi interaktif bahkan ketika dalam mode tanpa peran data, aktifkan supportsEmptyDataView.

    {
        "supportsLandingPage": true,
        "supportsEmptyDataView": true,
    }

Contoh visual dengan halaman arahan

Kode berikut menunjukkan bagaimana halaman arahan dapat ditambahkan ke visual bagan batang.

export class BarChart implements IVisual {
    //...
    private element: HTMLElement;
    private isLandingPageOn: boolean;
    private LandingPageRemoved: boolean;
    private LandingPage: d3.Selection<any>;

    constructor(options: VisualConstructorOptions) {
            //...
            this.element = options.element;
            //...
    }

    public update(options: VisualUpdateOptions) {
    //...
        this.HandleLandingPage(options);
    }

    private HandleLandingPage(options: VisualUpdateOptions) {
        if(!options.dataViews || !options.dataViews[0]?.metadata?.columns?.length){
            if(!this.isLandingPageOn) {
                this.isLandingPageOn = true;
                const SampleLandingPage: Element = this.createSampleLandingPage(); //create a landing page
                this.element.appendChild(SampleLandingPage);
                this.LandingPage = d3.select(SampleLandingPage);
            }

        } else {
                if(this.isLandingPageOn && !this.LandingPageRemoved){
                    this.LandingPageRemoved = true;
                    this.LandingPage.remove();
                }
        }
    }

Konten terkait

Memformat utilitas