Power BI嵌入式布局未使用更新设置进行更新

时间:2018-11-01 14:58:15

标签: javascript jquery powerbi powerbi-embedded

背景

因此,我试图通过使用报告阶段来更改报告的布局类型。

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-For-Mobile

问题

呼叫updateSettings()时,虽然遵循其他设置,例如LayoutType,但我的新filterPaneEnabled并没有得到遵守。

过滤器窗格确实消失了,但是报告的类型没有改变。

我想念什么吗?

我的逻辑

  1. 预载报告
  2. 创建配置
  3. 使用配置加载报告
  4. 检查设备可移动,且检查报告可移动兼容
  5. 使用新报告类型更新配置设置
  6. 渲染报告

我的代码

预加载

function PreloadReport(accessToken, embedUrl, embedReportId, reportTitle) {

    // Create embedding config
    var config = {
        type: 'report',
        embedUrl: 'https://app.powerbi.com/reportEmbed'
    };

    var PreloadElement = powerbi.preload(config);

    $(PreloadElement).on('preloaded', function () {
        console.log("Report Preloaded.");
        LoadMetadata(accessToken, embedUrl, embedReportId, reportTitle);
    });
}

加载元数据,然后呈现

function LoadMetadata(accessToken, embedUrl, embedReportId, reportTitle) {

    try {

        // Get navigation container.
        ReportPagesList = $('#reportpagesbuttons');

        // Add on click event.
        ReportPagesList.on('click', 'a', function (event) {

            var button = event.target;
            var report = $(button).data('report');
            var page = $(button).data('page');

            //console.log('Attempting to set page to: ', page.name);
            Report.setPage(page.name)
                .then(function (response) {

                    ReportPageName = page.displayName;

                    // For appsights custom event.
                    ReportFullName = ReportTitle + ": " + ReportPageName;
                });
        });

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

        var config = {
            type: 'report',
            tokenType: models.TokenType.Embed,
            accessToken: accessToken,
            embedUrl: embedUrl,
            id: embedReportId,
            permissions: models.Permissions.All,
            settings: {
                filterPaneEnabled: true,
                navContentPaneEnabled: false,
                background: models.BackgroundType.Transparent,
                layoutType: models.LayoutType.Master,
                customLayout: {
                    displayOption: models.DisplayOption.FitToWidth
                }
            }
        };

        // Get a reference to the embedded report HTML element
        var embedContainer = $('#reportContainer')[0];

        // Embed the report and display it within the div container.
        Report = powerbi.load(embedContainer, config);

        Report.on("loaded",
            function () {

                console.log("Report loaded");
                if (jQuery.browser.mobile) {

                    //Do we need to load a different report based on view screen size?
                    Report.getPages().then(function (pages) {
                        pages[0].hasLayout(models.LayoutType.MobilePortrait).then(function (hasLayout) {
                            console.log("Has mobile layout = " + hasLayout);
                            console.log("Is Mobile device = " + jQuery.browser.mobile);

                            if (hasLayout === true) {

                                const newSettings = {
                                    filterPaneEnabled: false,
                                    layoutType: models.LayoutType.MobilePortrait
                                };
                                console.log("Updating mobile layout");
                                Report.updateSettings(newSettings);

                            }
                        });
                    });
                }

                Timer = new Timer();
                Timer.Start();

                //Generate nav items.
                generateReportNav(Report);
                Report.render();


            });

    } catch (ex) {

        //Send to app insights.
        appInsights.trackException(ex);
    }

1 个答案:

答案 0 :(得分:0)

为解决此问题,您需要首先检查设备是否可移动,然后使用正确的layoutType加载报告(切换步骤3和4)。 如果这样做,加载后甚至不需要更改layoutType。