Megosztás:

Formázási beállítások csoport

A formázási csoport a másodlagos szintű tulajdonságok csoportosítási tárolója. Egyes formázási beállítások kártyáiban lehetnek csoportok. A csoportok szeletekből állnak, és kibonthatók/összecsukhatók.

A formázási beállítások csoportjának implementálása

Ebben a példában bemutatjuk, hogyan hozhat létre egyéni vizualizációformázási modellt egy összetett kártya és két csoportformázásmodell utilhasználatával. A kártya két csoportból áll:

  • LabelsSettingsGroup két egyszerű tulajdonsággal
    • Precizitás
    • Megjelenítési egységek
  • IconSettingsGroup egyetlen egyszerű tulajdonsággal
    • Átlátszatlanság

Előfeltételek

Ha összetett tárolóval rendelkező formázási modellt szeretne létrehozni a formázási modell segédprogramok használatával,

Példa

Először adjon hozzá objektumokat a capabilities.json fájlhoz:

{
  // ... 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
          }
        }
      }
    },
  }
}

Ezután szúrja be a következő kódrészletet a beállításfájlba:

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

class LabelsSettingsGroup 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 = "labelsGroup";
    displayName: string = "Labels group";
    collapsible: boolean = false;
    slices: formattingSettings.Slice[] = [this.displayUnits, this.precision];
}

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

    name: string = "iconsGroup";
    displayName: string = "Icons group";
    slices: formattingSettings.Slice[] = [this.opacity];
}

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

    public labelsGroup: LabelsSettingsGroup = new LabelsSettingsGroup();
    public iconsGroup: IconsSettingsGroup = new IconsSettingsGroup();

    topLevelSlice: formattingSettings.ToggleSwitch = this.show;
    name: string = "values";
    displayName: string = "Values settings";
    groups: formattingSettings.Group[] = [this.labelsGroup, this.iconsGroup];
}

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

Kövesse a Formázási panel oktatóanyagából a 4–8. lépéseket.

Az eredményként kapott panel a következő:

Csoport képernyőképe.

Kapcsolódó tartalom

  • Last updated on