Power BI の視覚エフェクトにランディング ページを追加する

Power BI の視覚エフェクトのランディング ページには、カードがデータを取得する前に、Power BI 視覚エフェクトのカードの情報を表示できます。 視覚エフェクトのランディング ページには、以下を表示できます。

• 視覚エフェクトの使用方法を説明するテキスト。
• Web サイトへのリンク。
• ビデオへのリンク。

この記事では、視覚エフェクトのランディング ページをデザインする方法について説明します。 視覚エフェクトにデータが含まれていない場合は、常にランディング ページが表示されます。

ランディング ページの作成

ランディング ページを作成するには、capabilities.json ファイルで 2 つの機能を設定する必要があります。

• ランディング ページを機能させるには、supportsLandingPage を有効にします。
• ランディング ページをビュー モードで表示する場合や、データ ロールなしモードでも視覚エフェクトを対話型にする場合は、supportsEmptyDataView を有効にします。

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

ランディング ページが含まれる視覚エフェクトの例

次のコードでは、横棒グラフの視覚エフェクトにランディング ページを追加する方法を示します。

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

次のステップ