Power BI görselinize giriş sayfası ekleme

Power BI görselinin giriş sayfası, kart verileri almadan önce Power BI görsel kartınızda bilgileri görüntüleyebilir. Görselin giriş sayfası şu öğeleri görüntüleyebilir:

• Görselin nasıl kullanılacağını açıklayan metin.
• Web sitenizin bağlantısı.
• Video bağlantısı.

Bu makalede görseliniz için giriş sayfası tasarlama açıklanmaktadır. Görselde veri olmadığında giriş sayfası görüntülenir.

Dekont

Power BI görseli giriş sayfası tasarlama, API sürüm 2.3.0 ve üzeri sürümlerde desteklenir. Hangi sürümü kullandığınızı öğrenmek için pbiviz.json dosyasını denetleyin apiVersion.

Giriş sayfası oluşturma

Giriş sayfası oluşturmak için dosyada capabilities.json iki özellik ayarlanmalıdır.

• Giriş sayfasının çalışması için öğesini etkinleştirin supportsLandingPage.
• Giriş sayfasının görüntüleme modunda görüntülenmesi veya veri rolleri modunda olmasa bile görselin etkileşimli olması için etkinleştirinsupportsEmptyDataView.

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

Giriş sayfası olan görsel örneği

Aşağıdaki kod, bir giriş sayfasının çubuk grafik görseline nasıl eklenebileceğini gösterir.

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

İlgili içerik

Biçimlendirme yardımcı programları