Panel format dalam visual kustom Power BI

Menggunakan API versi 5.1 dan yang lebih baru, pengembang dapat membuat visual dengan panel Format. Pengembang dapat menentukan kartu dan kategorinya untuk properti apa pun dalam visual kustom mereka, sehingga memudahkan pembuat laporan untuk menggunakan visual ini.

API menggunakan metode FormattingModel untuk menyesuaikan bagian panel format dan analitik.

Petunjuk / Saran

Metode getFormattingModel menggantikan metode enumerateObjectInstances dalam versi API sebelumnya.

getFormattingModel mengembalikan FormattingModel yang mendefinisikan tampilan panel pemformatan dan analitik visual.

Selain semua kemampuan panel pemformatan lama, model pemformatan mendukung kemampuan panel format, properti, dan hierarki saat ini.

Cuplikan layar panel pemformatan.

Membuat visual yang mendukung panel Format terbaru

Langkah-langkah umum untuk menambahkan dukungan panel Format ke visual kustom:

  1. Atur apiVersion dalam file pbiviz.json Anda ke 5.1 atau yang lebih baru.

  2. Definisikan semua pengaturan objects dalam file capabilities.json Anda. Objek ini kemudian dipetakan ke properti panel pemformatan. Properti berikut diperlukan untuk setiap objek:

    • nama objek
    • nama properti
    • jenis properti

    Semua properti lainnya, termasuk DisplayName dan description, sekarang opsional.

  3. Bangun FormattingModel visual kustom dengan melakukan salah satu hal berikut ini:

Tentukan properti model pemformatan visual kustom Anda dan buat menggunakan kode (bukan JSON).

  1. Terapkan getFormattingModel API di kelas visual kustom yang mengembalikan model pemformatan visual kustom. (API ini menggantikan enumerateObjectInstances yang digunakan dalam versi sebelumnya).

Contoh implementasi model pemformatan

Properti pemformatan peta

Jika Anda memiliki visual kustom yang dibuat dengan API yang lebih lama dan Ingin memperbaruinya dengan panel format, atau jika Anda membuat visual kustom baru:

  1. Atur apiVersion dalam file pbiviz.json Anda ke 5.1 atau yang lebih baru.

  2. Untuk setiap nama objek dan nama properti di capabilities.json, buat properti pemformatan yang cocok. Properti pemformatan harus memiliki deskriptor yang berisi objectName dan propertyName yang sesuai dengan nama objek dan nama properti di capabilities.json.

Properti objects dalam file kemampuan masih memiliki format yang sama dan tidak perlu diubah.

Misalnya, jika circle objek dalam file capabilities.json Anda didefinisikan seperti ini:

"objects": {
    "circle": {
        "properties": {
            "circleColor": {
                "type": {
                    "fill": {
                        "solid": {
                            "color": true
                        }
                    }
                }
            },
        }
    }
}

Properti pemformatan dalam model Anda harus berjenis ColorPicker dan terlihat seperti ini:

control: {
    type: "ColorPicker",
    properties: {
        descriptor: {
            objectName: "circle",
            propertyName: "circleColor"
        },
        value: {
            value: this.visualSettings.circle.circleColor
        }
    }
}

Anda mendapatkan kesalahan jika salah satu kondisi berikut ini benar:

  • Nama objek atau properti dalam file kapabilitas tidak cocok dengan objek dalam model pemformatan
  • Jenis properti dalam file kapabilitas tidak cocok dengan jenis dalam model pemformatan

Model pemformatan

Model pemformatan adalah tempat Anda menjelaskan dan mengkustomisasi semua properti panel format Anda.

Komponen model pemformatan

Dalam model pemformatan, komponen properti dikelompokkan bersama dalam kategori logis dan subkatoner. Kelompok-kelompok ini membuat model lebih mudah dipindai. Ada lima komponen dasar, dari yang terbesar hingga terkecil:

  • Model pemformatan Kontainer panel terbesar, digunakan untuk memformat antarmuka frontal panel. Ini berisi daftar kartu pemformatan.

  • Kartu pemformatan Kontainer pengelompokan properti pada tingkat tertinggi untuk properti pemformatan. Setiap kartu terdiri dari satu atau beberapa grup pemformatan, seperti yang ditunjukkan di sini.

    Cuplikan layar model pemformatan dengan kartu pemformatan individual.

  • Grup pemformatan
    Wadah pengelompokan properti tingkat kedua. Grup pemformatan ditampilkan sebagai kontainer pengelompokan untuk bagian pemformatan.

    Tangkapan layar kartu pemformatan yang dibagi menjadi grup pemformatan.

  • Memformat kontainer
    Wadah pengelompokan properti tingkat kedua. Wadah pemformatan mengelompokkan bagian pemformatan ke dalam item kontainer terpisah dan memungkinkan pengguna untuk beralih di antara mereka menggunakan daftar drop-down.

    Cuplikan layar kontainer pemformatan.

  • Iringan pemformatan
    Kontainer untuk properti Ada dua jenis irisan:

    • Potongan sederhana: Kontainer properti individual
    • Ikatan komposit: Beberapa kontainer properti terkait dikelompokkan ke dalam satu ikatan pemformatan

    Gambar berikut menunjukkan berbagai jenis irisan. "Font" adalah potongan komposit yang terdiri dari keluarga font, ukuran, dan opsi bold, italic, serta garis bawah. Warna, unit tampilan, dan irisan lainnya adalah potongan sederhana dengan masing-masing satu komponen.

    Tangkapan layar panel format komposit dan irisan sederhana.

