Forum Discussion

CountMcCracker's avatar
CountMcCracker
Frequent Visitor
1 year ago
Solved

Advanced Slicer Visual Theme Issue

Hello, 

 

I’m working on standardizing Power BI themes across the organization and recently explored the Advanced Slicer Visual schema on GitHub. However, I’m encountering an issue with changing the default shape from a rectangle to a rounded rectangle. According to the schema, the configuration seems correct, but when I upload the theme, the slicer doesn't update as expected. I’m using the new tile slicer in Power BI, and here’s the snippet from the schema I’m working with:

 

"advancedSlicerVisual": {
      "*": {
             "shapeCustomRectangle": [
            {
               "tileShape": "rectangleRoundedCurve",
              "rectangleRoundedCurve": 16
             }
          ]
      }
}

Need Help
  • OwenAuger's avatar
    OwenAuger
    1 year ago

    Hi CountMcCracker 

    I happened to be reading another thread here recently, and it looks like a similar issue.

    It appears that this property needs to be included

     

    "$id": "default"

     

    which specifies that the rounded corners apply by "default" for all states.

     

    Also, I believe it should be:

     

    "tileShape": "rectangleRounded"

     

     

    The full JSON snippet would be:

     

    "advancedSlicerVisual": {
  "*": {
	"shapeCustomRectangle": [
	  {
		"$id": "default",
		"tileShape": "rectangleRounded",
		"rectangleRoundedCurve": 16
	  }
	]
  }
}

     

     

    Does this work for you? Let me know if I've misunderstood something.

     

    I haven't completely trawled through the Report Theme JSON Schema to justify this yet but it appears to work.

5 Replies

  • OwenAuger's avatar
    OwenAuger
    Super User
    1 year ago

    Hi CountMcCracker 

    I happened to be reading another thread here recently, and it looks like a similar issue.

    It appears that this property needs to be included

     

    "$id": "default"

     

    which specifies that the rounded corners apply by "default" for all states.

     

    Also, I believe it should be:

     

    "tileShape": "rectangleRounded"

     

     

    The full JSON snippet would be:

     

    "advancedSlicerVisual": {
  "*": {
	"shapeCustomRectangle": [
	  {
		"$id": "default",
		"tileShape": "rectangleRounded",
		"rectangleRoundedCurve": 16
	  }
	]
  }
}

     

     

    Does this work for you? Let me know if I've misunderstood something.

     

    I haven't completely trawled through the Report Theme JSON Schema to justify this yet but it appears to work.

  • Anonymous's avatar
    Anonymous
    Not applicable
    1 year ago

    Hi, CountMcCracker 

    Have you solved your problem? If so, can you share your solution here and mark the correct answer as a standard answer to help other members find it faster? Thank you very much for your kind cooperation!

     

    Best Regards

    Yongkang Hua

  • gaurav2141's avatar
    gaurav2141
    New Member
    1 year ago

    Hey , I am facing the issue in AdvanceSlicerVisual 
    While we select on the button I want the background should be #FEB9AC and font color #000000 but currently it is catching the default font color i.e white which should be Black even while selection. I have used black font hex in my code still I am facing the issue please find the below code and

    let me know what can be done also

    please suggest how can I change the border of the tile color as well. 


    CODE:

     "value": [
              {
                "$id": "default",
                "fontSize": 9,
                "fontFamily": "Arial",
                "fontColor": {
                  "solid": {
                    "color": "#000000"  
                  }
                }
               
              },
              {
                "$id": "selected",
                "fontSize": 9,
                "fontColor": {
                  "solid": {
                    "color": "#000000"  
                  }
                }
             
              }
            ]
          ,
    "fillCustom": [
              {
                "$id": "hover",
                "fillColor": {
                  "solid": {
                    "color": "#F3F2F1"
                  }
                }
              },
              {
                "$id": "selected",
                "fillColor": {
                  "solid": {
                    "color": "#FEB9AC"
                  }
                },
                "transparency": 0
              },
              {
                "show": true
              }
            ],
    "border": [
              {
                "color": {
                  "solid": {
                    "color": "#E6E6E6"
                  }
                },
                "show": false,
                "radius": 6
              }
            ]
  • LovelyGoat's avatar
    LovelyGoat
    New Member
    6 months ago

    To be complete. The visual has currently (feb-2026) to RoundedRectangle shapes:

    "tileShape": "rectangleRoundedByPixel" > rounded in XY pixels
    "tileShape": "rectangleRounded"  > rounded in %

    example code:
    "advancedSlicerVisual": {
			"*": {
				"value": [
					{
						"$id": "default",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"$id": "selection:selected",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"$id": "interaction:hover",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"$id": "interaction:press",
						"textWrap": true,
						"fontColor": {
							"solid": {
								"color": "#ffffff"
							}
						}
					},
					{
						"show": true
					}
				],
				"outline": [
					{
						"$id": "default",
						"lineColor": {
							"solid": {
								"color": "#FFFFFF"
							}
						},
						"transparency": 30
					},
					{
						"show": false
					}
				],
				"fillCustom": [
					{
						"$id": "default",
						"fillColor": {
							"solid": {
								"color": "#9BC0A1"
							}
						}
					},
					{
						"$id": "selection:selected",
						"fillColor": {
							"solid": {
								"color": "#E79D16"
							}
						}
					},
					{
						"$id": "interaction:hover",
						"fillColor": {
							"solid": {
								"color": "#9BC0A1"
							}
						}
					},
					{
						"$id": "interaction:press",
						"fillColor": {
							"solid": {
								"color": "#9BC0A1"
							}
						}
					},
					{
						"show": true
					}
				],
				"background": [
					{
						"show": true,
						"color": {
							"solid": {
								"color": "#FFFFFF"
							}
						}
					}
				],
				"visualTooltip": [
					{
						"show": false
					}
				],
				"shapeCustomRectangle": [
					{
						"$id": "default",
						"tileShape": "rectangleRoundedByPixel",
						"rectangleRoundedCurve": 10
					}
				],
				"subTitle": [
					{
						"show": false
					}
				],
				"Title": [
					{
						"show": false
					}
				]
			}
		}