Добавление целевой страницы в визуальный элемент 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();
}
}
}