เพิ่มรายงานหรือแดชบอร์ด Power BI ไปยังเว็บเพจในพอร์ทัล

หมายเหตุ

• พอร์ทัล Power Apps คือ Power Pages โดยมีผลในเดือนตุลาคม 2022
• หัวข้อนี้นำไปใช้ได้กับความสามารถเดิม หากต้องการดูข้อมูลล่าสุด โปรดไปที่ คู่มือ Microsoft Power Pages

เคล็ดลับ

บทความนี้จะอธิบายวิธีการเพิ่มรายงานหรือแดชบอร์ด Power BI โดยใช้แท็ก Liquid ของ powerbi เพื่อเพิ่ม ส่วนประกอบ Power BI บนหน้าเว็บในพอร์ทัลของคุณโดยใช้พอร์ทัล Studio ไปที่ เพิ่มส่วนประกอบ Power BI ไปยังเว็บเพจโดยใช้พอร์ทัล Studio

คุณสามารถเพิ่มรายงาน Power BI หรือแดชบอร์ดไปยังเว็บเพจในพอร์ทัลในพอร์ทัลโดยใช้แท็ก Liquid powerbi ใช้แท็ก powerbi ในฟิลด์ คัดลอก บนเว็บเพจ หรือในฟิลด์ ต้นทาง ในเทมเพลตเว็บ

ถ้าคุณกำลังเพิ่มรายงานหรือแดชบอร์ด Power BI ที่สร้างขึ้นในพื้นที่ทำงานใหม่ของ Power BI คุณจะต้องระบุชนิดการรับรองความถูกต้องเป็น powerbiembedded ในแท็ก Liquid ของ powerbi

หมายเหตุ

• ถ้าคุณได้ระบุ ID Microsoft Entra เป็นชนิดการรับรองความถูกต้องในแท็ก Liquid ใน powerbi คุณจะต้องใช้ร่วมกันกับผู้ใช้ที่กำหนดก่อนที่จะเพิ่มรายงานหรือแดชบอร์ด Power BI ที่ปลอดภัยไปยังหน้าเว็บในพอร์ทัล ข้อมูลเพิ่มเติม: ใช้พื้นที่ทำงานของ Power BI ร่วมกัน และ ใช้แดชบอร์ดและรายงานของ Power BI ร่วมกัน
• powerbiembedded สนับสนุนแดชบอร์ดและรายงาน Power BI ที่เชื่อมต่อกับ Azure Analysis Services นอกจากนี้ คุณยังสามารถใช้คุณสมบัติ "customdata" ในรหัส Liquid เพื่อส่งผ่านค่าสำหรับคุณสมบัติ CustomData Custom
• ไม่รองรับรายงาน Power BI ที่มีการแบ่งหน้า

ตัวอย่างเช่น

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

เมื่อต้องการเรียนรู้เกี่ยวกับวิธีการรับพาธแดชบอร์ด และรหัสของไทล์แดชบอร์ด โปรดดูส่วนต่างๆ ในภายหลังในบทความนี้

การใช้แดชบอร์ดหรือรายงานที่เชื่อมต่อกับ Azure Analysis Services

คุณสามารถเพิ่ม แท็ก powerbi Liquid ด้วยแดชบอร์ดหรือรายงานที่เชื่อมต่อกับ Azure Analysis Services

หากต้องการเพิ่มแดชบอร์ดหรือรายงานที่เชื่อมต่อกับ Azure Analysis Services ให้ใช้พารามิเตอร์ CustomData ในสตริงการเชื่อมต่อ

ตัวอย่างเช่น

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

แท็ก customdata ที่เป็นตัวเลือก สามารถตั้งค่าคอนฟิกเป็นสตริง หรือสร้างแบบไดนามิกตามแอตทริบิวต์ของวัตถุ โดยใช้จุด (".") หรือวงเล็บเหลี่ยม ("[]") เพื่อแยกระหว่างวัตถุและแอตทริบิวต์ ในระหว่างคู่สองคู่ของวงเล็บปีกกา

ตัวอย่าง:

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

เมื่อแท็ก customdata ส่งคืนสตริง อาจจำเป็นต้องแปลงสตริงนี้เป็นจำนวนเต็มใน การสอบถาม DAX

ข้อสำคัญ

• พอร์ทัลไม่รองรับแดชบอร์ดหรือรายงาน Power BI ที่เชื่อมต่อกับ Azure Analysis Services ที่ใช้ เกตเวย์ข้อมูลเพื่อเชื่อมต่อกับแหล่งข้อมูลในสถานที่
• เวอร์ชันพอร์ทัลของคุณต้องเป็น 9.3.4.x หรือใหม่กว่า เพื่อให้คุณลักษณะนี้ใช้งานได้

