API การจัดรูปแบบบนวัตถุ (ตัวอย่าง)

บทความ
02/20/2024

การจัดรูปแบบ วัตถุช่วยให้ผู้ใช้สามารถปรับเปลี่ยนรูปแบบของวิชวลได้อย่างรวดเร็วและง่ายดายโดยการเลือกองค์ประกอบที่ต้องการปรับเปลี่ยนโดยตรง เมื่อเลือกองค์ประกอบ บานหน้าต่างรูปแบบจะนําทางโดยอัตโนมัติและขยายการตั้งค่าการจัดรูปแบบเฉพาะสําหรับองค์ประกอบที่เลือก สําหรับข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบบนวัตถุ ให้ดู การจัดรูปแบบบนวัตถุใน Power BI Desktop

ในการเพิ่มฟังก์ชันการทํางานเหล่านี้ไปยังวิชวลของคุณ แต่ละวิชวลจําเป็นต้องมีตัวเลือกลักษณะการเลือกย่อย และทางลัดสําหรับแต่ละภูมิภาคที่สามารถเลือกย่อยได้

หมายเหตุ

วิชวลที่สนับสนุนการจัดรูปแบบบนวัตถุจําเป็นต้องใช้ getFormattingModel API ซึ่งพร้อมใช้งานจาก API เวอร์ชัน 5.1
ถ้าคุณกําลังใช้ powerbi-visuals-utils-formattingmodel ให้ใช้เวอร์ชัน 6.0.0 อย่างน้อย

สร้างประสบการณ์ใช้งานบนวัตถุ

ใช้บริการการเลือกย่อยเมื่อผู้ใช้เลือกองค์ประกอบที่สามารถเลือกย่อยได้เพื่อส่งการเลือกย่อยใน Power BI ให้รูปแบบการเลือกย่อยและทางลัดโดยใช้ API การแบ่งส่วนย่อย สามารถใช้ตัวช่วยการเลือกย่อยเพื่อลดความซับซ้อนของกระบวนการได้

โหมดรูปแบบ

โหมดรูปแบบเป็นโหมดใหม่ที่ผู้ใช้สามารถเปิด onObject และปิดการจัดรูปแบบเมื่ออยู่ในโหมดการเขียน วิชวลได้รับการอัปเดตด้วยสถานะของโหมดรูปแบบในตัวเลือกการอัปเดต ตัวเลือกการอัปเดตยังรวมถึงการเลือกย่อยที่เลือกในปัจจุบันเป็นCustomVisualSubSelection

วิธีการใช้ API การจัดรูปแบบบนวัตถุ

ไฟล์ความสามารถ

ใน ไฟล์ capabilites.json ให้เพิ่มคุณสมบัติต่อไปนี้เพื่อประกาศว่าวิชวลรองรับการจัดรูปแบบบนวัตถุ:

{
  "supportsOnObjectFormatting": true,
  "enablePointerEventsFormatMode": true,
}

อินเทอร์เฟซ IVisual

วิชวลจําเป็นต้องใช้ VisualOnObjectFormatting อินเทอร์เฟซเป็นส่วนหนึ่งของอินเทอร์เฟซ IVisual

การจัดรูปแบบ VisualOnObject ประกอบด้วยสามวิธี:

getSubSelectionStyles
getSubSelectionShortcuts
getSubSelectables

getSubSelectionStyles

แต่ละวิชวลจําเป็นในการใช้ getSubSelectionStyles เมธอด ซึ่งเรียกว่าเมื่อองค์ประกอบที่สามารถเลือกย่อยได้ถูกกําหนดย่อย วิธีการ getSubSelectionStyles จะมาพร้อมกับองค์ประกอบที่เลือกย่อยปัจจุบันเป็นCustomVisualSubSelectionอาร์เรย์ และคาดว่าจะส่งคืนSubSelectionStylesออบเจ็กต์ หรือundefined

สไตล์การเลือกย่อยมีสามประเภทที่ครอบคลุมสถานการณ์ส่วนใหญ่:

Text
ข้อความตัวเลข
รูปร่าง

วัตถุแต่ละ SubSelectionStyles ชนิดจะมอบประสบการณ์ใช้งานที่แตกต่างกันสําหรับผู้ใช้สําหรับการแก้ไขลักษณะขององค์ประกอบ

