แชร์ผ่าน

เพิ่มบานหน้าต่างรูปแบบใหม่ไปยังวิชวลแบบกําหนดเองโดยใช้ API

  • บทความ

สําคัญ

หากต้องการเพิ่มบานหน้าต่างรูปแบบใหม่ลงในวิชวลแบบกําหนดเอง เราขอแนะนําให้ใช้ utils การจัดรูปแบบ

แม้ว่าเราขอแนะนําให้ใช้ยูทิลิตี้การจัดรูปแบบ ยูทิลิตี้รูปแบบ ด้วยบานหน้าต่างรูปแบบใหม่ ตัวอย่างนี้สาธิตวิธีการสร้างแบบจําลองการจัดรูปแบบวิชวลแบบกําหนดเองด้วยการ์ดเดียวโดยใช้ API เท่านั้น

ตัวอย่าง: การจัดรูปแบบการ์ดข้อมูล

การ์ดมีสองกลุ่ม:

  • ควบคุมแบบอักษรของกลุ่มด้วยคุณสมบัติแบบรวมหนึ่งคุณสมบัติ
    • ตัวควบคุมฟอนต์
  • กลุ่มการออกแบบข้อมูลด้วยคุณสมบัติอย่างง่ายสองอย่าง
    • สีแบบอักษร
    • การจัดแนวเส้น

ก่อนอื่น ให้เพิ่มวัตถุไปยังไฟล์ความสามารถ:

"objects": {
        "dataCard": {
            "properties": {
                "displayUnitsProperty": {
                    "type":
                    {
                        "formatting": {
                            "labelDisplayUnits": true
                        }
                    }
                },
                "fontSize": { 
                    "type": {
                        "formatting": {
                            "fontSize": true
                        }
                    }
                },
                "fontFamily": {
                    "type": {
                        "formatting": {
                            "fontFamily": true
                        }
                    }
                },
                "fontBold": {
                    "type": {
                        "bool": true
                    }
                },
                "fontUnderline": {
                    "type": {
                        "bool": true
                    }
                },
                "fontItalic": {
                    "type": {
                        "bool": true
                    }
                },
                "fontColor": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "lineAlignment": {
                    "type": {
                        "formatting": {
                            "alignment": true
                        }
                    }
                }
            }
        }
    }

จากนั้นสร้าง getFormattingModel

    public getFormattingModel(): powerbi.visuals.FormattingModel {
        // Building data card, We are going to add two formatting groups "Font Control Group" and "Data Design Group"
        let dataCard: powerbi.visuals.FormattingCard = {
            description: "Data Card Description",
            displayName: "Data Card",
            uid: "dataCard_uid",
            groups: []
        }

        // Building formatting group "Font Control Group"
        // Notice that "descriptor" objectName and propertyName should match capabilities object and property names
        let group1_dataFont: powerbi.visuals.FormattingGroup = {
            displayName: "Font Control Group",
            uid: "dataCard_fontControl_group_uid",
            slices: [
                {
                    uid: "dataCard_fontControl_displayUnits_uid",
                    displayName:"display units",
                    control: {
                        type: powerbi.visuals.FormattingComponent.Dropdown,
                        properties: {
                            descriptor: {
                                objectName: "dataCard",
                                propertyName:"displayUnitsProperty"
                            },
                            value: 0
                        }
                    }
                },
                // FontControl slice is composite slice, It means it contain multiple properties inside it
                {
                    uid: "data_font_control_slice_uid",
                    displayName: "Font",
                    control: {
                        type: powerbi.visuals.FormattingComponent.FontControl,
                        properties: {
                            fontFamily: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontFamily"
                                },
                                value: "wf_standard-font, helvetica, arial, sans-serif"
                            },
                            fontSize: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontSize"
                                },
                                value: 16
                            },
                            bold: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontBold"
                                },
                                value: false
                            },
                            italic: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontItalic"
                                },
                                value: false
                            },
                            underline: {
                                descriptor: {
                                    objectName: "dataCard",
                                    propertyName: "fontUnderline"
                                },
                                value: false
                            }
                        }
                    }
                }
            ],
        };
        // Building formatting group "Font Control Group"
        // Notice that "descriptor" objectName and propertyName should match capabilities object and property names
        let group2_dataDesign: powerbi.visuals.FormattingGroup = {
            displayName: "Data Design Group",
            uid: "dataCard_dataDesign_group_uid",
            slices: [
                // Adding ColorPicker simple slice for font color
                {
                    displayName: "Font Color",
                    uid: "dataCard_dataDesign_fontColor_slice",
                    control: {
                        type: powerbi.visuals.FormattingComponent.ColorPicker,
                        properties: {
                            descriptor:
                            {
                                objectName: "dataCard",
                                propertyName: "fontColor"
                            },
                            value: { value: "#01B8AA" }
                        }
                    }
                },
                // Adding AlignmentGroup simple slice for line alignment
                {
                    displayName: "Line Alignment",
                    uid: "dataCard_dataDesign_lineAlignment_slice",
                    control: {
                        type: powerbi.visuals.FormattingComponent.AlignmentGroup,
                        properties: {
                            descriptor:
                            {
                                objectName: "dataCard",
                                propertyName: "lineAlignment"
                            },
                            mode: powerbi.visuals.AlignmentGroupMode.Horizonal,
                            value: "right"
                        }
                    }
                },
            ]
        };

        // Add formatting groups to data card
        dataCard.groups.push(group1_dataFont);
        dataCard.groups.push(group2_dataDesign);

        // Build and return formatting model with data card
        const formattingModel: powerbi.visuals.FormattingModel = { cards: [dataCard] };
        return formattingModel;
    }

