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
- Werk powerbi-visuals-api-versie bij naar 5.1 en hoger.
- Installeer powerbi-visuals-utils-formattingmodel.
- Initialiseer formatSettingsService.
- Initialiseer FormatSettingsModel klasse.
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: