Reply
AakashMarasini
Frequent Visitor

getformattingmodel() implementation

Hi Developers!

I am new at power bi custom visual development. I am trying to add formatting pane for x axis label. FrontEnd/UI part is displayed correctly in power bi. I am facing difficulties in binding the data to it.
code for getformattingModel() in visual.ts file

 

public getFormattingModel(): powerbi.visuals.FormattingModel {
  let dataCard: powerbi.visuals.FormattingCard = {
    description: "Data Card Description",
    displayName: "Axis Formatting",
    uid: "dataCard_uid",
    groups: [],
  };

  function createAxisFormattingGroup(displayName: string, uid: string): powerbi.visuals.FormattingGroup {
    return {
      displayName: displayName,
      uid: uid,
      slices: [
        {
          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: 20,
              },
              bold: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontBold",
                },
                value: false,
              },
              italic: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontItalic",
                },
                value: false,
              },
              underline: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontUnderline",
                },
                value: false,
              },
            },
          },
        },
        {
          displayName: "Font Color",
          uid: "dataCard_dataDesign_fontColor_slice",
          control: {
            type: powerbi.visuals.FormattingComponent.ColorPicker,
            properties: {
              descriptor: {
                objectName: "dataCard",
                propertyName: "fontColor",
              },
              value: { value: "#01B8AA" },
            },
          },
        },
      ],
    };
  }

  const xAxisFormattingGroup = createAxisFormattingGroup("X-Axis---", "x-AxisFormatting_uid");

  dataCard.groups.push(xAxisFormattingGroup);

  const formattingModel: powerbi.visuals.FormattingModel = { cards: [dataCard] };
  return formattingModel;
}

 

 

 

 
objects in capabilities.json file for formatting pane:

 

 

 "objects":{

    "dataCard": {

      "properties": {

        "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

              }

            }

          }

        }

      }

    },

    "xAxisFormatting": {

      "displayName": "X-Axis Formatting",

      "properties": {

        "fontFamily": {

          "displayName": "Font Family",

          "type": { "text": true }

        },

        "fontSize": {

          "displayName": "Font Size",

          "type": { "numeric": true }

        },

        "fontColor": {

          "displayName": "Font Color",

          "type": { "fill": { "solid": { "color": true } } }

        }

      }

    }

  }

 


my xAxis label is in visual.ts file is : 

 

const xAxisLabels = this.xAxisGroup
  .attr('transform', 'translate(0,' + chartHeight + ')')
  .call(axisBottom(xScale).ticks(5))
  .selectAll('text')
setting.ts file:

 

 

setting.ts:

 

export class VisualFormattingSettingsModel extends FormattingSettingsModel {

  xAxisLabelFormatting: {
    fontFamily: any;
    fontSize: any;
    fontColor: any;
  };
}
  

 

 

AakashMarasini_0-1694490396098.png

 




Please help me in the implemetation of formatting pane for x axis label.

Thank You!
#customvisual @dm-p @WZorn 

1 ACCEPTED SOLUTION
dm-p
Super User
Super User

Hi @AakashMarasini,

 

I've done limited work with the formatting model, but my understanding is that you would need to pass your current visual settings into your createAxisFormattingGroup function so that you can sub them in to where you are currently hard-coding them.

 

If your settings are available at the class level (and assuming they are scoped as this.settings), you could probably get away with the following:

  function createAxisFormattingGroup(displayName: string, uid: string): powerbi.visuals.FormattingGroup {
    return {
      displayName: displayName,
      uid: uid,
      slices: [
        {
          uid: "data_font_control_slice_uid",
          displayName: "Font",
          control: {
            type: powerbi.visuals.FormattingComponent.FontControl,
            properties: {
              fontFamily: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontFamily",
                },
                value: this.settings.dataCard.fontFamily,
              },
              fontSize: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontSize",
                },
                value: 20,
              },
              bold: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontBold",
                },
                value: this.settings.dataCard.fontBold,
              },
              italic: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontItalic",
                },
                value: this.settings.dataCard.fontItalic,
              },
              underline: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontUnderline",
                },
                value: this.settings.dataCard.fontUnderline,
              },
            },
          },
        },
        {
          displayName: "Font Color",
          uid: "dataCard_dataDesign_fontColor_slice",
          control: {
            type: powerbi.visuals.FormattingComponent.ColorPicker,
            properties: {
              descriptor: {
                objectName: "dataCard",
                propertyName: "fontColor",
              },
              value: { value: this.settings.dataCard.fontColor },
            },
          },
        },
      ],
    };
  }

