Skip to main content
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Try your skills in the Power BI Dataviz World Championship! Round one ends June 26. Join now

keaton

New Card Visual Power BI JSON issue

Submitted by Advocate I on ‎06-27-2023 09:55 AM

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

 

Screenshot 2023-06-27 105251.jpg

Status: Needs Info
See more ideas labeled with:
9 Comments (9 New)
Comments
SGoldsworthy
New Member
‎06-28-2023 06:40 AM

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.

SGoldsworthy_2-1687959444121.png

 

Anonymous
Not applicable
‎06-29-2023 10:13 PM

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
Advocate I
Advocate I
‎06-30-2023 07:48 AM

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

 

keaton_0-1688136092300.png

keaton_1-1688136129099.png

keaton_2-1688136144361.png

 

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

keaton_5-1688136402278.png

 

 

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)

keaton_4-1688136290526.png

 

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

I get a visual without half of the settings as expected

keaton_6-1688136468536.png

 

elimcd79
Advocate III
Advocate III
‎09-15-2023 01:23 PM

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

cpassuel
Frequent Visitor
‎12-13-2023 07:27 AM

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
New Member
‎06-12-2024 06:16 AM

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
New Member
‎08-23-2024 12:03 PM

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
New Member
‎01-08-2025 02:59 PM
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 🙂
jvchaveiro
Regular Visitor
‎06-18-2025 02:40 PM
@scott_hiltonen Thank u! I could solve my problem with your code.
Idea Statuses