getSubSelectionShortcuts

เพื่อให้ตัวเลือกเพิ่มเติมสําหรับผู้ใช้ วิชวลต้องใช้ getSubSelectionShortcuts วิธีการ วิธีนี้จะแสดงเป็น VisualSubSelectionShortcuts หรือundefined นอกจากนี้ หากมี SubSelectionShortcuts VisualNavigateSubSelectionShortcut จะต้องระบุ ด้วย เพื่อให้เมื่อผู้ใช้เลือกองค์ประกอบย่อย และบานหน้าต่างรูปแบบเปิดอยู่ บานหน้าต่างจะเลื่อนไปยังการ์ดที่เหมาะสมโดยอัตโนมัติ

มีทางลัดการเลือกย่อยหลายรายการเพื่อปรับเปลี่ยนสถานะวิชวล แต่ละรายการจะกําหนดรายการเมนูในเมนูบริบทด้วยป้ายชื่อที่เหมาะสม

เมนูการแก้ความกํากวมของการเลือกย่อย: เมนูการขยายความคลุมเครือในออบเจ็กต์มีวิธีการสําหรับผู้ใช้เพื่อเลือกการเลือกย่อยที่ต้องการเมื่อไม่ชัดเจนว่าการเลือกองค์ประกอบภาพใดที่กําลังถูกเลือกย่อย ซึ่งมักจะเกิดขึ้นเมื่อผู้ใช้เลือกย่อยพื้นหลังของวิชวล สําหรับเมนูที่ไม่กํากวมเพื่อแสดงการเลือกย่อยเพิ่มเติม วิชวลต้องระบุการเลือกย่อยทั้งหมดผ่าน getSubSelectables เมธอด

getSubSelectables

เมื่อต้องการให้การเลือกย่อยไปยังเมนูการแก้ความกํากวม วิชวลจําเป็นต้องใช้ getSubSelectables เมธอด วิธีนี้มีอาร์กิวเมนต์ที่เป็นทางเลือก filterType ของชนิด SubSelectionStylesType และแสดงอาร์เรย์ ของ CustomVisualSubSelection หรือundefined HTMLSubSelectionHelperถ้ามีการใช้ เพื่อสร้างการเลือกย่อย คุณสามารถใช้วิธีการ HTMLSubSelectionHelper.getSubSelectables() เพื่อรวบรวมองค์ประกอบที่สามารถเลือกได้ย่อยจาก DOM

การเลือกย่อยการแก้ไขข้อความโดยตรง: ด้วยการจัดรูปแบบบนวัตถุ คุณสามารถดับเบิลคลิกที่ข้อความขององค์ประกอบที่สามารถเลือกได้ย่อยเพื่อแก้ไขโดยตรง เพื่อให้สามารถแก้ไขได้โดยตรง คุณจําเป็นต้องใส่ RectangleSubSelectionOutline คุณสมบัติ cVDirectEdit ที่เหมาะสมที่เติมด้วยวัตถุ SubSelectableDirectEdit เค้าร่างสามารถระบุเป็นเค้าร่างแบบกําหนดเองหรือถ้าคุณกําลังใช้ HTMLSubSelectionHelper คุณสามารถใช้ SubSelectableDirectEdit แอตทริบิวต์ได้ (ดูแอตทริบิวต์ที่กําหนดโดย HTMLSubSelectionHelper)

การเพิ่มการแก้ไขโดยตรงสําหรับจุดข้อมูลเฉพาะ (โดยใช้ตัวเลือก) ยังไม่ได้รับการสนับสนุน

อินเทอร์เฟส FormattingId

อินเทอร์เฟซต่อไปนี้ใช้เพื่ออ้างอิง subSelection ทางลัดและสไตล์

interface FormattingId {
            objectName: string;
            propertyName: string;
            selector?: powerbi.data.Selector;
        }

objectName: ชื่อวัตถุตามที่ประกาศใน capabilities.json
propertyName: ชื่อคุณสมบัติของวัตถุตามที่ประกาศใน capabilities.json
ตัวเลือก: ถ้าจุดข้อมูลมี selectionId ให้ใช้ selectionId.getSelector() ตัวเลือกนี้จะต้องเหมือนกับที่ระบุไว้สําหรับส่วนแบบจําลองการจัดรูปแบบ

