Bagikan melalui

Mengubah perintah menu untuk visual laporan

  • Artikel

Visual di Power BI memiliki menu yang memungkinkan pengguna aplikasi Anda mengubah cara mereka melihat data mereka. Misalnya, menggunakan menu Konteks , titik data dapat disertakan atau dikecualikan dari visual. Menu Opsi dapat digunakan untuk mengekspor data yang terdapat dalam visual ke spreadsheet.

Buka menu Konteks dengan mengklik kanan visual atau titik data tertentu dalam visual.

Cuplikan layar yang memperlihatkan visual Power B I dengan menu konteks terbuka dan disorot di kanan atas.

Buka menu Opsi dengan memilih elipsis di sudut kanan atas visual.

Nota

Jika header visual untuk visual disembunyikan, elipsis tidak ditampilkan.

Cuplikan layar yang memperlihatkan visual Power B I dengan menu opsi terbuka dan disorot di kanan atas.

API ini menyediakan cara untuk memperluas menu ini, sehingga Anda dapat menambahkan perintah untuk pengguna Anda dan meningkatkan pengalaman aplikasi. Anda dapat menyesuaikan menu lebih lanjut dengan menyembunyikan atau menonaktifkan tindakan. Misalnya, Anda dapat menyembunyikan perintah bawaan Spotlight untuk menu opsi.

Cara mengubah perintah menu

Ubah menu dengan menggunakan extensions untuk menambahkan perintah, dan commands untuk mengubah tampilan perintah bawaan.

Anda dapat mengonfigurasi API untuk bekerja pada beban laporan (konfigurasi semat), atau Anda dapat memanggil metode updateSettings laporan untuk memperbarui item yang ditambahkan setelah laporan dimuat. Lihat Mengonfigurasi pengaturan laporan dan Menyembunyikan atau memperlihatkan header visual untuk mempelajari selengkapnya.

Pengaturan menu baru diterapkan pada semua visual dalam laporan. Untuk menerapkan pengaturan ke visual tertentu, gunakan pemilih .

Perluas perintah menu

Gunakan parameter berikut untuk membangun definisi perintah:

  • nama - Nama perintah.
  • judul - Judul untuk perintah . Ini digunakan sebagai default, jika tidak ada penimpaan di dalam visualContextMenu dan visualOptionsMenu.
  • ikon(opsional) - Gambar yang ingin Anda tampilkan sebagai ikon. Ikon hanya didukung di menu opsi.
  • memperluas - Tentukan menu yang diperluas perintah. Anda dapat menambahkan perintah ke menu konteks visual , menu opsi visual , atau keduanya. Anda juga dapat menyesuaikan properti di setiap menu, seperti judul menu atau lokasi ikon.

Tambahkan definisi perintah ke array perintah di objek ekstensi, yang diteruskan ke pengaturan laporan. Perintah adalah array ICommandExtension di dalam ekstensi, yang berjenis IExtensions.

let embedConfig = {
    ...
    settings: {
        extensions: {
            commands: [...]
        }
    }
};

Anda juga harus menangani peristiwa commandTriggered untuk perintah baru. Kejadian ini dipicu khusus untuk commandName.

report.on("commandTriggered", function(event) {
    let commandName = event.detail.command;
    ...
    if (commandName === "command name") {
        // Handler code
    }
});

Untuk informasi selengkapnya tentang menangani peristiwa, lihat Cara menangani peristiwa.

Ikon bersifat opsional. Jika Anda memilih untuk menggunakannya, itu harus dikonversi ke Base 64. Lihat kode berikut untuk contoh ikon Base 64 yang valid.

"data:image/png;base64,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"

Kode berikut adalah contoh kode lengkap untuk menambahkan ekstensi perintah menu.

// Get models. Models contain enums that can be used.
let models = window['powerbi-client'].models;

let embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    embedUrl: 'https://app.powerbi.com/reportEmbed',
    tokenType: models.TokenType.Aad,
    accessToken: 'e4...rf',
    settings: {
        ...
        extensions: {
            commands: [{
                name: "command name",
                title: "command title",
                icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
                extend: {
                    visualContextMenu: {
                        title: "context menu title",
                    },
                    visualOptionsMenu: {
                        title: "options menu title",
                    }
                }
            }]
        }
    }
};

...

// Embed the report and display it within the div container.
let report = powerbi.embed(embedContainer, embedConfiguration);

// Report.on will add an event handler to commandTriggered event which prints to console window.
report.on("commandTriggered", function (command) {
    console.log(command);
});

Mengatur lokasi item menu

Perintah ditambahkan ke bagian bawah menu secara default. Untuk perintah yang tidak dikelompokkan, Anda dapat menggunakan properti menuLocation untuk memilih apakah perintah ditempatkan di bagian atas atau bawah menu.

Nota

Saat menambahkan lebih dari satu ekstensi ke bagian atas menu, ekstensi terakhir yang ditambahkan akan berada di bagian atas.

Cuplikan layar yang memperlihatkan tabel Power B I dengan perintah menu 'Mulai Kampanye' ditambahkan.

Misalnya, kode berikut memungkinkan Anda mengatur ekstensi perintah menu opsi di bagian atas menu, dan perintah menu konteks di bagian bawah menu.

