cardVisual -> Layout -> alignment should be verticalAlignment

[TobiKrueger]

Problem Description

For the Card(new) Visual PowerBI offers the option to specify a Vertical Alignment under "Format your Visual" -> "Visual" -> "Layout". The Options here are Top, Middle and Bottom.

However, in the reportThemeSchema-2.118.json the alignment property is defined as a regular alignment which is defined with the options Left, Center and Right.

Minimal Example to recreate the Problem

When i create a JSON Theme with the following JSON code, it can be loaded into Power BI but has no effect on the visual Card(new) -> Layout -> Vertical Alignment:

{
  "name": "Minimal Example",
  "visualStyles": {
    "cardVisual": {
      "*": {
        "layout": [
          {
            "alignment": "right",
            "orientation": 1,
            "cellPadding": 5
          }
        ]
      }
    }
  }
}

When i change "alignment": "right" to "alignment": "bottom" i can not load the Theme.

Suggestion on how to resolve the Problem

When i change the Vertical Alignment in Power BI under "Format your Visual" -> "Visual" -> "Layout" to "bottom" and save the file. It gets saved as "alignment":{"expr":{"Literal":{"Value":"'bottom'"}}} in the pbix file.

I belive replacing "$ref":"#/definitions/alignment" with "$ref":"#/definitions/verticalAlignment" for the "alignment" property would resolve this issue

Search for the following string to find the relevant spot in the json file:
"layout":{"type":"array","items":{"type":"object","properties":{"alignment":{"$ref":"#/definitions/alignment","title":"Alignment"}

[OscarValerock]

You might want to tag @yelper

There are some other issues with the new cardVisual, as an example, none of these properties defined in the latest schema modify the visual when the theme is applied.

I understand the card in in preview, and my guess is that this issues will be solved before hitting general availability.

"cardVisual": {
			"*": {
				"accentBar": [
					{
						"width": 0
					}
				],
				"label": [
					{
						"show": false,
						"position": "belowValue"
					}
				],
				"value": [
					{
						"fontSize": 20,
						"labelDisplayUnits": 1
					}
				]
			}
		}

[TobiKrueger]

I think what you are trying to achieve can be done using the following minimal Theme

{
    "name": "Test",
    "visualStyles": {
        "cardVisual": {
            "*": {
                "accentBar": [
                    {
                        "$id": "default",
                        "width": 0
                    }
                ],
                "label": [
                    {
                        "$id": "default",
                        "show": false,
                        "position": "belowValue"
                    }
                ],
                "value": [
                    {
                        "$id": "default",
                        "fontSize": 20,
                        "labelDisplayUnits": 1
                    }
                ]
            }
        }
    }
}

I don't really understand why you would need the "$id": "default", since it isn't mentioned in the Schema or anywhere else, but at least this works for me.

I have used the themes.pbix Theme Generator by point to create that Theme.

But the original Point of this Issue still stands, and I hope my original description of the Issue can help you @yelper fix this when the new CardVisual is fully released.

[yelper]

This is surprisingly annoying to fix as there's a lot of organic code that decides whether an alignment is vertical or horizontal. I'll need to make "big" change cross core visuals to solve this; I'm aiming for the October release.

Thanks for the report!