Forum Discussion

tjd's avatar
tjd
Impactful Individual
7 years ago

Custom Theme for new Filter Pane

Anyone know the JSON code for setting the new Filter Pane background and border?
Need Help
Anonymous's avatar
Anonymous
Not applicable
7 years ago

Hi tjd ,

 

This has now been provided by Microsoft. See: https://docs.microsoft.com/en-us/power-bi/power-bi-report-filter-preview#theming-for-filter-pane

 

It is not in a nice format, but I changed it and pushed it to this Github repo: https://github.com/deldersveld/PowerBI-ThemeTemplates (hope it will be merged soon)

 

BTW, the above repo has been indispensable for me in creating custom themes.

 

Kind regards,
Rian

 

Please mark my post as a solution if it solves your problem.

  • ajsteers's avatar
    ajsteers
    Frequent Visitor
    6 years ago

    (UPDATE: I worked throught the below issues. See my latest post for full solution and sample code.)

     

    Anonymous - Thanks very much for your post but there are some problems in both links unfortunately and (although there seems to be a solution somewhere in the MS link), I was unable to implement this after several failed attempts. 

     

    1) For the link to MS doc page, there is no instruction on which level that JSON snippet should be inserted - I tried at the root level of the JSON doc and I also tried under visualStyles and visualStyles.* - both with no success. Can you help out with either full sample code, or else additional guidance on how to implement that snippet. (Referring to the block of code containing references to "outspacePane" and "filterCard".)

     
    2) The repo you sent is super helpful but does not contain any obvious references to filter pane formatting. I searched the repo for the text "outspacePane" and "filterCard" with no luck. Also - there are no open PRs or unmerged branches, as far as I can tell.
     
    Additional assist would be much appreciated.
     
    Thanks!
    • ajsteers's avatar
      ajsteers
      Frequent Visitor
      6 years ago

      Posting here working code for other's references.

       

       

      {
  "name": "Filter Pane Theme Sample",
  "visualStyles": {
    "page": {
      "*": {
        "outspacePane": [
          {
            "backgroundColor": { "solid": { "color": "#0000ff" } },
            "foregroundColor": { "solid": { "color": "#00ff00" } },
            "transparency": 50,
            "titleSize": 35,
            "headerSize": 8,
            "fontFamily": "Georgia",
            "border": true,
            "borderColor": { "solid": { "color": "#ff0000" } }
          }
        ],
        "filterCard": [
          {
            "$id": "Applied",
            "transparency": 0,
            "backgroundColor": { "solid": { "color": "#ff0000" } },
            "foregroundColor": { "solid": { "color": "#45f442" } },
            "textSize": 30,
            "fontFamily": "Arial",
            "border": true,
            "borderColor": { "solid": { "color": "#ffffff" } },
            "inputBoxColor": { "solid": { "color": "#C8C8C8" } }
          },
          {
            "$id": "Available",
            "transparency": 40,
            "backgroundColor": { "solid": { "color": "#00ff00" } },
            "foregroundColor": { "solid": { "color": "#ffffff" } },
            "textSize": 10,
            "fontFamily": "Times New Roman",
            "border": true,
            "borderColor": { "solid": { "color": "#123456" } },
            "inputBoxColor": { "solid": { "color": "#777777" } }
          }
        ]
      }
    }
  }
}

      Kudos and thanks to Anonymous for the initial link that led to this solution.