ตัวอย่าง

ในตัวอย่างนี้ เราสร้างวิชวลแบบกําหนดเองที่มีสองวัตถุ และ colorSelector directEdit เราใช้ HTMLSubSelectionHelper จาก onobjectFormatting utils เพื่อจัดการงานการเลือกย่อยส่วนใหญ่ สําหรับข้อมูลเพิ่มเติม ให้ดู ยูทิลิตี้บนวัตถุ

ก่อนอื่น เราสร้างการ์ดสําหรับบานหน้าต่างการจัดรูปแบบและให้ การเลือกย่อย hortcuts และ สไตล์ สําหรับแต่ละการเลือกย่อย

กําหนดวัตถุ

กําหนดวัตถุและประกาศว่าวิชวลสนับสนุนการจัดรูปแบบ OnObject ใน capabilities.json:

"objects": {
      "directEdit": {
      "properties": {
        "show": {
          "displayName": "Show",
          "type": {
            "bool": true
          }
        },
        "textProperty": {
          "displayName": "Text",
          "type": {
            "text": true
          }
        },
        "fontFamily": {
          "type": {
            "formatting": {
              "fontFamily": true
            }
          }
        },
        "fontSize": {
          "type": {
            "formatting": {
              "fontSize": true
            }
          }
        },
        "bold": {
          "type": {
            "bool": true
          }
        },
        "italic": {
          "type": {
            "bool": true
          }
        },
        "underline": {
          "type": {
            "bool": true
          }
        },
        "fontColor": {
          "displayName": "Font Color",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        },
        "background": {
          "displayName": "Background",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        },
        "position": {
          "displayName": "Position",
          "type": {
            "enumeration": [
              { "displayName": "Left", "value": "Left" }, { "displayName": "Right", "value": "Right" }
            ]
          }
        }
      }
    },
    "colorSelector": {
      "displayName": "Data Colors",
      "properties": {
        "fill": {
          "displayName": "Color",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        }
      }
    },
   },
  "supportsOnObjectFormatting": true,
  "enablePointerEventsFormatMode": true,

สร้างการ์ดการจัดรูปแบบ

สร้างการ์ดการจัดรูปแบบโดยใช้ ยูทิลิตี้การจัดรูปแบบ Model

การตั้งค่าการ์ดตัวเลือกสี

class ColorSelectorCardSettings extends Card {
    name: string = "colorSelector";
    displayName: string = "Data Colors";
    slices = [];
}

เพิ่มวิธีการในการจัดรูปแบบการตั้งค่าเพื่อให้เราสามารถใส่ส่วนข้อมูลแบบไดนามิกสําหรับวัตถุ colorSelector (จุดข้อมูลของเรา)

populateColorSelector(dataPoints: BarChartDataPoint[]) {
        let slices: formattingSettings.ColorPicker[] = this.colorSelector.slices;
        if (dataPoints) {
            dataPoints.forEach(dataPoint => {
                slices.push(new formattingSettings.ColorPicker({
                    name: "fill",
                    displayName: dataPoint.category,
                    value: { value: dataPoint.color },
                    selector: dataPoint.selectionId.getSelector(),
                }));
            });
        }
    }

เราผ่านตัวเลือกของจุดข้อมูลเฉพาะในเขตข้อมูลตัวเลือก ตัวเลือกนี้เป็นตัวเลือกที่ใช้เมื่อใช้งานรับ API ของ OnObject

การตั้งค่าการ์ดแก้ไขโดยตรง

