Share via

Groep Opmaakinstellingen

Een groep voor opmaakinstellingen is een container die eigenschappen op secundair niveau groepeert. Sommige opmaakinstellingenkaarten kunnen groepen binnen hebben. Groepen bestaan uit delen en kunnen worden uitgevouwen/ingeklapt.

Implementatie van groep opmaakinstellingen

In dit voorbeeld laten we zien hoe u een aangepast visueel opmaakmodel maakt met één samengestelde kaart en twee groepen met behulp van formatmodel util. De kaart heeft twee groepen:

  • LabelsSettingsGroup met twee eenvoudige eigenschappen
    • Precisie
    • Weergave-eenheden
  • IconsSettingsGroup met één eenvoudige eigenschap
    • Opaciteit

Voorwaarden

Als u een opmaakmodel met samengestelde container wilt maken met behulp van opmaakmodelhulpmiddelen, moet u

Voorbeeld

Voeg eerst objecten toe aan het capabilities.json-bestand:

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

Voeg vervolgens het volgende codefragment in het instellingenbestand in:

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];
}

Volg stap 4 - 8 in het deelvenster Opmaak maken handleiding.

Dit is het resulterende deelvenster:

schermopname van een groep.

Verwante inhoud

  • Last updated on