ToggleSwitch-Formatierungsslice

ToggleSwitch ist ein einfacher Formatierungsslice zum Darstellen des Objekttyps bool in der capabilities.json-Datei.

Beispiel: ToggleSwitch-Implementierung

In diesem Beispiel wird gezeigt, wie Sie ein ToggleSwitch-Slice mithilfe des FormattingModel-Utils erstellen.

Capabilities-Objekt

Fügen Sie das folgende JSON-Fragment in die datei capabilities.json ein.

{
  // ... same level as dataRoles and dataViewMappings
  "objects": {
    "labels": {
      "properties": {
        "show": {
          "type": {
            "bool": true
          }
        }
      }
    }
  }
}

FormattingModel-Klasse

Fügen Sie das folgende Codefragment in die Einstellungsdatei ein.

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

class LabelsCardSetting extends formattingSettings.SimpleCard {
    name: string = "labels"; // same as capabilities object name
    displayName: string = "Labels";

    public showLabels: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "show", // same as capabilities property name
        displayName: "Show",
        value: true
    });
    
    public slices: formattingSettings.Slice[] = [ this.showLabels ];
}

export class VisualSettings extends formattingSettings.Model {
    public labels: LabelsCardSetting = new LabelsCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.labels];
}

Weitere Optionen

ToggleSwitch-Slice kann auch Umschaltung der Karte der obersten Ebene verwendet werden.

Um ToggleSwitch auf die oberste Ebene festzulegen, entfernen Sie den Slice aus dem Array slices und fügen Sie die folgende Zeile zur CardSettings-Klasse hinzu:

topLevelSlice: formattingSettings.ToggleSwitch = this.showLabels;

Die endgültige Formatierungseinstellungsdatei sollte mit diesem Beispiel übereinstimmen:

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

class LabelsCardSetting extends formattingSettings.SimpleCard {
    name: string = "labels"; // same as capabilities object name
    displayName: string = "Labels";

    public showLabels: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
        name: "show", // same as capabilities property name
        displayName: "Show",
        value: true
    });
    
    topLevelSlice: formattingSettings.ToggleSwitch = this.showLabels;
    public slices: formattingSettings.Slice[] = [];
}

export class VisualSettings extends formattingSettings.Model {
    public labels: LabelsCardSetting = new LabelsCardSetting();
    public cards: formattingSettings.SimpleCard[] = [this.labels];
}

Verwandte Inhalte

• Formatbereich
• FormattingModel-Utils