In terms of making the function more portable, you might want to make the desired settings object a property of the function, so that you can refactor more easily, but the above implementation would probably work.

 

I'm not sure if it helps, but I have an implementation I'm working on that you might be able to crib from. It's not in my master branch as this release is still undergoing testing, but you should be able to see the source code as of this commit. Key parts for reference would be:

  • My getFormattingModel function - you'll notice that I have declared a getFormattingCard method in each settings class that I use instead, as this allows me direct access to the settings values in that class.
  • An example of a getFormattingCard method - I've chosen a class with a single property, as I have my own methods that I use to generate controls and a settings class with more properties might obfuscate things too much (but hopefully you can see that due to how it's scoped, it's easy to access the settings value from that class where I need it).

This is probably the limit of my current knowledge with the formatting cards, but hopefully some of it may help. Good luck!

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

2 REPLIES 2
AakashMarasini
Frequent Visitor

Thank you @dm-p  for your quick response. While I used this.setting, it didn't work. So I have used  

getFormattingModel() for formatting and it and finally worked.
Thanks Again!
dm-p
Super User
Super User

Hi @AakashMarasini,

 

I've done limited work with the formatting model, but my understanding is that you would need to pass your current visual settings into your createAxisFormattingGroup function so that you can sub them in to where you are currently hard-coding them.

 

If your settings are available at the class level (and assuming they are scoped as this.settings), you could probably get away with the following:

  function createAxisFormattingGroup(displayName: string, uid: string): powerbi.visuals.FormattingGroup {
    return {
      displayName: displayName,
      uid: uid,
      slices: [
        {
          uid: "data_font_control_slice_uid",
          displayName: "Font",
          control: {
            type: powerbi.visuals.FormattingComponent.FontControl,
            properties: {
              fontFamily: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontFamily",
                },
                value: this.settings.dataCard.fontFamily,
              },
              fontSize: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontSize",
                },
                value: 20,
              },
              bold: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontBold",
                },
                value: this.settings.dataCard.fontBold,
              },
              italic: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontItalic",
                },
                value: this.settings.dataCard.fontItalic,
              },
              underline: {
                descriptor: {
                  objectName: "dataCard",
                  propertyName: "fontUnderline",
                },
                value: this.settings.dataCard.fontUnderline,
              },
            },
          },
        },
        {
          displayName: "Font Color",
          uid: "dataCard_dataDesign_fontColor_slice",
          control: {
            type: powerbi.visuals.FormattingComponent.ColorPicker,
            properties: {
              descriptor: {
                objectName: "dataCard",
                propertyName: "fontColor",
              },
              value: { value: this.settings.dataCard.fontColor },
            },
          },
        },
      ],
    };
  }

In terms of making the function more portable, you might want to make the desired settings object a property of the function, so that you can refactor more easily, but the above implementation would probably work.

 

I'm not sure if it helps, but I have an implementation I'm working on that you might be able to crib from. It's not in my master branch as this release is still undergoing testing, but you should be able to see the source code as of this commit. Key parts for reference would be:

  • My getFormattingModel function - you'll notice that I have declared a getFormattingCard method in each settings class that I use instead, as this allows me direct access to the settings values in that class.
  • An example of a getFormattingCard method - I've chosen a class with a single property, as I have my own methods that I use to generate controls and a settings class with more properties might obfuscate things too much (but hopefully you can see that due to how it's scoped, it's easy to access the settings value from that class where I need it).

This is probably the limit of my current knowledge with the formatting cards, but hopefully some of it may help. Good luck!

 

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




avatar user

Helpful resources

Announcements
Join our Fabric User Panel

Join our Fabric User Panel

This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.

June 2025 Power BI Update Carousel

Power BI Monthly Update - June 2025

Check out the June 2025 Power BI update to learn about new features.

June 2025 community update carousel

Fabric Community Update - June 2025

Find out what's new and trending in the Fabric community.

Top Solution Authors (Last Month)
Top Kudoed Authors (Last Month)