Встроенная панель инструментов PowerBI-Javascript не "кликабельна" (для просмотра связанных отчетов и т. Д.)

Question

У меня есть сценарий, в котором мне нужно встроить панели мониторинга PowerBI, которые я выполняю, выполнив следующие действия:

1. Используйте ADAL.JS для аутентификации пользователя браузера с помощью AD; затем используйте приложение AD, чтобы запросить токен доступа к приложению powerbi.
2. Передайте этот токен доступа в PowerBI-Javascript (powerbi.embed) и вставьте данную панель в мою страницу.
3. На этом этапе панель инструментов отображается на моей странице вместе со всем закрепленным содержимым.

ОДНАКО проблема в том, что если я пытаюсь нажать на любой из этих закрепленных элементов на встроенной панели, ничего не происходит. Напротив, когда я делаю то же самое на powerbi.com, базовый отчет загружается, и я получаю "детализацию".

Как я могу реализовать тот же тип поведения "просверлить" во встроенном случае?

Answer 1

Здесь представлен полный источник информации о реализации функции перехода по клику для встроенных панелей PowerBI с поддержкой истории браузера.

    <div id="pbiIframe" class="desktop-view" style="display: block;">
    <div class="reportContainer" id="topLevelContainer"></div>
</div>

    <script>
        var models = window['powerbi-client'].models;
        window.onpopstate = function (popstate) {
            console.log("popstate fired!");
            console.log(popstate);
            // check if popstate is available; this means user is hitting back button and 
            // we need to load the associated powerbi artifact for that nav history
            if (popstate.state != null) {
                powerbi_embed(popstate.state.type, popstate.state.id, popstate.state.embedUrl,
                    popstate.state.viewMode, popstate.state.pageName);
            }
        };
        // I pass in a Model from MVC; if page is manually refreshed, load dash from Model always
        $(document).ready(function () {
            powerbi_embed('@Model.Type', '@Model.Id', '@Model.EmbedUrl', '@Model.ViewMode', "");
        })

        // Core helper to embed a powerbi artifact into the page dynamically
        function powerbi_embed(type, id, embedUrl, viewMode, pageName) {
            var retObj = null;

            ensureAuthorizationToPowerBI()
                .done(function (token) {
                    // create embed config
                    var embedConfig = {
                        type: type,
                        id: id,
                        embedUrl: embedUrl,
                        viewMode: models.ViewMode.View,
                        tokenType: models.TokenType.Aad,
                        accessToken: token,
                        pageView: 'fitToWidth', // applies to Dashboard only; for Report, see below
                        pageName: pageName,

                        // See https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_powerbi_models_dist_models_d_.isettings.html
                        settings: {
                            filterPaneEnabled: true,
                            navContentPaneEnabled: true,
                            background: models.BackgroundType.Transparent,
                            // START Report specific settings
                            layoutType: models.LayoutType.Custom,
                            customLayout: {
                                displayOption: models.DisplayOption.FitToWidth
                            }
                            // END Report specific settings
                        }
                    }

                    // create new embed element (workaround due to errors from powerbi wrt embedding pbi into an already embedded element)
                    $('#topLevelContainer').html("");
                    var newEl = $("<div class='reportContainer'></div>");
                    $('#topLevelContainer').append(newEl);

                    // embed
                    retObj = powerbi.embed(newEl.get(0), embedConfig);

                    // store the CURRENT embedConfig in the page's popstate
                    history.replaceState(embedConfig, 'title');

                    /************ HANDLE CLICKTHRU SCENARIOS ****************/
                    // register for tileClicked event only for dashboards (reports are not clickable, and do not raise this event)
                    if (type === 'dashboard') {
                        retObj.on('tileClicked', function (event) {
                            console.log(event);
                            // in some cases, powerbi event does not contain a valid reportEmbedUrl
                            if (event.detail.reportEmbedUrl === "") {
                                console.log("reportEmbedUrl is empty in tileClicked event, no-oping. This happens for filtered links.")
                                return;
                            }

                            // preserve history so back nav works
                            console.log("tileClicked fired; save CURRENT powerbi state in popstate");
                            history.pushState(embedConfig, 'title');

                            powerbi_embed(
                                "report",
                                "", // can be left empty as reportId comes as part of reportEmbedUrl
                                event.detail.reportEmbedUrl,
                                models.ViewMode.View,
                                event.detail.pageName);
                        });
                    }
                });

            return retObj;
        }
    </script>

Answer 2

Разница в том, что на PowerBI.com поведение "перейти к соответствующему отчету". В то время как в Power BI Embedded щелчок по встроенной плитке вызывает tileClicked событие, которое вы можете использовать для перехода к другому встроенному отчету (через встроенный отчет).

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

Для получения дополнительной информации о событиях: https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events