Properti pemformatan panel visualisasi

Setiap properti dalam model pemformatan harus cocok dan jenis objek dalam file capabilities.json .

Tabel berikut ini memperlihatkan tipe properti pemformatan dalam file capabilities.json dan kelas jenis yang cocok dalam properti model pemformatan modern:

Tipe Jenis Nilai Kapabilitas Properti Pemformatan
Boolean Bool Saklar Geser
Angka
  • Numerik
  • Bilangan bulat
  • NumUpDown
  • Slider
    		•
    Daftar enumerasi enumerasi:[]
  • MenuTurun
  • ItemFlagsSelection
  • AutoDropdown
  • AutoFlagsSelection
    • * Lihat catatan di bawah ini
    Warna Isi Pemicu Warna
    Gradien FillRule GradientBar: nilai properti harus berupa string yang terdiri dari: minValue[,midValue],maxValue
    Teks Teks
  • TextInput
  • TextArea
    		•

    Objek Pemformatan Kapabilitas

    Tipe Jenis Nilai Kapabilitas Properti Pemformatan
    Ukuran font Ukuran Font NumUpDown
    Kelompok font FontFamily FontPicker
    Perataan Garis Penyelarasan AlignmentGroup
    Unit Tampilan Label LabelDisplayUnits AutoDropDown

    * Properti pemformatan daftar enumerasi berbeda dalam model pemformatan dan dalam file kemampuan.

    • Deklarasikan properti berikut dalam kelas pengaturan pemformatan, termasuk daftar item enumerasi:

      • Daftar Pilihan Item
      • PemilihanFlagItem

    • Deklarasikan properti berikut dalam kelas pengaturan pemformatan, tanpa daftar item enumerasi. Deklarasikan daftar item enumerasi mereka di capabilities.json di bawah objek yang sesuai. (Jenis ini sama seperti pada versi API sebelumnya):

      • AutoDropdown
      • PemilihanBenderaOtomatis

    Properti potongan komposit

    Ikatan komposit pemformatan adalah ikatan pemformatan yang berisi beberapa properti terkait bersama-sama.

    Untuk saat ini kami memiliki dua jenis potongan komposit.

    • FontControl
      Ini membuat semua properti terkait font tetap bersama-sama. Ini terdiri dari properti berikut:

      • Keluarga Font
      • Ukuran Huruf
      • Tebal [opsional]
      • Huruf Miring [opsional]
      • Garis bawah [opsional]

      Cuplikan layar potongan komposit font dengan keluarga font, ukuran font, cetak tebal, cetak miring, dan garis bawah.

      Masing-masing properti ini harus memiliki objek yang sesuai dalam file kemampuan:

      Harta benda Jenis Kemampuan Tipe Pemformatan
      Keluarga Font Pemformatan: {fontFamily} FontPicker
      Ukuran Huruf Pemformatan: {fontSize} NumUpDown
      Tebal Bool BeralihSwitch
      Cetak miring Bool BeralihSwitch
      Menggarisbawahi Bool BeralihSwitch

    • MarginPadding Margin padding menentukan perataan teks dalam visual. Ini terdiri dari properti berikut:

      • Kiri
      • Benar
      • Teratas
      • Bawah

      Masing-masing properti ini harus memiliki objek yang sesuai dalam file kemampuan:

      Harta benda Jenis Kemampuan Tipe Pemformatan
      Kiri Numerik NumUpDown
      Benar Numerik NumUpDown
      Teratas Numerik NumUpDown
      Bawah Numerik NumUpDown

    Sumber daya GitHub

    Konten terkait

    Pertanyaan lebih lanjut? Tanyakan kepada Komunitas Power BI.

    • Last updated on