Добавление целевой страницы в визуальный элемент Power BI

Целевая страница визуального элемента Power BI может отображать сведения в визуальном карта Power BI перед получением данных карта. Целевая страница визуального элемента может отображать:

• Текст, который объясняет, как использовать визуальный элемент.
• Ссылка на веб-сайт.
• Ссылка на видео.

В этой статье объясняется, как разработать целевую страницу для визуального элемента. Целевая страница отображается всякий раз, когда визуальный элемент не имеет данных в нем.

Примечание.

Проектирование целевой страницы визуального элемента Power BI поддерживается в API версии 2.3.0 и выше. Чтобы узнать, какая версия используется, проверка apiVersion в файле pbiviz.json.

Создание целевой страницы

Чтобы создать целевую страницу, в файле необходимо задать capabilities.json две возможности.

• Включите целевую страницу 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();
                }
        }
    }

Связанный контент

Форматирование используемых элементов