Thêm một báo cáo hoặc bảng thông tin Power BI vào một trang web

Tiền bo

Bài viết này giải thích cách thêm báo cáo hoặc bảng thông tin Power BI bằng thẻ Liquid powerbi. Để thêm thành phần Power BI trên một trang web trong trang web của bạn bằng cách sử dụng studio thiết kế, hãy đi tới Thêm thành phần Power BI.

Bạn có thể thêm báo cáo hoặc bảng thông tin Power BI vào một trang web bằng cách sử dụng thẻ Liquid powerbi. Sử dụng thẻ powerbi trong trường Sao chép trên trang web hoặc trong trường Nguồn trên mẫu web.

Nếu đang thêm một báo cáo hoặc bảng thông tin Power BI được tạo trong không gian làm việc mới của Power BI, bạn phải chỉ định loại xác thực là powerbiembedded trong thẻ Liquid powerbi.

Lưu ý

  • Nếu bạn đã chỉ định Microsoft Entra ID làm loại xác thực trong thẻ powerbi Liquid, bạn phải chia sẻ ID đó với những người dùng được yêu cầu trước khi thêm báo cáo hoặc trang tổng quan Power BI bảo mật vào một trang web trong cổng thông tin. Thêm thông tin: Chia sẻ không gian làm việc Power BIChia sẻ bảng thông tin vào báo cáo Power BI.
  • powerbiembedded hỗ trợ các bảng thông tin và báo cáo Power BI kết nối với Azure Analysis Services. Bạn cũng có thể sử dụng thuộc tính "customdata" trong mã liquid để chuyển giá trị cho thuộc tính CustomData.
  • Báo cáo Power BI được phân trang không được hỗ trợ.

Ví dụ:

