Quick BI：Skema Dasar untuk Penyematan Laporan

Langkah 1: Aktifkan Laporan untuk Disematkan

Penyematan laporan hanya didukung untuk laporan dalam status dipublikasikan.

Untuk mengaktifkan penyematan laporan, akses modul platform terbuka:

1. Buka halaman laporan yang akan disematkan dari halaman utama produk Quick BI seperti yang ditunjukkan pada gambar di bawah.

   

2. Pada halaman Add Embedded Report, pilih ruang kerja dan jenis objek data yang diinginkan, lalu pilih nama objek data dari daftar dan klik Enable Embedding. Gunakan fungsi pencarian nama laporan untuk menemukan laporan yang ingin disematkan secara cepat.

   

   Catatan

   Beberapa browser dapat memblokir penyematan iframe lintas origin saat menyematkan halaman pelaporan buku kerja ke lingkungan pihak ketiga, sehingga mencegah penulisan cookie dan menyebabkan kegagalan pengiriman data pada halaman pelaporan buku kerja. Oleh karena itu, disarankan untuk menggunakan fitur pelaporan buku kerja secara langsung di platform Quick BI.

3. Konfigurasi Penyematan

   Fitur debugging untuk konfigurasi penyematan laporan ditujukan untuk solusi tingkat lanjut.

   Penting

   Debugging ini hanya untuk pengujian fitur. Untuk penerapan aktual, harap selesaikan Langkah 2: Dapatkan AccessTicket melalui Antarmuka HTTPS dan Langkah 3: Gabungkan URL Single Sign-On.

   Setelah penyematan diaktifkan, kemampuan skema dasar dan skema tingkat lanjut berbeda selama integrasi aktual. Lihat tabel di bawah untuk detailnya:

   Kemampuan	Skema dasar	Skema tingkat lanjut
   Bind user	Pemilik laporan, tidak dapat diubah	Mendukung kustomisasi, dipersonalisasi untuk setiap pengguna
   Jumlah akses	Maksimal 100.000 kali per tiket	Tanpa Batas, mendukung pengaturan kustom
   Watermark	Tidak didukung	Dukungan (Kecuali untuk layar besar yang tidak mendukung watermark)
   Periode validitas	Maksimal 240 menit	Mendukung kustomisasi
   Parameter global	Tidak didukung	Dukungan
   Penyematan Blok	Tidak didukung	Didukung
   Jumlah lompatan Catatan Laporan yang akan dilompati juga perlu mengaktifkan penyematan.	Hanya dapat melompat satu kali Contoh: Setelah laporan A melompat ke laporan B, laporan B tidak dapat melompat ke laporan C.	Mendukung lompatan tanpa batas Contoh: Setelah laporan A melompat ke laporan B, laporan B masih dapat melompat ke laporan C, dan C dapat terus melompat lebih jauh, dan seterusnya.

Langkah 2: Dapatkan AccessTicket melalui Antarmuka HTTPS

Bagian ini menggunakan contoh penyematan dashboard dari ruang kelompok ke sistem pihak ketiga.

• Jika akun yang mengaktifkan akses dashboard memiliki izin developer atau analisis, akun tersebut hanya dapat mengaktifkan akses untuk dashboard yang dibuat oleh akun tersebut.

• Jika akun memiliki izin manajemen, akun tersebut dapat mengaktifkan akses ke semua laporan dalam ruang kerja tersebut.

  1. Ikuti langkah-langkah berikut untuk mendapatkan ID AccessKey dan AccessKey Secret Anda, yang disebut sebagai accessId dan accessKey.

     1. Login ke Konsol Quick BI.

     2. Pada halaman utama Quick BI, ikuti petunjuk pada gambar di bawah untuk mendapatkan ID AccessKey dan AccessKey Secret Anda.

        

  2. Dapatkan ID akun Alibaba Cloud Anda, juga dikenal sebagai aliyunUid.

     Login ke akun Alibaba Cloud Anda dan klik foto profil di pojok kanan atas untuk melihat ID akun.

     

  3. Pada halaman pengeditan laporan, dapatkan ID laporan, juga dikenal sebagai worksId:

     

  4. Dapatkan accessTicket

     Gabungkan parameter accessId, accessKey, aliyunUid, dan worksId yang diperoleh pada langkah sebelumnya ke dalam alamat permintaan berikut dan kirim permintaan GET untuk mengambil accessTicket.

     https://bi-cn-hongkong.data.aliyun.com//openapi/ac3rd/ticket/create?worksId=xx&aliyunUid=xx&accessKey=xx&accessId=xx&validityTime=xx

     Catatan

     • Akun yang digunakan untuk mendapatkan accessTicket memiliki batasan berikut:

       • Jika akun tersebut dinonaktifkan di Tenant Management > User Management, Anda tidak dapat membuat accessTicket baru. Namun, accessTicket yang sudah ada tetap berlaku.

       • Jika akun tersebut dihapus di Tenant Management > User Management, Anda tidak dapat membuat accessTicket baru. AccessTicket yang sudah ada menjadi tidak valid.

     • aliyunUid hanya digunakan untuk memverifikasi apakah role saat ini memiliki izin untuk mengaktifkan Single Sign-On untuk laporan organisasi saat menghasilkan accessTicket. Parameter ini tidak mengikat identitas laporan tersemat pihak ketiga.

     • validityTime adalah parameter opsional dengan rentang nilai 1 hingga 240, dengan nilai default 240. Satuannya adalah menit.

     • Untuk segera membatalkan validitas accessTicket, kirim permintaan POST dengan nilai aliyunUid, accessId, accessKey, dan accessTicket yang sesuai.

       http://bi-cn-hongkong.data.aliyun.com//openapi/ac3rd/ticket/invalid?aliyunUid=xx&accessId=xx&accessKey=xx&accessTicket=xx