class DirectEditSettings extends Card {
    displayName = 'Direct Edit';
    name = 'directEdit';
    private minFontSize: number = 8;
    private defaultFontSize: number = 11;
    show = new formattingSettings.ToggleSwitch({
        name: "show",
        displayName: undefined,
        value: true,
    });
    topLevelSlice = this.show;
    textProperty = new formattingSettings.TextInput({
        displayName: "Text Property",
        name: "textProperty",
        value: "What is your quest?",
        placeholder: ""
    });
    position = new formattingSettings.ItemDropdown({
        name: 'position',
        items: [{ displayName: 'Left', value: 'Left' }, { displayName: 'Right', value: 'Right' }],
        value: { displayName: 'Right', value: 'Right' }
    });
    font = new formattingSettings.FontControl({
        name: "font",
        displayName: 'Font',
        fontFamily: new formattingSettings.FontPicker({
            name: "fontFamily",
            displayName: "Font Family",
            value: "Segoe UI, wf_segoe-ui_normal, helvetica, arial, sans-serif"
        }),
        fontSize: new formattingSettings.NumUpDown({
            name: "fontSize",
            displayName: "Font Size",
            value: this.defaultFontSize,
            options: {
                minValue: {
                    type: powerbi.visuals.ValidatorType.Min,
                    value: this.minFontSize,
                }
            }
        }),
        bold: new formattingSettings.ToggleSwitch({
            name: 'bold',
            displayName: "Font Size",
            value: true
        }),
        italic: new formattingSettings.ToggleSwitch({
            name: 'italic',
            displayName: "Font Size",
            value: true
        }),
        underline: new formattingSettings.ToggleSwitch({
            name: 'underline',
            displayName: "Font Size",
            value: true
        })
    });
    fontColor = new formattingSettings.ColorPicker({
        name: "fontColor",
        displayName: "Color",
        value: { value: "#000000" }
    });
    background = new formattingSettings.ColorPicker({
        name: "background",
        displayName: "Color",
        value: { value: "#FFFFFF" }
    });
    slices = [this.show, this.textProperty, this.font, this.fontColor, this.background, this.position];
}

ใช้แอตทริบิวต์ตัวช่วยการเลือกย่อย

HTMLSubSelectionHelperเพิ่มแอตทริบิวต์ลงในวัตถุของเรา หากต้องการดูว่าแอตทริบิวต์ใดที่ HTMLSubSelectionHelper ระบุ ให้ตรวจสอบเอกสาร ประกอบยูทิลิตี้ออบเจ็กต์

สําหรับแอตทริบิวต์ DirectEdit:

import {
   HtmlSubSelectableClass, HtmlSubSelectionHelper, SubSelectableDirectEdit as SubSelectableDirectEditAttr,
   SubSelectableDisplayNameAttribute, SubSelectableObjectNameAttribute, SubSelectableTypeAttribute 
} from 'powerbi-visuals-utils-onobjectutils';

const DirectEdit: powerbi.visuals.SubSelectableDirectEdit = {
    reference: {
        objectName: 'directEdit',
        propertyName: 'textProperty'
    },
    style: SubSelectableDirectEditStyle.Outline,
};
private visualDirectEditSubSelection = JSON.stringify(DirectEdit);

this.directEditElement
            .classed('direct-edit', true)
            .classed('hidden', !this.formattingSettings.directEditSettings.show.value)
            .classed(HtmlSubSelectableClass, options.formatMode && this.formattingSettings.directEditSettings.show.value)
            .attr(SubSelectableObjectNameAttribute, 'directEdit')
            .attr(SubSelectableDisplayNameAttribute, 'Direct Edit')
            .attr(SubSelectableDirectEditAttr, this.visualDirectEditSubSelection)

ใช้HTMLSubSelectionHelperSubSelectableDirectEditAttrแอตทริบิวต์เพื่อให้การอ้างอิง DirectEdit ของเค้าร่าง DirectEdit ดังนั้นการแก้ไขโดยตรงจะเริ่มขึ้นเมื่อผู้ใช้ดับเบิลคลิกที่องค์ประกอบ

Screenshot showing how the subselection helper works.

สําหรับ colorSelector:

barSelectionMerged
          .attr(SubSelectableObjectNameAttribute, 'colorSelector')
          .attr(SubSelectableDisplayNameAttribute, (dataPoint: BarChartDataPoint) => this.formattingSettings.colorSelector.slices[dataPoint.index].displayName)
          .attr(SubSelectableTypeAttribute, powerbi.visuals.SubSelectionStylesType.Shape)
          .classed(HtmlSubSelectableClass, options.formatMode)

กําหนดการอ้างอิง

กําหนดอินเทอร์เฟซต่อไปนี้เพื่อลดความซับซ้อนของตัวอย่าง:

หมายเหตุ

ที่คุณ cardUid ระบุควรเหมือนกับที่ระบุไว้สําหรับ getFormattingModel API ตัวอย่างเช่น หากคุณกําลังใช้รูปแบบ powerbi-visuals-utils-utils ให้ cardUid ระบุ เป็น Visual-cardName-card โดยที่ cardName เป็นชื่อที่คุณกําหนดให้กับการ์ดนี้ในการตั้งค่าแบบจําลองการจัดรูปแบบ มิฉะนั้น ให้ระบุเป็น Visual-cardUid ที่คุณกําหนดให้กับการ์ดนี้