Azure Analysis Services and Roles (RLS)

แท็ก บทบาท เป็นตัวเลือกสำหรับรายงานและแดชบอร์ดที่ใช้ Azure Analysis Services เมื่อไม่ได้ใช้ บทบาทจะเริ่มต้นตามบทบาทที่แอปได้รับมอบหมายใน Azure Analysis Services

อย่างไรก็ตาม แท็กนี้อาจจำเป็นในการระบุบทบาท (หรือหลายบทบาท) บางอย่างจากบทบาทที่มีอยู่หลายบทบาท และอาจยังคงจำเป็นเมื่อใช้การรักษาความปลอดภัยระดับแถว

บทบาทมีอยู่ภายในฐานข้อมูล Azure Analysis Services และไม่ได้อยู่ในรายงานเอง ซึ่งแตกต่างจากชนิดรายงาน Power BI อื่นๆ

• ไม่มีการระบุบทบาทในรหัส Liquid

  หากไม่มีการระบุบทบาทในโค้ด Liquid บทบาท Azure Analysis Services จะถูกกำหนดโดยบทบาทที่แอปเข้าถึงได้ และจะกรองผลลัพธ์ตามข้อมูลที่กำหนดเองที่ให้ไว้กับการสอบถาม DAX ในบทบาท กล่าวคือ บทบาทที่มีอยู่ทั้งหมดจะรวมการเข้าถึงของพวกเขา แต่จะยังคงกรอง หากข้อมูลที่กำหนดเองที่ให้มามีความเกี่ยวข้อง สถานการณ์นี้มักจะเกิดขึ้นกับรายงาน Azure Analysis Services หรือแดชบอร์ดแบบไทล์เดียว

• มีการระบุบทบาทในรหัส Liquid

  สามารถระบุบทบาท Azure Analysis Services ในรหัส Liquid ได้ เช่นเดียวกับบทบาท RLS การใช้บทบาทเหล่านี้อาจจำเป็นเมื่อมีหลายบทบาทที่พร้อมใช้งาน แต่คุณต้องการใช้บทบาทเฉพาะสำหรับเพจ เมื่อใช้บทบาทใดๆ ในสตริงการเชื่อมต่อ จำเป็นต้องระบุบทบาท Azure Analysis Services ตัวอย่างเช่น แดชบอร์ดแบบหลายไทล์ที่ใช้ไทล์ Azure Analysis Services กับไทล์ RLS

  ข้อควรพิจารณาต่อไปนี้นำไปใช้ เมื่อใช้ไทล์ Azure Analysis Services ในแดชบอร์ด:

  • ถ้าไทล์ Azure Analysis Services ถูกใช้ในแดชบอร์ดที่มีไทล์อื่นๆ ที่ต้องใช้บทบาท จะต้องเพิ่มบทบาท Azure Analysis Services ลงในรายการของบทบาท
  • ไทล์หลายรายการจากแหล่งที่มา Azure Analysis Services ต่างๆ สามารถใช้กับบทบาทของตนเองได้ แต่ข้อมูลที่กำหนดเองจะต้องเหมือนกันสำหรับแต่ละรายการ และไม่สามารถใช้ค่าข้อมูลที่กำหนดเองหลายค่าในโค้ด Liquid แท็ก customdata และพารามิเตอร์ customdata สำหรับ EffectiveIdentity รับเฉพาะค่าสตริงเท่านั้น

รับพาธของแดชบอร์ดหรือรายงาน

1. ลงชื่อเข้าใช้ Power BI

2. เปิดแดชบอร์ดหรือรายงานที่คุณต้องการให้ฝังไว้ในพอร์ทัล

3. คัดลอก URL จากแถบที่อยู่

   

รับรหัสของไทล์แดชบอร์ด

1. ลงชื่อเข้าใช้ Power BI

2. เปิดแดชบอร์ดจากที่คุณต้องการฝังไทล์ไว้ในพอร์ทัลของคุณ

3. ชี้ไปที่ไทล์ เลือก ตัวเลือกเพิ่มเติม จากนั้น เลือก เปิดในโหมดโฟกัส

   

4. คัดลอก ID ไทล์จาก URL ในแถบอยู่ ID ไทล์ คือค่าหลังจาก /ไทล์/

   

วิธีใช้ไลบรารี JavaScript ของ powerbi-client ในพอร์ทัล