Bagaimana mengatasi error "access report_tree unauthorized" saat menyematkan laporan?

Deskripsi masalah

Saat menyematkan laporan ke sistem pihak ketiga, Anda mungkin menemui pesan error berikut.

Penyebab

Error ini terjadi ketika izin laporan belum diaktifkan di ruang kelompok yang sesuai.

Solusi

Aktifkan izin laporan dengan mengikuti langkah-langkah yang diilustrasikan di bawah.

Bagaimana cara menyesuaikan tinggi laporan Quick BI tersemat pihak ketiga secara otomatis (PC)?

Deskripsi masalah

Saat menyematkan dashboard Quick BI menggunakan Iframe, pembatasan keamanan lintas domain browser dapat mencegah pengambilan tinggi dashboard, sehingga menyebabkan munculnya bilah gulir.

Solusi

Quick BI mengirimkan tinggi dashboard ke halaman eksternal menggunakan postMessage saat memuat. Halaman eksternal dapat mendengarkan event ini untuk mendapatkan tinggi dan ID dashboard.

Ada dua metode untuk mencapai hal ini:

Contoh Lengkap

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </head>
    <body>
        <iframe 
        class="quickbi-iframe-demo"
    src="https://bi-cn-hongkong.data.aliyun.com//token3rd/dashboard/view/pc.htm?pageId=dd0****83f&accessTicket=fd138bcb-****-4fde-b413-81bcee59bdb6"
      scrolling="no"
     frameborder="0" 
      width="100%" 
      height="600">
    </iframe>
   <!-- <useBodyAutoHeight=true> untuk penyesuaian tinggi body otomatis, <page_Id> adalah ID halaman dashboard, accessTicket adalah token akses untuk dashboard -->
        <script>
      // Alamat Quick BI, tambahkan alamat lain jika digunakan
      const quickBIURL = ['https://bi-cn-hongkong.data.aliyun.com'];
      function messageListener(event) {
        if (quickBIURL.includes(event.origin)) {
          // Tinggi yang dikirim menggunakan postMessage
          console.log('Tinggi Dashboard Quick BI:', event.data.height);
          // ID halaman dashboard yang dikirim menggunakan postMessage
          console.log('ID Dashboard Quick BI:', event.data.pageId);
        }
      }
      // Dengarkan sebelum dashboard dimuat
      window.addEventListener('message', messageListener);
      // Iframe yang menyematkan dashboard Quick BI
      const iframe = document.querySelector('iframe');
       // Minta secara proaktif tinggi dashboard Quick BI
      // Data yang dilewatkan dalam pesan harus mencakup { getDashboardHeight: true }
      iframe.contentWindow.postMessage({getDashboardHeight: true}, '*');
        </script>
    </body>
</html>

Bagaimana mengatur lebar saat menyematkan ke aplikasi pihak ketiga menggunakan Iframe pada halaman seluler?

Deskripsi masalah

Masalah kompatibilitas Iframe pada versi iOS lama dapat menyebabkan lebar aktual Iframe meluap, sehingga menimbulkan berbagai masalah tampilan seperti dashboard bergeser, tabel daftar tetap tidak bisa digulir, grafik terpotong, dan kotak pop-up kontrol kueri tidak sejajar.

Solusi

Sesuaikan gaya Iframe secara tepat.

Ikuti contoh kode berikut secara cermat untuk modifikasi:

iframe {
    border-width: 0;
    min-width: 100%;
    width: 0;
    *width: 100%;
    height: 667px; /* Tinggi harus menggunakan bidang statis, yang dapat diatur secara dinamis setelah mendapatkan tinggi layar. height: 100% akan memiliki masalah kompatibilitas */
}