interface References {
    cardUid?: string;
    groupUid?: string;
    fill?: FormattingId;
    font?: FormattingId;
    fontColor?: FormattingId;
    show?: FormattingId;
    fontFamily?: FormattingId;
    bold?: FormattingId;
    italic?: FormattingId;
    underline?: FormattingId;
    fontSize?: FormattingId;
    position?: FormattingId;
    textProperty?: FormattingId;
}

สําหรับวัตถุประสงค์ของตัวอย่างนี้ ให้สร้าง enum สําหรับชื่อออบเจ็กต์:

const enum BarChartObjectNames {
    ColorSelector = 'colorSelector',
    DirectEdit = 'directEdit'
}

การอ้างอิงสําหรับ directEdit วัตถุ:

const directEditReferences: References = {
    cardUid: 'Visual-directEdit-card',
    groupUid: 'directEdit-group',
    fontFamily: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'fontFamily'
    },
    bold: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'bold'
    },
    italic: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'italic'
    },
    underline: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'underline'
    },
    fontSize: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'fontSize'
    },
    fontColor: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'fontColor'
    },
    show: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'show'
    },
    position: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'position'
    },
    textProperty: {
        objectName: BarChartObjectNames.DirectEdit,
        propertyName: 'textProperty'
    }
};

สําหรับcolorSelector

const colorSelectorReferences: References = {
    cardUid: 'Visual-colorSelector-card',
    groupUid: 'colorSelector-group',
    fill: {
        objectName: BarChartObjectNames.ColorSelector,
        propertyName: 'fill'
    }
};

ใช้ API

ตอนนี้มาใช้รับ API สําหรับการจัดรูปแบบ onObject และกําหนดไว้ใน visualOnObjectFormatting:

ในรหัสคอนสตรักเตอร์ ใส่วิธีการรับใน visualOnObjectFormatting:

public visualOnObjectFormatting: powerbi.extensibility.visual.VisualOnObjectFormatting;
constructor(options: VisualConstructorOptions) {
        this.subSelectionHelper = HtmlSubSelectionHelper.createHtmlSubselectionHelper({
                 hostElement: options.element,
                 subSelectionService: options.host.subSelectionService,
                 selectionIdCallback: (e) => this.selectionIdCallback(e),
            });

 this.visualOnObjectFormatting = {
                getSubSelectionStyles: (subSelections) => this.getSubSelectionStyles(subSelections),
                getSubSelectionShortcuts: (subSelections, filter) => this.getSubSelectionShortcuts(subSelections, filter),
                getSubSelectables: (filter) => this. getSubSelectables(filter)
            }
   }

private getSubSelectionStyles(subSelections: CustomVisualSubSelection[]): powerbi.visuals.SubSelectionStyles | undefined {
        const visualObject = subSelections[0]?.customVisualObjects[0];
        if (visualObject) {
            switch (visualObject.objectName) {
                case BarChartObjectNames.ColorSelector:
                    return this.getColorSelectorStyles(subSelections);
                 case BarChartObjectNames.DirectEdit:
                    return this.getDirectEditStyles();
            }
        }
    }

private getSubSelectionShortcuts(subSelections: CustomVisualSubSelection[], filter: SubSelectionShortcutsKey | undefined):    VisualSubSelectionShortcuts | undefined {
        const visualObject = subSelections[0]?.  customVisualObjects[0];
        if (visualObject) {
            switch (visualObject.objectName) {
                case BarChartObjectNames.ColorSelector:
                    return this.getColorSelectorShortcuts(subSelections);
                case BarChartObjectNames.DirectEdit:
                    return this.getDirectEditShortcuts();
            }
        }
    }

ใช้ทางลัด getSubSelection และสไตล์สําหรับ colorSelector:

private getColorSelectorShortcuts(subSelections:  CustomVisualSubSelection[]): VisualSubSelectionShortcuts   {
        const selector = subSelections[0].customVisualObjects[0].selectionId?.getSelector();
        return [
            {
                type: VisualShortcutType.Reset,
                relatedResetFormattingIds: [{
                    ...colorSelectorReferences.fill,
                    selector
                }],
            },
            {
                type: VisualShortcutType.Navigate,
                destinationInfo: { cardUid: colorSelectorReferences.cardUid },
                label: 'Color'
            }
        ];
    }