นี่คือบานหน้าต่างผลลัพธ์:

สกรีนช็อตของบานหน้าต่างการจัดรูปแบบที่เป็นผลมาจากตัวอย่างการ์ดข้อมูล

รีเซ็ตการตั้งค่าเป็นค่าเริ่มต้น

บานหน้าต่างรูปแบบใหม่มีตัวเลือกในการตั้งค่าคุณสมบัติของการ์ดการจัดรูปแบบทั้งหมดเป็นค่าเริ่มต้นโดยคลิกที่ปุ่มรีเซ็ตเป็นค่าเริ่มต้น ที่ปรากฏในการ์ดเปิด

สกรีนช็อตของปุ่มรีเซ็ตการ์ดรูปแบบเป็นค่าเริ่มต้น

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

let dataCard: powerbi.visuals.FormattingCard = {
    displayName: "Data Card",
    // ... card parameters and groups list

    revertToDefaultDescriptors: [
        {
            objectName: "dataCard",
            propertyName:"displayUnitsProperty"
        },
        {
            objectName: "dataCard",
            propertyName: "fontFamily"
        },

        // ... the rest of properties descriptors 
    ]
};

การเพิ่ม revertToDefaultDescriptors การจัดรูปแบบการ์ดยังทําให้สามารถรีเซ็ตคุณสมบัติการ์ดการจัดรูปแบบทั้งหมดพร้อมกันได้โดยคลิกที่ รีเซ็ตการตั้งค่าทั้งหมดเป็นค่าเริ่มต้นปุ่ม ในแถบด้านบนของบานหน้าต่างรูปแบบ:

สกรีนช็อตของบานหน้าต่างรูปแบบ รีเซ็ตการตั้งค่าทั้งหมดเป็นปุ่มเริ่มต้น

ตัวเลือกคุณสมบัติการจัดรูปแบบ

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

แปล

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

displayName: this.localization.getDisplayName("Font_Color_DisplayNameKey");
description: this.localization.getDisplayName("Font_Color_DescriptionKey");

หากต้องการแปลยูทิลิตี้แบบจําลองการจัดรูปแบบให้เป็นภาษาท้องถิ่น ยูทิลิตี้การจัดรูปแบบยูทิลิตี้การแปลเป็นภาษาท้องถิ่น

ทรัพยากร GitHub

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

มีคําถามเพิ่มเติมหรือไม่ ถาม ชุมชน Power BI