{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/00000000-0000-0000-0000-000000000000/reports/00000000-0000-0000-0000-000000000001/ReportSection01" %}

Để tìm hiểu về cách lấy đường dẫn bảng thông tin và ID của ngăn xếp bảng thông tin, hãy tham khảo các phần phía sau của bài viết này.

Sử dụng bảng thông tin hoặc báo cáo kết nối với Azure Analysis Services

Bạn có thể thêm thẻ Liquid powerbi với bảng thông tin hoặc báo cáo kết nối với Azure Analysis Services.

Để thêm bảng thông tin hoặc báo cáo kết nối với Azure Analysis Services, hãy sử dụng tham số CustomData trong chuỗi kết nối.

Ví dụ:

{% powerbi authentication_type:"powerbiembedded" path:"https://app.powerbi.com/groups/<GroupID>/reports/<ReportID>" roles:"<roles associated with report>" customdata:"<customdata>" %}

Thẻ customdata tùy chọn có thể được đặt cấu hình dưới dạng chuỗi hoặc được tạo động dựa trên thuộc tính của đối tượng, sử dụng dấu chấm (".") hoặc dấu ngoặc vuông ("[]") để phân tách giữa đối tượng và thuộc tính, ở giữa hai cặp dấu ngoặc dấu ngoặc nhọn.

Ví dụ:

  • customdata: {{ object.attribute }}
  • customdata: {{ object[attribute] }}

Khi thẻ customdata trả về một chuỗi, hệ thống có thể cần phải chuyển đổi chuỗi này thành một số nguyên trong truy vấn DAX.

Quan trọng

Azure Analysis Services và Vai trò (RLS)

Thẻ roles là không bắt buộc đối với các báo cáo và bảng thông tin dựa trên Azure Analysis Services. Khi không sử dụng, vai trò được mặc định thành vai trò mà ứng dụng được gán trong Azure Analysis Services.

Tuy nhiên, thẻ này có thể cần đến khi chỉ định một vai trò (hoặc các vai trò) nhất định trong số những vai trò có sẵn và vẫn có thể là bắt buộc khi sử dụng Bảo mật ở cấp độ hàng.

Các vai trò nằm trong cơ sở dữ liệu Azure Analysis Services chứ không có trong báo cáo, không giống như các loại báo cáo Power BI khác.

  • Không cung cấp vai trò nào trong mã Liquid.

    Nếu không có vai trò nào được cung cấp trong mã Liquid, thì vai trò trong Azure Analysis Services sẽ được xác định theo (các) vai trò mà Ứng dụng có quyền truy cập, đồng thời sẽ lọc kết quả theo dữ liệu tùy chỉnh đã cung cấp dựa trên truy vấn DAX trong (các) vai trò. Nghĩa là, tất cả vai trò có sẵn sẽ kết hợp các quyền truy cập tương ứng, nhưng vẫn sẽ lọc nếu dữ liệu tùy chỉnh đã cung cấp phù hợp. Tình huống này thường xảy ra nhất với báo cáo Azure Analysis Services hoặc bảng tổng quan một ngăn xếp.

  • Cung cấp các vai trò trong mã Liquid.

    Các vai trò trong Azure Analysis Services có thể được cung cấp trong mã Liquid, tương tự như các vai trò RLS. Việc sử dụng các vai trò này có thể là bắt buộc khi có nhiều vai trò, nhưng bạn muốn sử dụng các vai trò cụ thể cho trang. Khi sử dụng bất kỳ vai trò nào trong chuỗi kết nối, việc chỉ định vai trò trong Azure Analysis Services là điều bắt buộc. Ví dụ: bảng thông tin nhiều ngăn xếp sử dụng ngăn xếp Azure Analysis Services với ngăn xếp RLS.

    Những cân nhắc sau áp dụng khi sử dụng các ngăn xếp Azure Analysis Services trong bảng thông tin:

    • Nếu ngăn xếp Azure Analysis Services được sử dụng trong bảng thông tin với các ngăn xếp khác yêu cầu vai trò, thì vai trò trong Azure Analysis Services phải được thêm vào danh sách vai trò.
    • Nhiều ngăn xếp từ các nguồn Azure Analysis Services khác nhau có thể được sử dụng với vai trò riêng, nhưng dữ liệu tùy chỉnh phải giống nhau đối với mỗi ngăn xếp và không thể sử dụng nhiều giá trị dữ liệu tùy chỉnh trong mã Liquid. Thẻ customdata và tham số customdata cho EffectiveIdentity chỉ nhận một giá trị chuỗi.

Nhận đường dẫn của bảng thông tin hoặc báo cáo

  1. Đăng nhập vào Power BI.

  2. Mở bảng thông tin hoặc báo cáo mà bạn muốn nhúng trong cổng thông tin của mình.

  3. Sao chép URL từ thanh địa chỉ.

    Nhận đường dẫn của bảng thông tin Power BI.

Nhận ID của ngăn xếp bảng thông tin

  1. Đăng nhập vào Power BI.

  2. Mở bảng thông tin mà bạn muốn nhúng ngăn xếp trong website của mình.

  3. Trỏ tới ngăn xếp, chọn Tùy chọn khác rồi chọn Mở chế độ tiêu điểm.

    Mở ngăn xếp bảng thông tin Power BI trong chế độ tập trung.

  4. Sao chép các ID ngăn xếp từ URL trong thanh địa chỉ. ID ngăn xếp là giá trị sau /ngăn xếp/.

    ID ngăn xếp bảng thông tin Power BI.

Cách sử dụng thư viện JavaScript powerbi-client trong Power Pages

Bạn có thể dùng thư viện JavaScript powerbi-client cho báo cáo hoặc bảng thông tin Power BI Embedded trong website. Để biết thêm thông tin về thư viện JavaScript powerbi-client, hãy xem Trang wiki về JavaScript Power BI.

Dưới đây là JavaScript mẫu để cập nhật thiết đặt báo cáo hoặc để xử lý các sự kiện. Mẫu này vô hiệu hóa ngăn bộ lọc, tắt điều hướng trang và bật sự kiện dataSelected.

Quan trọng

  • Sử dụng thư viện JavaScript powerbi-client để tắt hoặc bật ngăn bộ lọc. Tuy nhiên, nếu bạn muốn hạn chế quyền truy cập vào dữ liệu hoặc định cấu hình bảo mật, hãy sử dụng Bảo mật cấp hàng (RLS) với Power BI. Việc tắt ngăn bộ lọc không hạn chế quyền truy cập dữ liệu và ngăn này có thể được bật lại bằng cách sử dụng mã thư viện JavaScript.
  • Thư viện JavaScript powerbi-client chỉ được hỗ trợ cho luồng PowerBI Embedded.
$(document).ready(function () {
    var embedContainer = $(".powerbi")[0];
    if (embedContainer) {
        var report = powerbi.get(embedContainer);
        report.on("loaded", function () {
            report.updateSettings({
                panes: {
                    filters: {
                        visible: false
                    },
                    pageNavigation: {
                        visible: false
                    }
                }
            }).catch(function (errors) {
                console.log(errors);
            });
        })
    }
});

Để thêm JavaScript tùy chỉnh vào trang web:

  1. Mở ứng dụng Quản lý cổng thông tin.
  2. Chọn Trang web từ ngăn bên trái.
  3. Chọn trang web có chứa báo cáo hoặc bảng thông tin Power BI.
  4. Chọn tab Nâng cao.
  5. Sao chép và dán JavaScript bên trong phần JavaScript tùy chỉnh.
  6. Chọn Lưu & Đóng.

Bây giờ, hãy tìm hiểu các thao tác JavaScript mẫu và các tùy chọn khác nhau.

Nhận tham chiếu đến HTML báo cáo được nhúng

Nhận tham chiếu đến HTML báo cáo được nhúng.

var embedContainer = $(".powerbi")[0];

Thêm thông tin: Nhận tham chiếu đến một thành phần Power BI hiện có đưa ra phần tử chứa

Nhận tham chiếu đến báo cáo được nhúng

var report = powerbi.get(embedContainer);

Làm việc với ngăn Power BI

Bạn có thể sử dụng thiết đặt cho các ngăn để làm việc với ngăn Power BI trên trang web. Ví dụ: bạn có thể sử dụng thiết đặt bộ lọc để ẩn hoặc hiển thị ngăn hoặc làm việc với thiết đặt điều hướng trang.

Dưới đây là một mẫu để loại bỏ ngăn bộ lọc:

report.updateSettings({
            panes: {
                filters :{
                    visible: false
                }
            }
        }).catch(function (errors) {
            console.log(errors);
        });

Dưới đây là một mẫu để làm việc với cả điều hướng trang và bộ lọc:

report.updateSettings({
            panes: {
                filters :{
                    visible: false
                },
                pageNavigation:{
                    visible: false
                }
            }
        }).catch(function (errors) {
            console.log(errors);
        });

Thêm thông tin: Cập nhật thiết đặtNhúng cấu hình - Thiết đặt

Xử lý sự kiện

Thành phần nhúng có thể phát ra các sự kiện khi thu hồi hoàn thành một lệnh được thực thi. Ví dụ: dưới đây là một mẫu cho sự kiện dataSelected.

//Report.off removes a given event listener if it exists
    report.off("dataSelected");
//Report.on will add an event list
    report.on('dataSelected', function(event){
        console.log('Event - dataSelected:');
        console.log(event.detail);
    })

Thêm thông tin: Xử lý sự kiện

Xem thêm