Переключение между мобильным и настольным режимом в Power Bi Встроенный - PullRequest
Новая
       1

Переключение между мобильным и настольным режимом в Power Bi Встроенный

0 голосов
/ 01 июля 2018

У меня есть отчет power bi с настольным и мобильным представлениями. Я бы хотел, чтобы браузер переключался между этими представлениями по мере изменения размера. Единственный способ, которым я могу в настоящее время достичь этого, - это вставить два экземпляра отчета в браузер, один мобильный, другой рабочий стол, и скрыть и показать их в зависимости от размера браузера.

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

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

Что можно сделать, чтобы встроить только один отчет, который может динамически переключаться между мобильным и настольным представлениями?

ОБНОВЛЕНИЕ После ответа ниже, тестовый код для переключения макета между мобильным и пользовательским макетом 

angular.element($window).on('resize', function () {
    if (vm.report === null)
        return;

    var models = window['powerbi-client'].models;

    var newLayout = models.LayoutType.Custom;
    if (window.innerWidth < 768) {
        newLayout = models.LayoutType.MobilePortrait;
    }

    if (vm.report.config.settings.layoutType !== newLayout) {
        const newSettings = { layoutType: newLayout };
        vm.report.updateSettings(newSettings);
    }}

ОБНОВЛЕНИЕ 2, Добавлен код, чтобы показать, как создается отчет 

        // report config 
    var models = window['powerbi-client'].models;
    var config = {
        type: 'report',
        tokenType: models.TokenType.Embed,
        accessToken: result.accessToken,
        embedUrl: result.embedUrl,
        id: result.reportId,
        permissions: models.Permissions.View,
        viewMode: models.ViewMode.Read,
        settings: {
            filterPaneEnabled: false,
            navContentPaneEnabled: false,
            background: models.BackgroundType.Transparent,
            layoutType: models.LayoutType.Custom,
            customLayout: {
                displayOption: models.DisplayOption.FitToPage
            }
        }
    };

    // get elements and embed them
    var desktopReportContainer = $('.reportContainer')[0];
    vm.report = powerbi.embed(desktopReportContainer, config);

Ответы [ 2 ]

0 голосов
/ 18 апреля 2019

Power BI embed Библиотека Javascript имеет прямую поддержку для вашего случая.

Сначала вам нужно будет создать отчет с мобильным макетом с помощью рабочего стола Power BI. После создания отчета вы можете встроить его с помощью JavaScript SDK. Чтобы решить, в какой макет встраивать, используйте свойство layoutType настроек в конфигурации встраивания.

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

  • MobilePortrait - оптимизирован для портретного просмотра (это мобильный макет, созданный на рабочем столе Power BI)
  • MobileLandscape - Оптимизировано для ландшафтного просмотра. Этот макет выглядит как обычный макет отчета.

Загрузка отчета в мобильном макете Пример: 

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

var embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Embed,
    accessToken: 'h4...rf',
    settings: {
            layoutType: models.LayoutType.MobilePortrait
        }
};

Вот подробное руководство: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile

0 голосов
/ 03 июля 2018

Вместо встраивания двух экземпляров отчета вы можете сделать:

  1. Измените тип макета, обновив настройки, как здесь: change-layout-example . Недостатком этого подхода является то, что перекрестные фильтры вашего пользователя не будут сохранены при изменении макета.

  2. Перед изменением типа макета сохраните закладку, а затем после изменения типа макета примените сохраненную закладку: 

    function changeLayout(layoutType) {
    report.bookmarksManager.capture()
    .then(function (capturedBookmark) {
        var bookmarkState = capturedBookmark.state;

        var config = {
            layoutType: layoutType
        };
        report.updateSettings(config).then(function () {
            report.bookmarksManager.applyState(bookmarkState);
        })
    })
}

    Обратите внимание, что вам нужно добавить код обработки ошибок в приведенный выше пример.

  3. Используйте пользовательский макет вместо мобильного макета, как здесь: Динамический макет отчета . Недостатком этого подхода является то, что вам придется писать код, который устанавливает макет динамически.

...