New Card Visual Power BI JSON issue

[keaton]

Good day

There seems to be an issue with using JSON themes for the New Card visual for Version: 2.118.828.0 64-bit (June, 2023)

As an example, using 

"cardVisual": {
  "*": {
    "layout": [ {
      "alignment": "top"
    } ]
  }
}

gives an error. Using "left", "center", "right" will all import without an error message, but just make the visual top & left aligned for all three options.

I would have expected that this specific setting be the vertical alignment under the layout option with the options "top", "middle", "bottom" and have no impact on horizontal alignment.

Please see attached image with larger set of items with naming conventions taken from using the .pbip file.

The ones with a red line beside it seemingly have problems similar to the example above

If I am mistaken, please let me know

[SGoldsworthy]

Was going to raise an issue, but I think it's related to this one. I've been trying to update a theme file to include formats for the new card visual, but I'm finding that the format options don't seem to apply to the visual except for the properties under "commonCards" in the schema? So for example, this one seems to apply the settings highlighted in blue (so the card has no background or outline and has a title "TEST" in white text), but doesn't apply the settings highlighted in red, i.e. the label and value use the default colour rather than white and the value is still left aligned.

[Anonymous]

Hi @keaton 

What are the requirements you want to achieve and what should the final result look like? Can you describe to me in detail the steps you took?

Best Regards,

Community Support Team _ Ailsa Tao

[keaton]

Hi @Anonymous ,

Sure

Requirements:

- Using JSON theme

- Top and Left align

- No border

- No label

- No padding of any form

- No background

- Value font: Segoe UI, 8, Red

- Value show blank as empty space

- Value text wrap

See images for what this formatting looks like in the format tab

This is what I would expect the analagous JSON file to look like in the cardVisual section based on the .pbip naming conventions

This is the error message I get when I use that JSON file by going into View >> themes pane >> browse for themes >> selecting the file. (The error has an issue with alignment)

If I change the same section to use "left" instead of "top"

I get a visual without half of the settings as expected

[elimcd79]

Is there any update for this? I would like to update my json to include the new cardVisual but am having limited success.

[cpassuel]

I have also issues when trying to put the label below the value and to center or change horizontal aligment. The import is ok, it doesn't align anything. I have the august 2023 version.

	"cardVisual":{
		"*": {
				"background": [
					{
						"show": true,
						"color": {
							"solid": {
								"color": "#805BED"
							}
						},
						"transparency": 0
					}
				],
				"fillCustom": [ {
					"show": false
				}
				],
				"border": [
					{
						"show": true,
						"radius": 10,
						"color": {
							"solid": {
								"color": "#805BED"
							}
						}
					}
				],
				"value": [{ "horizontalAlignment":  "right" }],
				"label": [{
						"show": true,
					"position": "belowValue"
				}]
			}
		}

[Rossana]

I'm experiencing the same issues with aligning and setting the font size/font family using this json template. It seems that the only setting that can be applied is the background color and borders format, anything else. Anyone else with the same problem? 

This is the json I'm using to set the fonts:

{

    "name": "CardTemplate",

    "visualStyles": {

        "cardVisual": {

            "*": {

                "general": [

                    {

                        "responsive": true,

                        "keepLayerOrder": true

                    }

                ],

                "background": [

                    {

                        "show": false,

                        "color": {

                            "solid": {

                                "color": "#FFFFFF"

                            }

                        },

                        "transparency": 0

                    }

                ],

                "fillCustom": [

                    {

                        "show": false

                    }

                ],

                "border": [

                    {

                        "show": false,

                        "radius": 1,

                        "color": {

                            "solid": {

                                "color": "#FFFFFF"

                            }

                        }

                    }

                ],

                "value": [

                    {

                        "horizontalAlignment": "left",

                        "fontColor": {

                            "solid": {

                                "color": "#4D575D"

                            }

                        },

                        "bold": true,

                        "labelPrecision": 1,

                        "fontSize": 20,

                        "fontFamily": "Arial"

                    }

                ],

                "label": [

                    {

                        "show": true,

                        "position": "aboveValue"

                    }

                ]

            }

        }

    }

}

[scott_hiltonen]

I found the way to get the parameters to apply under Callout Values.  The key is that you need to include an "$id".  Without that, the template does not know where to apply the values.
So this works:

"value": [{

"$id": "default",

"show": true,

"fontFamily": "Roboto",

"fontColor":{"solid": {"color": "#FFFFFF"}},

"fontSize": 10,

"textWrap": true,

"showBlankAs": "-",

"bold": true,

"italic": true,

"underline": true,

"horizontalAlignment": "center",

"transparency": 20

}],

"label": [{

"$id": "default",

"show": true,

"heading": "Heading4",

"position": "belowValue",

"horizontalAlignment": "center",

"fontSize": 10,

"bold": true,

"fontFamily": "Bebas",

"fontColor":{"solid": {"color":"#FFFFFF"}}

}],

[GeoPowerBI]

Hi, I found what you need to do. You just need too add: "$id":"default" for some properties. As exemple: "cardVisual": { "*": { "value": [ { "fontSize": 12, "fontColor":{ "solid": { "color": "#000000" }}, "$id": "default" }] }} Hope it will help you to customize your theme 🙂