Custom Theme - Add a Cover Page using JSON

[MJG2112]

Hi.  I'm using a custom theme I've created, which defines the colour palette, background, custom icons etc.

When I apply it to a new blank report, I’d like it to insert a cover page using a template I’ve created and converted to base64.

Can this be done in the JSON script?

[MJG2112]

@Hans-Georg_Puls 

Thanks again for replying. I understand better now the page/background distinction. So what I want is the canvas background to be the same on every page apart from the first one.  What I've been doing so far is apply my JSON theme to a blank report, which makes the canvas background on the empty page my dark theme with corporate logos and copyright banners etc.  I've then duplicated that page and replaced the background canvas with a different one that acts a cover page on which I add simple visual text boxes for the report name and a refresh timestamp. All other pages with the main visuals will use the canvas background loaded from JSON script. What I was hoping to do is have the JSON script do the manual page duplication and replace the canvas background with the cover one. If this isn’t possible then I guess I can simply do it manually as above and  create a report template.

[MJG2112]

@Hans-Georg_Puls Thanks for replying.  Let me explain a little better than I did.  This is a section from my script.

"visualStyles": {

        "*": {

            "*": {

                "background": [

                    {

                        "image": {

                            "name": "Dark",

                            "scaling": "Fit",

                            "url": "data:image/svg+xml;base64,PHN2ZyB3a==”

                                                },

                        "transparency": 0,

                        "color": {

                            "solid": {

                                "color": "#272936"

                            }

                        }

                    }

                ],

             }

        },

       "page": {

            "*": {

                "background": [

                    {

                        "color": {

                            "solid": {

                                "color": "#FFFFFF"

                            }

                        },

                        "transparency": 0

                    }

                ]

            }

        }

    }

The first "background" section takes an image with corporate logos etc and uses it as the canvas background on the blank page of a new report.  What I want to do in JSON is insert a page in front of that blank page (my cover page) with a different image.  I'm not sure what the "page" section in my script actually does 🤔

[Hans-Georg_Puls]

Hi @MJG2112 ,

your first background section is valid as a default for every visual (not only pages) with no specific background setting. If you want that background setting only for pages I would recommend to use the notation of the second background section. 

I'm not sure if I understand your requirements correctly:

• Do you want that different image only at the first page of a new report or on every page?
• Do you want that different image permanently on top of your background image or should it disapear by user interaction (e.g. a clicking on a close button)?

I will at least share some thoughts with you:

• It is not possible to place a Power BI page on top of another Power BI page!
• Is it an option to make one image from your canvas background and the cover page and use that as canvas background?
• You could define your cover page as a default background for every image visual in your theme file. Adding an image visual to your page would show the cover image on top of the canvas background. You could even create a template Power BI Project with such an image included.

Hope that helps a little bit.

[Hans-Georg_Puls]

Hi @MJG2112 ,

try the following:

• Add the following section to your theme json file "visualStyles" section:

        "page": {

            "*": {

                "background": [

                    {

                        "show": true,

                        "image": {

                            "name": "cover image",

                            "url": "data:image/gif;base64,R0lGODlhTwARANUAAMDK07/K0rK/ybzH0LbDzLG+yMLM1bPAybPAysDL1LnFzsLN1b7J0bC+yLbCy7XBy7TBy7K/yL3I0bC9yLvGz7fDzbrGz73J0brGzrzI0bjEzb/J0bfDzLXCy7LAybG/yLnEzrTAy7nGzrjDzbzG0LzI0LjEzrTAyrC9x7bDy6+9x7/J0sHL1MHM1MDL07/K08LM1MPN1QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAABPABEAAAb/QNhqgFFoCEiORoEZrGCxaGzRCgCEkIIFCmO9ErCFa0A4RA6IhwPp6EAQAkHIxOACXtCYK9UAwWBWeVJwEQJoIQ8PJwgHAoUIFRKCMC94LSMTHHmULyxQBi0bAwoVBA6nBBoYGXhRMC4vLnkrjQMLLAFgUi4WaxgSslJSMAASIgQRDQgDmy4BLTEKDQ4vrgkBX3/C28IwLbAv0FEDhnUAz7sayQjbBn9/BtsuFA8FEBJSLCssBuQIG8O8VHLBosW7gy0S3HkBoEW8GDAwTLtSKU8LBY4i/WEBrpJHjy4MxoMxIIsGFlFaMBSCYAIJQe4SLvxYCQBBbbsIqNDwZ2UU/wZZKqxwhY2gwYPeOL7ApqsFhgkQhkKs6IJDBAJSuyE9uGAbSUYUvK1IEK+fsgvuiD0RxG2Ytxcrgkk44GGAK1gGKTQCUa2tX1cXHBR4UAdvyhENCMhSGZftX2ELiOWi5KCBgigGvLBY8IJAAw8ESrh47GqFhXoCtnDK4wJCAxE9O7FNi2vFimfwuK2GUSETyhgtGsdgMALOgQcVRAy4wGAFAwkUFBA44UEABAsoV0e5cKBAiRgJYrHNAOLBgQ8F0qv/cKCDAgmehjkzaCFCVFeVHALPIP1NozhxoIGcBRtwAUt8C1BgXYEurCAOUQ0c4AAIFgwwQAYZWGiBCR0cMP9BAQRcIIgXsjAQxwWu4BJOMwEwcIEEGUhwwQrhDJMAjZsogAIBnlS0CwUhTCDcX69soICHHUiC3xUBPPCBBTZWAkZu20T2RwvnrBiFC4Ip8EcAweiBgQcTPEACRO+0wMKaLRyFUwsDhJBYAPhZUkEBFTzoTUc2rblmAi7MNKUUDCAQwQCZBbAZRAMggOcTetAkKUgGQaTXodbgpsAEHTDgVVIuBAqATQl4AsNDrlAQQQTmtAIRBwV0OkUXN4XBjZUsLBTMC655GYU+/FyAwAcKPEhaWxsIxoEsPsbQ5AReUrFUX8e6opJ4MIBQgAOjTSULABo0IAAGYVYLwwYcTIA9QFiUXBFFBh4ckMFU4nVVrTDu5LfAAB8gIJV2DBCQHgEUMACAqae+44wECgR5gAIu3DLWSBQ08AAesJQbBAA7",

                            "scaling": "Fit"

                        },

                        "transparency": 0

                    }                

                ]

            }

        }

• Replace the base64 (its just a demo pattern) with yours and change the image/gif to image/png or whatever your need
• Load the json as theme into your power bi report
• Could be necessary to do a "Reset to default" at Format->Canvas background

Does this work for you and meet your requirements? Then feel free to give me a kudo or even accept this post as a solution.