extensions: {
    commands: [{
       name: "command name",
       title: "command title",
       icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...AAABJRU5ErkJggg==",
       extend:
       {
           visualContextMenu: {
               title: "context menu title",
               menuLocation: models.MenuLocation.Bottom
           },
           visualOptionsMenu: {
               title: "options menu title",
               menuLocation: models.MenuLocation.Top
           }
       }
    }]
}

Perintah grup dalam submenu

Anda dapat membuat submenu untuk mengelompokkan perintah dengan parameter berikut:

  • nama - Nama grup. Ini adalah pengidentifikasi unik grup.
  • judul - Judul yang ditampilkan di menu.
  • menuLokasi(opsional) - Pilih apakah grup ditempatkan di bagian atas atau bawah menu.

Definisi grup harus ditambahkan ke array grup, yang merupakan array IMenuGroupExtension, di dalam objek ekstensi.

Cuplikan layar yang memperlihatkan visual Power BI dengan dua perintah ditambahkan di bawah submenu baru.

Jika Anda memilih untuk menggunakan nilai lokasi menu, Top akan menempatkan grup di bagian atas menu pada saat menambahkan perintah pertama grup. Jika tidak digunakan, atau saat menggunakan nilai Bottom, grup akan ditambahkan di bagian bawah menu pada saat menambahkan perintah pertama grup.

Untuk menambahkan perintah ke grup yang ditentukan dalam array grup, tambahkan properti groupName ke perintah .

Kode di bawah ini adalah contoh kode lengkap tentang cara menambahkan submenu ke menu opsi dengan dua perintah di dalamnya.

extensions: {
    commands: [
        {
            name: "Command 1",
            title: "Command 1",
            extend: {
                visualOptionsMenu: {
                    groupName: "group-unique-identifier"
                }
            }
        },
        {
            name: "Command 2",
            title: "Command 2",
            extend: {
                visualOptionsMenu: {
                    groupName: "group-unique-identifier"
                }
            }
        }
    ],
    groups: [{
        name: "group-unique-identifier",
        title: "Group title",
        menuLocation: models.MenuLocation.Top
    }]
}

Mengkustomisasi perintah menu

Tampilan perintah bawaan memiliki tiga mode tampilan.

  • Diaktifkan - Perintah muncul jika tersedia untuk visual.
  • Dinonaktifkan - Perintah muncul jika tersedia untuk visual tetapi berwarna abu-abu (pengguna tidak dapat memilih perintah).
  • Tersembunyi - Perintah tidak muncul.

Perintah bawaan yang saat ini tersedia adalah:

  • menyalin - Salin nilai, pilihan, atau visual. Hanya tersedia di bawah menu konteks (visual hanya tersedia dalam mode edit).
  • latihan - Gunakan mode latihan . Hanya tersedia di bawah menu konteks.
  • penelusuran - Gunakan latihan melalui fitur. Hanya tersedia di bawah menu konteks.
  • expandCollapse - Perluas atau ciutkan pilihan, seluruh tingkat, atau seluruh hierarki. Hanya tersedia di bawah menu konteks.
  • exportData - Ekspor data yang digunakan untuk membuat visualisasi. Hanya tersedia di bawah menu opsi.
  • includeExclude - Sertakan atau kecualikan poin data. Hanya tersedia di bawah menu konteks.
  • removeVisual - Hapus visual. Hanya tersedia di bawah menu opsi dalam mode edit.
  • pencarian - Alihkan opsi pencarian untuk pemotong. Hanya tersedia dalam mode edit.
  • lihatData - Menampilkan data yang digunakan untuk membuat visualisasi (Juga dikenal sebagai Tampilkan sebagai tabel).
  • mengurutkan - Urutkan dan pilih susunan urutan nilai menurut bidang data yang dipilih. Hanya tersedia di bawah menu opsi.
  • sorotan - Sorotan visual. Hanya tersedia di bawah menu opsi.
  • insightsAnalysis - Menampilkan wawasan tentang visual. Hanya tersedia di bawah menu opsi.
  • addComment - Tambahkan komentar ke visual. Hanya tersedia di bawah menu opsi.
  • groupVisualContainers - Hanya tersedia di bawah menu konteks dalam mode edit.
  • meringkas - Menampilkan ringkasan visualisasi. Hanya tersedia di bawah menu konteks.
  • clearSelection - Hanya tersedia di bawah menu konteks.

Untuk mengkustomisasi tampilan perintah bawaan, tentukan dan lewati objek perintah dalam pengaturan konfigurasi yang disematkan. Perintah adalah array ICommandsSettings.

let embedConfig = {
    ...
    settings: {
        commands: [...]
    }
};

Kode di bawah ini adalah contoh kode lengkap untuk menambahkan perintah bawaan.

// The new settings that you want to apply to the report.
const newSettings = {
    commands: [
        {
            spotlight: {
                displayOption: models.CommandDisplayOption.Hidden,
            },
            drill: {
                displayOption: models.CommandDisplayOption.Disabled,
            }
        }
    ]
};

// Update the settings by passing in the new settings you have configured.
await report.updateSettings(newSettings);

Konten terkait