소개

타일을 앱에 통합하는 3단계, Power BI 타일 가져오기에서는 Power BI 타일을 가져옵니다. 이 단계에서는 타일을 IFrame에 로드합니다.

타일을 IFrame에 로드하려면, IFramesrc 특성을 타일embedUrl 속성으로 설정하고, 시각 타일에 대한 액세스를 확보하기 위해 액세스 토큰과 메시지를 게시할 onload 핸들러를 만듭니다. 다음은 타일을 IFrame에 로드하는 JavaScript 코드입니다.

타일을 IFrame에 로드

//Configure IFrame for the tile after you have an Access Token. See Default.aspx.cs to learn how to get an Access Token
window.onload = function () {
    if ("" != document.getElementById('MainContent_accessToken').value)
    {
        var iframe = document.getElementById('iFrameEmbedTile');

        // To load a tile do the following:
        // Set the IFrame source to the EmbedUrl from the Get Tiles operation
        iframe.src = document.getElementById('MainContent_tileEmbedUrl').value;

        // Add an onload handler to submit the access token
        iframe.onload = postActionLoadTile;
    }
};

// Post the access token to the IFrame
function postActionLoadTile() {

    // Construct the push message structure
    // This is where you assign the Access Token to get access to the tile visual
    var messageStructure = {
        action: "loadTile",
        accessToken: document.getElementById('MainContent_accessToken').value,
        height: 500,
        width: 500
    };
    message = JSON.stringify(messageStructure);

    // Push the message
    document.getElementById('iFrameEmbedTile').contentWindow.postMessage(message, "*");;
}

타일 통합 샘플을 다운로드하여 실행하면, 샘플이 아래와 같이 표시됩니다.

결론

이 연습에서는 타일을 대시보드에 가져와서 타일을 앱에 통합한 다음, 타일을 IFrame에 로드하는 방법을 알아보았습니다. 타일을 ASP.NET 웹 앱에 포함시키는 데 적용되는 모든 부분을 보여주는 타일 통합 샘플 전체를 다운로드할 수 있습니다. 타일을 앱에 통합하는 코드 목록 전체를 볼 수도 있습니다.

참고 항목

Power BI에 등록
타일을 앱에 통합하는 연습
타일 통합 샘플
타일 통합 샘플 구성
대시보드 가져오기 작업
타일 가져오기 작업
궁금한 점이 더 있나요? Power BI 커뮤니티를 이용하세요.