getformattingmodel() implementation

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