Menambahkan panel format baru ke visual kustom menggunakan API
Penting
Untuk menambahkan panel Format baru ke visual kustom, sebaiknya gunakan formattingmodel utils.
Meskipun sebaiknya gunakan formattingmodel dengan panel format baru, contoh ini menunjukkan cara membangun model pemformatan visual kustom dengan satu kartu hanya menggunakan API.
Contoh: Memformat kartu data
Kartu ini memiliki dua grup:
-
kelompok kontrol font dengan satu properti komposit
- Kontrol font
-
Grup desain data dengan dua properti sederhana
- Warna font
- Perataan garis lurus
Pertama, tambahkan objek ke file kemampuan:
"objects": {
"dataCard": {
"properties": {
"displayUnitsProperty": {
"type":
{
"formatting": {
"labelDisplayUnits": true
}
}
},
"fontSize": {
"type": {
"formatting": {
"fontSize": true
}
}
},
"fontFamily": {
"type": {
"formatting": {
"fontFamily": true
}
}
},
"fontBold": {
"type": {
"bool": true
}
},
"fontUnderline": {
"type": {
"bool": true
}
},
"fontItalic": {
"type": {
"bool": true
}
},
"fontColor": {
"type": {
"fill": {
"solid": {
"color": true
}
}
}
},
"lineAlignment": {
"type": {
"formatting": {
"alignment": true
}
}
}
}
}
}
Kemudian, ciptakan getFormattingModel
public getFormattingModel(): powerbi.visuals.FormattingModel {
// Building data card, We are going to add two formatting groups "Font Control Group" and "Data Design Group"
let dataCard: powerbi.visuals.FormattingCard = {
description: "Data Card Description",
displayName: "Data Card",
uid: "dataCard_uid",
groups: []
}
// Building formatting group "Font Control Group"
// Notice that "descriptor" objectName and propertyName should match capabilities object and property names
let group1_dataFont: powerbi.visuals.FormattingGroup = {
displayName: "Font Control Group",
uid: "dataCard_fontControl_group_uid",
slices: [
{
uid: "dataCard_fontControl_displayUnits_uid",
displayName:"display units",
control: {
type: powerbi.visuals.FormattingComponent.Dropdown,
properties: {
descriptor: {
objectName: "dataCard",
propertyName:"displayUnitsProperty"
},
value: 0
}
}
},
// FontControl slice is composite slice, It means it contain multiple properties inside it
{
uid: "data_font_control_slice_uid",
displayName: "Font",
control: {
type: powerbi.visuals.FormattingComponent.FontControl,
properties: {
fontFamily: {
descriptor: {
objectName: "dataCard",
propertyName: "fontFamily"
},
value: "wf_standard-font, helvetica, arial, sans-serif"
},
fontSize: {
descriptor: {
objectName: "dataCard",
propertyName: "fontSize"
},
value: 16
},
bold: {
descriptor: {
objectName: "dataCard",
propertyName: "fontBold"
},
value: false
},
italic: {
descriptor: {
objectName: "dataCard",
propertyName: "fontItalic"
},
value: false
},
underline: {
descriptor: {
objectName: "dataCard",
propertyName: "fontUnderline"
},
value: false
}
}
}
}
],
};
// Building formatting group "Font Control Group"
// Notice that "descriptor" objectName and propertyName should match capabilities object and property names
let group2_dataDesign: powerbi.visuals.FormattingGroup = {
displayName: "Data Design Group",
uid: "dataCard_dataDesign_group_uid",
slices: [
// Adding ColorPicker simple slice for font color
{
displayName: "Font Color",
uid: "dataCard_dataDesign_fontColor_slice",
control: {
type: powerbi.visuals.FormattingComponent.ColorPicker,
properties: {
descriptor:
{
objectName: "dataCard",
propertyName: "fontColor"
},
value: { value: "#01B8AA" }
}
}
},
// Adding AlignmentGroup simple slice for line alignment
{
displayName: "Line Alignment",
uid: "dataCard_dataDesign_lineAlignment_slice",
control: {
type: powerbi.visuals.FormattingComponent.AlignmentGroup,
properties: {
descriptor:
{
objectName: "dataCard",
propertyName: "lineAlignment"
},
mode: powerbi.visuals.AlignmentGroupMode.Horizonal,
value: "right"
}
}
},
]
};
// Add formatting groups to data card
dataCard.groups.push(group1_dataFont);
dataCard.groups.push(group2_dataDesign);
// Build and return formatting model with data card
const formattingModel: powerbi.visuals.FormattingModel = { cards: [dataCard] };
return formattingModel;
}
Berikut adalah panel yang dihasilkan:
Mengatur ulang pengaturan ke default
Panel format baru memiliki opsi untuk mengatur ulang semua nilai properti kartu pemformatan ke default dengan mengklik tombol Reset ke default yang muncul di kartu terbuka.
Untuk mengaktifkan fitur ini, tambahkan daftar deskriptor properti kartu pemformatan ke kartu pemformatan revertToDefaultDescriptors.
Contoh berikut menunjukkan cara menambahkan reset ke tombol default:
let dataCard: powerbi.visuals.FormattingCard = {
displayName: "Data Card",
// ... card parameters and groups list
revertToDefaultDescriptors: [
{
objectName: "dataCard",
propertyName:"displayUnitsProperty"
},
{
objectName: "dataCard",
propertyName: "fontFamily"
},
// ... the rest of properties descriptors
]
};
Menambahkan revertToDefaultDescriptors ke kartu pemformatan juga memungkinkan untuk mengatur ulang semua properti kartu pemformatan sekaligus dengan mengklik mengatur ulang semua pengaturan ke tombol default di bilah atas panel format:
Pemilih properti pemformatan
Pemilih opsional dalam pendeskripsi properti pemformatan menentukan di mana setiap properti terikat dalam dataView. Ada empat pilihan yang berbeda. Baca tentang mereka dalam jenis pemilih objek .
Lokalisasi
Untuk informasi selengkapnya tentang fitur pelokalan dan untuk menyiapkan lingkungan pelokalan, lihat Menambahkan bahasa lokal ke visual Power BI Anda Menggunakan manajer pelokalan untuk memformat komponen yang ingin Anda lokalkan:
displayName: this.localization.getDisplayName("Font_Color_DisplayNameKey");
description: this.localization.getDisplayName("Font_Color_DescriptionKey");
Untuk melokalisasi utilitas model pemformatan pemformatan lokal utilitas.
Sumber Daya GitHub
Semua antarmuka model pemformatan dapat ditemukan di GitHub - microsoft/powerbi-visuals-api: API visual kustom Power BI di "formatting-model-api.d.ts"
Sebaiknya gunakan util model pemformatan baru di GitHub - microsoft/powerbi-visuals-utils-formattingmodel: Utils pembantu model pemformatan visual Power BI
Anda dapat menemukan contoh visual khusus SampleBarChart yang menggunakan API versi 5.1.0 dan mengimplementasikan
getFormattingModeldengan menggunakan utilitas model pemformatan baru di GitHub - microsoft/PowerBI-visuals-sampleBarChart: Visual Khusus Bagan Batang untuk tutorial.
Konten terkait
Pertanyaan lebih lanjut? Bertanya kepada Komunitas Power BI