Kontainer pengaturan pemformatan

Kontainer pengaturan pemformatan adalah kontainer pengelompokan properti tingkat sekunder. Ini mengelompokkan irisan ke dalam item kontainer dan memungkinkan pengguna untuk beralih di antara item ini menggunakan elemen dropdown.

Implementasi kontainer untuk pengaturan pemformatan

Dalam contoh ini, kami menunjukkan cara membuat model pemformatan kustom visual dengan satu kontainer menggunakan utilitas pemformatan model .
Kontainer memiliki dua item:

• LabelsSettingsContainerItem dengan dua atribut sederhana
  • Presisi
  • Satuan tampilan
• IconsSettingsContainerItem dengan satu properti sederhana
  • Keburaman

Prasyarat

Untuk membangun model pemformatan dengan kontainer komposit menggunakan util formattingmodel, Anda perlu

• Perbarui versi powerbi-visuals-api ke 5.1 dan yang lebih tinggi.
• Instal powerbi-visuals-utils-formattingmodel.
• Inisialisasi pemformatan pengaturan service.
• Inisialisasi kelas formattingSettingsModel .

Contoh

Pertama, tambahkan objek ke dalam file capabilities.json:

{
  // ... same level as dataRoles and dataViewMappings
  "objects": {
    "values": {
      "properties": {
        "show": {
          "type": {
            "bool": true
          }
        },
        "displayUnits": {
          "type": {
            "formatting": {
              "labelDisplayUnits": true
            }
          }
        },
        "precision": {
          "type": {
            "integer": true
          }
        },
        "opacity": {
          "type": {
            "integer": true
          }
        }
      }
    }
  }
}

Kemudian, sisipkan fragmen kode berikut ke dalam file pengaturan:

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

class LabelsSettingsContainerItem extends formattingSettings.SimpleCard {
    public displayUnits: formattingSettings.AutoDropdown = new formattingSettings.AutoDropdown({
        name: "displayUnits",
        displayName: "Display units",
        value: 0
    });

    public precision: formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
        name: "precision",
        displayName: "Precision",
        value: 2
    });

    name: string = "labelsContainer";
    displayName: string = "All labels";
    slices: formattingSettings.Slice[] = [this.displayUnits, this.precision];
}

class IconsSettingsContainerItem extends formattingSettings.SimpleCard {
    public opacity: formattingSettings.Slider = new formattingSettings.Slider({
        name: "opacity",
        displayName: "Opacity",
        value: 50
    });

    name: string = "iconsContainer";
    displayName: string = "All icons";
    slices: formattingSettings.Slice[] = [this.opacity];
}

class ValuesCardSetting extends formattingSettings.SimpleCard {
    public show: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "show",
        value: true
    });

    public labelsContainerItem: LabelsSettingsContainerItem = new LabelsSettingsContainerItem();
    public iconsContainerItem: IconsSettingsContainerItem = new IconsSettingsContainerItem();
  
    public container: formattingSettings.Container = {
        displayName: "Apply settings to",
        containerItems: [this.labelsContainerItem, this.iconsContainerItem]
    };

    topLevelSlice: formattingSettings.ToggleSwitch = this.show;
    name: string = "values";
    displayName: string = "Values settings";
}

export class VisualSettingsModel  extends formattingSettings.Model {
    public values: ValuesCardSetting = new ValuesCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.values];
}

Ikuti langkah 4 - 8 dari panel pemformatan Build tutorial.

Berikut adalah panel yang dihasilkan:

Konten terkait

• Panel Format
• Memformat model