ทางลัดด้านบนจะส่งกลับรายการเมนูที่เกี่ยวข้องในเมนูบริบทและเพิ่มฟังก์ชันการทํางานต่อไปนี้:

VisualShortcutType.Navigate: เมื่อผู้ใช้เลือกบนหนึ่งในแถบ (จุดข้อมูล) และบานหน้าต่างการจัดรูปแบบจะเปิดขึ้น บานหน้าต่างการจัดรูปแบบจะเลื่อนไปที่การ์ดตัวเลือกสีและเปิดขึ้น
VisualShortcutType.Reset: เพิ่มทางลัดรีเซ็ตไปยังเมนูบริบท ซึ่งจะเปิดใช้งานถ้าสีเติมมีการเปลี่ยนแปลง

private getColorSelectorStyles(subSelections: CustomVisualSubSelection[]): SubSelectionStyles {
        const selector = subSelections[0].customVisualObjects[0].selectionId?.getSelector();
        return {
            type: SubSelectionStylesType.Shape,
            fill: {
                label: 'Fill',
                reference: {
                    ...colorSelectorReferences.fill,
                 selector
                },
            },
        };
    }

เมื่อผู้ใช้คลิกขวาบนแถบ รายการต่อไปนี้จะปรากฏขึ้น:

Screenshot of user interface when a user right-clicks on a bar.

เมื่อเปลี่ยนสี:

Screenshot of changing color.

ทางลัดส่วนย่อย

หากต้องการใช้ทางลัดการเลือกย่อยและสไตล์สําหรับ directEdit:

private getDirectEditShortcuts(): VisualSubSelectionShortcuts {
        return [
            {
                type: VisualShortcutType.Reset,
                relatedResetFormattingIds: [
                    directEditReferences.bold,
                    directEditReferences.fontFamily,
                    directEditReferences.fontSize,
                    directEditReferences.italic,
                    directEditReferences.underline,
                    directEditReferences.fontColor,
                    directEditReferences.textProperty
                ]
            },
            {
                type: VisualShortcutType.Toggle,
                relatedToggledFormattingIds: [{
                    ...directEditReferences.show,
                }],
                ...directEditReferences.show,
                disabledLabel: 'Delete',
            },
            {
                type: VisualShortcutType.Picker,
                ...directEditReferences.position,
                label: 'Position'
            },
            {
                type: VisualShortcutType.Navigate,
                destinationInfo: { cardUid: directEditReferences.cardUid },
                label: 'Direct edit'
            }
        ];
    }

ทางลัดนี้จะเพิ่มรายการเมนูที่เกี่ยวข้องในเมนูบริบทและเพิ่มฟังก์ชันการทํางานต่อไปนี้:

VisualShortcutType.Reset: เพิ่มการรีเซ็ตไปยังรายการเริ่มต้นไปยังเมนูบริบท เมื่อหนึ่งในคุณสมบัติที่ระบุไว้ในอาร์เรย์ relatedResetFormattingIds มีการเปลี่ยนแปลง
VisualShortcutType.Toggle: เพิ่มตัวเลือกลบไปยังเมนูบริบท เมื่อคลิกแล้ว สวิตช์สลับสําหรับ การ์ด directEdit จะถูกปิด
VisualShortcutType.Picker: เพิ่มตัวเลือกในเมนูบริบทเพื่อเลือกระหว่างขวาและซ้ายเนื่องจากเราได้เพิ่มชิ้นตําแหน่งในการ์ดการจัดรูปแบบสําหรับ directEdit
VisualShortcutType.Navigate: เมื่อบานหน้าต่างรูปแบบเปิดอยู่และผู้ใช้เลือกองค์ประกอบ directEdit บานหน้าต่างรูปแบบจะเลื่อนและเปิดการ์ด directEdit

