getformattingmodel() implementation

[AakashMarasini]

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;
  };
}
  

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

Thank You!
#customvisual @dm-p @WZorn 

[AakashMarasini]

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 · Accepted solution]

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