คุณสามารถใช้ ไลบรารี JavaScript ของ powerbi-client สำหรับรายงานหรือแดชบอร์ด Power BI Embedded ในพอร์ทัลของคุณ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไลบรารี JavaScript ของ powerbi-client โปรดดูที่ Power BI JavaScript wiki

ด้านล่างนี้คือ JavaScript ตัวอย่างเพื่ออัปเดตการตั้งค่ารายงาน หรือเพื่อจัดการกับเหตุการณ์ ตัวอย่างนี้ปิดใช้งานบานหน้าต่างตัวกรอง ปิดใช้งานการนำทางหน้า และเปิดใช้งานเหตุการณ์ dataSelected

ข้อสำคัญ

• ใช้ไลบรารี JavaScript ของ powerbi-client เพื่อปิดใช้งานหรือเปิดใช้งานบานหน้าต่างตัวกรอง อย่างไรก็ตาม หากคุณต้องการจำกัดการเข้าถึงข้อมูลหรือกำหนดค่าความปลอดภัย ให้ใช้ การรักษาความปลอดภัยระดับแถว (RLS) ด้วย Power BI การปิดใช้งานบานหน้าต่างตัวกรองไม่ได้จำกัดการเข้าถึงข้อมูล และสามารถเปิดใช้งานได้อีกครั้งโดยใช้รหัสไลบรารี JavaScript
• ไลบรารี JavaScript ของ powerbi-client รองรับเฉพาะโฟลว์ 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);
            });
        })
    }
});

เพื่อเพิ่ม JavaScript ที่กำหนดเองไปยังเว็บเพจ:

1. เปิดแอป การจัดการพอร์ทัล
2. เลือก เว็บเพจ จากบานหน้าต่างด้านซ้าย
3. เลือกเว็บเพจที่มีรายงานหรือแดชบอร์ด Power BI
4. เลือกแท็บ ขั้นสูง
5. คัดลอกและวาง JavaScript ภายในส่วน JavaScript ที่กำหนดเอง
6. เลือก บันทึกและปิด

ตอนนี้ มาทำความเข้าใจกับตัวอย่างการทำงานของ JavaScript และตัวเลือกต่างๆ กัน

รับการอ้างอิงไปยัง HTML ของรายงานที่ฝังไว้

รับการอ้างอิงไปยัง HTML ของรายงานที่ฝังไว้

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

ข้อมูลเพิ่มเติม: รับการอ้างอิงไปยังส่วนประกอบ Power BI ที่มีอยู่ซึ่งมีองค์ประกอบ

รับการอ้างอิงไปยังรายงานที่ฝังไว้

var report = powerbi.get(embedContainer);

ทำงานกับบานหน้าต่าง Power BI

คุณสามารถใช้การตั้งค่าสำหรับบานหน้าต่างเพื่อทำงานกับบานหน้าต่าง Power BI บนเว็บเพจพอร์ทัล ตัวอย่างเช่น คุณสามารถใช้การตั้งค่าตัวกรองเพื่อซ่อนหรือแสดงบานหน้าต่าง หรือทำงานกับการตั้งค่าการนำทางหน้า

ด้านล่างนี้เป็นตัวอย่างในการลบบานหน้าต่างตัวกรอง:

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

ด้านล่างนี้เป็นตัวอย่างในการทำงานกับทั้งการนำทางหน้าและตัวกรอง:

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

ข้อมูลเพิ่มเติม: อัปเดตการตั้งค่า และ การตั้งค่าคอนฟิกแบบฝัง - การตั้งค่า

จัดการเหตุการณ์

ส่วนประกอบที่ฝังอยู่สามารถปล่อยเหตุการณ์ เมื่อเรียกใช้คำสั่งที่ดำเนินการเสร็จสิ้น ตัวอย่างเช่น ด้านล่างเป็นตัวอย่างสำหรับเหตุการณ์ 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);
    })

ข้อมูลเพิ่มเติม: การจัดการเหตุการณ์

ดูเพิ่มเติม

• เพิ่มส่วนประกอบ Power BI ไปยังหน้าเว็บโดยใช้พอร์ทัลสตูดิโอ
• การตั้งค่ารวม Power BI
• แท็กสภาพคล่องของ powerbi

หมายเหตุ

บอกให้เราทราบเกี่ยวกับภาษาที่คุณต้องการในคู่มือ ทำแบบสำรวจสั้นๆ (โปรดทราบว่าแบบสำรวจนี้เป็นภาษาอังกฤษ)

แบบสำรวจนี้ใช้เวลาทำประมาณเจ็ดนาที ไม่มีการเก็บข้อมูลส่วนบุคคล (คำชี้แจงสิทธิ์ส่วนบุคคล)