private getDirectEditStyles(): SubSelectionStyles {
        return {
            type: powerbi.visuals.SubSelectionStylesType.Text,
            fontFamily: {
                reference: {
                    ...directEditReferences.fontFamily
                },
                label: 'font family'
            },
            bold: {
                reference: {
                    ...directEditReferences.bold
                },
                label: 'bold'
            },
            italic: {
                reference: {
                    ...directEditReferences.italic
                },
                label: 'italic'
            },
            underline: {
                reference: {
                    ...directEditReferences.underline
                },
                label: 'underline'
            },
            fontSize: {
                reference: {
                    ...directEditReferences.fontSize
                },
                label: 'font size'
            },
            fontColor: {
                reference: {
                    ...directEditReferences.fontColor
                },
                label: 'font color'
            },
            background: {
                reference: {
                    objectName: 'directEdit',
                    propertyName: 'background'
                },
                label: 'background'
            }
        }
    }

เราให้คุณสมบัติที่เกี่ยวข้องตามที่เราได้เพิ่มไว้ในการจัดรูปแบบการตั้งค่า

รูปภาพต่อไปนี้แสดงให้เห็นว่า UI มีลักษณะอย่างไรเมื่อคลิกขวาบนองค์ประกอบ DirectEdit:

Screenshot of the direct edit interface.

การแปลเป็นภาษาท้องถิ่น

วิชวลควรจัดการกับการแปลเป็นภาษาท้องถิ่นและมีสตริงที่เป็นภาษาท้องถิ่น

ทรัพยากร GitHub

ทั้งหมดบนอินเทอร์เฟซการจัดรูปแบบวัตถุสามารถพบได้ใน (ลิงก์ที่จะให้เมื่อเปิดตัว API) ใน on-object-formatting-api.d.ts
เราขอแนะนําให้ใช้ [บนยูทิลิตี้วัตถุ] ซึ่งรวมถึง [HTMLSubSelectionHelper] (ลิงก์ที่จะให้เมื่อเผยแพร่ API)
คุณสามารถค้นหาตัวอย่างของวิ ชวลแบบกําหนดเอง SampleBarChart ที่ใช้ API เวอร์ชัน 5.8.0 และใช้การสนับสนุนสําหรับการจัดรูปแบบวัตถุโดยใช้ยูทิลิตี้บนวัตถุที่ (ลิงก์ที่จะให้เมื่อมีการเผยแพร่ API)

แชร์ผ่าน

API การจัดรูปแบบบนวัตถุ (ตัวอย่าง)

สร้างประสบการณ์ใช้งานบนวัตถุ

โหมดรูปแบบ

วิธีการใช้ API การจัดรูปแบบบนวัตถุ

ไฟล์ความสามารถ

อินเทอร์เฟซ IVisual

getSubSelectionStyles

getSubSelectionShortcuts

getSubSelectables

อินเทอร์เฟส FormattingId

ตัวอย่าง

กําหนดวัตถุ

สร้างการ์ดการจัดรูปแบบ

การตั้งค่าการ์ดตัวเลือกสี

การตั้งค่าการ์ดแก้ไขโดยตรง

ใช้แอตทริบิวต์ตัวช่วยการเลือกย่อย

กําหนดการอ้างอิง

ใช้ API

ทางลัดส่วนย่อย

การแปลเป็นภาษาท้องถิ่น

ทรัพยากร GitHub

คำติชม

แหล่งทรัพยากรเพิ่มเติม

แชร์ผ่าน

API การจัดรูปแบบบนวัตถุ (ตัวอย่าง)

สร้างประสบการณ์ใช้งานบนวัตถุ

โหมดรูปแบบ

วิธีการใช้ API การจัดรูปแบบบนวัตถุ

ไฟล์ความสามารถ

อินเทอร์เฟซ IVisual

getSubSelectionStyles

getSubSelectionShortcuts

getSubSelectables

อินเทอร์เฟส FormattingId

ตัวอย่าง

กําหนดวัตถุ

สร้างการ์ดการจัดรูปแบบ

การตั้งค่าการ์ดตัวเลือกสี

การตั้งค่าการ์ดแก้ไขโดยตรง

ใช้แอตทริบิวต์ตัวช่วยการเลือกย่อย

กําหนดการอ้างอิง

ใช้ API

ทางลัดส่วนย่อย

การแปลเป็นภาษาท้องถิ่น

ทรัพยากร GitHub

เนื้อหาที่เกี่ยวข้อง

คำติชม

แหล่งทรัพยากรเพิ่มเติม