Поделиться через

Внедрение отчета Power BI с помощью макета мобильных устройств

  • Статья

Мобильные пользователи могут просматривать любую страницу отчета Power BI в альбомной ориентации. Однако авторы отчетов могут создать дополнительное представление, оптимизированное для мобильных устройств и отображаемое в книжной ориентации. Этот вариант конструктора, доступный как в Power BI Desktop, так и в службе Power BI, позволяет авторам выбирать и изменять порядок только тех визуальных элементов, которые имеют смысл для мобильных пользователей на ходу.

Если в отчете есть мобильный макет, созданный в Службе Power BI Desktop или Power BI, вы можете внедрить отчет с помощью этого макета в веб-приложение.

Внедрение отчета с помощью макета мобильных устройств

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

Чтобы внедрить отчет Power BI в мобильный макет отчета, необходимо задать для layoutType значение models.LayoutType.MobilePortrait в объекте параметров:

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Дополнительные сведения о параметрах отчета см. в разделе Настройка параметров отчета.

Существует два типа макета, предназначенных для мобильных устройств:

  • MobilePortrait — оптимизировано для книжного представления. Это мобильный макет, созданный для отчета.

  • MobileLandscape — оптимизировано для ландшафтного представления. Это обычный макет отчета.

Заметка

Макет отчета определяется свойством layoutType независимо от фактической ориентации устройства.

Например, в следующем коде показано, как внедрить отчет с помощью мобильного макета.

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Чтобы обновить макет отчета при загрузке отчета, используйте метод report.updateSettings. Дополнительные сведения см. в разделе Обновление параметров отчета во время выполнения.

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

Проверка наличия макета мобильного макета страницы отчета

Класс клиента Power BI Client Page определяет метод следующим образом:

hasLayout(layoutType: any): Promise<boolean>

Метод hasLayout возвращает логическое значение, если страница имеет указанный тип макета.

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

Вы можете использовать поэтапное внедрение с hasLayout, чтобы проверить, имеет ли страница макет мобильных устройств перед отображением отчета.

Проводите пальцем по событиям

При внедрении отчета в мобильный макет можно прослушивать события прокрутки и запускать пользовательский код в веб-приложении. Есть два события прокрутки, swipeStart и swipeEnd оба возвращают следующий формат:

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

Например, можно использовать событие swipeEnd для обнаружения пальцем влево:

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

Дополнительные сведения об обработке событий см. в разделе Обработка событий.

Оптимизация приложения с помощью пользовательских макетов

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

Рекомендации и ограничения

  • После начальной загрузки отчета изменение макета мобильных устройств поддерживается только в том случае, если в объект конфигурации начального внедрения был установлен макет мобильных устройств (книжный или альбомный). В противном случае необходимо сначала вызвать powerbi.reset(HTMLElement), чтобы удалить iframe. Затем необходимо вызвать powerbi.embed(...) с помощью того же контейнера с параметром макета мобильного устройства, определенным в внедренном объекте конфигурации.

  • Если вы пытаетесь внедрить страницу отчета с макетом MobilePortrait, а страница не имеет мобильного макета, страница будет загружена с помощью макета MobileLandscape.

  • Чтобы пользователи могли перемещаться между страницами при использовании мобильных макетов, можно использовать report.setPage и реализовать собственную навигацию. Дополнительные сведения см. в навигации по страницам.

  • Приведенные выше конфигурации относятся к внедрению отчета Power BI в мобильное представление.
    Внедрение панели мониторинга можно настроить для мобильного макета с конфигурацией pageView: pageView: 'oneColumn'

Связанное содержимое